淘宝主页(静态页面)第1天

创建大框

<body>
    <!--头部信息-->
    <div id="headMessage">

    </div>

    <!--头部广告-->
    <div id="headAd">

    </div>

    <!--头部搜索-->
    <div id="headSearch">

    </div>

    <!--首屏内容-->
    <div id="firstScreen">

    </div>

    <!--有好货与爱逛街-->
    <div id="layer">

    </div>

    <!--右侧固定定位导航-->
    <div id="tool">

    </div>

</body>

关于行高的知识

1.行高的属性值

 h3{
       line-height:normal;/*默认值,与字体大小和浏览器有关，微软雅黑1.32，宋体1.41*/ 
　　　　line-height:1.5;/*font-size的1.5倍*/ 
　　　　line-height:200%;/*font-size的2倍*/ 
　　　　line-height:50px;/*固定值*/ 
　　　　line-height:5em;/*1em = 1 font-size,相当于字体大小的5倍*/ 
　　}
<h3>刘德华</h3>

2.行高设置不同值有什么区别？

line-height值设置成1.5时，子元素的行高也会继承1.5，子元素的行高也是字体大小乘以1.5。但是如果父元素的line-height值设置成了其他值，子元素的行高是父元素的计算之后的行高。

 

自定义样式表

body,p,h1,h2,h3,h4{
    margin:0;/*外边距设置为0*/
}
ul{
    margin:0;
    padding:0;
    list-style:none;
}
img{
    border:none;
    vertical-align: middle;/*在div标签中插入一张图片之后，保证图片与文字之间没有间隙*/
}
a{
    text-decoration: none;/*去掉下划线*/
    color:#3c3c3c;
}
i{
    font-style:normal;
}
input,button{
    margin:0;
    padding:0;
}
button{
    outline:none;/*鼠标移动到按钮上，按钮颜色会加重，不需要*/
}
/*给body添加字体大小*/
body{
    /*为什么在这里行高要用数字，如果使用数字为行高，子元素也会继承1.5，如果使用其他的表示方式，子元素行高的大小是父元素的行高*/
    font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
    color:#3c3c3c;
    background-color:#f4f4f4;
}

.clearfix:after{
    content:'';
    display:block;
    clear:both;
}

.fl{
    float:left;
}
.fr{
    float:right;
}
.leayer{
    width:1190px;
    margin:0 auto;
}
.c4{
    color:#f40;
}
.c5{
    color:#f50;
}
.mt10{
    margin-top:10px;
}
.mr10{
    margin-right:10px;
}

将reset.css引入进来

CSS中的@规则

 

posted @ 2020-07-25 08:38  军临天下jyj  阅读(191)  评论(0)  编辑  收藏  举报