html5标题分栏,⽹页分栏设计和不同的CSS样式
⽹页分栏设计
写⽹页的时候，我们可能觉得⾃⼰做出来的东西和真正的⽹页有所差别，总是“少了点什么”。这很有可能是因为我们的⽹页没有注意分栏哦。
这⾥是天猫主页的截图，⼤家可以观察⼀下它的分栏设计。
右上⾓是搜索栏，页眉是导航栏，中间是促销⼴告，分栏⼗分清晰。
我们将⽤CSS来实现⼀个基本的分栏页⾯，⼤致分布如下。
html网页设计的标题导航栏
导航栏的制作我们在前⾯⼀篇⽂章中已经讲过了，这⾥只贴代码。
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引⽤
效果
分栏实现
基本的分栏代码框架是这样的
.
..
...
这意味着，我们要定义两个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
title author
背影朱⾃清
tr 元素定义表格⾏
th元素定义表头
td元素定义表格单元。
页脚实现
CSS
footer {
width: 90%;
max-width: 430px;
margin-top: 30px;
bottom: 0px;
height: 50px;
background: #111;
color: white;
position: fixed;
}
HTML
这是⼀个快乐的页脚
position: fixed 不论我们如何拉动浏览器的滚动条，页脚在浏览器中的位置都是不会变化的固定的标题和右下边框
标题
CSS
h1 {
position: fixed;
top: 0;
width: 500px;
margin: 0 auto;
background: white;
padding: 10px;
}
HTML
An example
效果
可以看到，当下拉浏览器滚动条的时候，标题固定在页⾯框不动
右下
⽤这个我们也可以实现右下⾓有⼀个⼩框框，固定不动的效果
联系⽅式：135********
整体页⾯效果如下：
不同的CSS样式
如何轻易地改变⼀个⽹页的风格，⼜不改变它的内容呢？
答案当然是使⽤不同的CSS样式啦。
StyleSheet2
StyleSheet1
只要改变不同CSS⽂件中设定的样式，将同⼀个HTML⽂件绑上不同的CSS样式就会有不同的效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。