Apeller

导航

淘宝项目实战-基本结构与样式2

body {font:12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif}

 

 

 ;字体大小行高,font-family

    1.5行高和'\5b8b\4f53'

    行高:

      line-heigh:nomal;

    2个因素,浏览器和字体,字体不同默认行高是不一样的,比如说微软雅黑默认值为1.32,宋体大概值在1.41

    因为行高有因素的不确定性,所以要重置行高

      line-heigh:数字     相对单位--  拿自己的值跟font-size相乘

      line-heigh:xx%     相对单位--  拿自己的值跟font-size相乘

      line-heigh:xxpx;    px是固定的值

      line-heigh:xxem;  相对单位--   拿自己的值跟font-size相乘

  

 

 

  

 

 

 

 

 

  1em=字体的高度;想要等高用line-heigh:em单位即可;

  

 

 

 

 行高为什么要设置成1.5是因为在标签继承的时候它会对应的计算,

 

 

 

 

,'\5b8b\4f53'  unicode编码转成字符串对应为宋体用于前后端对接中文乱码问题,转换不会重现问题

 

 

 


 

   层级结构:

    

 

 

 

   reset样式重置,html标签出生时带的初始样式


1.psd首先从左到右从上到下,从色块划分大致结构 (内容/色块/间距/边框)

 

 

这里大致分5div,/1个顶栏(头部)/1个搜索栏/1个nav导航栏/1个主体/1个边栏


 

id和class

  1.独立层,外层id

  2.与js交互用id


 

 

 


 

 

 

 

 vertical,decoration


 

 

 

 

 

 

 

 

 

 

 

 

 


 

当css样式初始化和预定义化完后,开始样式模块化引入:

1.种方案  

 

 

 2.种模块化

    :@规则

 

 

    @charset 设置字符集'';

    @import导入其它的样式文件 '';

    @media媒体查询-多应用于手机端
    @font-face自定义字体-若用户手机端没有想要的字体可以自动下载想要的字体

 

posted on 2019-10-08 20:44  Apeller  阅读(288)  评论(0)    收藏  举报