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

最新推荐文章于 2023-01-16 13:07:23 发布
最新推荐文章于 2023-01-16 13:07:23 发布
阅读量1.4k 收藏 3
点赞数 1
分类专栏： HTML 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzp961224/article/details/51731723
版权

        本人新手，在学习了近一个月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="image_04.jpg"></a>
												<p>就是这么酸爽</p>
										</li>
										<li class="r_li"><a href=""><img src="image_04.jpg"></a>
												<p>就是这么酸爽</p>
										</li>
										<li class="l_li"><a href=""><img src="image_04.jpg"></a>
												<p>就是这么酸爽</p>
										</li>
										<li class="r_li"><a href=""><img src="image_04.jpg"></a>
												<p>就是这么酸爽</p>
										</li>
										<li class="l_li"><a href=""><img src="image_04.jpg"></a>
												<p>就是这么酸爽</p>
										</li>
										<li class="r_li"><a href=""><img src="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>


皮蛋瘦肉没有肉
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML与CSS实战练习——全国大学生四六级报名网的仿写
weixin_44029057的博客
12-13 1162
HTML与CSS实战练习 学了不久的基础中的基础了，今天就打算将理论转换为实践。下面是我仿造全国大学生四六级报名网仿写的网页。 [全国大学生四六级报名网](http://cet.etest.net.cn/) 步骤： 观察网页，想好如何布局。 做好准备工作，用HTML搭建一个大致的结构。 逐步完善每一个板块的内容。 PS：注意从整体到局部，这样不会出现太大的问题。 HTML代码部分 &lt...
HTML/CSS实战训练（仿新浪网页）
giserhfbuie的博客
03-14 2191
学了两天的HTML/CSS了，这是第一次参与实战做网页，发现将零碎知识点串在一起很重要，要不然还是不知道怎么写，而且深刻感受到了前端的不易，虽然前端逻辑简单，但实际上手却有很多疑问和考虑的点，不过幸好通过不断的尝试做出来了。在用CSS选择器时，一定要注意是块级元素还是行内元素，它们之间的特点，margin和padding是对哪个标签使用的，float使用完毕对齐后，要在div标签中加入<div style="clear:both;">，这样其他边框才不会改变。另外，对于行内元素来说，是不能直接控
HTML案例练习一
weixin_30377461的博客
07-26 179
发现其实JS也是挺容易的，也挺好玩的，写的一个控制图片移动的小案例，对DOM机制还是不怎么熟。 <html> <head> <style type = "text/css"> </style> <script language = "javascript" type = "text/javascript"&g...
html+css实战（5）
weixin_41761478的博客
03-24 1032
JQuery实战——表单验证 框架： + *{box-sizing：border-box} + wrap{margin:xx auto;（使居中）max-width:1080px;(设max-width方便日后调整} 单独定义wrap-sm{width：400px;} 封装Validator**： $(function){}相当于document.ready()：当加载完DOM之后再执行...
HTML练习实例
Roxannekkk的博客
10-26 2887
1.这是英雄联盟在百度百科里面的一段描述，使用的就是html的方式编写的。当然，你如果以前没有接触过html，是不会编写出这样的效果的。 接下来就会以这个效果为目标，缺什么学什么。本效果需要用到 标题 段落 粗体 斜体 删除效果 下划线 等等知识点，每学习一个知识点，就能完善一部页面效果。 最后做出一模一样的效果来。 <html> <p> <h1 align='left'> 英雄联盟 （电子竞技类游戏）</h1> </p> <p>&l
HTML5.0实例练习（二）
sworddancing is the best one
07-25 301
本章我们练习html的表格的制作： 1.没有边框的表格： 2.带有表头的表格  3.带有标题的表格  4.表头跨两列或者跨两行    5.表格内含标签   6 .单元格边距： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;ti...
实战案例——分布式架构演变
01-27
随着计算机系统规模变得越来越大，将所有的业务单元集中部署在一个或若干个大型机上的体系架构，已经越来越不能满足当今计算机系统。同时，随着微型计算机的出现，越来越多廉价的PC机成为了各大企业IT架构的首选，...
WebSocket实战之——JavaScript例子
02-25
一、详细代码案例详细解读一个简单html5WebSocket的Js实例教程,附带完整的javascriptwebsocket实例源码，以及实例代码效果演示页面，并对本实例的核心代码进行了深入解读。从WebSocket通讯三个阶段（打开握手、数据...
HTML实战案例
01-09
HTML+CSS各阶段实战案例代码，适合html初学者实战练习，绝对正确无误！
HTML初级部分实战练习-我的博客（table的 ）
gaoyangliu的博客
09-25 406
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> center> table width="1000" height="150" bgcolor="#FFFECE"> tr> td>img src="i
菜鸟教程-HTML小白之实例练习-0729
Lily_25的博客
07-29 342
尝试用这种方式记录学习内容，加油~
html 习题练习
最新发布
一个字，学
01-16 612
【代码】html 习题练习。
简单小练习实战代码 html5+css
uzi2200的博客
08-19 736
html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京淘注册页面</title> <!--引入样式表文件--> <link rel="stylesheet" href="regist.css"/> </head> <body> <!--头
从零开始学WEB前端——JavaScript基础介绍
su_zui的博客
02-24 1204
JavaScript（简称“JS”） 是一种具有**函数优先**的轻量级，**解释型**或即时编译型的**编程语言**。虽然它是作为开发Web页面的**脚本语言**而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于**原型编程**、多范式的动态脚本语言，并且支持**面向对象**、命令式、声明式、函数式编程范式。
实战html
sddzlsc的博客
04-28 485
软件开发的行业发展 推荐大家学习PHP\java\python HTML是web软件开发基础 html的基本模型 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <met...
百度前端技术实战训练营——HTML基础
qq_62215764的博客
01-09 355
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
HTML5,CSS3 【实战】
weixin_41964994的博客
08-22 744
预览地址： github地址： 一：网页开发 1.HTML 5 标签，标签的结构用到 BEM开发模式 2.CSS3、CSS过渡动画、帧动画 3.JS元素获取，事件响应处理 前端开发（静态页开发-----&gt; 动画效果开发） 二：工具 标注工具：像素大厨 雪碧图拼接: CSS雪碧图即CSS Sprite（精灵） 三：开发 开发技巧：从大到小 BEM开发模式【CSS样...
HTML 基础学习- 小实例练习
hewenqing
02-05 724
这里学习用的IDE工具：HBuilder 什么是HBuilder？ HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码...
蓝桥杯大赛：计算题实战训练——数列、圆面积与序列求和
1. 入门训练 - Fibonacci数列 Fibonacci数列是一个经典的动态规划问题，其特点是每个数等于前两个数之和（Fn = Fn-1 + Fn-2，F1 = F2 = 1）。该题要求计算第n个Fibonacci数除以10007的余数。这涉及到了大整数的处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值