Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加:1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性。
首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其实我们还有更简单的办法,只要在<td></td>中加入这么一段就可以了,你可以试试:
<div style="border-bottom:1px dashed #ccc"></div>
大家可以再次参考手册,然后你就能明白dashed、solid、dotted...等的作用,利用它们你可以制作出许多效果来,实线、虚线、双线、阴影线等等。
<div id="banner"></div>
以上代码便可以实现设计草图中的banner,在css.css中加入以下样式:
#banner {
background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
width:730px; /*设定层的宽度*/
margin:auto; /*层居中*/
height:240px; /*设定高度*/
border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
clear:both /*清除浮动*/
}
通过border很容易就绘制出一条实线了,并且减少了图片下载所占用的网络资源,使得页面载入速度变得更快。
另一个要说明的就是clear:both,表示清除左、右所有的浮动,在接下来的布局中我们还会用这个属性:clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动,如果不清除则会影响banner层位置的设定。
<div id="pagebody"><!--页面主体-->
<div id="sidebar"><!--侧边栏-->
</div>
<div id="mainbody"><!--主体内容-->
</div>
</div>
以上是页面主体部分,我们在css.css中添加以下样式:
#pagebody {
width:730px; /*设定宽度*/
margin:8px auto; /*居中*/
}
#sidebar {
width:160px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
}
#mainbody {
width:570px;
text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden
}
为了可以查看到效果,建议在#sidebar和#mainbody中加入以下代码,预览完成后可以删除这段代码:
border:1px solid #E00;
height:200px
保存预览效果,可以发现这两个层完美的浮动,在达到了我们布局的要求,而两个层的实际宽度应该160+2(border)+570+2=734px,已经超出了父层的宽度,由于clear的原因,这两个层才不会出现错位的情况,这样可以使我们布局的页面不会因为内容太长(例如图片)而导致错位。
而之后添加的overflow:hidden则可以使内容太长(例如图片)的部份自动被隐藏。通常我们会看到一些网页在载入时,由于图片太大,导致布局被撑开,直到页面下载完成才恢复正常,通过添加overflow:hidden就可以解决这个问题。
CSS中每一个属性运用得当,就可以解决许多问题,或许它们与你在布局的页并没有太大的关系,但是你必须知道这些属性的作用,在遇到难题的时候,可以尝试使用这些属性去解决问题。
附加:
一、设计原则:
1.使用div布局,使用css控制样式;
2.每个div要确定出长、宽和位置,其中位置借用magin(top right bottom left)(也可以结合padding),并且结合float和clear的运用(运用原理见我的有关博客)
最后Div在布局中的分布情况:
二、 DIV+CSS中标签ul ol li dl dt dd用法
dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦!
DIV
CSS网页布局中常用的列表元素ul ol li dl dt dd释义,块级元素div尽量少用,和table一样,嵌套越少越好
ol
有序列表。
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
表现为:
1……
2……
3……
ul
无序列表,表现为li前面是大圆点而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>
很多人容易忽略
dl dt dd的用法
dl 内容块
dt 内容块的标题
dd
内容
可以这么写:
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
dt
和dd中可以再加入 ol ul li和p
理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。DD DT DL标签
我们平时常用的是< ul>< li>标签,不过dd、dt标签也蛮不错,特别是发布程序的时候功能模块列表什么的可以使用它来排版。 < dl>< /dl>< dt>< /dt>< dd>< /dd> < dl>< /dl>用来创建一个普通的列表,< dt>< /dt>用来创建列表中的上层项目,< dl ——define dd——define list define——用于生成定义列表各列表项的说明文字段,重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解 例子: <dt>Tomorrow 例子2: <title>无标题文档</title> <!-- margin: 0px; font-size: 9pt; left:15px; #box { } <div id="box"> <dl> |
如图:
Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加:1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法相关推荐
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- div+css布局必了解的列表元素ul ol li dl dt dd详解
dt 和dd中可以再加入 ol ul li和p,理解这些以后,在使用div布局的时候,会方便很多,其实w3c提供了很多元素辅助布局都是有它的用处的,而不尽是div. 块级元素div尽量少用,其实和ta ...
- Div+CSS布局入门教程(四) 页面顶部制作之二
使用列表<li>制作菜单 开始此节的学习前,请确认你已经参照之前的几节内容写入了DIV.CSS到index.htm和css.css文件中. 这一节我将告诉大家如何用列表<li> ...
- Div+CSS布局入门教程(一) 页面布局与规划
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
- Div+CSS布局入门教程(三) 页面顶部制作之一
当我们写好了页面大致的DIV结构后,我们就可以开始细致地对每一个部分进行制作了. 在上一章中我们写入了一些样式,那些样式是为了预览结构而写入的,我们把css.css中的样式全部清除掉,重新写入以下样式 ...
- div css教程 属性,Div+CSS布局入门教程
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
- Div+CSS布局入门教程(二) 写入整体层结构与CSS
接下来我们在桌面新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: <!DOCTYPE html PUBLIC "- ...
- Scrapy爬虫入门教程五 Selectors(选择器)
Scrapy爬虫入门教程一 安装和基本使用 Scrapy爬虫入门教程二 官方提供Demo Scrapy爬虫入门教程三 命令行工具介绍和示例 Scrapy爬虫入门教程四 Spider(爬虫) Scrap ...
- CSS Modules入门教程
为什么引入CSS Modules 或者可以这么说,CSS Modules为我们解决了什么痛点.针对以往我写网页样式的经验,具体来说可以归纳为以下几点: 全局样式冲突 过程是这样的:你现在有两个模块,分 ...
最新文章
- 轻量级网络主干综述 20种
- PL/SQL Developer的错误提示弹框的文本显示乱码问题
- 安装程序集'' policy.8.0.microsoft.vc80.atl,type=''win32-
- ios 音高测试软件,App Store 上的“绝对音感训练!”
- maven缺少依赖包,强制更新命令
- VC++ COleSafeArray VARIANT的使用
- PL/SQL Developer 12.0下载及汉化
- 关于使用yum“The program package-cleanup is...”的解决办法
- 校赛热身 Problem C. Sometimes Naive (状压dp)
- 如何用iMazing备份和恢复辐射避难所
- 给初次参加全国大学生智能汽车竞赛的同学们的一些建议(转)
- 细丝菲涅尔衍射MATLAB,工程光学系列之六: 菲涅尔衍射 matlab仿真
- 码农小汪-锁 LOCK
- 关于C语言中有符号的整数值范围为什么是从-32768~32767以及有符号和无符号区别
- Salient Object Detection Driven by Fixation Prediction 论文解读
- tensorflow中squeeze与expand_dims
- python圣斗士(十七):令人欲罢不能的正则
- 一个公司存在不同职位,不同职位计算工资的方法也不相同。工资可能是固定的,也可能根据销售额或工作量来计算。假设公司有三种职务:经理、计件工人和计时工人:他们的工资组成分别为:
- wxpython动态实时绘图_wxPython实现画图板
- Python操作MySQL将文件信息制作成表(以裁判文书为例)
热门文章
- Web Hacking 101 中文版 十八、内存(一)
- nagios流量监控报警
- [转] VS2010中VC9.0Runtime与VC10.0Runtime在win7上装不上提示error code 1603
- 微软在动态语言支持上超越了Java?
- 容器编排技术 -- Kubernetes 为 Namespace 设置最小和最大内存限制
- Nacos Spring 快速开始
- Consul架构介绍
- SprinMVC 控制器忽略静态资源
- leetcode 删除排序数组中的重复项
- 【Vue 3.0 新特性(四)】Vue 3.0 响应式系统原理