Frente:
Efeito de realização:
layout geral:
Código de layout:
<!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>
Redefinir estilo css
Como o rótulo virá com alguns atributos de que não precisamos, precisamos redefini-lo para o que queremos e podemos escrever alguns estilos para serem usados primeiro e adicionar diretamente o seletor relevante quando for usado. lata.
*{
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;
}