56.0/DIV+CSS 布局(详细版)

2023-12-25 13:29:10

目录

56.1 本章简介

56.2 实例讲解

56.2.1 菜单制作

56.2.2 美化滚动条

56.2.3 DIV+CSS 布局

56.3 综合示例

56.3.1 总体分析

56.3.2 Header 层

56.3.3 最终代码

56.1 本章简介

本章通过几个实例讲解 DIV+CSS 的应用。
采用表格布局的页面内，为了实现设计的布局，制作者往往在单元格标签
<td> 内设置高度，宽度和对齐属性，同时，装饰性的图片和内容混杂在一起。因
此当页面布局需要调整时，往往都要重新制作表格。尤其当有很多页面需要修改
时，工作量将变得难以设计。
表格在版面布局上很容易掌控，通过表格的嵌套可以很轻易地实现各种版式
布局，但是即使是一个一行一列的表格，也需要 <table> ， <tr> ， <td> 这三对标签。
当要完成一个比较复杂的页面时，大量为了控制页面元素位置而设置的表格充斥
着文档，有时仅仅是为了实现一条细线而插入一个表格。这使得 HTML 文档的
代码直线攀升，代码的结构也看上去非常混乱，难以阅读。与此同时，由于浏览
器需要把整个表格下载完成之后才会显示，因此如果一个表格过长，内容过多后，
访问者往往需要很长时间才能看得到页面的内容。如此多的冗余代码，对于服务
器也是一个不小的压力，也许一个只有几个页面，每天只有十几个人访问的个人
站点对流量不会太在意，但是对于一个每天都有几千人甚至上万人在线的大型网
站来说，服务器的流量就是一个必须关注的问题了。
正是由于上述种种弊端，使得人们开始关注 DIV+CSS 布局。 DIV+CSS 布局
就是将表现与结构分离，用 DIV 来设计网页的结构和内容，用 CSS 来描述以何
种方式来显示页面的结构与内容。

56.2 实例讲解

56.2.1 菜单制作

制作如下图所示的菜单：

通常我们用无序列表 <ul> 来制作菜单，但得给它设置一定的样式。
首先，无序列表的列表项 <li> 默认是纵向排列的，
如何让列表项成横向排列 呢？
答案是
使用 CSS 提供的 float 属性。
我们只要把 float 样式属性设置成 right
就可以让列表项从右往左横向排列。 
<html>
<head>
<title>菜单设计</title>
<style type="text/css">
body{ font-size: 14px; }
a { color: #C05050; text-decoration: none; }
a:hover { text-decoration: underline }
.menu{
width:400px; height:24; border:1px solid 
#808080;background:#FFF0F0;color:#C05050;
}
.menu ul { list-style-type: none; padding: 0px; margin: 0px; }
.menu ul li { float:right; margin: 5px; }
</style> 
</head>
<body>
<div class="menu" >
<ul>
<li><a href="#">食品</a></li>
<li>|</li>
<li><a href="#">健康休闲</a></

文章来源:https://blog.csdn.net/m0_65227896/article/details/135196496
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。