小白菜之web基础期末作业篇---(一)

小白菜的web基础期末作业

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这是index的HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>麒麟先生店铺</title>
	<link rel="stylesheet" href="../css/index.css">
	<script src="../js/index.js"></script>
</head>
<body>
	<div id="div1">
		<div id="header1">
			
		</div>
		<div id="header2">
			<form action="">		
				<input id="input1" type="text">
				<input id="input2" type="button" value="搜索">
			</form>
			<a href="index.html"  target="_self">首页</a>
			<a href="最新产品.html" target="_self">最新产品</a>
			<a href="热销产品.html" target="_self">热销产品</a>
			<a href="关于我们.html" target="_self">关于我们</a>
			<a href="联系我们.html" target="_blank">联系我们</a>
			<a href="买家留言.html" target="_self">买家留言</a>
			<div id="js5div"></div>
		</div>
		<div id="header3">
			<ul id="js1ul">
				<li><img src="../img/1.jpg" alt=""></li>
				<li><img src="../img/2.jpg" alt=""></li>
				<li><img src="../img/3.jpg" alt=""></li>
				<li><img src="../img/4.jpg" alt=""></li>
			</ul>
		</div>
		<div id="body">
			<div id="body1">
				<ul id="ul1">
					<li class="nli">
						<a href="#">原创</a>
					</li>
					<li class="nli" id="js2li">
						<a href="上着1.html" target="_self">上着</a>
					</li>
					<div id="js2div">
						<li>
							<a href="衬衣.html" target="_self">衬衫/POLO</a>
						</li>
						<li>
							<a href="卫衣套衫.html" target="_self">卫衣/套衫</a>
						</li>
						<li>
							<a href="夹克外套.html" target="_self">夹克/外套</a>
						</li>
						<li>
							<a href="毛衣针织衫.html" target="_self">毛衣/针织衫</a>
						</li>
						<li>
							<a href="棉衣羽绒服.html" target="_self">棉衣/羽绒服</a>
						</li>
						<li>
							<a href="T恤背心.html" target="_self">T/背心</a>
						</li>
						<li>
							<a href="搭配马甲.html" target="_self">搭配马甲</a>
						</li>
					</div>
					<li class="nli" id="js3li">
						<a href="下御1.html" target="_self">下御</a>
					</li>
					<div id="js3div">
						<li>
							<a href="长裤九分裤.html" target="_self">长裤/九分裤</a>
						</li>
						<li>
							<a href="短裤五分裤.html" target="_self">短裤/五分裤</a>
						</li>
					</div>
					<li class="nli">
						<a href="鞋帽包.html" target="_self">鞋帽包</a>
					</li>
					<li class="nli">
						<a href="特价商品.html" target="_self">特价商品</a>
					</li>
				</ul>
				<ul id="ul2">
					<li id="li1"><img src="../img/img.png" alt=""></li>
					<li >淘宝客户端扫描二维码</li>
					<li>直达手机店铺</li>
					<li>收藏店铺</li>
					<li>新品信息第一时间推送</li>
					<input id="js4input" type="button" value="客服">
					<div id="js4div">
						<li>麒麟先生原创工作室</li>
						<li>
							<h2>在线客服</h2>
							<p>售后客服 <a href="联系我们.html" target="_self">和我联系</a></p>
							<p>客服中心 <a href="联系我们.html" target="_self">和我联系</a></p>
						</li>
						<li>
							<h2>工作时间</h2>
							<p>周一到周五: 10:00-24:00</p>
							<p>周六到周日: 11:00-24:00</p>
						</li>
					</div>
				</ul>
				<div id="ul3">
					<h2>看了又看</h2>
					<table>
						<tr class="tr1">
							<td><a href=""><img src="../img/10.jpg" alt=""></a></td>
							<td><a href=""><img src="../img/10.jpg" alt=""></a></td>
						</tr>
						<tr class="tr2">
							<td><p>135.00</p></td>
							<td><p>138.00</p></td>
						</tr>
						<tr class="tr1">
							<td><a href=""><img src="../img/11.jpg" alt=""></a></td>
							<td><a href=""><img src="../img/13.jpg" alt=""></a></td>
						</tr>
						<tr class="tr2">
							<td><p>118.00</p></td>
							<td><p>145.00</p></td>
						</tr>
					</table>
				</div>
			</div>
			<div id="body2">
				<h1>新品速递</h1>
				<div class="tp">
					<img src="../img/1.jpg" alt="">
					<a href="shop.html" target="_self">「行素」秋冬美式潮男士印花连帽加绒卫衣日系休闲情侣保暖帽衫</a>
					<p>135 <span>270</span> 已售3759</p>
				</div>
				<div class="tp">
					<img src="../img/2.jpg" alt="">
					<a href="shop.html" target="_self">「观察者」冬季美式潮男士立领工装棉衣日系休闲保暖外套宽松棉服</a>
					<p>135 <span>270</span> 已售3759</p>
				</div>
				<div class="tp">
					<img src="../img/3.jpg" alt="">
					<a href="shop.html" target="_self">「行素」秋冬美式潮男士印花连帽加绒卫衣日系休闲情侣保暖帽衫</a>
					<p>258<span>516</span> 已售4000</p>
				</div>
				<div class="tp">
					<img src="../img/4.jpg" alt="">
					<a href="shop.html" target="_self">「暴走族」秋冬潮男薄款束脚工装裤子休闲宽松加绒保暖运动九分裤</a>
					<p>139 <span>280</span> 已售3000</p></div>
				<div class="tp">
					<img src="../img/5.jpg" alt="">
					<a href="shop.html" target="_self">「藏拙」秋冬日系潮流男士加绒工装裤ins休闲裤宽松直筒哈伦长裤</a>
					<p>140 <span>180</span> 已售5000</p>
				</div>
				<div class="tp">
					<img src="../img/6.jpg" alt="">
					<a href="shop.html" target="_self">「行素」秋冬美式潮男士印花连帽加绒卫衣日系休闲情侣保暖帽衫</a>
					<p>135 <span>270</span> 已售3759</p>
				</div>
				<div class="tp">
					<img src="../img/7.jpg" alt="">
					<a href="shop.html" target="_self">「行素」秋冬美式潮男士印花连帽加绒卫衣日系休闲情侣保暖帽衫</a>
					<p>135 <span>270</span> 已售3759</p></div>
				<div class="tp">
					<img src="../img/8.jpg" alt="">
					<a href="shop.html" target="_self">「行素」秋冬美式潮男士印花连帽加绒卫衣日系休闲情侣保暖帽衫</a>
					<p>135 <span>270</span> 已售3759</p>
				</div>
				<div class="tp">
					<img src="../img/9.jpg" alt="">
					<a href="shop.html" target="_self">「行素」秋冬美式潮男士印花连帽加绒卫衣日系休闲情侣保暖帽衫</a>
					<p>135 <span>270</span> 已售3759</p>
				</div>
				<div class="tp">
					<img src="../img/7.jpg" alt="">
					<a href="shop.html" target="_self">「行素」秋冬美式潮男士印花连帽加绒卫衣日系休闲情侣保暖帽衫</a>
					<p>135 <span>270</span> 已售3759</p></div>
				<div class="tp">
					<img src="../img/8.jpg" alt="">
					<a href="shop.html" target="_self">「行素」秋冬美式潮男士印花连帽加绒卫衣日系休闲情侣保暖帽衫</a>
					<p>135 <span>270</span> 已售3759</p>
				</div>
				<div class="tp">
					<img src="../img/9.jpg" alt="">
					<a href="shop.html" target="_self">「行素」秋冬美式潮男士印花连帽加绒卫衣日系休闲情侣保暖帽衫</a>
					<p>135 <span>270</span> 已售3759</p>
				</div>	
			</div>
		</div>
	</div>
		<div id="footer">
				<hr>
				<h4>2019新版旺铺&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span>店铺设计:四人帮</span></h4>
				<div>
					<p id="p1"><a href="">阿里巴巴集团</a>| <a href="">淘宝网</a>	| <a href="">天猫</a>| <a href="">聚划算</a>| <a href="">全球速卖通</a>| <a href="">阿里巴巴国际交易市场</a>| <a href="">1688</a>| <a href="">阿里妈妈</a>| <a href="">飞猪</a>| <a href="">阿里云计算</a>| <a href="">AliOS</a>| <a href="">阿里通信</a>| <a href="">一淘</a>| <a href="">万网</a>| <a href="">高德</a>| <a href="">UC</a>| <a href="">友盟</a></p>
					<p> <a href="">虾米</a>| <a href="">大麦网</a>| <a href="">钉钉</a>| <a href="">支付宝</a>| <a href="">优酷</a>| <a href="">土豆</a>| <a href="">阿里健康</a>| <a href="">阿里影业</a>| <a href="">阿里体育</a>| <a href="">网商银行</a>| <a href="">淘宝台湾</a></p>
 				</div>
		</div>
</body>
</html>

这是index的CSS

div,input,ul,li,h1,a,h2,table,tr,td{
	margin: 0px;
	padding: 0px;
	list-style:none;
}
#div1{
	width: 1240px;
	height: 2500px;
	background-color: #ffffff;
	margin:0 auto;
}
#header1{
	width: 1240px;
	height: 150px;
	font-size: 50px;
	text-align: center;
	line-height: 150px;
	color: black;
	background-image: url(../img/index.jpg);
}
#header2{
	width: 1140px;
	height: 70px;
	background-color:#333333;
	line-height: 70px;
	padding-left: 100px;
}
#header2 form{
	width: 200px;
	height: 25px;
	display: inline-block;
}
#header2 form #input2{
	width: 35px;
	border: 2px solid #ccc;
	border-radius: 3px;
	background-color: #ccc;
	color: black;
	font-size: 15px;
}
#header2 form #input2:hover{
	font-weight: bolder;
}
#header2 a{
	width: 100px;
	height: 33px;
	margin-left: 15px;
	font-size: 20px;
	text-align: center;
	text-decoration: none;
	line-height: 33px;
	display: inline-block;
	color: white;
	border:2px solid #333333;
	border-radius: 4px;
	background-color: #333333;
}
#header2 a:hover{
	background-color: black;
	font-size: 22px;
	border:2px solid black;
	border-radius: 4px;
}
#header2 #js5div{
	width: 100px;
	height: 66px;
	display: inline-block;
	background-color: pink;
	margin-left: 60px;
	text-align: center;
	line-height: 70px;
	font-size: 25px;
	color: white;
	border: 2px solid pink;
	border-radius: 6px;
}
#header3{
	width: 1240px;
	height: 310px;
	background-color: #ccc;
	position: relative;
	overflow: hidden;
}
#header3 ul{
	width: 1240px;
	height: 310px;
	position: absolute;
	top: 0px;
	left: 0px;
}
#header3 ul li{
	float: left;
}
#body{
	width: 1240px;
}
#body1{
	width: 240px;
	height: 1500px;
	float: left;
	background-color: #333333;
	padding-top: 100px; 
}
#body1 #ul1{
	width: 240px;
	height: 450px;
}
#body1 #ul1 .nli{
	width: 150px;
	height: 30px;
	font-size: 20px;
	text-align:left;
	line-height: 30px;
	background-color: #ccc;
	margin-top:5px;
	padding-left: 90px;
	border: 3px solid #ccc;
	border-radius: 5px;
}
#body1 #ul1 .nli:hover{
	font-size: 25px;	
}
#body1 #ul1 .nli a:hover{
	line-height: 30px;
	color:red;
}
#body1 #ul1 a{
	text-decoration: none;
	color: black;
}
#body1 #ul1 div{
	width: 240px;
	text-align: center; 
	display:none ;
	color: white;
}
#body1 #ul1 div a{
	color: white;
	font-size:16px;
}
#body1 #ul1 div a:hover{
	color:red;
	font-size:19px; 
}
#body1 #ul1 li{
	margin-top: 10px;
}
#body1 #ul2{
	width: 200px;
	height: 600px;
	padding-left: 40px;
	color: white;
}
#body1 #ul2 #js2li{
	width: 240px;
	height: 140px;
}
#body1 #ul2 li{
	margin-top: 10px;
	text-align: left;
}
#body1 #ul2 li a{
	height: 20px;
	width: 70px;
	text-decoration: none;
	color: #333333;
	background-color: white;
	border: 1px solid white;
	border-radius: 5px;
	line-height: 20px;
	text-align: center;
	display: inline-block;
}
#body1 #ul2 li a:hover{
	height: 25px;
	line-height: 25px;
	font-size: 16px;
	color: blue;
}
#body1 #ul2 input{
	width:60px;
	height: 25px;
	margin-top: 10px;
	background-color: #ccc;
	border: 2px solid #ccc;
	border-radius: 3px;
}
#body1 #ul2 input:hover{
	width:70px;
	height: 30px;
}
#body1 #ul2 div{
	display: none;
	color: red;
}
#body1 #ul2 #li1 img:hover{
	width: 182px;
	border: 2px solid white;
}
#body1 #ul3{
	width: 240px;
	height: 320px;
	color: white;
}
#body1 #ul3 table{
	width: 240px;
	height: 180px;
	margin-bottom: 10px;
}
#body1 #ul3 h2{
	width: 240px;
	height: 30px;
	text-align: center;
	margin-bottom: 40px;
	margin-top: 10px;
	border: 3px solid #ccc;
	border-radius: 3px;
	color: black;
	background-color: #ccc;
	font-size: 20px;
	line-height: 30px;
}
#body1 #ul3 h2:hover{
	font-size: 23px;
	color: red;
}
#body1 #ul3 table .tr1{
	width: 220px;
	height: 80px;
	text-align: center;
}
#body1 #ul3 table .tr2{
	width: 220px;
	height: 20px;
	text-align: center;
}
#body1 #ul3 table img:hover{
	width: 75px;
	height: 75px;
	text-align: center;
	border: 1px solid white;
}
#body2{
	width: 990px;
	height: 1800px;
	background-color:#333333;
	float: right;
	color: white;
	text-align:left;
}
#body2 h1{
	width: 980px;
	height: 50px;
	margin-top: 10px;
	text-align: center;
	line-height: 50px;
	margin-left: 10px;
	color: red;
}
#body2 .tp{
	width: 310px;
	height: 380px;
	margin: 10px;
	float: left;
}
#body2 .tp img:hover{
	width:306px; 
	height:306px;
	border: 2px solid white;
}
#body2 .tp a{
	color: #ccc;
	text-decoration: none;
}
#body2 .tp a:hover{
	color: black;
	text-decoration: underline;
}
#body2 .tp p{
	font-weight: bolder;
}
#body2 .tp span{
	width: 120px;
	color: #ccc;
	margin-right: 50px;
	text-decoration:line-through;
	display: inline-block;
	text-align: center;
}
#footer{
	margin-top: 10px;
	height: 100px;
	clear: right;
	color: black;
}
#footer h4{
	text-align: center;
}
#footer span{
	color: blue;
	font-weight: bolder;
}
#footer div{
	width: 1200px;
	height: 100px;
	margin: 0 auto;
}
#footer p{
	text-align: center;
}
#footer p a{
	text-align: center;
	color: black;
	text-decoration: none;
}
#footer #p1{
	padding-top: 15px;
	border-top:1px solid black;
}
#footer #p2{
	border-top:1px solid black;
}

这是index的js

window.onload=function () {
			var a1=document.getElementById('header3');
			var a2=document.getElementById('js1ul');
			var a3=a1.getElementsByTagName('li');
			var speed=3;
			a2.innerHTML=a2.innerHTML+a2.innerHTML; 
			a2.style.width=a3[0].offsetWidth*a3.length+"px";
			function show() {
					if(a2.offsetLeft<-a2.offsetWidth/2)
					{
						a2.style.left=0+"px";
					}
					if(a2.offsetLeft>0)
					{
						a2.style.left=-a2.offsetWidth/2+"px";
					}
					a2.style.left=a2.offsetLeft+speed+"px";
				}
			var timer=setInterval(show,30);
			a1.onmouseover=function(){
				clearInterval(timer);
			}
			a1.onmouseout=function(){
				timer=setInterval(show,30);
			}
			var b1=document.getElementById('js2li');
			var b2=document.getElementById('js2div');
			var time1=null;
			b1.onmouseover=function () {
					b2.style.display="block";
					clearInterval(time1);
			}
			b1.onmouseout=function () {
					time1=setInterval(function () {
						b2.style.display="none";
					},1000);	
			}
			b2.onmouseover=function(){
				b2.style.display="block";
				clearInterval(time1);
			}
			b2.onmouseout=function() {
					time1=setInterval(function () {
						b2.style.display="none";
					},1000);
			}
			var c1=document.getElementById('js3li');
			var c2=document.getElementById('js3div');
			var time2=null;
			c1.onmouseover=function () {
					c2.style.display="block";
					clearInterval(time2);
			}
			c1.onmouseout=function () {
					time2=setInterval(function() {
						c2.style.display="none";
					},1000);
			}
			c2.onmouseover=function(){
				c2.style.display="block";
				clearInterval(time2);
			}
			c2.onmouseout=function() {
					time2=setInterval(function () {
						c2.style.display="none";
					},1000);
			}
			var d1=document.getElementById('js4input');
			var d2=document.getElementById('js4div');
			var time3=null;
			d1.onmouseover=function () {
					d2.style.display="block";
					clearInterval(time3);
			}
			d1.onmouseout=function () {
				time3=setInterval(function() {
					d2.style.display="none";
				},1000);
			}
			d2.onmouseover=function(){
				d2.style.display="block";
				clearInterval(time3);
			}
			d2.onmouseout=function() {
					time3=setInterval(function () {
						d2.style.display="none";
					},1000);
			}
			setInterval(function() {
				var e=document.getElementById("js5div");
				var date=new Date();
				function todate(n) {
					if (n<=9) {
						return "0"+n;
					} 
					else {
						return ""+n;
					}
				}
				var showtime=todate(date.getHours())+":"+todate(date.getMinutes())+":"+todate(date.getSeconds());
				e.innerHTML=showtime;
			},1);
		}
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值