年轻？大有所为！——实战二

最新推荐文章于 2019-08-05 10:08:39 发布

麦田JOY

最新推荐文章于 2019-08-05 10:08:39 发布

阅读量465

点赞数

分类专栏： divcss

本文链接：https://blog.csdn.net/start2011/article/details/45198363

版权

divcss 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实战二，根据一个视频教程，写下以下主要内容。

1.主题：收集各种美图网站链接。

2.HTML内容呈现

两个标签页：主页呈现现今收集的网址链接列表和文章列表，第二个页面是用户提交站点的交互页面。

主页index.html：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8"/>
	<title>美图绽放</title>
	<link rel="stylesheet" type="text/css" href="images/index.css" />
</head>
<body>
	<div id="header"><!-- 头部有三个部分,且要居中，所以通过class来统一格式 -->
		<div id="top" class="auto"><!-- 左边是logo，右边是搜索框，共两部分 -->
			<div class="logo">
				<h1><!-- 起强调作用，说明是重要信息 -->
					<img src="images/logo.png" />
					<span>美图网站大集合</span>
				</h1>
			</div>
			<div class="search"><!-- 现先实现界面，所以在表单form标签暂时不写action -->
				<form>
					<input class="text" type="text" />
					<input class="submit" type="submit" value="搜索" />
				</form>
			</div>
		</div>
		<div id="nav" class="auto">
			<ul><!-- 浮动列成一排 -->
				<li><a href="index.html">首页</a></li>
				<li><a href="submit.html">提交站点</a></li>
			</ul>
		</div>
		<div id="runplay" class="auto">
			<div class="rleft">
				<a href="http://www.thefwa.com/"><img src="images/top_img1.jpg"></a>
			</div>
			<div class="rright">
				<dl><!-- 定义列表 -->
					<dt>美图，在这里绽放！</dt>
					<dd>本网站收集了互联网上各种美图网站，那你可以轻松查找到它们，得到你所要的一切。</dd>
					<dd>
						<label>》》》</label><a href="#"><img src="images/seek.png" title="查看更多"></a>
					</dd>
				</dl>
			</div>
		</div>
	</div>
	<div id="main">
		<div id="bmain">
			<div id="wrap"><!-- 中间内容分为了左边右边 -->
				<div id="leftbody">
					<div class="leftDiv1">
						<h2>美图绽放</h2>
						<p>这是我的原生javascrip实战作品！</p>
					</div>
					<div class="leftDiv2">
						<h2>美图站点</h2>
						<ul>
							<li>
								<a href="#">
									<img src="images/main_img1.jpg" />
									<p>professional1</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="images/main_img1.jpg" />
									<p>professional2</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="images/main_img1.jpg" />
									<p>professional3</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="images/main_img1.jpg" />
									<p>professional4</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="images/main_img1.jpg" />
									<p>professional5</p>
								</a>
							</li>
						</ul>
					</div>
					<div class="leftDiv3">
						<a href="#">查看更多</a>
					</div>
				</div>
				<div id="rightbody">
					<div class="rightDiv1">
						<h2>酷文</h2>
						<ul>
							<li>
								<h3><a href="#" target="_blank">随便写点什么</a></h3>
								<p>随便写的的的的等待 的等待等待的的.......</p>
							</li>
							<li>
								<h3><a href="#" target="_blank">随便写点什么</a></h3>
								<p>随便写的的的的等待 的等待等待的的.......</p>
							</li>
							<li>
								<h3><a href="#" target="_blank">随便写点什么</a></h3>
								<p>随便写的的的的等待 的等待等待的的.......</p>
							</li>
						</ul>
					</div>
					<div class="rightDiv2">
						<dl class="dl1">
							<dt><a href="#">随便写点</a></dt>
							<dd>歇息地嘻嘻嘻嘻嘻</dd>
						</dl>
						<dl class="dl2">
							<dt><a href="#">随便写点</a></dt>
							<dd>歇息地嘻嘻嘻嘻嘻</dd>
						</dl>
					</div>
					<div class="rightDiv3">
						
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="footer">
		<p>
			<a href="#" target="_blank">首页</a>
			<a href="#" target="_blank">美站</a>
			<a href="#" target="_blank">酷文</a>
			<a href="#" target="_blank">联系我们</a>
		</p>
		<p>Copyright © 2015 | Lilyjoy</p>
	</div>
</body>
</html>

点击提交站点页面submit.html，我们可以看到提交页面的功能仅仅是网页中间部分的左边内容改变了：

<div id="leftbody">
					<p id="para0">如果你找到一个漂亮的图库网站，可以提交给我们！</p>
					<form action="#" name="form1">
						<label for="label1">您的姓名:</label><br/><!-- 点击文字就可以定位焦点到输入框去 -->
						<input type="text" name="name" id="label1"/><br/>
						<label for="label2">您的联系方式:</label><br/>
						<input type="text" name="contact" id="label2"/><br/>
						<label for="label3">站点网址:</label><br/>
						<input type="text" name="url" id="label3"/><br/>
						<label for="label4">站点介绍:</label><br/>
						<textarea name="info" id="label4" cols="50" rows="10">
							
						</textarea><br/>
						<a href="#" id="tijiao">提交</a>
						<a href="#" id="chongzhi">重置</a>
					</form>
				</div>

3.CSS样式（index.css）

布局header、main、foot，图片素材就自己随便整了个放上去啦；

1）首先初始化一个统一的样式：

/***********常规设计样式默认初始化*************************************************/
body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,p{
	margin: 0px;
	padding: 0px;
	font-size: 13px;
}
ul{
	list-style: none;
}
img,a img{ 
	/*对于IE图片默认有边框的问题*/       
	border: 0px;
}
a{
	/*对于链接的下划线处理*/
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}

2) 头部，分为三部分：top顶部、nav导航条、runplay

/***********头部设计***************************************************************/
#header{
	height: 451px;
	background:url(top_bg.jpg) repeat-x;
}
.auto{
	/*实现头部内容统一居中*/
	width: 980px;
	margin: 0 auto;
}
#top{
	height: 100px;
}
#top .logo{
	width: 250px;
	padding: 10px 0px 0px 25px;
	float: left;
}
#top .logo h1 span{
	font-size: 14px;
	color: #cccccc;
	float: right;
}
#top .search{
	width: 280px;
	height: 50px;
	margin: 38px 0px 0px 15px;
	float: right;
	/*要实现logo和搜索在一排，搜索设置为了右浮动，那么注意logo是左浮动的才可以*/
}
#top .search .text{
	width: 180px;
	height: 15px;
	background: #161B1F;
	color: #BCBCBC;
	border: 1px solid #0B0E10;
	padding: 5px;
}
#top .search .submit{
	width: 80px;
	height: 28px;
	cursor: pointer;/*鼠标放在按钮成手型*/
}
#nav{
	height: 50px;
}
#nav ul{
	margin: 0px 0px 0px 10px;
}
#nav ul li{
	float: left;
	margin: 0px 15px 0px 10px;
}
#nav ul li a{
	color: black;
	font-size: 13px;
	font-weight: bold;
	display: block;
	width: 100px;/*显示为方块，所以显示为块级，得有宽度*/
	height: 30px;/*设置为图片的高宽*/
	text-align: center;
	line-height: 30px;/*上下居中*/
	margin: 10px 0px 0px;
}
#nav ul li a:hover{
	background-image: url(hover.png);
	color: white;
	text-decoration: none;
}
#runplay{
	height: 299px;
	background: url(runplay_bg.png);
}
#runplay .rleft{
	width: 300px;
	float: left;
	margin: 50px 0px 0px 30px;
	display: inline;/*IE6因为左浮动进行了双倍计算，距离左边增大。解决方法*/
}
#runplay .rleft a img{
	height: 158px;
	width: 300px;

}
#runplay .rright{
	width: 300px;
	float: left;
	color: white;
	margin: 50px 0px 0px 100px;
	display: inline;/*IE6因为左浮动进行了双倍计算，距离左边增大。解决方法*/
}
#runplay .rright dl dt{
	font-size: 24px;
	font-weight: bold;
	font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
	
}
#runplay .rright dl dd{
	font-size: 14px;
	margin: 20px 0px 0px 0px;
}
#runplay .rright dl dd a img:hover{
	background: url(seekhover.png);
}

3)中间

/***********主体设计***************************************************************/
#main{
	/*CSS3可以支持多张图片，但是IE6-8不支持，所以要用另外的方式来使用多张图片:内嵌一个div去放多余的图片*/
	background: url(main_top_bg.jpg) repeat-x;
	/*margin-top: -5px;*/
}
#bmain{
	background: url(main_bottom_bg.jpg) 0px bottom repeat-x;
}
#wrap{
	width: 920px;
	height: 800px;
	margin: 0 auto;
}
#wrap #leftbody{
	width: 620px;
	height: 800px;
	float: left;
}

#wrap #rightbody{
	width: 240px;
	height: 800px;
	float: right;/*与左边是有些距离的*/
}
#wrap #leftbody .leftDiv1 h2{
	color: black;
	font-size: 24px;
	margin: 25px 0px 20px 0px;
}
#wrap #leftbody .leftDiv1 p{
	color: black;
}
#wrap #leftbody .leftDiv2 h2{
	color: black;
	font-size: 24px;
	margin: 25px 0px 10px 0px;
}
#wrap #leftbody .leftDiv2 ul li{
	border: 1px solid #cccccc;
	width: 250px;
	padding: 5px;
	float: left;
	margin: 0px 20px 20px 0px;
}
#wrap #leftbody .leftDiv2 ul li a p{
	color: #555;
	font-size: 14px;
	font-weight: bold;
	margin-top: 10px;
}
#wrap #leftbody .leftDiv3{
	clear: both;
}
#wrap #leftbody .leftDiv3 a{
	font-size: 13px;
	font-weight: bold;
	display: block;
	width: 100px;/*显示为方块，所以显示为块级，得有宽度*/
	height: 30px;/*设置为图片的高宽*/
	text-align: center;
	line-height: 30px;/*上下居中*/
	margin: 10px 0px 0px;
	color: white;
	background-image: url(hover.png);
}
#leftbody #para0,label,input,textarea{
	color: #222;
	font-size: 14px;
	font-weight: bold;
}
#leftbody #para0{
	margin-top: 30px;
}
#leftbody label{
	margin-top: 50px;
	line-height: 50px;
}
#leftbody #tijiao,#chongzhi{
	margin-top: 50px;
	font-size: 13px;
	font-weight: bold;
	display: block;
	width: 100px;/*显示为方块，所以显示为块级，得有宽度*/
	height: 30px;/*设置为图片的高宽*/
	text-align: center;
	line-height: 30px;/*上下居中*/
	margin: 10px 0px 0px;
	color: white;
	background-image: url(hover.png);
}
#leftbody #tijiao{
	float: left;
}
#leftbody #chongzhi{
	float: left;
	margin-left: 220px;
}

#wrap #rightbody .rightDiv1 h2{
	color: black;
	font-size: 24px;
	margin: 25px 0px 20px 0px;
}
#wrap #rightbody .rightDiv1 ul li h3 a{
	color: #0074c5;
	font-weight: normal;
	text-decoration: underline;
}
#wrap #rightbody .rightDiv1 ul li h3 a:hover{
	color: #009900;
}
#wrap #rightbody .rightDiv1 ul li p{
	color: #555;
	padding: 5px;
}
#wrap #rightbody .rightDiv1 ul li{
	border-bottom: 2px dashed #eee;
	height: 70px;
	padding-top: 15px;
}
#wrap #rightbody .rightDiv2 dl.dl1{
	margin-top: 35px;
	width: 100%;
	height: 64px;
	background: url(main_right_img1.png) 160px center no-repeat;
}
#wrap #rightbody .rightDiv2 dl.dl2{
	margin-top: 35px;
	width: 100%;
	height: 64px;
	background: url(main_right_img2.png)  160px center no-repeat;
}
#wrap #rightbody .rightDiv2 dl dt a{
	font-size: 24px;
	color: #333;
	font-weight: bold;
}
#wrap #rightbody .rightDiv2 dl dd{
	margin-top: 10px;
	font-size: 15px;
	color: #333;
	font-weight: bold;
}

4)底部

/***********底部设计***************************************************************/
#footer{
	height: 100px;
	background: url(bottom_bg.jpg) repeat-x;
	text-align: center;
}
#footer p{
	font-size: 14px;
	color: #cccccc;
	text-decoration: none;
}
#footer p a{
	font-size: 14px;
	color: #cccccc;
	text-decoration: underline;
	line-height: 50px;
	margin: 10px 15px 0px 0px;
}

麦田JOY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
年轻？大有所为！——实战二

实战二，根据一个视频教程，写下以下主要内容。1.主题：收集各种美图网站链接。2.HTML内容呈现两个标签页：主页呈现现今收集的网址链接列表和文章列表，第二个页面是用户提交站点的交互页面。主页index.html：美图绽放美图网站大集合
复制链接

扫一扫

专栏目录