今天进行了样式表的学习，控制大的小（width宽度）、（height高度）。控制背景的（background-color背景色）、（background-image背景图片）、（background-repeat背景图的平铺方式）、（background-position背景图片位置）、（background-attachment设置背景图片是否滚动）、（background-size背景图的大小）。控制字体的（font-family 字体样式）、（font-size 字体大小）、（font-style italic倾斜）、（font-weight bold加粗）、（text-decoration，underline下划线、overline上划线、line-through删除线、none没有，用来去掉超链接的下划线）、（color字体颜色）。对齐方式（text-align水平对齐方式）、（vertical-align垂直对齐方式，配合行高使用）、（line-height行高）、（text-indent缩进）。边界边框（margin外边距上右下左）、（padding，内边距，上右下左如果加了内边距，该元素会相应的变大）、（border 1px solid #60F）。列表方块（list-style none将列表前面的序号去掉）、（list-style-image可以将前面的序号变为图片）。格式与布局位置，position（fixed固定相对于浏览器边框位置固定）、（absolute绝对位置）、相对于父级元素（浏览器，绝对定位的上级）、（relative相对于自身应该出现的位置）、（top距离上边的距离）、（right距离右边的距离）、（bottom距离下边的距离）、（left距离左边的距离）、流（float left向左流，right 向右流）、（clear both清掉流）、（z-index分层值越大越靠上）。其它（display显示block和隐藏none,不占位置）、（visibility 显示visible和隐藏hidden,占位置）、（overflow超出范围 hidden隐藏）、（透明opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)）、（圆角border-radius:5px;）、（阴影box-shadow:0 0 5px white;）。
<!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> #a { font-weight:bold; font-size:14px; margin:10px; top:15px; right:100px; position:fixed; } #b { top:50px; right:40%; position:fixed; } #c { top:200px; left:29%; position:fixed; } #d { bottom:110px; left:37%; position:fixed; } #e { left:33%; bottom:90px; position:fixed; } #f { left:40%; bottom:70px; position:fixed; } </style> </head> <body> <div id="a"> <a href="http://www.nuomi.com/?cid=002540" name="tj_trnuomi" id="tj_trnuomi">糯米</a> <a href="http://news.baidu.com/" name="tj_trnews" id="tj_trnews">新闻</a> <a href="http://www.hao123.com/" name="tj_trhao123" id="tj_trhao123">hao123</a> <a href="http://map.baidu.com/" name="tj_trmap" id="tj_trmap">地图</a> <a href="http://v.baidu.com/" name="tj_trvideo" id="tj_trvideo">视频</a> <a href="http://tieba.baidu.com/" name="tj_trtieba" id="tj_trtieba">贴吧</a> <a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F" name="tj_login" id="tj_login2" onclick="return false;">登录</a> <a href="http://www.baidu.com/gaoji/preferences.html" name="tj_settingicon" id="tj_settingicon2">设置</a> </div> <form name="更多" action="威海学院个人资料填写.html" method="get" style=" font-weight:bold; font-size:14px; margin:10px; top:12px; right:1px; position:fixed;"> 更多<select name="更多"> <option value="">知道</option> <option value="">音乐</option> <option value="">文库</option> </select> </form> <div id="b"> <img src="百度素材/bd_logo1.png" width="270" height="129"> </div> <div id="c"> <form action="百度素材/反馈结果这是个假百度.html" method="get"> <input type="text" name="输入框" value="" style=" height:30px; 500px; "> <input type="submit" value="百度一下" style=" height:35px; 80px; "> </form> </div> <div id="d"> <a id="setf" href="https://www.baidu.com/cache/sethelp/help.html" onmousedown="return ns_c({'fm':'behs','tab':'favorites','pos':0})" target="_blank">把百度设为主页</a> <a onmousedown="return ns_c({'fm':'behs','tab':'tj_about'})" href="http://home.baidu.com/">关于百度</a> <a onmousedown="return ns_c({'fm':'behs','tab':'tj_about_en'})" href="http://ir.baidu.com/">About Baidu</a> <a onmousedown="return ns_c({'fm':'behs','tab':'tj_tuiguang'})" href="http://e.baidu.com/?refer=888">百度推广</a> </div> <div id="e"> ©2016 Baidu <a href="http://www.baidu.com/duty/" onmousedown="return ns_c({'fm':'behs','tab':'tj_duty'})">使用百度前必读</a> <a href="http://jianyi.baidu.com/" onmousedown="return ns_c({'fm':'behs','tab':'tj_homefb'})">意见反馈</a> 京ICP证030173号 </div> <div id="f"> <a id="jgwab" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a> </div> </body> </html>
<!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> #a { font-weight:bold; font-size:14px; margin:10px; top:15px; right:100px; position:fixed; } #b { top:50px; right:40%; position:fixed; } #c { top:200px; left:29%; position:fixed; } #d { bottom:110px; left:37%; position:fixed; } #e { left:33%; bottom:90px; position:fixed; } #f { left:40%; bottom:70px; position:fixed; } </style> </head> <body> <div id="a"> <a href="http://www.nuomi.com/?cid=002540" name="tj_trnuomi" id="tj_trnuomi">糯米</a> <a href="http://news.baidu.com/" name="tj_trnews" id="tj_trnews">新闻</a> <a href="http://www.hao123.com/" name="tj_trhao123" id="tj_trhao123">hao123</a> <a href="http://map.baidu.com/" name="tj_trmap" id="tj_trmap">地图</a> <a href="http://v.baidu.com/" name="tj_trvideo" id="tj_trvideo">视频</a> <a href="http://tieba.baidu.com/" name="tj_trtieba" id="tj_trtieba">贴吧</a> <a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F" name="tj_login" id="tj_login2" onclick="return false;">登录</a> <a href="http://www.baidu.com/gaoji/preferences.html" name="tj_settingicon" id="tj_settingicon2">设置</a> </div> <form name="更多" action="威海学院个人资料填写.html" method="get" style=" font-weight:bold; font-size:14px; margin:10px; top:12px; right:1px; position:fixed;"> 更多<select name="更多"> <option value="">知道</option> <option value="">音乐</option> <option value="">文库</option> </select> </form> <div id="b"> <img src="百度素材/bd_logo1.png" width="270" height="129"> </div> <div id="c"> <form action="百度素材/反馈结果这是个假百度.html" method="get"> <input type="text" name="输入框" value="" style=" height:30px; 500px; "> <input type="submit" value="百度一下" style=" height:35px; 80px; "> </form> </div> <div id="d"> <a id="setf" href="https://www.baidu.com/cache/sethelp/help.html" onmousedown="return ns_c({'fm':'behs','tab':'favorites','pos':0})" target="_blank">把百度设为主页</a> <a onmousedown="return ns_c({'fm':'behs','tab':'tj_about'})" href="http://home.baidu.com/">关于百度</a> <a onmousedown="return ns_c({'fm':'behs','tab':'tj_about_en'})" href="http://ir.baidu.com/">About Baidu</a> <a onmousedown="return ns_c({'fm':'behs','tab':'tj_tuiguang'})" href="http://e.baidu.com/?refer=888">百度推广</a> </div> <div id="e"> ©2016 Baidu <a href="http://www.baidu.com/duty/" onmousedown="return ns_c({'fm':'behs','tab':'tj_duty'})">使用百度前必读</a> <a href="http://jianyi.baidu.com/" onmousedown="return ns_c({'fm':'behs','tab':'tj_homefb'})">意见反馈</a> 京ICP证030173号 </div> <div id="f"> <a id="jgwab" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a> </div> </body> </html>