目录
网页布局
-
三种传统PC端⽹⻚布局⽅式：
-
传统的DIV+CSS布局
-
HTML5+CSS3布局
-
响应式布局
-
1. DIV+CSS布局
此种布局是⽹⻚的HTML通过DIV标签+CSS样式表代码开发制作的(HTML)⽹⻚的统称。
DIV+CSS布局好处：便于维护，有利的SEO（⾕歌将⽹⻚打开速度作为排名因素及SEO因素），
⽹页打开速度还原，符合web标准等。
程序示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV+CSS传统页面布局</title>
<style>
/*公共的CSS样式*/
*{margin: 0px;padding: 0px;}
a{text-decoration: none;}
ul{list-style: none;}
/*页面头部样式*/
#header{
position: fixed;
top:0px;
height:80px;
width: 100%;
border-bottom: 1px solid #46474a;
}
#header .header-nav{
height: 80px;
width: 1000px;
background-color: goldenrod;
margin: 0px auto;
}
/*页面导航样式*/
#nav{
height: 60px;
margin-top:81px;
background-color: #46474a;
}
/*页面主体样式*/
#container{
width: 100%;
}
#container .content{
width: 1000px;
margin: 50px auto 0px;
}
#container .content .main{
width: 950px;
margin: 0px auto;
}
/*页面主体中的电影排行列表样式*/
#container .content .main ul li{
display: block;
height: 220px;
line-height: 220px;
width: 100%;
margin-bottom: 20px;
}
.main ul li .info{
height: 100%;
width: 680px;
float: right;
background-color:snow ;
border-bottom: 1px solid #ededed;
}
.main ul li .info .info-right{
width: 80px;
height: 80px;
border: 1px dashed orange;
float: right;
margin-top: 70px ;
}
.main ul li .info .info-left{
width: 300px;
height: 120px;
border: 1px dashed orange;
margin-top: 50px ;
}
.main ul li .ids{
height: 50px;
width: 50px;
margin-top: 85px;
margin-bottom:85px ;
background-color:orange ;
display: inline-block;
}
.main ul li .pic{
height: 200px;
width: 160px;
margin: 10px 25px;
border: 1px dashed green;
display: inline-block;
}
/*页面尾部样式*/
#footer{
height: 300px;
background-color: #46474a;
}
</style>
</head>
<body>
<!-- 网页头部开始 -->
<div id="header">
<div class="header-nav">
<h2>使用div+CSS布局实现《猫眼电影》榜单排行界面的布局效果</h2>
网址：https://maoyan.com/board
</div>
</div>
<!-- 网页头部结束 -->
<!-- 导航开始 -->
<div id="nav">
</div>
<!-- 导航结束 -->
<!-- 页面主体开始 -->
<div id="container">
<div class="content">
<div class="main">
<!-- 电影排行列表开始 -->
<ul>
<li>
<div class="info">
<div class="info-right"></div>
<div class="info-left"></div>
</div>
<div class="ids"></div>
<div class="pic"></div>
</li>
<li>
<div class="info">
<div class="info-right"></div>
<div class="info-left"></div>
</div>
<div class="ids"></div>
<div class="pic"></div>
</li>
<li>
<div class="info">
<div class="info-right"></div>
<div class="info-left"></div>
</div>
<div class="ids"></div>
<div class="pic"></div>
</li>
<li>
<div class="info">
<div class="info-right"></div>
<div class="info-left"></div>
</div>
<div class="ids"></div>
<div class="pic"></div>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul> <!-- 电影排行列表结束 -->
</div>
</div>
</div><!-- 页面主体结束 -->
<!-- 页面尾部开始 -->
<div id="footer"></div>
<!-- 页面主体结束 -->
</body>
</html>
2. HTML5+CSS3布局
HTML5 可以让很多更语义化的结构化代码标签代替⼤量⽆意义的 div 标签
-
这种语义化的特性提升了⽹⻚的质量和语义
-
减少了以前⽤于CSS 调⽤的class 和 id 属性
对搜索引擎的友好 新的结构标签带来的是⽹⻚布局的改变及提升对搜索引擎的友好。
HTML5的新标签元素有：
<header> 定义页⾯或区段的头部； <footer> 定义页⾯或区段的尾部； <nav> 定义页⾯或区段的导航区域； <section> 页⾯的逻辑区域或内容组合； <article> 定义正⽂或⼀篇完整的内容； <aside> 定义补充或相关内容；
注意：使⽤HTML5 语义化标签的布局模式在IE9以下浏览器不兼容，可使⽤下⾯的代码解决。
3. 响应式布局
第⼀种：直接在⻚头中使⽤CSS样式修饰。
<style type="text/css">
/* 宽度范围 最⾼度*/
@media all and (min-width:300px) and (max-width:800px){
body{
color:red;
}
}
@media all and (min-width:100px) and (max-width:300px){
body{
color:green;
}
}
</style>
-
第⼆种：导⼊不同的css样式⽂件
<link media="all and (min-width:300px) and (max-width:800px)" rel="stylesheet" href="my.css" /> <link media="all and (min-width:100px) and (max-width:200px)" rel="stylesheet" href="test.css" />
程序示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.dd{
border: 1px solid red;
width: 1200px;
margin: 0px auto;
}
ul{list-style:none;}
ul li{
width:180px;
height:300px;
margin:5px;
float:left;
border:1px solid yellow;
}
@media all and (min-width:501px) and (max-width:1000px){
div.dd{width:980px}
ul li{border-color:green;}
}
@media all and (min-width:0px) and (max-width:500px){
div.dd{width:450px}
ul li{border-color:red;}
}
</style>
</head>
<body>
<h1>响应式布局</h1>
<div class="dd">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div style="clear: both; width: 100%; height:1px;"></div>
</div >
</body>
</html>