CSS+DIV练手-博客
前些天做网站，前台样式手生得很，所以赶紧找几个实例做一做，这是一个博客首页，今天练手用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"></p>
<p id="author">我的练手CSS的BLOG</p>
</div>
<div id="linkBlock">
<h4><span>活力地带</span></h4>
<ul>
<li><img src="1.gif"> <a href="#">个人首页</a></li>
<li><img src="3.gif"> <a href="#">控制面板</a></li>
<li><img src="4.gif"> <a href="#">我的文章</a></li>
<li><img src="5.gif"> <a href="#">我的相册</a></li>
<li><img src="6.gif"> <a href="#">我的圈子</a></li>
<li><img src="2.gif"> <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>
做一遍，感觉舒服多了。