前些天做网站，前台样式手生得很，所以赶紧找几个实例做一做，这是一个博客首页，今天练手用css+div仿的。
截图：
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
CSS+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>练习CSS</title><style type="text/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(icon1.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;}</style></head> <body> <div id="container"> <div id="banner"> <ul> <li><a href="#">个人主页</a></li> <li><a href="#">控制面板</a></li> <li><a href="#">我的文章</a></li> <li><a href="#">我的相册</a></li> <li><a href="#">我的圈子</a></li> <li><a href="#">给我留言</a></li> </ul> </div> <div id="leftBlock"> <div id="authorBlock"> <p id="pic"><img src="mypic.jpg" alt="CSS+DIV练手-博客_html/css_WEB-ITnose" ></p> <p id="author">我的练手CSS的BLOG</p> </div> <div id="linkBlock"> <h4><span>活力地带</span></h4> <ul> <li><img src="1.gif" alt="CSS+DIV练手-博客_html/css_WEB-ITnose" > <a href="#">个人首页</a></li> <li><img src="3.gif" alt="CSS+DIV练手-博客_html/css_WEB-ITnose" > <a href="#">控制面板</a></li> <li><img src="4.gif" alt="CSS+DIV练手-博客_html/css_WEB-ITnose" > <a href="#">我的文章</a></li> <li><img src="5.gif" alt="CSS+DIV练手-博客_html/css_WEB-ITnose" > <a href="#">我的相册</a></li> <li><img src="6.gif" alt="CSS+DIV练手-博客_html/css_WEB-ITnose" > <a href="#">我的圈子</a></li> <li><img src="2.gif" alt="CSS+DIV练手-博客_html/css_WEB-ITnose" > <a href="#">给我留言</a></li> </ul> </div> <div id="friendlinkBlock" class="left"> <h4><span>友情链接</span></h4> <ul> <li><a href=“#”>网易博客</a></li> <li><a href=“#”>csdn博客</a></li> <li><a href=“#”>博客园</a></li> <li><a href=“#”>QQ空间</a></li> <li><a href=“#”>51com</a></li> <li><a href=“#”>Helloword</a></li> </ul> </div> <div id="categoryBlock" class="left"> <h4><span>我的文章分类</span></h4> <ul> <li><a href=“#”>个人随笔</a></li> <li><a href=“#”>美术设计</a></li> <li><a href=“#”>我的文章</a></li> <li><a href=“#”>我的相册</a></li> <li><a href=“#”>我的圈子</a></li> <li><a href=“#”>给我留言</a></li> </ul> </div> <div id="listBlock" class="left"> <h4><span>文章列表</span></h4> <ul> <li><a href=“#”>今天很高兴</a></li> <li><a href=“#”>明天很高兴</a></li> <li><a href=“#”>我是最棒的</a></li> <li><a href=“#”>我会幸福的</a></li> <li><a href=“#”>我会快乐的</a></li> <li><a href=“#”>我会哈哈哈</a></li> </ul> </div> <div id="commentBlock" class="left"> <h4><span>最新评论</span></h4> <ul> <li><a href=“#”>小王：《23232》真好</a></li> <li><a href=“#”>小王：《23232》真好</a></li> <li><a href=“#”>小王：《23232》真好</a></li> <li><a href=“#”>小王：《23232》真好</a></li> <li><a href=“#”>小王：《23232》真好</a></li> <li><a href=“#”>小王：《23232》真好</a></li> </ul> </div> </div> <div id="rightBlock"> <div class="article"> <h3><a href="#">学生节(6)_释放天性</a></h3> <p class="author">isaac @ : 2012-07-09 16:17:07</p> <p class="content">释放天性是一件很有意思的事情，也是电子系节目本身能够nb的很重要原因。主持人、各个节目都要求演员释放天性，下面是一些筹备组常用的手段 :)<br><br>1. 一个人在阳台对着外面大声喊“爸爸妈妈我爱你们”等等，演员一般到最后就会喊一些自己的东西了 :)<br>2. 男女主角相隔50米，在人多的地方大声呼喊“你能听见吗”“听见了吗？”“我爱你”<br>3. 还是露天，男女主角站在一个小圈子里面，对视3分钟。然后互相说50遍“我爱你”<br>4. 男1号跟男2号拥抱在一起说台词，直到想吐都吐不出（《包青天》里面ws和wc据说就在小树林抱了好几个晚上...上台的表演彻底放开了）<br>5. 每天晚上11点后露天排练，放开声音<br>……<br><br>每次学生节，导演组的导演们都要求入选的各个剧组进行这方面的强化训练，为的就是在台上能更好的表现自己，入戏。这些训练事后的影响自然也是多方面的 :)<br><br>1. 很多演员学生节以后性格更开朗了，参加各种面试更加放得开了<br>2. 男生越来越ws了..... 胆子越来越大<br>3. 女生嘛，更加活泼了，朋友圈子扩大了<br>4. 很多男女主角真的成了一对，娃哈哈~~~<br>……<br><br>释放天性，魅力无穷!! </p> <p class="show">浏览[1051] | 评论[5]</p> </div> <div class="article"> <h3><a href="#">学生节(6)_释放天性</a></h3> <p class="author">isaac @ : 2012-07-09 16:17:07</p> <p class="content">释放天性是一件很有意思的事情，也是电子系节目本身能够nb的很重要原因。主持人、各个节目都要求演员释放天性，下面是一些筹备组常用的手段 :)<br><br>1. 一个人在阳台对着外面大声喊“爸爸妈妈我爱你们”等等，演员一般到最后就会喊一些自己的东西了 :)<br>2. 男女主角相隔50米，在人多的地方大声呼喊“你能听见吗”“听见了吗？”“我爱你”<br>3. 还是露天，男女主角站在一个小圈子里面，对视3分钟。然后互相说50遍“我爱你”<br>4. 男1号跟男2号拥抱在一起说台词，直到想吐都吐不出（《包青天》里面ws和wc据说就在小树林抱了好几个晚上...上台的表演彻底放开了）<br>5. 每天晚上11点后露天排练，放开声音<br>……<br><br>每次学生节，导演组的导演们都要求入选的各个剧组进行这方面的强化训练，为的就是在台上能更好的表现自己，入戏。这些训练事后的影响自然也是多方面的 :)<br><br>1. 很多演员学生节以后性格更开朗了，参加各种面试更加放得开了<br>2. 男生越来越ws了..... 胆子越来越大<br>3. 女生嘛，更加活泼了，朋友圈子扩大了<br>4. 很多男女主角真的成了一对，娃哈哈~~~<br>……<br><br>释放天性，魅力无穷!! </p> <p class="show">浏览[1051] | 评论[5]</p> </div> <div class="article"> <h3><a href="#">学生节(6)_释放天性</a></h3> <p class="author">isaac @ : 2012-07-09 16:17:07</p> <p class="content">释放天性是一件很有意思的事情，也是电子系节目本身能够nb的很重要原因。主持人、各个节目都要求演员释放天性，下面是一些筹备组常用的手段 :)<br><br>1. 一个人在阳台对着外面大声喊“爸爸妈妈我爱你们”等等，演员一般到最后就会喊一些自己的东西了 :)<br>2. 男女主角相隔50米，在人多的地方大声呼喊“你能听见吗”“听见了吗？”“我爱你”<br>3. 还是露天，男女主角站在一个小圈子里面，对视3分钟。然后互相说50遍“我爱你”<br>4. 男1号跟男2号拥抱在一起说台词，直到想吐都吐不出（《包青天》里面ws和wc据说就在小树林抱了好几个晚上...上台的表演彻底放开了）<br>5. 每天晚上11点后露天排练，放开声音<br>……<br><br>每次学生节，导演组的导演们都要求入选的各个剧组进行这方面的强化训练，为的就是在台上能更好的表现自己，入戏。这些训练事后的影响自然也是多方面的 :)<br><br>1. 很多演员学生节以后性格更开朗了，参加各种面试更加放得开了<br>2. 男生越来越ws了..... 胆子越来越大<br>3. 女生嘛，更加活泼了，朋友圈子扩大了<br>4. 很多男女主角真的成了一对，娃哈哈~~~<br>……<br><br>释放天性，魅力无穷!! </p> <p class="show">浏览[1051] | 评论[5]</p> </div> </div> <div id="footer"> <p>更新时间: 2012-07-09 16:17:07 ©All Rights Reserved </p> </div> </div> </body></html>做一遍，感觉舒服多了。
立即学习“前端免费学习笔记（深入）”；
