HTML实战训练(1)—

本人新手，在学习了近一个月HTML之后第一次进行了实战项目，写个博客主要是想记录一下自己的学习路程，欢迎高手指出缺点

本次实战训练主要是运用自己所学知识写出美站库的界面，选择美站库的原因主要是因为其界面简洁，适合初学者练习。

准备事项:

美站库（http://www.jilalin.com/）

DW CS6

Firefox

相关图片素材

美站库的界面简洁，主要分为上、中、下三个部分；上部又可以分为上、中、下，中间又可分为左边和右边。

这里我先构造出主要的类名和id
<style type="text/css">
body {margin: 0
}
.header {background: url(top_bg.jpg) repeat-x;height: 452px
}
.main {
width: 100%
}
.main1 {
height: 850px;
width: 920px;
margin: auto
}
.bottom {background: url(footer_bg.jpg) repeat-x;height: 100px
}
#auto {margin: 0 auto;width: 980px
}
</style>

这里的背景为什么用repeat-x（纵向平铺）呢？打开美站库网站在保存背景图片时可以发现，其背景图片都是长条状的图片，也就是说，这个网站的背景是通过纵向平铺构成的。

这里我解释一下auto的作用，auto里面设定了外边距上下为0，左右对齐（即居中），设置宽度与主体内容对齐。省去在div中重复写相同代码的麻烦。

这里我先向大家展示一下头部代码：

<div class="header"><div id="auto" class="top"><div class="logo"><h1> <img src="logo.png"> <span>炫美网站大全</span> </h1></div><div class="search"><form><input class="text" type="text"><input class="sumbit" value="搜索" type="submit"></form></div></div><div class="nav" id="auto"><ul><a href=""><li> 首页 </li></a> <a href=""><li> 提交站点 </li></a></ul></div><div class="run" id="auto"><div class="run_bg"> <img src="img1.jpg"></div><div class="run_text"><dl><dt>炫美网站，尽在美站库</dt><dd>本网站收集互联网上各种炫美网站......</dd><a href=""><dd>查看更多</dd></a></dl></div></div>
</div>

这里我要说一下，头部的logo和search都用了float（浮动），否则不能到一行去。后面出现的float也都是这个原因，如果有用到clean，我再解释一下。

顺便提一下，这里用<h>标签是为了增加权重，因为“炫美网站大全”是网站关键字。

<h1> <img src="logo.png"> <span>炫美网站大全</span> </h1>

好了，对于头部代码，我就挑重点的说了一下。接下来是主体部分（分为左边（leftBody）和右边（rightBody））：

<div class="main"><div class="main1"><div class="leftBody"><div class="left1"><h2>美站库</h2><p>美站库是<a href="">web90后</a>web玖零后部落开课啦（群517386559）！</p></div><div class="left2"><h2>90站点</h2><ul><li class="l_li"><a href=""><img src="data:image_04.jpg"></a><p>就是这么酸爽</p></li><li class="r_li"><a href=""><img src="data:image_04.jpg"></a><p>就是这么酸爽</p></li><li class="l_li"><a href=""><img src="data:image_04.jpg"></a><p>就是这么酸爽</p></li><li class="r_li"><a href=""><img src="data:image_04.jpg"></a><p>就是这么酸爽</p></li><li class="l_li"><a href=""><img src="data:image_04.jpg"></a><p>就是这么酸爽</p></li><li class="r_li"><a href=""><img src="data:image_04.jpg"></a><p>就是这么酸爽</p></li></ul></div><div class="left3"><a href="">查看更多..</a></div></div><div class="rightBody"><div><h2>吐槽</h2></div><div class="right1"><ul><li><a href="">吐槽模式一开启</a></li><li>不要和我比懒，我懒得和你比！</li></ul><ul><li><a href="">吐槽模式二开启</a></li><li>大部分人一辈子只做三件事：自欺、欺人、被人欺。</li></ul><ul><li><a href="">吐槽模式三开启</a></li><li>没钱的时候，在家里吃野菜；有钱的时候，在酒店吃野菜……</li></ul></div><div class="right2"><ul><li class="left"><h3>使劲吐</h3><p>吐你一脸</p></li><li class="left"><h3>赶紧喝</h3><p>楼上刚吐的</p></li><li class="right" style=""><img src="twitter.png"></li><li class="right"><img src="twitter.png"></li></ul></div></div></div>
</div>

相信大家看了这么多代码也困了，毕竟我是第一次写HTML的代码，很多地方都不熟练，所以写的代码显得很冗余，高手勿喷

底部代码就不单独Po出来了，就只有两行文本而已。

这次实战练习给我自己最大的收获就是关于整体布局的把握，真的，看再多的书和视频，还不如自己亲自动手做一做。那些宽度高度调起来真的很繁琐，但是调好了，到了预期效果，心里的成就感还是满满的！话说我这两天眼睛都快看瞎了，有人愿意提供一下 CS6的护眼的配色方案吗？小弟在这里谢谢啦！

差点忘了，我还有一点点小问题没有解决

这里两只小鸟我我一直移不上去，不知道是哪里出问题了，希望大神指教。

最后，欢迎大家提问、指正，希望共同进步！(PS:上面代码中的图片都是本地保存的,下面我改成了网址链接了)

下面是全部代码：

<!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>
<style type="text/css">
body {margin: 0
}
.header {background: url(http://www.jilalin.com/images/top_bg.jpg) repeat-x;height: 452px
}
.top {height: 100px;
}
.top h1 span {float: right;color: #CCC;font-size: 14px
}
.top .logo {width: 291px;padding: 10px 0 0 25px;float: left
}
.top .search {display: block;float: right;right: 0px;top: 38px;padding-top: 40px
}
.search .text {width: 180px;height: 15px;padding: 5px;border: 1px solid #0B0E10;background: #161B1F;color: #FFF;font-size: 14px
}
.search .sumbit {height: 28px;width: 80px;cursor: pointer
}
#auto {margin: 0 auto;width: 980px
}
.nav {height: 50px;
}
.nav ul {display: block;margin: auto;list-style: none
}
.nav ul li {float: left;width: 100px;height: 50px;padding-top: 13px
}
.nav a {font-size: 13px;font-weight: bold;color: #000
}
.nav a:hover {color: #FFF;background-image
}
.run {margin-top: 60px
}
.run .run_bg {clear: both;float: left;width: 300px;padding-top: 40px;padding-left: 35px
}
.run .run_text {padding-top: 10px;padding-left: 40px;float: left;line-height: 50px;color: #FFF;text-align: left
}
.run_text dt {padding-left: 40px;font-size: 24px;font-weight: bold
}
.run_text a {font-weight: bold;color: #FFF
}
.main {width: 100%
}
.main1 {height: 850px;width: 920px;margin: auto
}
.main1 .leftBody {float: left;width: 620px;height: 850px;
}
h2 {margin: 25px 0 20px 0;font-size: 24px;
}
.leftBody p {font-size: 13px;
}
.leftBody .left1 p a {text-decoration: none;color: #03F
}
.leftBody .left2 ul {list-style: none;margin: 0;padding: 0
}
.leftBody .left2 ul li {width: 270px;height: 170px;background: #F1F2EA;border: 1px solid #D5D7CA;padding: 6px;margin: 0 25px 25px 0;
}
.leftBody .left2 ul li p {font-size: 16px;color: black;margin-top: 5px;font-weight: bold;
}
.leftBody .left2 ul .l_li {float: left
}
.leftBody .left2 ul .r_li {float: right
}
.leftBody .left3 a {background: url(http://www.jilalin.com/images/default.png);clear: both;margin: 0;float: left;width: 103px;height: 27px;text-align: center;color: #FFF;font-weight: bold;font-size: 18px;text-decoration: none
}
.leftBody .left4 {clear: both;float: left;width: 64px;height: 23px;margin: 0;padding: 0
}
.main1 .rightBody {float: right;width: 240px;height: 850px;
}
.main1 .rightBody .right1 ul {list-style: none;padding: 0;height: 70px;border-bottom: 1px dashed #ccc;
}
.main1 .rightBody .right1 ul li {font-size: 13px
}
.main1 .rightBody .right1 ul a {color: #03F;text-decoration: none;font-weight: bold
}
.right2 {margin: 0
}
.main1 .rightBody .right2 ul {padding-left: 0px;
}
.left {width: 120px;padding: 0px;float: left;clear: both
}
.right {width: 65px;padding-right: 25px;padding-bottom: 10px;float: right;margin: 0
}
.bottom {background: url(http://www.jilalin.com/images/footer_bg.jpg) repeat-x;height: 100px;
}
.bottom p {text-align: center;padding-top: 15px
}
.bottom .p1 {padding-top: 0px;color: #FFF;font-size: 13px
}
.bottom p a {color: #FFF;font-size: 14px;padding-left: 15px;padding-top: 15px
}
ul {list-style: none
}
</style>
</head><body>
<div class="header"><div id="auto" class="top"><div class="logo"><h1> <img src="http://www.jilalin.com/images/logo.png"/> <span>炫美网站大全</span> </h1></div><div class="search"><form><input class="text" type="text" /><input class="sumbit" type="submit" value="搜索" /></form></div></div><div class="nav" id="auto"><ul><a href=""><li> 首页 </li></a> <a href=""><li> 提交站点 </li></a></ul></div><div class="run" id="auto"><div class="run_bg"> <img src="http://www.jilalin.com/images/img1.jpg" /></div><div class="run_text"><dl><dt>炫美网站，尽在美站库</dt><dd>本网站收集互联网上各种炫美网站......</dd><a href=""><dd>查看更多</dd></a></dl></div></div>
</div>
<div class="main"><div class="main1"><div class="leftBody"><div class="left1"><h2>美站库</h2><p>美站库是<a href="">web90后</a>web玖零后部落开课啦（群517386559）！</p></div><div class="left2"><h2>90站点</h2><ul><li class="l_li"><a href=""><img src="http://www.jilalin.com/images/image_04.jpg" /></a><p>就是这么酸爽</p></li><li class="r_li"><a href=""><img src="http://www.jilalin.com/images/image_04.jpg" /></a><p>就是这么酸爽</p></li><li class="l_li"><a href=""><img src="http://www.jilalin.com/images/image_04.jpg" /></a><p>就是这么酸爽</p></li><li class="r_li"><a href=""><img src="http://www.jilalin.com/images/image_04.jpg" /></a><p>就是这么酸爽</p></li><li class="l_li"><a href=""><img src="http://www.jilalin.com/images/image_04.jpg" /></a><p>就是这么酸爽</p></li><li class="r_li"><a href=""><img src="http://www.jilalin.com/images/image_04.jpg" /></a><p>就是这么酸爽</p></li></ul></div><div class="left3"><a href="">查看更多..</a></div></div><div class="rightBody"><div><h2>吐槽</h2></div><div class="right1"><ul><li><a href="">吐槽模式一开启</a></li><li>不要和我比懒，我懒得和你比！</li></ul><ul><li><a href="">吐槽模式二开启</a></li><li>大部分人一辈子只做三件事：自欺、欺人、被人欺。</li></ul><ul><li><a href="">吐槽模式三开启</a></li><li>没钱的时候，在家里吃野菜；有钱的时候，在酒店吃野菜……</li></ul></div><div class="right2"><ul><li class="left"><h3>使劲吐</h3><p>吐你一脸</p></li><li class="left"><h3>赶紧喝</h3><p>楼上刚吐的</p></li><li class="right" style=""><img src="http://www.jilalin.com/images/twitter.png" /><li class="right"><img src="http://www.jilalin.com/images/twitter.png" /></li></ul></div></div></div>
</div>
<div class="bottom"><p><a href="">首页</a> <a href="">美站</a> <a href="">酷文</a> <a href="">联系我们</a></p><p class="p1" >Copyright &copy; 2014 | <a href="">私房库</a></p>
</div>
</body>
</html>

HTML实战训练(1)——美站库相关推荐

团队作业第六次——团队Github实战训练
作业格式课程名称:软件工程1916|W(福州大学) 作业要求:团队作业第六次-团队Github实战训练团队名称:葫芦娃队作业目标:确定和分析选题,绘制评审表 github地址:https://g ...
Action Golf 四个魔法球实战训练系列_huatuo_新浪博客
Action & Golf 四个魔法球实战训练系列_huatuo_新浪博客
Logistics回归数据集（testSet.txt）《机器学习实战》【美】Peter Harrington python3.6+pycharm完美实现代码
若你需要这个数据集,直接新建一个.txt文件,将这里的数据全部拷贝过去即可,下面为这本书<机器学习实战>[美]Peter Harrington 第五章 Logistics 回归使用 ...
关于站库分离渗透思路总结
0x00 前言看到了某篇关于站库分离类型站点相关的讨论,想总结下信息收集的技巧. 0x01 正文关于站库分离类型站点网上暂时没有找到总结性的文章,所以想尝试记录下关于站库分离类型站点的渗透思路. ...
关于站库分离渗透思考总结
0x00 前言看到了某篇关于站库分离类型站点相关的讨论,想总结下信息收集的技巧. 0x01 正文关于站库分离类型站点网上暂时没有找到总结性的文章,所以想尝试记录下关于站库分离类型站点的渗透思路. ...
《SuperMap GIS二次开发MVC实战训练---江海区慢性病防治院系统》项目研发阶段性总结
<SuperMap GIS二次开发MVC实战训练-江海区慢性病防治院系统>项目研发阶段性总结作者:爱怡同学本次任务完成时间:2019年1月1日-2019年1月10日开发工具与关键技术 ...
python语言训练教程_PYTHON零基础快乐学习之旅(K12实战训练)
本书在讲解Python编程语言语法概念的同时融入了相关的科学知识.随着人工智能技术的飞速发展,编程教育越来越重要.编程的核心是算法和逻辑,是通往未来的语言.近期,国务院发布<新一代看人工智能 ...
质量管理系统_晟通集团内训 | 质量管理系统提升实战训练
点击上方蓝字"姜宏锋决胜供应链",关注我们! 晟通科技集团有限公司自2003年成立以来,一直坚持研发创新,不走寻常路. 坚持与优秀企业和优秀人士合作,与他们相互支持.相互学习,共同 ...
python原创第十四篇~判断，循环实战训练+答案
2017-12-07 09:23:55 December Thursday the 49 week, the 341 day #原创第十四篇~判断,循环实战训练题目:一个整数,它加上100后是一个完 ...

HTML实战训练(1)——美站库

HTML实战训练(1)——美站库相关推荐

最新文章

热门文章