当前位置： 首页 > 网页试题 > 网页练习作业集

网页练习作业集

作者 : 小编 发布时间： 2021-07-30 共 人阅读

作业一

网页练习作业集(图1)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="center">
			
			<!--头部-->
			<div class="top">
				<img src="img/banner.jpg" />
			</div>
			
			<!--导航栏-->
			<div class="navlist">
				<ul>
					<li>鲜花礼品</li>
					<li>自助订花</li>
					<li>绿色植物</li>
					<li>花之物语</li>
					<li>会员中心</li>
					<li>联系我们</li>
					<li>支付方式</li>
				</ul>
			</div>
			
			<!--内容-->
			<div class="content">
				<!--左边列表-->
				<div class="contentleft">
					<div class="login">
						<img src="img/login.jpg" />
						<form action="index.html" method="get">
							<div class="logininput">
								<label class="text">用户:</label>
								<input type="text" name="" id="" value="" class="txtinput" />
								<br>
								<label class="text">密码:</label>
								<input type="password" name="" id="" value="" class="txtinput"/>
								<input type="submit" value="登录" class="btnlogin"/>
								<input type="submit" value="注册" class="btnlogin"/>
								<a href="#">忘记密码</a>
							</div>
						</form>
						<img src="img/category.jpg" />
						<!--鲜花分类-->
						<div class="flowerlist">
							<p>用途</p>
							<ul>
								<li>爱情鲜花</li>
								<li>生日送花</li>
								<li>新年献花</li>
								<li>家庭用花</li>
								<li>亲情用花</li>
								<li>道歉鲜花</li>
								<li>开业花篮</li>
								<li>会议用花</li>
							</ul>
							<br/>
							<p>花材</p>
							<ul>
								<li>玫瑰花</li>
								<li>百合花</li>
								<li>郁金香</li>
								<li>太阳花</li>
								<li>康乃馨</li>
								<li>马蹄莲</li>
								<li>扶郎</li>
								<li>剑兰</li>
							</ul>
							<br/>
							<p>价格</p>
							<ul>
								<li>100~200</li>
								<li>200~300</li>
								<li>300~400</li>
								<li>400~500</li>
								<li>500~600</li>
								<li>600~800</li>
								<li>800元以上</li>
							</ul>
						</div>
					</div>
					
					</div>
					<!--右边内容-->
					<div class="contentright">
					<!--本站快讯-->
					<img src="img/latest.jpg"/>
					<div class="news">
						<img src="img/new1.jpg"/>
						<img src="img/new2.jpg"/>
						<img src="img/new3.jpg"/>
					</div>
					<!--鲜花推荐-->
					<div class="remand">
						<img src="img/recommend.jpg"/>
						<div class="rmd">
							<img src="img/flower1.jpg"/>
							<img src="img/flower2.jpg"/>
							<img src="img/flower3.jpg"/>
							<img src="img/flower4.jpg"/>
							<img src="img/flower5.jpg"/>
							<img src="img/flower6.jpg"/>
							<img src="img/flower7.jpg"/>
							<img src="img/flower8.jpg"/>
						</div>
					</div>
					<!--新品上市-->
					<div class="remand">
						<img src="img/new.jpg"/>
						<div class="rmd">
							<img src="img/flower9.jpg"/>
							<img src="img/flower10.jpg"/>
							<img src="img/flower11.jpg"/>
							<img src="img/flower12.jpg"/>
						</div>
					</div>
					<!--鲜花导购-->
					<div class="remand">
						<img src="img/tips.jpg"/>
						<div class="rmd">
							<ul>
								<li>&gt;各种鲜花所代表的含义</li>
								<li>&gt;花的喜怒哀乐</li>
								<li>&gt;氧化与养生之道</li>
								<li>&gt;每天清晨的第一缕阳光</li>
								<li>&gt;花香的味道</li>
								<li>&gt;世界各地关于送花的习俗</li>
								<li>&gt;种花与送花</li>
								<li>&gt;手捧一束鲜花的等待</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

作业二

网页练习作业集(图2)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>作业6</title>
<style>
*{padding:0px;margin:0px;}
.main{width:780px;margin:0 auto;background:#FEF1FC}
.left{float:left;background:#FEF1FC}
.right{float:right;width:228px;margin-left:10px;background:#FEF1FC}
.box1{width:541px;height:151px;background:url(img/118205.gif) center center no-repeat;}
ul li{list-style: none;}
.clear{clear:both}
.q1{float:right;}
.q2{float:right;font-size:14px;margin-top:20px;line-height: 24px;}
.q1 ul li{font-size:12px;margin-right:20px;margin-top:10px}
.list li{float:left;margin:5px 10px;}
.list li p{font-size:12px;color:#333;text-align: center;}
.footer{padding:10px 20px;}
.footer p{margin-left:10px;font-size:12px;}
</style>
</head>
<body>
<div class="main">
<div class="top">
<embed src="img/banner.swf" width="780" height="200"></embed>
</div>

<div class="box">
<div class="left">

<div class="box1">
<div class="q1">
<ul>
<li><img src="img/118209.gif"><span>深层抑制黑色素细胞活越，并阻止黑色素深层生长....
<img src="img/118208.gif"></span></li>
<li><img src="img/118209.gif"><span>深层抑制黑色素细胞活越，并阻止黑色素深层生长....
<img src="img/118208.gif"></span></li>
</ul>
</div>
<div class="q2">
<P><img src="img/118209.gif"><span>请问规公司的舒缓收敛水及精华保湿化妆水有什么不同？</P>
<P><img src="img/118209.gif"><span>请问规公司的舒缓收敛水及精华保湿化妆水有什么不同？</P>
</div>
<div class="clear"></div>
</div>
<div class="box2">
<img src="img/118210.gif" style="width:541px">
</div>
</div>
<div class="right">

<div class="title">
<img src="img/118212.gif">
<ul class="list">
<li><img src="img/118213.gif"><p>白皙无暇系类</p></li>
<li><img src="img/118214.gif"><p>卸妆洁净系类</p></li>
<li><img src="img/118215.gif"><p>滋润保湿系列</p></li>
<li><img src="img/118216.gif"><p>护肤调养系列</p></li>
<li><img src="img/118218.gif"><p>滋养面膜系列</p></li>
<li><img src="img/118213.gif"><p>纯粹原液系列</p></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="footer">

<div class="" style="float:left;margin-left:50px;margin-right:20px;">
<img src="img/118220.gif">

</div>
<div class="">
<p>版权所有：SUNKARY ALL Rights Reserved. TEL:628848</p>
<p>Designed & PRograme by:工作室</P>
</div>

</div>

</div>
</div>
</body>
</html>

作业三

网页练习作业集(图3)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>作业7</title>
<style>
*{padding:0px;margin:0px;}
body{font-size:"宋体"}
.main{width:1130px;margin:0 auto;}
.top{z-index:-1;height:440px;background:url(img/67202.jpg) center center no-repeat;position:relative;}
.nav{position:absolute;top:0px;}
.nav ul li{float:left;}
ul li{list-style: none;}
a{text-decoration: none;color:#fff;display: block;line-height: 50px;width:100px;text-align: center;}
.max{width:940px;margin:0 auto;}
.leftbox{float:left;margin-top:-130px;z-index: 99;width:270px;}
.title{z-index:1;}
.tbg{color:#fff;text-align:center;font-size:18px;font-weight:bold;width:270px;line-height:60px;background:url('img/67207.jpg') top center no-repeat;}
.txt{padding:20px;border:1px solid #f3f3f3;border-top:none;}
.txt h3{color:#0083d4;line-height: 50px;}
.txt p{color:#888;}
.rightbox{float:left;margin-left:50px;width:620px;}
.mdes h1{color:#0083d4;font-weight:400;line-height: 80px;}
.mbox p{line-height:24px;margin-bottom:30px;}
.nbox{padding-top:50px;padding-left:20px;background:#f0f8fc}
.nbox h3{font-weight:500;font-size:24px;line-height: 50px;color:#0083d4;}
.nlist ul li{padding-left:100px;background:url(img/67210.jpg) left center no-repeat;margin:30px 0px;}
.nlist ul li h3{color:#ff7600}
.footer{height: 71px;background:url(./img/67206.gif) center center repeat-x;line-height: 71px;color:#fff;text-align: center;}
.clear{clear:both;}
</style>
</head>
<body>

<div class='main'>
<div class="top">
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">用品</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">网站地图</a></li>
</ul>
</div>
</div>
<div class="max">
<div class="leftbox">
<div class='tbg'>最新新闻</div>

<div class="txt">
<h3>BMX 31, 2009 </h3>

<p>它是在70年代中后期在美国兴起的一种自行车越野运动。 </p>

<h3>攀岩 22, 2009</h3>

<p>攀岩运动是一项深受人们欢迎的运动项目，它集健身、娱乐和竞技于 一体。 </p>

<h3>滑水 13, 2009</h3>

<p>水橇滑水，其前身是滑板滑水，滑水板是本世纪初由一位叫拉尔森.萨缪尔森的美国人在滑雪板的基础上试制出来的，并成功地进行了水上滑行表演。</p> 

<h3>蹦极 4, 2009 </h3>

<p>人类在与自然的融合的过程中，借助于现代高科技手段、最大限度地发挥自我身心潜能， 向自身挑战的娱乐体育项目。</p>
</div>

</div>


<div class="rightbox">
<div class="mdes">
<h1>极端世界欢迎您</h1>
<div class="mbox">
<p>极限运动，是结合了一些难度较高，且挑战性较大之组合运动项目的统称，例如：直排轮、滑板、极限单车、攀岩、雪板、空中冲浪、街道疾降、跑酷、 极限越野、极限滑水等都是极限运动项目。 
比如小轮车竞速已经成为奥运项目，滑雪板U型池也是正式的冬奥项目。</p>

<p>那么这些极限项目的出身简单来说就是两种，一种是由一项成型运动演变来的，比如极限摩托车就是由motocross分化出来的，
极限滑雪是从普通的滑雪演变来的等等。而另外一些是从游戏、生活和工作中演变来的，比如滑板、攀岩等等。 </p>

<p>极限运动的项目许多都是近几十年刚诞生的、方兴未艾的体育项目，根据季节可分为夏季和冬季两大类，运动领域涉及海、陆、 空多维空间。</p>
</div>
</div>

<div class="new">
<div class="nbox">
<h3>最近文章</h3>
</div>

<div class="nlist">
<ul>
	<li><h3>最新消息</h3>
		<p>2014年索契冬季奥运会，在俄罗斯。2014年冬奥会计划于当年的2月7日至23日举行。是俄罗斯首次举办冬奥会。</p>
		</li>
		<li>
		<h3>冬季奥运会</h3>
		<p>简称为冬季奥运会、冬奥会。国际奥林匹克委员会主办的世界性冬季项目运动会。冬季奥运会每隔4年举行一届，
		并与奥林匹克运动会隔两年举行。</p>
			</li>
		<li>
		<h3>关于冬季体育项目</h3>
		<p>通常分为冰上运动和滑雪运动两大类。冰上运动包括速度滑冰、花样滑冰、冰球运动、冰壶运动。滑雪运动包括越野滑雪、
		高山滑雪、自由式滑雪、跳台滑雪、单板滑雪、现代冬季两项、北欧两项等。</p>
	</li>
</ul>
</div>
</div>



</div>
</div>
<div class="clear"></div>
<div class="footer">版权所有：极端世界运动</div>
</div>
</body>
</html>


①本站所有成品淘宝购买需确认收货并好评后发货；
②所有作品如需修改需另加费用；
③所有作品没有任何人的姓名学校之类信息；
④请务必确认网页是您需要的，源码具有可复制性，所以无法退换！
⑤每份网页都可以更换内容，费用50元起，如需更换内容请联系客服!
dw网页设计 » 网页练习作业集

小编 VIP

分享到：

千套DW网页成品 品质有保证

快速联系