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

发布时间：2023年12月25日

56.1 本章简介

56.2 实例讲解

56.2.1 菜单制作

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
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！