关于简单页面的布局(导航栏、内容栏、结尾栏)

来源：互联网发布：广州网络宽带资费标准编辑：程序博客网时间：2024/05/29 04:32

页面布局分为三部分：

导航栏

整理颜色、边距、文字居中、边缘线、定位、优化无序列表、内边距等问题，主要问题

内容栏

整理宽高，浮动问题

结尾栏

整理颜色，高度问题

附源代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>导航栏</title><style type="text/css">body, ul, li, td { margin:0;padding:0; }/* 导航 */div { background-color: #06409a; }/*整体的div的颜色*//*去掉body，ul，li，td四周自带的边距*/table { margin: 10px auto;border-collapse: collapse;color:white;font-size: 20px; }td { border-right:1px solid gray;width:150px;height:70px;text-align: center; position: relative;}/* 盒子四周都有边框，可以单独制定某个方向的边框，最后一个td可以使用:last-child这样的伪类选择器单独指定样式 */td:last-child { border-right:none; }td:hover { color:orange; cursor: pointer; }ul, li { list-style: none; width:150px; color:cyan; }/*去掉无序列表之前的小原点,cyan 青色*/li { padding:10px 0; }/*设置li内容的内边距，上下为10px，左右为0*/.menu { position: absolute; top:70px; left:0;background-color: black; display: none; }/* 这句话是菜单出现的核心样式，意思是td 被鼠标经过时，才把它下面的子元素 .menu 设置成 display:block（display：none表示隐藏），display设置成inline，会直接显示出来，block是鼠标经过之后会显示出来*/td:hover .menu { display: block; }/* 页面的整体布局 */#content { margin:10px auto;width:1000px;height:420px; }#leftC { width:200px;height:320px;background-color: purple; }#middleC { width:600px;height:420px;background-color: pink; }#rightC { width:200px;height:330px;background-color: lightblue; }/* float是浮动，可以让块级的元素在同一行显示 */#leftC, #middleC, #rightC { float: left; }/*结尾栏*/#footer { height:40px;background-color: brown; }</style></head><body><!-- 导航 --><div><table><tr><td>首页</td><td>IT课程<ul class="menu"><li>iOS</li><li>HTML5</li><li>PHP</li><li>JAVA</li></ul></td><td>精英师资<ul class="menu"><li>隔壁大王</li><li>隔壁小王</li><li>隔壁老王</li></ul></td><td>学院就业<ul class="menu"><li>郑州</li><li>北上广深</li><li>成都/西安/拉萨</li></ul></td><td>视频课程<ul class="menu"><li>郑州</li><li>北上广深</li><li>成都/西安/拉萨</li></ul></td><td>青云风采<ul class="menu"><li>师生风采</li><li>拓展活动</li></ul></td></tr></table></div><!-- 内容 --><div id="content"><div id="leftC"></div><div id="middleC"></div><div id="rightC"></div></div><!-- 底部 --><div id="footer"></div></body></html>

效果图：

主要为鼠标进出menu的响应

知识点：

1.

在布局前，要对body、ul、li、td进行边距清零，消除自带内外边距

2.

在table设置中，可以设置边缘线是否重叠，因为本身是表格的原因，border-collapse本身有三个值：separate(左图默认，存在边缘线)、collapse(右图)，separate(从父元素继承该值)。

3.

border-right：1px solid grey，该元素是设置右边缘的线，值分别为大小，类型，颜色。大小分为四条边的类型，细边框(thin)，中等边框(medium)，粗边框(thick);类型分为solid(实线)、dashed(虚线)、dotted(点状边框)；

4.

text-align：right，该元素把文本呢排列到右边，可用的值为左(left)、中(center)、右(right)、justify(两端对齐)；

5.

td:hover { color:orange; cursor: pointer; },该元素表示当鼠标进入区域时，颜色转变，及鼠标手势转变。

6.

display：none，该元素表示元素生成的类型。取值一般为none(不显示、隐藏)、block(鼠标进入显示)、inline(直接显示，默认)

7.

float:left，该元素表示所选内容向左浮动，如果空间不够，则向下填充

0 0