html+css+div文档格式.docx
- 文档编号:19212761
- 上传时间:2023-01-04
- 格式:DOCX
- 页数:8
- 大小:20.45KB
html+css+div文档格式.docx
《html+css+div文档格式.docx》由会员分享,可在线阅读,更多相关《html+css+div文档格式.docx(8页珍藏版)》请在冰豆网上搜索。
width:
80%;
4.
一列二至多块布局
一般的网站整体可以分为上中下结构,即:
头部、中间主体、底部。
那么我们可以用三个div块来划分,分别给它们起名为:
头部(header)、主体(maincontent)、询问(footer)。
采用固定宽度居中的方式,代码如下:
padding:
}
#header{margin:
5pxauto;
500px;
80px;
#9F9;
#main{margin:
400px;
#9FF;
#footer{margin:
#9f9;
5.
为什么两个相邻的容器中间的间距不是10px,而是5px呢?
按照我们正常的理解,认为应该是两个值相加,其实这里是两个合并后取最大值。
用css手册中的话说:
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。
行内元素的的左右外边距不会合并。
同样地,浮动元素的外边距也不会合并。
允许指定负的外边距值,不过使用时要小心(有关块级元素和行内元素的概念在下一节讲到)。
6.
何为块级元素,何为行级元素呢?
这里还有内联元素。
(又叫做内嵌元素、行内元素、直进式元素)
(inlineelement)内联元素一般都是基于语义级(semantic)的基本元素。
内联元素只能容纳文本或者其他内联元素。
(blockelement)块级元素和inlineelement都是赫塔缪勒规范中的概念。
Blockelement会顺序以每次另起一行的方式一直往下排。
也就是说blockelement是换行的,但是当inlineelement有了这样的属性:
display:
block;
那么就会和blockelement没有什么区别了(inlineelement也是必须换行了。
)
Display:
inline;
这个属性能够修复著名的IE双倍浮动边界问题。
Blockelement
1ddress-地址
2 *blockquote-块引用
3 *center-举中对齐块
4 *dir-目录列表
5 *div-常用块级容易,也是csslayout的主要标签
6 *dl-定义列表
7 *fieldset-form控制组
8 *form-交互表单
9 *h1-大标题
10 *h2-副标题
11 *h3-3级标题
12 *h4-4级标题
13 *h5-5级标题
14 *h6-6级标题
15 *hr-水平分隔线
16 *isindex-inputprompt
17 *menu-菜单列表
18 *noframes-frames可选内容,(对于不支持frame的浏览器显示此区块内容
19 *noscript-可选脚本内容(对于不支持script的浏览器显示此内容)
20 *ol-排序表单
21 *p-段落
22 *pre-格式化文本
23 *table-表格
24 *ul-非排序列表
Inlineelement
1 *a-锚点
2 *abbr-缩写
3 *acronym-首字
4 *b-粗体(不推荐)
5 *bdo-bidioverride
6 *big-大字体
7 *br-换行
8 *cite-引用
9 *code-计算机代码(在引用源码的时候需要)
10 *dfn-定义字段
11 *em-强调
12 *font-字体设定(不推荐)
13 *i-斜体
14 *img-图片
15 *input-输入框
16 *kbd-定义键盘文本
17 *label-表格标签
18 *q-短引用
19 *s-中划线(不推荐)
20 *samp-定义范例计算机代码
21 *select-项目选择
22 *small-小字体文本
23 *span-常用内联容器,定义文本内区块
24 *strike-中划线
25 *strong-粗体强调
26 *sub-下标
27 *sup-上标
28 *textarea-多行文本输入框
29 *tt-电传文本
30 *u-下划线
31 *var-定义变量
可变元素
1 *applet-javaapplet
2 *button-按钮
3 *del-删除文本
4 *iframe-inlineframe
5 *ins-插入的文本
6 *map-图片区块(map)
7 *object-object对象
8 *script-客户端脚本
7.
Css语法及格式
#layout{
color:
#fff;
border:
1px;
solid:
#ccc;
红色代表CSS选择器,蓝色代表属性,绿色代表值;
如图所示,CSS语法由如下三部分构成,选择器:
可以是ID、CLASS或标签;
属性和值是用来定义这个物件的某一个特性。
如一张桌子的长120cm,宽60cm,套用css的格式为,桌子{长:
120cm;
宽:
60cm;
},这样是不是容易理解。
8.
Div是‘#’,class是‘.’;
Div的优先级高于class;
比如说今天三班的学生上体育课,小明留下来打扫卫生。
那么三班的学生上体育课这是一个类,而小明打扫卫生这是个id,虽然小明也是三班的学生,但id高于class,所以小明执行打扫卫生的任务。
9.
两列自适应宽度布局:
有一列要自己浮动,另一列的margin要和浮动的宽度相同。
如:
#side{background:
#99FF99;
120px;
float:
left;
#main{background:
#99FFFF;
margin-left:
给他们添加父级div
#content{width:
470px;
margin:
0auto;
}(居中)
Contentwidth=side.width+main.width;
10.
Float浮动;
CSS中,任何元素都可以浮动,浮动元素会生成一个块级框,而不论它本身是何种元素;
且要指明宽度,否则它会尽可能的窄;
另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。
(所谓尽可能的窄是紧紧的内贴)
11.
三列自适应宽度:
一般常用结构式左列和右列固定,中间列根据浏览器自适应。
而在写入div标签的时候要注意顺序:
先写左列float-left,且固定宽度,在写右列float-right,要固定宽度;
最后再写中间列。
三列固定宽度:
在自适应宽度的基础上增加父级div,必须固定宽度。
12.
list-style-type;
(针对列表之类的list嘛)
默认是实心圆:
disc;
常用的是list-style-type:
none;
不使用项目符号;
13.
text-decoration;
(检索或设置对象中文本的装饰)
:
none:
默认值。
无装饰
blink:
闪烁
underline:
下划线
line-through:
贯穿线
overline:
上划线
检索或设置对象中的文本的装饰。
有href特性的a,以及u,ins对象默认值为underline。
对象strike,s,del,默认值是line-through。
∙假如none值在属性声明的最后,所有的先前的其他取值都会被清除。
例如,声明text-decoration:
underlineoverlineblinknone等于声明text-decoration:
none。
∙假如对象没有文本(如img元素)或者是空元素(如:
),此属性不会发生作用。
∙假如你设置body对象的此属性值为none,a对象将依然保持其原有的下划线样式。
除非你针对a对象声明此属性值。
指定块对象的此属性将影响其所有内联子对象。
而此影响一旦发生,块对象容器最终会受到影响。
在IE4+中可用的值为overline和blink。
虽然blink值被提供,但它不会被作用。
此属性对于currentStyle对象而言是只读的。
对于其他对象而言是可读写的。
对应的脚本特性为textDecoration;
14.
标签的默认样式:
大多数标签都有自己的默认样式,比如第二天课程中遇到的body默认外边距,另外本例中ul前的圆点及左侧的内边距,另h1-h6字体大小各不相同,em默认为斜体,strong表示粗体。
正因为有这些默认样式,一个设计合理的页面,即使没有加载样式,也能让用户很容易阅读。
但此时这些默认样式对我们没用,所以需要清除掉,为了方便,建议用标签重定义方式,这样可以很简单地把全局的样式给统一起来。
另外页面中的图片添加链接后会默认添加个边框,ul默认情况下会在列表前添加圆点,这些都是需要去掉的。
body,ul,li,h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd{margin:
font-size:
12px;
font-weight:
normal;
ul{list-style:
none;
img{border-style:
15.
css派生选择器
派生选择器可以帮助你节约大量的class定义。
#menuul{list-style:
#menuulli{background:
#eee;
0px8px;
26px;
line-height:
border-bottom:
1pxsolid#CCC;
#menuul和#menuulli即为派生选择器,如果我们把前边的#menu去掉,那么将是对ul标签重定义,重定义的属性将应用到全局,而前边加上#menu后,将是定义ID为menu元素内ul的样式,设置它的样式只对#menu下的ul生效,不对它之后的ul生效,这个有点像编程中的局部变量,而直接定义ul则相当于全局变量。
#menuulli是定义ID为menu元素内ul下的li,派生选择器可以使我们不用再给每个li定义一个样式名来定义样式,只需使用派生选择器,从它的父元素处选择即可,这样能大大提高效率。
16.
css选择器的分组
被分组的选择器就可以分享相同的声明。
用逗号将需要分组的选择器分开。
17.讲解块级元素和内联元素时提到display,今天用到了display:
block;
和display:
值为none时表示将这个元素隐藏,为block时表示将它的隐藏状态改为显示状态详细介绍请参考css手册。
18.
Position,
相对定位(relative)和绝对定位(absolute);
1.position:
relative;
如果对一个元素进行相对定位,首先它将出现在它所在的位置上。
然后通过设置垂直或水平位置,让这个元素"
相对于"
它的原始起点进行移动。
(再一点,相对定位时,无论是否进行移动,元素仍然占据原来的空间。
因此,移动元素会导致它覆盖其他框)
2.position:
absolute;
表示绝对定位,位置将依据浏览器左上角开始计算。
绝对定位使元素脱离文档流,因此不占据空间。
普通文档流中元素的布局就像绝对定位的元素不存在时一样。
(因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。
z-index的值越高,它显示的越在上层。
3.父容器使用相对定位,子元素使用绝对定位后,这样子元素的位置不再相对于浏览器左上角,而是相对于父窗口左上角。
4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置,这四个属性只有在该元素使用定位后才生效,其它情况下无效。
另外这四个属性同时只能使用相邻的两个,不能即使用上又使用下,或即使用左,又使用右。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html css div