制作网页时,构建页面布局图很重要。布局前的结构划分避免造成混乱。
下面的代码只有DIV+CSS的网页结构布局。没有将最终的淘宝静态页面的代码放上去,只有布局图和最终页面的比较图。
搭建的布局图与最终效果的一个比较:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<!-- 导航条 -->
<div class="top-nav-wrap">
<div class="top-nav">
<div>导航条</div>
<div>广告图</div>
</div>
</div>
<!-- 搜索部分 -->
<div class="search-wrap">
<div class="search">
<div>搜素部分</div>
</div>
</div>
<!-- 主体部分 -->
<div class="mian-wrap">
<!-- 主体导航条部分 -->
<div class="mian-nav">
<div>主体导航条部分</div>
</div>
<!-- 主体部分 -->
<div class="mian-box">
<!-- 先两栏布局 -->
<div class="mian">
<div class="mian-inner">
<div class="inner-lf">
<div>主体分类栏</div>
</div>
<div class="inner-cer">
<div>主体轮播图</div>
</div>
<div class="inner-rt">
<div>主体右侧展示</div>
</div>
</div>
<div class="mian-bottom">
<div>主体底部信息</div>
</div>
</div>
<div class="box-rt">
<div class="member">
<div>登录注册部分</div>
</div>
<div class="massage">
<div>信息部分</div>
</div>
<div class="notice">
<div>公告</div>
</div>
<div class="mobule">
<div>图标</div>
</div>
<div class="app">
<div>apps</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
*{
margin: 0;
padding: 0;
}
div{
color: #fff;
font-size: 16px;
}
html,body{
width:100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
/* 导航条部分 */
.wrapper .top-nav-wrap
{
width: 100%;
height: 105px;
}
.wrapper .top-nav {
width: 1190px;
height: 105px;
margin: 0 auto;
background-color: green;
border: 1px solid #000;
}
/* 搜索部分 */
.wrapper .search-wrap{
width:100%;
height: 97px;
}
.wrapper .search{
width: 1190px;
height: 97px;
background-color: #ff5500;
margin: 0 auto;
border: 1px solid #000;
}
/* 主体部分 */
.wrapper .mian-wrap{
width: 1190px;
height: 663px;
margin: 0 auto;
border: 1px solid #000;
}
.wrapper .mian-wrap .mian-nav{
width: 100%;
height: 30px;
background-color:green;
}
.wrapper .mian-wrap .mian-box .mian{
width: 890px;
height: 632px;
float: left;
}
.mian-wrap .mian-box .mian .mian-inner{
width: 890px;
height: 522px;
background-color: pink;
}
.mian-wrap .mian-box .mian .mian-inner .inner-lf{
width: 190px;
height: 100%;
float: left;
background-color: #ff5500;
}
.mian-wrap .mian-box .mian .mian-inner .inner-cer{
width: 520px;
height: 100%;
float: left;
border:1px solid #000;
}
.mian-wrap .mian .mian-inner .inner-rt {
padding: 0 8px;
width: 160px;
height: 100%;
float: left;
background-color: yellow;
}
.mian-wrap .mian .mian-bottom{
width: 890px;
height: 110px;
background-color:purple;
}
.wrapper .mian-box .box-rt{
width: 290px;
height: 632px;
float: left;
margin-left: 8px;
background-color: blue;
}
.wrapper .mian-box .box-rt .member{
width: 290px;
height: 132px;
background-color:#ff5500;
}
.wrapper .mian-box .box-rt .massage{
width: 290px;
height: 26px;
background-color: pink;
}
.wrapper .mian-box .box-rt .notice{
width: 290px;
height: 98px;
padding-top:10px;
background-color:orange;
}
.wrapper .mian-box .box-rt .mobule{
width: 290px;
height: 230px;
background-color:red;
}
/* .wrapper .mian-box .box-rt .app{
} */
</style>