Front:
Realization effect:
overall layout:
Layout code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝网 - 淘！我喜欢</title>
<link href="./css/reset.css" rel="sylesheet">
</head>
<body>
<!-- 头部信息 -->
<div id="headMessage"></div>
<!-- 头部广告 -->
<div id="headAd"></div>
<!-- 头部搜索 -->
<div id="headSearch"></div>
<!-- 导航栏 -->
<div id="nav"></div>
<!-- 首屏内容 -->
<div id="content"></div>
<!-- 有好货&爱逛街 -->
<div id="layer"></div>
<!-- 右侧导航 -->
<div id="tools"></div>
</body>
</html>
Reset css style
Because the label will come with some attributes that we don’t need, we need to reset it to what we want, and we can write some styles to be used first, and directly add the relevant selector when it is used. can.
*{
margin:0;
padding:0;
}
/* 去除前面的黑圆点 */
ul{
list-style: none;
}
img{
border:none;
/* 设置元素对齐的方式,middle表示垂直居中对齐 */
vertical-align: middle;
}
a{
/* 去除下划线 */
text-decoration: none;
/* 字体都有相同的灰色，这里直接统一设置 */
color: #3c3c3c;
}
i{
/* 斜体转为正常样式 */
font-style: normal;
}
button{
/* 消除蓝色边框 */
outline: none;
}
body{
/*
1.5为行高，字体默认像素为16px，所以1.5为16px * 1.5=24个像素，
每个字体行高不一样，所以要统一
由于样式继承原则，若body下面子标签没有写行高，那么就使用字标签大小*行高
*/
/* '\5b8b\4f53'为宋体的Unicode编码，宋体英文名叫SimSun */
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;
}
.layer{
width: 1190px;
/* 让元素居中 ，上下距离为0，左右为auto时平分两侧距离*/
margin: 0 auto;
}
.c4{
color: #f40;
}
.c5{
color: #f50;
}
.c6{
color: #8d7afb;
}
.c7{
color: #a8c001;
}
.mr7{
margin-right: 7px;
}
.mr5{
margin-right: 5px;
}
.mt10{
margin-top: 10px;
}
.mr10{
margin-right: 10px;
}