资源描述:
《divcss课件-第3章CSS网页布局与定位》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、Div+Css第三章CSS网页布局与定位本章目标1.掌握什么叫DIV2.掌握盒子模型3.掌握浮动问题4.掌握定位问题本章重难点重点盒子模型浮动问题关于定位关于DIV特性。作用。并列与嵌套盒子模型Margin与padding的区别关于margin与padding区别?何时用margin何时用padding简写Margin:10px;四边同Margin:10px20px30px40px;(上右下左)Margin:10px20px;(上下、左右ng)盒子居中(左右间距设置为auto)Padding浮动:Float:left/right小技巧:要使多个块元素能排
2、在同一行,则都要浮动实例:导航条贵州新华电脑学院—电子商务专业定位属性含义属性值Position位置Absolute
3、relative
4、staticLeft
5、top横向
6、纵向位置Nem
7、%Width
8、height宽度
9、高度同上Clip剪切Shape
10、autoOverflow内容超出时Visible
11、hidden
12、scroll
13、autoZ-index立体效果Integervisibility可见性Inherit
14、visible
15、hidden补充CSS常用属性(课时视情况与其它章节调整)属性含义属性值font-family字体各种字体font-style字体
16、样式italic、obliquefont-variant小体大写small-capsfont-weight字体粗细bold、bolder、lighter…font-size字体大小absolute、relative、%color字体颜色颜色值CSS教程——字体属性属性含义属性值Color颜色颜色值Background-color背景色颜色值Background-image背景图案图片路径Background-repeat背景图案重复方式Repeat-x
17、repeat-y
18、no-repeatBackground-attachment背景的滚动Scroll
19、
20、fixBackground-position背景图案初始位置%
21、nem
22、top
23、left
24、right
25、bottom…CSS教程——颜色与背景属性属性含义属性值word-spacing单词间距nemletter-spacing字母间距nemtext-decoration装饰样式underline
26、overline
27、line-through
28、blinkvertical-align垂直方向位置sub
29、super
30、top
31、text-top
32、middle
33、bottom
34、text-bottomtext-transform转为其他形式capitalize
35、upper
36、case
37、lowercasetext-align对齐left
38、right
39、center
40、justifytext-indent缩进nem
41、%line-height行高pixels、nem、%Em:12pixels的'M'常用于印刷的单位CSS教程——文本属性对链接的修饰A:link未访问时的状态A:visited访问过后的状态A:active鼠标点中不放时的状态A:hover鼠标划过时的状态a:focus链接获得焦点时的状态a:link{}a:visited{}a:active{}a:hover{}a:focus{}CSS教程——装饰超链接伪类选择符属性含
42、义属性值margin-top上边距nem
43、%margin-right右nem
44、%margin-bottom下nem
45、%margin-left左nem
46、%CSS教程——边距属性属性含义属性值padding-top上填充nem
47、%padding-right右nem
48、%padding-bottom下nem
49、%padding-left左nem
50、%CSS教程——填充属性属性含义属性值Border-top-width上边框宽度nem
51、thin
52、medium
53、thickBorder-right-width右同上Border-bottom-width下同上Border-
54、left-width左同上Border-width四边同上Border-color边框颜色ColorBorder-style边框样式Dotted
55、dash
56、solid
57、double
58、groove
59、ridge
60、inset
61、outsetBorder-top
62、right
63、bottom
64、left上(右
65、底
66、左)所有属性Border-width
67、border-style
68、colorCSS教程——边框属性CSS教程——盒模型属性含义属性值Width宽度nem
69、%Height高度nemFloat文字环绕Left
70、rightclear去除文字环绕Left
71、right
72、b
73、othCSS教程——图文混排属性含义属性值Display是否显示Block
74、in