截图：
CSS+HTML源代码
练习CSS /*总体样式*/body{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif;/*设置页面字体*/ background-color:black; font-size:12px; text-align:center;}div{ display:block;}#container{ width:760px; position:relative; /*固定宽度页面相对居中*/ text-align:left; margin:1px auto 0px auto; border-left:1px dashed #AAA; border-right:1px dashed #AAA; border-bottom:1px dashed #AAA; background-color:#FFFFFF; }/*顶部Logo样式*/#banner{ width:760px; height:163px;/*比背景图片高一点，下部放导航菜单*/ background:#DAEEFF url(banner.jpg) no-repeat top;/*背景色，图片，不重复，图片位于顶部*/ margin:0px; padding:0px;}/*全局导航菜单样式*/#banner ul{ margin:0px; padding:0px; position:absolute; width:417px; left:400px; top:145px; list-style-type:none;/*清楚项目符号*/}#banner ul li{ float:left; padding:0px 6px 0px 6px; text-align:center;}#banner a:link,#banner a:visited{ color:#004A87; text-decoration:none;}#banner a:hover{ color:white; text-decoration:underline;}/*内容区左侧块样式*/#leftBlock{ position:relative; float:left; width:210px; padding:0px; margin:0px;}#leftBlock div{ clear:both; margin-top:25px; position:relative;}/*左侧第一块作者区样式*/#leftBlock #authorBlock{ background-image:url(mypic_bg.gif); background-repeat:no-repeat; margin:5px; text-align:center;}#leftBlock #authorBlock #pic{ border:none; padding:15px 0px 0px 0px; margin:0px 0px 8px 0px;}#leftBlock #authorBlock #pic img{ border:1px solid #444; padding:2px; margin:0px;}#leftBlock #authorBlock #author{ border-top:1px dashed #999; border-bottom:1px dashed #999; margin:0px 10px 0px 10px; padding:3px 0px 3px 0px; }/*左侧快通用样式*/#leftBlock div h4{ background-image:url(leftbg.jpg); background-repeat:no-repeat; padding:6px 0px 5px 27px; margin:0px; font-size:12px;}#leftBlock ul{ list-style:none; margin:5px 5px 0px 25px; padding:0px;}#leftBlock ul li a:link,#leftBlock ul li a:visited{ color:black; text-decoration:none;}#leftBlock ul li a:hover{ color:blue;}/*左侧第二块样式*/#leftBlock #linkBlock ul li{ float:left; /* 显示为同一行 */ width:80px; /* 指定每一项的宽度 */ background:none; padding:0px; border:none;}/*左侧其余四块样式*/#leftBlock .left{ position:relative; top:10px; margin-bottom:35px;}#leftBlock .left ul{ margin:5px 15px 0px 15px;}#leftBlock .left ul li{ background:url(iconhttps://www.gxlcms.com/1.gif) no-repeat 8px 7px; padding:2px 3px 2px 15px; border-bottom:1px dashed #999; }/*内容区右侧样式*/#rightBlock { float: left; position: relative; font-size: 12px; margin: 0px 20px 5px 20px; width: 510px;}#rightBlock div{ position:relative; margin:20px 0px 30px 0px;}#rightBlock div h3{ border-bottom:1px dashed #999; padding-bottom:5px; margin-bottom:5px; font-size:15px;}#rightBlock div h3 a:link,#rightBlock div h3 a:visited{ color: #662900; text-decoration: none;}#rightBlock div h3 a:hover{ color:blue;}#rightBlock div p.author{ margin: 0px; text-align: right; color: #888; padding: 0px 5px 2px 0px;}/*脚注样式*/#footer { clear: both; text-align: center; background-color: #DAEEFF; margin: 0px; padding: 0px; color: #004A87;}#footer p{ padding:2px; margin:0px;}
查看更多关于CSS+DIV练手-博客_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did102284