第七堂课
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #a1{ width:100px; height:30px; background-color:#60C; color:#FFF; text-decoration:none} #d1{ width:300px; height:300px; background-color:#F3C; text-align:center ; vertical-align:auto; line-height:200px} #an{ width:104px; height:40px; background-color:#38F; font-size:16px; text-align:center; vertical-align:middle; line-height:40px;} #wai{ width:300px; height:300px; background-color:#0F0} #nei{ float:left; width:300px; height:300px; margin:20px 30px 20px 30px; padding:40px 0px 0px 10px} #li{ width:100px; height:200px; background-color:#C09} *{ margin:opx auto; padding:opx;} </style> </head> <body> <div style="alignment-baseline:after-edge">hello</div> <div style=" font-family:Verdana, Geneva, sans-serif; font-size:36px; font-weight:bold; font-style:italic; color:#000; text-decoration:blink;background-size:600px 600px; background-position:bottom; background-repeat:no-repeat; background-image:url(2016-05-27_plaque_hp.jpg); width:600px;height:600px; background-color:#F00"; >测试文字</div> <br/> <a id="a1" href="http://www.baidu.com">超链接</a> <div id="d1">幸福呀好</div> <div id="an">百度一下</div> <p style="text-indent:31px; text-height:50px">感第二方提供优惠让他与偶乳房同归于尽让退团购会回家觉就回家巨坑u句回家回家回家好回家好看好看巨坑好看回家考虑好看即将巨坑看巨坑就你吗， 不能那么， 巨坑就， </p> <div id="wai"> <div id="nei"> <div id="li"> </div> </div> </div> </body> </html>
样式控制大小，写样式属性时，后面要写单位像素px，高度和宽度要用分号;区分
背景图片可以用五个来调整，分别为bottom下边，lift左边，center居中，right右边，top上边
repeat-x是平铺的意思
background-size： 是修改背景图大小
控制字体
网络最常见的字体是微软雅黑，常用的字体大小是14px或16px
font-weigh:bold是字体加粗
font-style:italic是字体倾斜
直接写color： 是代表字体颜色
text-decoration：可以选上划线，下划线，还有删除线，代表文本修饰
超链接，让超链接变成正常文字的外形
给它做一个内嵌，加入样式属性，text-decortaion:none 加入这个，可以打掉超链接的下划线
还学到好几个属性
text-align：ceter 是文字水平对齐方式，ceter是居中
vertical-align垂直对齐方式 line-height: 在行高里面居中，这两个可以配合使用
设置样式
在写段落时<p>内容</p>
可以在p后面增加样式 style="text-indent:30px" 是缩进多少像素的意思
边界边框
边距是margin: 内边距是padding
设置边距的时候，比如说margin:20px 30px 20px 30px 这是按顺时针的方向来的，上右下左
*{margin:opx auto;padding:opx}这句话在做网页的时候都能用到，是把所有元素内边距和外边距都去掉
