HTML-1-基础练习
来源：互联网 发布：audition mac 破解版 编辑：程序博客网 时间：2024/05/21 10:06
话说：
各位读者朋友，晚上好！我们一起经历了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数据库的基础总结博客也会穿插华丽丽登场。下期再会！
对了，代码是彩色的。
阅读全文
0 0
- HTML基础练习1
- HTML-1-基础练习
- 基础HTML练习
- HTML基础练习
- HTML-CSS基础练习
- 【HTML 基础练习】
- HTML基础5--浮动练习
- html练习（1）
- HTML练习-1
- HTML上机练习1
- HTML练习---第三章表单基础
- HTML巩固练习之CSS基础
- HTML巩固练习之CSS选择器基础
- SQL基础练习1
- java基础 1练习
- python基础练习1
- C++ 基础练习[1]
- java基础练习1
- Spring的AOP实现
- （安卓）自定义控件，自定义（view）中的自定义属性
- Java单例模式
- 使用git把本地文件放到github上去
- 所想
- HTML-1-基础练习
- 作业排程算法—动态规划实现
- [LeetCode] 650. 2 Keys Keyboard
- 八数码第四境界——暴力反向BFS+康托展开判重+打表+回溯记录路径
- 简书大V公然侮辱程序员群体低智商，低素质，恋尸癖！
- js和jquery中获取各种高度和宽度汇总
- Android中的Handler和AsyncTask的区别
- CoordinatorLayout 与ToolBar 和Fab实现滑动隐藏和显示的学习笔记
- 基于TCP的客户端、服务器端socket编程
