Home >Web Front-end >HTML Tutorial >CSS DIV Practice-Blog_html/css_WEB-ITnose
CSS DIV Practice-Blog_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:33:201341browse
I was making a website a few days ago, and I was very familiar with the front-end style, so I quickly found a few examples to do it. This is a blog homepage. Today I practiced using css div to imitate it. .
Screenshot:
CSS HTML source code
<!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> I feel much more comfortable after doing it again.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS DIV practice?Flower exhibition_html/css_WEB-ITnoseNext article：CSS DIV practice?Flower exhibition_html/css_WEB-ITnose