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

目录

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></

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/578325.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OAuth2.0 四种授权方式讲解

一、OAuth2.0 的理解 OAuth2是一个开放的授权标准&#xff0c;允许第三方应用程序以安全可控的方式访问受保护的资源&#xff0c;而无需用户将用户名和密码信息与第三方应用程序共享。OAuth2被广泛应用于现代Web和移动应用程序开发中&#xff0c;可以简化应用程序与资源服务器之…

怎样学习嵌入式C语言编程

目录 C语言编程分类c语言入门学习C语言单片机开发C语言linux应用开发C语言linux驱动开发C语言开发其他问题参考链接 C语言编程分类 C语言编程,这里分成这几类:1.c语言入门学习;2.C语言单片机开发;3.C语言linux应用开发;4.C语言linux驱动开发. c语言入门学习 学习一本书籍即可…

行业报告 | 中国AI大模型成长之路,披荆斩棘创佳绩

原创 | 文 BFT机器人 前言&#xff1a; 相信大家现在对于AI大模型这个概念都清楚&#xff0c;毕竟现在AI大模型渗入到了我们各个生活场景中&#xff0c;这股科技之风吹遍了中国大大小小的城市&#xff0c;近年来看&#xff0c;还有越吹越烈之势。今天小编带你们来了解一下我国…

java并发编程六 共享模型之内存

文章目录 Java 内存模型可见性解决方法 有序性解决方法 Java 内存模型 JMM 即 Java Memory Model&#xff0c;它定义了主存、工作内存抽象概念&#xff0c;底层对应着 CPU 寄存器、缓存、硬件内存、CPU 指令优化等。 JMM 体现在以下几个方面 原子性 - 保证指令不会受到线程上…

力扣算法练习BM71——最小上升子序列

题目 给定一个长度为 n 的数组 arr&#xff0c;求它的最长严格上升子序列的长度。 所谓子序列&#xff0c;指一个数组删掉一些数&#xff08;也可以不删&#xff09;之后&#xff0c;形成的新数组。例如 [1,5,3,7,3] 数组&#xff0c;其子序列有&#xff1a;[1,3,3]、[7] 等。…

STM32独立看门狗

时钟频率 40KHZ 看门狗简介 STM32F10xxx 内置两个看门狗&#xff0c;提供了更高的安全性、时间的精确性和使用的灵活性。两个看 门狗设备 ( 独立看门狗和窗口看门狗 ) 可用来检测和解决由软件错误引起的故障&#xff1b;当计数器达到给 定的超时值时&#xff0c;触发一个中…

腾讯云2核4G服务器CVM标准型S5实例5年优惠价格表

腾讯云服务器续费贵所以一次性买3年或5年&#xff0c;腾讯云轻量应用服务器3年价格有优惠&#xff0c;CVM云服务器5年有特价&#xff0c;腾讯云3年轻量和5年云服务器CVM优惠活动入口&#xff0c;3年轻量应用服务器配置可选2核2G4M和2核4G5M带宽&#xff0c;5年CVM云服务器可以选…

陈可之|三峡|《河水不犯井水的游戏》

《河水不犯井水的游戏》 尺寸&#xff1a;130x90cm 陈可之2007年绘 油画《河水不犯井水的游戏》是陈可之先生三峡系列作品之一&#xff0c;巧借古代传说&#xff0c;并具象化为螃蟹、乌龟、长江水&#xff0c;描绘了一幅和谐共生的画面。 画面右侧&#xff0c;蜿蜒宽阔的长江水…

强化学习_06_pytorch-TD3实践(CarRacing-v2)

0、TD3算法原理简介 详见笔者前一篇实践强化学习_06_pytorch-TD3实践(BipedalWalkerHardcore-v3) 1、CarRacing环境观察及调整 Action SpaceBox([-1. 0. 0.], 1.0, (3,), float32)Observation SpaceBox(0, 255, (96, 96, 3), uint8) 动作空间是[-1~1, 0~1, 0~1]&#xff0c…

网络安全选择题20道——附答案

一.网络安全选择题&#xff08;20道&#xff09; 1.常见的网络攻击类型中&#xff0c;以下哪个是一种拒绝服务&#xff08;DoS&#xff09;攻击&#xff1f; A. 木马 B. SQL注入 C. 垃圾邮件 D. SYN洪水攻击 2.下列哪项不是网络安全的三要素之一&#xff1f; A. 机密性 B. 可…

解决国内大模型痛点的最佳实践方案

1.前言 自AI热潮掀起以来&#xff0c;国内互联网大厂躬身入局&#xff0c;各类机构奋起追赶&#xff0c;创业型企业纷至沓来。业内戏称&#xff0c;一场大模型的“百模大战”已经扩展到“千模大战”。 根据近期中国科学技术信息研究所发布的《中国人工智能大模型地图研究报告…

【2023下算法课设】Gray码的分治构造算法

Gray码是一个长度为2ⁿ的序列&#xff0c;序列中无相同元素&#xff0c;且每个元素都是长度为n位的二进制位串&#xff0c;相邻元素恰好只有1位不同。例如长度为2的格雷码为&#xff08;000,001,011,010,110,111,101,100&#xff09;&#xff0c;设计分治算法对任意的n值构造相…

iOS设备信息详解

文章目录 ID 体系iOS设备信息详解IDFA介绍特点IDFA新政前世今生获取方式 IDFV介绍获取方式 UUID介绍特点获取方式 UDID介绍获取方式 OpenUDID介绍 Bundle ID介绍分类其他 IP地址介绍获取方式 MAC地址介绍获取方式正常获取MAC地址获取对应Wi-Fi的MAC地址 系统版本获取方式 设备型…

云HIS源码 云HIS解决方案 支持医保功能

云HIS系统重建统一的信息架构体系&#xff0c;重构管理服务流程&#xff0c;重造病人服务环境&#xff0c;向不同类型的医疗机构提供SaaS化HIS服务解决方案。 云HIS作为基于云计算的B/S构架的HIS系统&#xff0c;为基层医疗机构&#xff08;包括诊所、社区卫生服务中心、乡镇卫…

【华为数据之道学习笔记】6-7打造业务自助分析的关键能力

华为公司将自助分析作为一种公共能力&#xff0c;在企业层面进行了统一构建。一方面&#xff0c;面向不同的消费用户提供了差异性的能力和工具支撑&#xff1b;另一方面&#xff0c;引入了“租户”概念&#xff0c;不同类型的用户可以在一定范围内分析数据、共享数据结果。 1. …

【力扣100】199.二叉树的右视图

添加链接描述 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right class Solution:def rightSideView(self, root: Optional[Tr…

【贪心算法】专题练习一

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;题目大解析&#xff08;3&#xff09; 前言 1.什么是贪心算法&#xff1f;——贪婪鼠目寸光 贪心策…

stat模块--python

在Python中,stat模块提供了一些用于解释os.stat(), os.lstat()和os.fstat()返回的结果的函数和常量。这些函数可以获取文件或文件系统节点的信息。 以下是一些stat模块中的函数和常量: stat.S_ISDIR(mode):如果mode是目录,则返回True。 stat.S_ISREG(mode):如果mode是普通…

在pyqt5界面中直接设置图标icon,不需要python程序代码!!一步搞定!!

小白轻松玩转pyqt5 1. 第一步&#xff1a;点击mainwindow,然后在windowicon中上传图片即可2. 设置成功总结&#xff08;对于小白入门pyqt5的一些忠告&#xff09; 1. 第一步&#xff1a;点击mainwindow,然后在windowicon中上传图片即可 2. 设置成功 总结&#xff08;对于小白入…

【Java 进阶篇】Jedis 操作 List:Redis中的列表类型

Redis中的列表&#xff08;List&#xff09;是一种有序的、可重复的数据类型&#xff0c;支持在列表的两端进行元素的插入和删除操作。Jedis作为Java开发者与Redis交互的工具&#xff0c;提供了丰富的API来操作List类型。本文将深入介绍Jedis如何操作Redis中的List类型数据&…