我是靠谱客的博主 霸气红牛，最近开发中收集的这篇文章主要介绍关于简单页面的布局(导航栏、内容栏、结尾栏)页面布局分为三部分：附源代码：效果图：知识点：，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
页面布局分为三部分：
导航栏
整理颜色、边距、文字居中、边缘线、定位、优化无序列表、内边距等问题，
主要问题
内容栏
整理宽高，浮动问题
结尾栏
整理颜色，高度问题
附源代码：
<!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，该元素表示所选内容向左浮动，如果空间不够，则向下填充
最后
以上就是霸气红牛为你收集整理的关于简单页面的布局(导航栏、内容栏、结尾栏)页面布局分为三部分：附源代码：效果图：知识点：的全部内容，希望文章能够帮你解决关于简单页面的布局(导航栏、内容栏、结尾栏)页面布局分为三部分：附源代码：效果图：知识点：所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
![[Android] 输入系统（三）：加载按键映射映射表基本概念映射表加载过程](/uploads/reation/bcimg11.png)
发表评论 取消回复