学习笔记

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习笔记相关的知识,希望对你有一定的参考价值。

一、网页制作流程:  

  1.   制作效果图
  2.   结构图  切图(边切图,边写代码)
  3.   代码准备
  4.   边写代码,边测试(兼容性)
  5.   线上测试

  ps:建议一边切图,一边写代码,一边测试兼容性。

 

二、从代码的稳定性角度,去考虑布局,则选择的先后顺序,如下:

  1.   优先标准流——其次浮动流——最后定位流。
  2.    优先盒子本身的宽高——其次padding——最后margin。

 

三、字体、字号和行高的设置:

  很多浏览器默认字体大小为16px,比如:火狐,谷歌。

  字体颜色比较少用纯黑色,新浪+搜狐用的是#333,淘宝用的是#3c3c3c。

 

  建议:

     按照页面字体最多的字号去设置。颜色同理。

     让行高比字体大6-7像素。约合1.5em,150%。

  

四、img{border:0; display:block;} /*清除图片底侧空隙*/

  很多浏览器(火狐+IE6)中的bug,若盒子宽高都100像素,图片宽高也都为100像素,但图片底下就是有一行白色的空隙,这时候就要在img标签加上display:block;

 

五、tips:

  1.  h标签:

    给h标签加{font-size:100%;},则h标签在网页里显示的字体的大小和body设置的一样,但是H标签的仍是加粗。

   2.  网页版心(主体部分)的宽度

    根据实际需求。但960px是合适的。因为960能给3,4,5,6,8,10,12,15整除。

  3.  盒子的实体化:

    给盒子宽+高+背景颜色,调节好后,再根据需要换掉背景。

  4.  设置padding属性,会改变盒子大小,so:

    要么给盒子减去/增加相应的值,要么添加box-sizing属性。

 

六、logo的优化六步曲: 

  1.  logo的图片尽量要小。

  2.  一般情况下是作为背景放入的。

  3.  肯定加H1标签,目的:提权。

  4.  搜索引擎对文本链接最友好。加<a href=”#”></a> /*链接的网址是本公司的网址*/  

  5.  给a添加title属性  提高用户体验。

  6.  把<a></a>之间的字,给隐藏掉。

    隐藏方法1:

        用text-indent:-999em;值是负数就不会跳到下一行,具体数值没规定,但要大一些,确保不在屏幕上出现。

        把a的显示形式改为块状,同时设置其高度height和logo的高度一致。宽度会继承,不用设置。

                      .logo a{display:block; height:**px;}

    隐藏方法2:             

          用处理overflow里的hidden,让title里的字体隐藏起来。

          Width:(设置和logo的宽度一致)

                         Height:0;

           Padding-top:(设置的值和logo的高度一致)

         Background:url(路径)no-repeat

           Overflow:hidden;

    PS:二级域名,其他页面的logo不要和首页的Logo取相同的名称。

      子元素会继承父元素的宽度,但是不会继承父元素的高度。请根据实际情况去设置。

 

七、选择器的权重(从左到右,权重从小到大):

  标签选择器——类——ID——行内样式——!important

  若后面设置的样式的权重比前面的小,则样式不起作用。

  对策:提权

 

八、初始化总结概括为:

  1.  块元素:去默认的margin+padding+border值。

  2.  Body设置:字号,行高,字体类型,字体颜色

  3.  Img去底侧空隙:边框border为0,清除图片的边框和底侧空隙display:block;

  4.  去掉列表样式。Ol,ul{ list-style:none; }

  5.  超链接a设置。a{ text-decoration:;},link+visited+hover+active四种状态的设置。

  6.  h标签:font-syle:nomal; font-size:100%;

  7.  清除浮动。

    Clearfix:after{

      Content:””;

      Display:block;

                 Height:0;

      Visibility:hidden;

      Clear:both;

    }

    .clearfix{ zoom:1;}

 

 

 

 

以上是关于学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

系列文章--Node.js学习笔记系列

Windows编程课程学习笔记

Windows编程课程学习笔记

2022年Spark基础学习笔记

SpringBoot学习笔记——Thymeleaf

学习笔记-第五周-学习笔记