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

最新推荐文章于 2024-09-28 17:23:57 发布

leasin_

最新推荐文章于 2024-09-28 17:23:57 发布

阅读量1.2w

点赞数 19

分类专栏： Html-5

本文链接：https://blog.csdn.net/XiaoBuHome/article/details/52964888

版权

Html-5 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

页面布局分为三部分：

导航栏

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

内容栏

  整理宽高，浮动问题 

结尾栏

  整理颜色，高度问题 

附源代码：

<!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，该元素表示所选内容向左浮动，如果空间不够，则向下填充 