话说：
各位读者朋友，晚上好！我们一起经历了JDBC、Serlvet、各种框架、然后又回归到面向对象，这次我们将回归到页面、回归到数据库，把基础在夯实夯实。
今天目标，利用HTML基础知识，仿照腾讯公益网【旧版】练习下基本标签。为什么用旧版呢，因为素材现成滴。据说，用纯txt文本写，写多了，就会特别的熟练，这个在下很相信，也真的愿意实践，基础可以这么练习的。不论多么基础，只有掌握得灰常熟练，掌握得想都不用想，就像骑车、敲键盘一样，才算真的熟练了。对于普通人来说，基本就是熟练度的差别，熟练度表现出来的就是是否高效。
目录
一、整体效果图
二、布局思路
三、页面代码
四、CSS样式
五、总结
六、下期预告
开发环境：WebStorm 11
笔者跟大家一样，很喜欢捷克公司开发的这些产品，界面就非常有感觉：清爽、简洁。
开发难度 ★☆☆☆☆☆
用时：2H~3H比较合适
如果不追求精细化，再1.5H内大体效果出来，也是杠杠滴。
一、整体效果图
当然，我们在回头看看现在的“腾讯公益”首页：
在下就喜欢这种很简洁的风格，不过笔者是那种看起来比较“复杂”类型滴，小的是美好的，这是俺追求的目标。
二、布局思路
兵马未动，粮草先行。代码未写，接口先行。网页未写，布局先行
怎么做之前，先搞清楚究竟要做什么。这是笔者创作的顺口溜，怎么样？
一般接触HTML时候，如果先从后端开始，会觉得比较简单，所以学起来也没谁会多说怎么布局的问题，所以，偶尔会怀疑自己的布局到底合理否？是不是最优布局？网站很多，供我们学习的资源也很多，看看源码，学学布局，也不错。
这是笔者开始的布局：
一般网页都是上中下、上中（左右）下型吧？所以，先画个框框，然后填鸭式滴补充内容喽。
三、页面代码
献丑了
TecentLove.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>腾讯公益</title>
<!--引入外部标签-->
<link type="text/css" rel="stylesheet" href="css/TecentLove.css"/>
</head>
<body>
<div id="allContent">
<div id="top">
<img src="images/TencentImg/nav_logo.jpg" style="width: 176px;height: 13px">
<div id="topBg">
<ul style="font-size: 15px">
<li >导航</li>
<li>设为首页</li>
<li>加入收藏</li>
<li>手机腾讯网</li>
<li>腾讯网首页</li>
</ul>
</div>
</div>
<div id="topContent">
<img src="images/TencentImg/logo.gif" style="margin: 4px 10px 10px 72px;" >
<!--整体导航栏-->
<div id="wholeNav">
<div id="wholeNav1">
<dl>
<dt>专区</dt>
<dd>腾讯公益慈善基金会 </dd>
<dd>新闻动态 项目介绍 </dd>
</dl>
</div>
<div id="wholeNav2">
<dl>
<dt>社区</dt>
<dd>爱心论坛 公益博客</dd>
<dd>评论观察 捐赠帮助 </dd>
</dl>
</div>
<div id="wholeNav3">
<dl>
<dt>行动</dt>
<dd>在线捐赠 志愿活动 </dd>
<dd>月捐计划 成长体系 </dd>
</dl>
</div>
<div id="wholeNav4">
<dl>
<dt>资讯</dt>
<dd>公益资讯 活动报道 </dd>
<dd>明星公益 公益讲堂 </dd>
</dl>
</div>
</div>
</div>
<!--中间部分 分为左边和右边-->
<div id="middleBody">
<div id="leftContent">
<!--腾讯公益平台-->
<div id="gongyipingtai">
<img src="images/TencentImg/top_tit.gif">
</div>
<div id="tenYearsHappy">
</div>
<div id="dongTai">
<table style="border: rgba(172, 224, 173, 0.8);">
<tr>
<td style="color: rgba(254, 124, 0, 0.8);font-weight: bolder">正在进行的捐赠</td>
<td style="font-weight: bolder;color: green">爱心网友动态</td>
</tr>
<tr>
<td>
<img src="images/TencentImg/loveplan_log.jpg">
</td>
<td style="border-bottom-style: dotted;border-bottom-color: rgba(203, 203, 203, 0.8)">
<span style="font-weight: bolder">腾讯月捐计划</span><br/>
月捐10元，点滴付出，汇成爱海。小额捐赠，长期支持，大家一起为公益加油！…
<a href="#" style="color: green">[了解详情]</a>
</td>
</tr>
<tr>
<td>
<img src="images/TencentImg/tencent_log.gif">
</td>
<td>
<span style="font-weight: bolder">网救童心月捐行动</span><br/>
腾讯网友爱心基金的首个公益项目——"网救童心"计划，专注贫困先天性心脏病儿童救助…
<a href="#" style="color: green"> [我要参与]</a>
</td>
</tr>
</table>
</div>
<!--设置明星模块-->
<!--填充漂浮空白-->
<div style="height: 250px"></div>
<div id="star1">
<span>公益明星</span>
<!-- <img src="images/TencentImg/titbg2.jpg">-->
</div>
<!--<div id="star2">
</div>-->
<div id="star3">
<table cellspacing="10px" cellpadding="10px">
<tr>
<td>
<img src="images/TencentImg/46154672.png">
</td>
<td>
<img src="images/TencentImg/45434695.png">
</td>
<td>
<img src="images/TencentImg/46154671.png">
</td>
<td>
<img src="images/TencentImg/46154670.png">
</td>
</tr>
<tr>
<td>壹基金入驻上海蜡像馆 </td>
<td>赵雅芝获腾讯年度公益艺人 </td>
<td>李亚鹏赴成都为"嫣然"募资 </td>
<td>明星志愿者探京打工子弟学校 </td>
</tr>
<tr>
<td>
<img src="images/TencentImg/46155287.png">
</td>
<td>
<img src="images/TencentImg/46154667.png">
</td>
<td>
<img src="images/TencentImg/46154669.png">
</td>
<td>
<img src="images/TencentImg/44601738.png">
</td>
</tr>
<tr>
<td>谭晶专注志愿服务领域 </td>
<td>张国立夫妇启动国立爱心基金 </td>
<td>王志欲将后半生献公益 </td>
<td>章子怡艾滋病日拥抱艾滋患者</td>
</tr>
</table>
</div>
</div>
<div id="rightContent">
<div id="qq">
<form action="#" method="post">
<table cellpadding="5px" cellspacing="5px">
<tr>
<td colspan="2" align="center">
<img src="images/TencentImg/logbefor.jpg">
</td>
</tr>
<tr>
<td style="font-size: 7px">QQ号码:</td>
<td>
<input type="text"/>
</td>
</tr>
<tr>
<td style="font-size: 7px">QQ密码:</td>
<td>
<input type="password"/>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<img src="images/TencentImg/btn_login.gif">
</td>
</tr>
<tr>
<td colspan="2" style="border-top-style: ridge;border-top-color:rgba(164, 225, 122, 0.8) ">
世界的改变不是少数人做了很多，而是每个人都做了一点点。伸出手，让我们把爱传递。
</td>
</tr>
</table>
</form>
</div>
<div id="info">
<!--这样不便于控制底纹 -->
<!-- <h6 style="color: green;font-size: larger" >信息公告</h6>-->
<!-- <ul style="list-style: none">
<li> </li>
<li></li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li></li>
<li> </li>
</ul>-->
<table cellspacing="9px" >
<tr>
<td colspan="3" style="color: green;font-size: larger;border-bottom-style: solid;border-bottom-color:rgba(164, 225, 122, 0.8)">信息公告</td>
</tr>
<tr>
<td colspan="3" style="font-weight: bolder;font-size: 14px">[招聘] 真爱梦想招聘5名员工</td>
</tr>
<tr>
<td colspan="3" style="font-weight: bolder;font-size: 14px;border-bottom-style: dotted;border-bottom-color: rgba(203, 203, 203, 0.8)">[招聘] 腾讯招公益项目经理 </td>
</tr>
<tr>
<td colspan="3">[答疑] 什么是QQ农场爱心果？</td>
</tr>
<tr>
<td colspan="3">[答疑] 我的捐款在哪里查询？</td>
</tr>
<tr>
<td colspan="3">[答疑] 如何查询到爱心积分？</td>
</tr>
<tr>
<td colspan="3" style="border-bottom-style: dotted;border-bottom-color: rgba(203, 203, 203, 0.8)">[说明] 点亮公益成长图标方法</td>
</tr>
<tr>
<td colspan="3">[反馈] 玉树支书感谢腾讯网友</td>
</tr>
<tr>
<td colspan="3" style="border-bottom-style: dotted;border-bottom-color: rgba(203, 203, 203, 0.8)">[招标] 儿基会30周年庆祝活动</td>
</tr>
<tr>
<td >
<img src="images/TencentImg/btn1.gif">
</td>
<td>
<img src="images/TencentImg/btn2.gif">
</td>
<td>
<img src="images/TencentImg/btn3.gif">
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="bottom">
<span>
腾讯公益慈善基金会 | 关于腾讯 | About Tencent | 服务条款 | 广告服务 | 腾讯招聘 | 客服中心 | 网站导航
</span><br/>
<span>Copyright 1998-2011 Tencent. All Rights Reserved</span><br/>
<span>腾讯公司 版权所有</span>
</div>
</div>
</body>
</html>四、CSS样式
TecentLove.css
*{
margin: 0px;
padding: 0px;
}
/*最外围的整体*/
#allContent{
/* border: 2px solid purple;*/
width: 1355px;
height: 630px;
}
/*最顶部*/
#top{
/* border: 2px solid red;*/
width: 1353px;
height: 20px;
background-image: url("../images/TencentImg/topbg1.jpg");
}
/*头部目录*/
#topContent{
/* border: 2px solid red;*/
width: 1353px;
height: 40px;
/*添加图片*/
background-image: url("../images/TencentImg/navbg1.png");height: 70px;
background-repeat: no-repeat;
background-size: cover;
}
/*中间整体部分（包含左边leftContent和右边rightContent）*/
#middleBody{
/* border: 2px deeppink dotted;*/
width: 1353px ;
height:600px;
background-image: url("../images/TencentImg/logbefor_bk.jpg");
background-size: cover;
background-repeat: no-repeat;
}
/*中间顶部图片*/
#gongyipingtai{
/* border: 2px deeppink dotted;*/
text-align: center;
}
/*中间左半部分*/
#leftContent{
margin: -25px 0px 0px 0px;
/* border: 2px solid red;*/
width: 1100px;
height: 600px;
float: left;
}
/*中间右半部分*/
#rightContent{
margin: -25px 0px 0px 0px;
/* border: 2px solid red;*/
width: 238px;
height: 600px;
float: right;
z-index: 2;
}
/*底部*/
#bottom{
/* border: 2px solid red;
width: 1353px;
height:70px;*/
margin-top: 50px;
/*设置字体样式*/
text-align: center;
color: rgba(189, 197, 170, 0.8);
/*设置背景色*/
background-image: url("../images/TencentImg/footbk.jpg");
}
/*最顶部最右端漂浮样式*/
ul li{
float: right;
/* margin: 10px 20px 10px 0px;*/
margin: 10px;
font-size: 15px;
}
#topBg{
/* border: 1px solid yellow;*/
width: 480px;
height: 40px;
margin: -27px 15px 10px 830px;
}
/*设置整体导航栏漂浮样式*/
#wholeNav{
float: right;
/* border: 2px black dotted;*/
width: 750px;
height: 65px;
margin: -70px 180px 55px 20px;
}
/*四个独立div*/
#wholeNav1{
/* border: 2px blue dotted;*/
float: right;
}
#wholeNav2{
/* border: 2px blue dotted;*/
float: right;
}
#wholeNav3{
/* border: 2px blue dotted;*/
float: right;
}
#wholeNav4{
/* border: 2px blue dotted;*/
float: right;
}
#wholeNav1,#wholeNav2,#wholeNav3,#wholeNav4{
margin: 3px 18px 3px 25px;
}
#wholeNav dl dd{
padding: 4px;
}
/*设置字体间距*/
dt{
color: white;
font-size:18px;
}
dd{
color: white;
font-size: 13px;
}
/*设置10年祝福div*/
#tenYearsHappy{
float: left;
/* border: 2px blue dotted;*/
width:460px;
height: 230px;
background-image: url("../images/TencentImg/imgview_2.jpg");
background-size: contain;
background-repeat: no-repeat;
margin: 0px 0px 0px 60px;
}
/*设置动态区域-leftContent右边部分*/
#dongTai{
float: left;
border: 1px rgba(172, 224, 173, 0.8) groove;
border-style: outset;
width: 550px;
height: 230px;
background-size: cover;
}
/*设置公益明星模块*/
#star1{
/* border: 2px yellow dotted;*/
width: 1200px;
height: 20px;
z-index: 1;
background-image: url("../images/TencentImg/titbg2.jpg");
background-repeat: no-repeat;
}
#star1 span{
font-size: larger;
font-weight: bolder;
color: rgba(72, 167, 47, 0.8);
margin: 10px 10px 10px 30px;
}
#star2{
/* border: 2px yellow dotted;*/
width: 80px;
height: 20px;
float: left;
z-index: 2;
}
#star3{
text-align: center;
/*border: 5px solid yellow;*/
width: 1097px;
height: 400px;
padding-top: 15px;
margin-left: 150px;
}
input{
width: 120px;
height: 23px;
}
/*设置QQ登录框样式*/
#qq{
border: 3px rgba(21, 229, 48, 0.8) solid;
width: 200px;
height: 260px;
}
/*设置信息公告样式*/
#info{
margin-top: 10px;
border: 3px rgba(21, 229, 48, 0.8) solid;
width: 200px;
height: 320px;
}
#info li{
text-align: left;
}
#info table tr td {
font-size: 10px;
}
图片等素材就省略了吧。
五、总结
1.如何做一个相对简单的页面呢？
1）网页布局。布局先行，战略先行。div布局，显示出边框，便于调整；
2）技术上“凌波微步”。对网页中要用到的技术和用时做到胸有成竹；
3）对常用属性要信手拈来；对元素的选取要“快、准、狠”；在下目前给自己打3分；
4）耐心。网页写起来，细节多；不过写一点就有明确的效果，感觉也很好。对属性不熟练或者对节点选取不精准，要有耐心，多练，多记忆，就好了；
5）如果你觉得有趣，就会很好玩！带着空杯心态去感受，就有初学的那种惊喜和美好！
2.DIV
能否很好理解margin padding是影响网页布局快慢的非常重要元素之一；多个div，注意层次问题，用到z-index属性；
3.图片路径问题
在CSS样式里面，设置图片路径：
background-image: url("/com.hmc.myweb01/images/TencentImg/navbg1.jpg");这样就容易找不到，不知道为什么，要这么才能找到：
background-image: url("../images/TencentImg/navbg1.jpg");但是在页面标签中图片路径可以直接这么写：
<img src="images/TencentImg/imgview_2.jpg">路径出现问题，无非就这几种类型，尝试下下就可以啦。
六、下期预告
好了，各位读者，笔者买了一本Java项目实战方面的书，嘿嘿，陆续就把这上边的案例动手实践，然后整理发表，希望不涉及侵权哈，书很漂亮，代码都是彩色的。另外，有关MySQL数据库的基础总结博客也会穿插华丽丽登场。下期再会！
对了，代码是彩色的。
扫一扫
456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
