页面练习--某个博客页面
小菜鸟制作了一个博客的页面，还请大家多多指导，批评。
效果图
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>我的博客</title> <link rel="stylesheet" type="text/css" href="css/styles.css"/> </head> <body> <!--主体容器--> <div id="container"> <!--banner:背景图片加上导航--> <div id="globallink"> <div class="banner"></div> <div class="banner_nav"> <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> <!--左侧导航链接--> <div id="parameter"> <!--作者的BLOG图片--> <div id="author"> <img src="images/mypic.jpg"/> <div>艾萨克的BLOG</div> </div> <!--博客的主要链接导航--> <div id="llinks"> <div><h4>活力地带</h4></div> <ul> <li><img src="images/1.gif"/><a href="#">个人首页</a></li> <li><img src="images/3.gif"/><a href="#">控制面板</a></li> <li><img src="images/4.gif"/><a href="#">我的文章</a></li> <li><img src="images/5.gif"/><a href="#">我的相册</a></li> <li><img src="images/6.gif"/><a href="#">我的圈子</a></li> <li><img src="images/2.gif"/><a href="#">给我留言</a></li> </ul> </div> <!--博客的文章分类--> <div id="lcategory"> <div><h4>我的文章分类</h4></div> <ul> <li><a href="#">个人随笔</a></li> <li><a href="#">美术设计</a></li> <li><a href="#">CSS样式风格</a></li> <li><a href="#">Ajax学习心得</a></li> <li><a href="#">新疆甘肃游记</a></li> <li><a href="#">学生节</a></li> <li><a href="#">职业生涯</a></li> </ul> </div> <!--最新的文章列表--> <div id="llatest"> <div><h4>最新文章列表</h4></div> <ul> <li><a href="#">学生节(6)_释放天性</a></li> <li><a href="#">学生节(5)_beep的越洋电话</a></li> <li><a href="#">学生节(4)_主持人选拔</a></li> <li><a href="#">学生节(3)_十届的电子人</a></li> <li><a href="#">学生节(2)_5秒定律永不倒</a></li> <li><a href="#">学生节(1)_综述</a></li> <li><a href="#">吃住在新疆</a></li> <li><a href="#">Ajax实现可拖动的页面</a></li> <li><a href="#">巧学巧用Flash</a></li> </ul> </div> <!--最新的评论--> <div id="lcomment"> <div><h4>最新评论</h4></div> <ul> <li><a href="#">[isaac] 关于beep的话题</a></li> <li><a href="#">[tastestory] 哈哈</a></li> <li><a href="#">[moonbow] 还是露天？</a></li> <li><a href="#">[isaac] zan :)</a></li> <li><a href="#">[bingri] 来总导这里挖坑~~</a></li> <li><a href="#">[inming] 博士加油</a></li> </ul> </div> <!--友情链接--> <div id="lfriend"> <div><h4>友情链接</h4></div> <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> <!--中间文章的内容--> <div id="main"> <!--正文文章--> <div class="article"> <h3><a href="#">学生节(6)_释放天性</a></h3> <p class="author">isaac @ 2006-12-20 16:54: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 @ 2006-12-20 16:54: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 @ 2006-12-20 16:54: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 @ 2006-12-20 16:54: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>更新时间: 2007-06-24 23:17:07 ©All Rights Reserved </p> </div> </div> </body> </html>
html的架构，主要是分清楚各个板块就行了，可以通过参考其他网站来构架！
Css代码：
1.标签的初始化，还有包括页面的整体布局
/*标签初始化*/ html,body,div,ul,li,a,img,h3,p{ margin:0px; padding:0px;} /**/ #container { margin:0px auto; width:760px; overflow:hidden; background-color:#FFF;} img { border:none;} body { background-color:#000;}
**特别注意在浮动的时候应该在父容器上加上 overflow:hidden，保证ff浏览器的整体布局
2.banner 板块
#globallink { width:760px; height:165px; margin-bottom:10px; overflow:hidden;} .banner { width:760px; height:140px; background:url(../images/banner.jpg) no-repeat;} .banner_nav{ width:760px; height:25px; overflow:hidden; background-color:#DAEEFF;} .banner_nav ul{ display:block; width:360px; height:25px; float:left; margin-left:400px;} .banner_nav li { float:left; list-style:none; width:60px; height:25px;} .banner_nav li a{ font-size:12px; line-height:25px; float:left; text-align:center; color:#004A87; text-decoration:none; _color:#004A87} .banner_nav li a:hover { color:#ffffff; text-decoration:underline; _color:#ffffff;}
**banner的图片写在了背景里面，好像不太正规，应该写成一个图片
**浮动，在父容器加上overflow:hidden
**注意页面的布局，例如导航通过计算得到Ul宽度为360px比较合理，然后margin-left：400px，ul,li标签都有浮动。
3.左侧导航链接
/*左侧导航链接 parameter*/ #parameter { width:210px; float:left; /*background-color:#666;*/ display:inline-block;} /*author*/ #author{ width:210px; background:url(../images/mypic_bg.gif) no-repeat;} #author img { display:block; width:180px; height:249px; border:1px solid #000; margin:15px auto;} #author div { font-size:16px; border-top:dotted #000 1px; width:180px; border-bottom:dotted #000 1px; margin:10px auto; text-align:center;} /*llinks*/ #llinks { width:210px;} #llinks div { width:210px; height:23px; background:url(../images/leftbg.jpg) no-repeat; line-height:23px; font-size:12px;} #llinks div h4 { display:block; margin-left:20px;} #llinks ul{ display:block; width:160px; margin:10px auto;overflow:hidden;} #llinks li { display:block; width:80px; float:left; height:20px; overflow:hidden; list-style:none;} #llinks li img { display:block; width:16px; height:14px; float:left;} #llinks li a { display:block; width:64px; height:14px; font-size:12px; color:#000; text-decoration:none;} #llinks li a:hover { color:#008CFF; text-decoration:underline;} /*我的文章分类 lcategory*/ #lcategory { width:210px; margin-top:10px;} #lcategory div { width:210px; height:23px; background:url(../images/leftbg.jpg) no-repeat; line-height:23px; font-size:12px;} #lcategory div h4 { display:block; margin-left:20px;} #lcategory ul { display:block; width:210px; overflow:hidden; margin-top:10px;} #lcategory li { display:block; width:180px; height:20px; list-style:none; float:left; border-bottom:dashed #999 1px; margin-left:15px; background:url(../images/icon1.gif) no-repeat 20px 8px;} #lcategory li a { display:block; font-size:12px; color:#000; margin-left:30px; text-decoration:none; line-height:20px;} #lcategory li a:hover { color:#008CFF; text-decoration:underline;} /*最新的文章列表 llatest*/ #llatest { width:210px; margin-top:10px;} #llatest div { width:210px; height:23px; background:url(../images/leftbg.jpg) no-repeat; line-height:23px; font-size:12px;} #llatest div h4 { display:block; margin-left:20px;} #llatest ul { display:block; width:210px; overflow:hidden; margin-top:10px;} #llatest li { display:block; width:180px; height:20px; list-style:none; float:left; border-bottom:dashed #999 1px; margin-left:15px; background:url(../images/icon1.gif) no-repeat 20px 8px;} #llatest li a { display:block; font-size:12px; color:#000; margin-left:30px; text-decoration:none; line-height:20px;} #llatest li a:hover { color:#008CFF; text-decoration:underline;} /*最新评论 lcomment*/ #lcomment { width:210px; margin-top:10px;} #lcomment div { width:210px; height:23px; background:url(../images/leftbg.jpg) no-repeat; line-height:23px; font-size:12px;} #lcomment div h4 { display:block; margin-left:20px;} #lcomment ul { display:block; width:210px; overflow:hidden; margin-top:10px;} #lcomment li { display:block; width:180px; height:20px; list-style:none; float:left; border-bottom:dashed #999 1px; margin-left:15px; background:url(../images/icon1.gif) no-repeat 20px 8px;} #lcomment li a { display:block; font-size:12px; color:#000; margin-left:30px; text-decoration:none; line-height:20px;} #lcomment li a:hover { color:#008CFF; text-decoration:underline;} /*友情链接 lfriend*/ #lfriend { width:210px; margin-top:10px;} #lfriend div { width:210px; height:23px; background:url(../images/leftbg.jpg) no-repeat; line-height:23px; font-size:12px;} #lfriend div h4 { display:block; margin-left:20px;} #lfriend ul { display:block; width:210px; overflow:hidden; margin-top:10px;} #lfriend li { display:block; width:180px; height:20px; list-style:none; float:left; border-bottom:dashed #999 1px; margin-left:15px; background:url(../images/icon1.gif) no-repeat 20px 8px;} #lfriend li a { display:block; font-size:12px; color:#000; margin-left:30px; text-decoration:none; line-height:20px;} #lfriend li a:hover { color:#008CFF; text-decoration:underline;}
**左侧的导航和右侧的正文部分，实现效果应该在两个div上 加上 display:inline-block;否则排版有问题，并且在父容器上加上overflow:hidden。因为两个都是块元素，但是要横排显示，所以加上display:inline-block。(不知道对不对这样的解释)
**这个左侧的版块的几个小版块效果都差不多，可以简化代码
4.右侧正文
/*右侧main*/ #main { margin-left:20px; width:510px; /*background-color:#990;*/ display:inline-block;/**/ margin-top:10px;} /*article*/ .article h3{ font-size:15px; border-bottom:1px dotted #999999;} .article a { color:#662900; text-decoration:none;} .article a:hover { color:#0072FF;} .author { color:#888888; text-align:right;} .content{ margin-top:20px; font-size:12px;} .show { margin:20px; font-size:12px;}
**字体的效果风格，可以多多参考网上其他网站的风格
5.底部
/*footer 页面底部*/ #footer { background-color:#DAEEFF; width:760px; height:20px;} #footer p { font-size:12px; line-height:20px; text-align:center;}
Css编写的几个点：
1.页面的标签初始化，方便架构
2.各个板块根据效果图来做，可以通过计算宽度等方式来实现
3.注意浮动，在父容器加上overflow:hidden
4.两个div横排显示，float：left ，排版不对加上display:inline-block，又或者浮动之后有间距，例如ie6的双倍间距，则可以加上display:inline
5.尽量做到各个浏览器的兼容，CSS hack
s
You are never too old to set another goal or to dream a new dream!!!
