网页分栏设计
写网页的时候，我们可能觉得自己做出来的东西和真正的网页有所差别，总是“少了点什么”。这很有可能是因为我们的网页没有注意分栏哦。
这里是天猫主页的截图，大家可以观察一下它的分栏设计。
右上角是搜索栏，页眉是导航栏，中间是促销广告，分栏十分清晰。
我们将用CSS来实现一个基本的分栏页面，大致分布如下。
导航栏
导航栏的制作我们在前面一篇文章中已经讲过了，这里只贴代码。
CSS样式：
ul { /*设置导航栏的框框*/
margin: 100px auto; /*框框整体的位置，30px是指离网页的顶部和下部的距离，auto控制的是左右距离为自动调节*/
margin-bottom: 10px auto;
width: 530px; /*框框的宽度*/
height: 0px auto; /*框框的长度*/
padding: 0px; /*将框框的padding设置为零，不然会导致框框里的内容与框边缘有间隔*/
/*border:1px solid #000;/*添加边框*/
}
li {
list-style-type: none; /* 去掉li前的点 */
float: left; /*将li设置成做浮动，变为联动*/
}
a {
display: block; /*将a变成块状*/
width: 100px; /*设置块的宽度*/
height: 50px; /*设置块的长度*/
font-family: Microsoft Yahei;
line-height: 50px; /*设置字体在块中的高度*/
background-color: #2f4f4f;
margin: 0px 0px; /*块里的高宽通过margin设置*/
color: #fff;
text-align: center; /*字体居中*/
text-decoration: none; /*去掉下划线*/
font-size: 15px;
}
a:hover {
background-color: #2f6f4f;
}
HTML引用
<ul class=daohang>
<li><a href="">首页</a></li>
<li><a href="">经典美文</a></li>
<li><a href="">名家诵读</a></li>
<li><a href="">了解更多</a></li>
</ul>
效果
分栏实现
基本的分栏代码框架是这样的
<div>
<div id="left"> ...
</div>
<div id="middle">...
</div>
</div>
这意味着，我们要定义两个ID名称为left 和middle的CSS类选择器
#left {
width: 120px;
background-color: pink;
/* position:relative; */
margin-left: 100px auto;
float: left;
margin-top: 10px;
}
#middle {
width: 260px;
background-color: gray;
margin-left: 320px auto;
margin-top: 10px;
}
之后在html中引用。
效果如下图：
表格实现
大家看到我们在中间一栏中插入了表格，这到底是如何实现的呢？
HTML
<table border="1" align="center" style="margin-top:20px;bottom:30px;height:40px;width:80px;">
<!---------------------border="1",表格有边框-->
<tr>
<th>title</th>
<th>author</th>
</tr>
<tr>
<td>背影</td>
<td>
朱自清
</td>
</tr>
</table>
<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行
th元素定义表头
td元素定义表格单元。
页脚实现
CSS
footer {
width: 90%;
max-width: 430px;
margin-top: 30px;
bottom: 0px;
height: 50px;
background: #111;
color: white;
position: fixed;
}
HTML
<footer>这是一个快乐的页脚</footer>
position: fixed 不论我们如何拉动浏览器的滚动条，页脚在浏览器中的位置都是不会变化的
固定的标题和右下边框
标题
CSS
h1 {
position: fixed;
top: 0;
width: 500px;
margin: 0 auto;
background: white;
padding: 10px;
}
HTML
<h1>An example</h1>
效果
可以看到，当下拉浏览器滚动条的时候，标题固定在页面框不动
右下
用这个我们也可以实现右下角有一个小框框，固定不动的效果
<aside style="position:fixed ;bottom : 0;float :right;height:60px;width:150px;
background-color:aquamarine;color:black;margin-left:450px">
联系方式：13529502940</aside>
整体页面效果如下：
不同的CSS样式
如何轻易地改变一个网页的风格，又不改变它的内容呢？
答案当然是使用不同的CSS样式啦。
<link rel="stylesheet" type="text/css" href="StyleSheet2.css" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css" />
StyleSheet2
StyleSheet1
只要改变不同CSS文件中设定的样式，将同一个HTML文件绑上不同的CSS样式就会有不同的效果。
网友评论