CSS+DIV练手-博客_html/css_WEB-ITnose

前些天做网站，前台样式手生得很，所以赶紧找几个实例做一做，这是一个博客首页，今天练手用css+div仿的。

截图：

CSS+HTML源代码

<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>            <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="%E2%80%9C#%E2%80%9D">网易博客</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">csdn博客</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">博客园</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">QQ空间</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">51com</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">Helloword</a></li>                        </ul>                    </div>                    <div id="categoryBlock" class="left">                     	<h4><span>我的文章分类</span></h4>                     	<ul>                            <li><a href="%E2%80%9C#%E2%80%9D">个人随笔</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">美术设计</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">我的文章</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">我的相册</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">我的圈子</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">给我留言</a></li>                        </ul>                    </div>                    <div id="listBlock" class="left">                      	<h4><span>文章列表</span></h4>                      	<ul>                            <li><a href="%E2%80%9C#%E2%80%9D">今天很高兴</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">明天很高兴</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">我是最棒的</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">我会幸福的</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">我会快乐的</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">我会哈哈哈</a></li>                       </ul>                    </div>                      <div id="commentBlock" class="left">                          <h4><span>最新评论</span></h4>                          <ul>                            <li><a href="%E2%80%9C#%E2%80%9D">小王：《23232》真好</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">小王：《23232》真好</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">小王：《23232》真好</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">小王：《23232》真好</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">小王：《23232》真好</a></li>                            <li><a href="%E2%80%9C#%E2%80%9D">小王：《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>    

做一遍，感觉舒服多了。