大学生网页设计（期末大作业）静态HTML网页设计商城类网页作业制作

青旅半醒 2024-04-25 20:16 86阅读 0赞

## 一、网站介绍 ##

?网页布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

?网页程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

?网页素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

?网页文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

?网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

## 二、网页效果 ##

![在这里插入图片描述][a176c68fa76543e3a882e99b68e167b5.png]

在这里插入图片描述  
![在这里插入图片描述][8d50a9ddfecb4a66a6b8442f9f9ce6aa.png]  
![在这里插入图片描述][719bc1217e9d4504b21cc8adad9b9625.png]  
![在这里插入图片描述][acf4edad75c8451b8161325e14e797b1.png]

## 三、代码实现 ##

### HTML部分 ###

<!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=gb2312" />
    <title>主页面</title>
    <link type="text/css" rel="stylesheet" href="css/index.css" />
    
    <link type="text/css" href="css/style.css" rel="stylesheet"/>
    
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
    <script type="text/javascript" src="js/jquery.touchSlider.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    </head>
    
    <body>
    	<div id="bigdiv1">
    		<div id="a1">
    			<ul>
    				<li id="a3"><a href="index.html">首页</a></li>
    				<li class="a1"><a href="手机卖场.html">手机卖场</a></li>
    				<li class="a1"><a href="二级页面.html">电脑专场</a></li>
    				<li class="a1"><a href="电视卖场.html">智能电视</a></li>
    				<li class="a1"><a href="智能配件.html">智能配件</a></li>
    				<li class="a1"><a href="服务.html">服务</a></li>
    
    			</ul>
    		</div>
    			
    			<div id="b1">
    				<div id="b2">
    					
    					<div class="main_visual">
    						<div class="flicking_con">
    							<a href="#">1</a>
    							<a href="#">2</a>
    							<a href="#">3</a>
    							<a href="#">4</a>
    							<a href="#">5</a>
    						</div>
    						<div class="main_image">
    							<ul style="list-style-type:none;">
    								<a href="#"><li><span class="img_3"></span></li></a>
    								<a href="#"><li><span class="img_4"></span></li></a>
    								<a href="#"><li><span class="img_1"></span></li></a>
    								<a href="#"><li><span class="img_2"></span></li></a>
    								<a href="#"><li><span class="img_5"></span></li></a>
    							</ul>
    							<a href="javascript:;" id="btn_prev"></a>
    							<a href="javascript:;" id="btn_next"></a>
    						</div>
    					</div>
    				
    				</div>
    				<div id="b3">
    					<ul>
    						<li><a href="#"><img src="images/QQ图片20171121084232.png" alt="图片" /></a></li>
    						<li class="b2"><a href="#"><img src="images/xmad_15111749378998_Yybvf.jpg" alt="图片" /></a></li>
    						<li class="b2"><a href="#"><img src="images/xmad_15111887094058_yNXvx.jpg" alt="图片" /></a></li>
    						<li class="b2"><a href="#"><img src="images/xmad_1511169106454_FejIi.jpg" alt="图片"/></a></li>
    					</ul>
    				</div>
    				<div id="b4">
    					<h3>小米实用单品</h3>
    					<ul>
    						<li><a href="#"><img src="images/T1MaL_BQbT1RXrhCrK.jpg" alt="图片" /></a>
    							<p>小米手环</p><p class="b32">美国ADI传感器，30天超长续航</p><br /><p class="b33">69元</p></li>
    						<li class="b3"><a href="#"><img src="images/T1KDAjBCAT1RXrhCrK.jpg" alt="图片" /></a>
    							<p class="b31">小米路由器 mini</p><p class="b32">主流双频AC智能路由器</p><br /><p class="b33">129元</p></li>
    						<li class="b3"><a href="#"><img src="images/T16eEjBKhT1RXrhCrK.jpg" alt="图片" /></a>
    							<p>小米移动电源10000mAh</p><p class="b32">高密度进口电芯，仅名片大小</p><br /><p class="b33">69元起</p></li>
    						<li class="b3"><a href="#"><img src="images/T1tsEgB7DT1RXrhCrK.jpg"alt="图片"/></a>
    							<p class="b31">全新小米路由器</p><p class="b32">高配版路由器，企业级性能</p><br /><p class="b33">699元</p></li>
    						<li class="b3"><a href="#"><img src="images/T1JnWjBCCT1RXrhCrK.jpg" alt="图片"/></a>
    							<p class="b31">小米蓝牙耳机</p><p class="b32">2015德国IF大奖，高清通话音质</p><br /><p class="b33">79元</p></li>
    					</ul>
    				</div>
    				<div id="b5">
    					<h3 style="padding-top:10px;">智能配件</h3>
    					<ul>
    						<li class="b1"><a href="#"><img src="images/T17yC_Bmhv1RXrhCrK.jpg"  alt="图片" /></a>
    							
    						<li class="b4"><a href="#"><img src="images/T1_SDgB4KT1RXrhCrK.jpg"  alt="图片" /></a>
    							<p>小米自拍杆</p><p class="b33">49元</p><br /><p class="b32">4.1万人评价</p></li>
    						<li class="b4"><a href="#"><img src="images/T1bPbTBvYT1RXrhCrK.jpg"  alt="图片" /></a>
    							<p>小米Note 智能唤醒翻盖保护套</p><p class="b33">49元</p><br /><p class="b32">5.6万人评价</p></li>
    						<li class="b4"><a href="#"><img src="images/T1COAjB7WT1RXrhCrK.jpg"  alt="图片" /></a>
    							<p>指环式防滑手机支架</p><p class="b33">12.5元</p><br /><p class="b32">366人评价</p></li>
    						<li class="b4" ><a href="#"><img src="images/T1zL_vByCT1RXrhCrK.jpg"  alt="图片" /></a>
    							<p>小米随身WIFI</p><p class="b33">19.9元</p><br /><p class="b32">28.1万人评价</p></li>						
    						<li class="b1" style="clear:both"><a href="#"><img src="images/T1sxWvB7Yv1RXrhCrK.jpg"  alt="图片" /></a>
    							
    						<li class="b4"><a href="#"><img src="images/T1ETWTBQhT1RXrhCrK.jpg"  alt="图片" /></a>
    							<p>小米Note标准高透贴膜（2片装）</p><p class="b33">199元</p><br /><p class="b32">5.4万人评价</p></li>
    						<li class="b4"><a href="#"><img src="images/T1HvCgByhv1RXrhCrK.jpg"  alt="图片" /></a>
    							<p>小米Note 真皮智能翻盖手机套</p><p class="b33">99元</p><br /><p class="b32">423人评价</p></li>
    						<li class="b4"><a href="#"><img src="images/T1KYYjBCKT1RXrhCrK.jpg"  alt="图片" /></a>
    							<p>小米Note 实木保护套</p><p class="b33">69元</p><br /><p class="b32">3534人评价</p></li>
    						<li class="b4"><a href="#"><img src="images/T1jcEgB4AT1RXrhCrK!220x220.jpg"  alt="图片" /></a>
    							<p>小米插线板</p><p class="b33">49元</p><br /><p class="b32">13.3万人评价</p></li>
    					</ul>
    				</div>
    				<div id="b6">
    					<img src="images/2.png"  alt="图片"/>
    				</div>
    			</div>
    			
    		<div id="a2">
    			<ul class="a2">
    				<h3>热门链接</h3>
    				<li><a href="#">Note 13</a></li>
    				<li><a href="#">Max12</a></li>
    				<li><a href="#">mu摄影</a></li>
    				<li><a href="#">查找手机</a></li>
    				<li><a href="#">体验中心</a></li>
    				<li><a href="#">常见问题</a></li>
    			</ul>
    				<ul class="a3">
    					<h3>在线购买</h3>
    					<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>
    				<ul class="a3">
    					<h3>服务支持</h3>
    					<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>
    					<li><a href="#">维修配件价格</a></li>
    				</ul>	
    				<ul class="a3">
    					<h3>我的社区</h3>
    					<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>	
    				<ul class="a3">
    					<h3>关于我们</h3>
    					<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>
    				<ul class="a5">
    					<li style="font-size:36px">
    					<p style="padding-left:327px">24小时全国服务热线:</p>
    					<p style="font-size:30px; padding-left:240px">400-888-8888</p>
    					<p style=" padding-left:350px"><a href="#"><img src="images/online-service-active.png" height="20px"/>在线客服</a></p>
    					</li>
    				</ul>
    		</div>
    	</div>>
    </body>
    </html>

### CSS部分 ###

/* CSS Document */
    
    * {
        
    	margin: 0px;
    	padding: 0px;
    	font-size: 12px;
    }
    
    #bigdiv1 {
        
    	height: 2300px;
    	background-color: #fafafa
    }
    
    #a1 {
        
    	border: solid #000000 1px;
    	height: 40px;
    	background-color: #000000;
    }
    
    #a1 ul {
        
    	list-style-type: none;
    }
    
    #a1 ul li a {
        
    	float: left;
    	margin-right: 70px;
    	color: #FFFFFF;
    	font-size: 16px;
    	padding-top: 10px;
    	text-decoration: none;
    	list-style-type: none;
    }
    
    #a2 {
        
    	height: 300px;
    }
    
    .a2 {
        
    	float: left;
    	list-style-type: none;
    	margin-left: 60px;
    }
    
    .a2 li a {
        
    	font-size: 12px;
    	text-decoration: none;
    	color: #666666;
    }
    
    .a3 {
        
    	float: left;
    	list-style-type: none;
    	margin-left: 130px;
    }
    
    .a3 li a {
        
    	font-size: 12px;
    	text-decoration: none;
    	color: #666666;
    }
    
    #a3 {
        
    	padding-left: 30px;
    }
    
    .a1 {
        
    	padding-left: 480px;
    }
    
    #a1 a:hover {
        
    	color: #CCCCCC;
    }
    
    #a2 h3 {
        
    	padding-top: 60px;
    	padding-bottom: 30px;
    }
    
    #a2 li {
        
    	padding-bottom: 5px
    }
    
    .a3 a:hover {
        
    	color: #0099FF;
    }
    
    .a2 a:hover {
        
    	color: #0099FF;
    }
    
    .a5 {
        
    	height: 300px;
    	width: 500px;
    	margin-left: 830px;
    	list-style-type: none;
    }
    
    .a5 li {
        
    	padding: 60px 0px 0px 0px;
    }
    
    .a5 li p {
        
    	padding-bottom: 12px
    }
    
    .a5 a {
        
    	text-decoration: none;
    	font-size: 16px;
    	color: #00CCFF
    }
    
    #b1 {
        
    	height: 1900px;
    	width: 1200px;
    	margin: 0px auto;
    }
    
    #b2 {
        
    	height: 450px;
    }
    
    #b3 {
        
    	background-color: #FFFFFF;
    	height: 200px;
    }
    
    #b3 img {
        
    	width: 270px;
    	height: 180px;
    }
    
    #b3 ul li {
        
    	float: left;
    	list-style-type: none;
    	margin-top: 10px;
    }
    
    .b2 {
        
    	padding-left: 40px;
    }
    
    #b4 {
        
    	height: 380px;
    	background-color: #FFFFFF;
    }
    
    #b4 h3 {
        
    	font-size: 24px;
    	color: #333333;
    }
    
    #b4 ul li {
        
    	float: left;
    	list-style-type: none;
    	margin-top: 10px;
    	width: 215px;
    	height: 290px;
    	background-color: #fafafa;
    	text-align: center;
    }
    
    .b3 {
        
    	margin-left: 30px;
    }
    
    #b4 img {
        
    	width: 215px;
    }
    
    .b32 {
        
    	color: #666666;
    }
    
    .b33 {
        
    	color: #FF9900;
    	font-size: 16px;
    }
    
    #b5 {
        
    	height: 740px;
    }
    
    #b5 h3 {
        
    	font-size: 24px;
    	color: #333333;
    }
    
    #b5 ul li {
        
    	float: left;
    	list-style-type: none;
    	background-color: #FFFFFF;
    	text-align: center;
    	height: 300px;
    	width: 234px;
    }
    
    .b4 img {
        
    	width: 160px;
    	height: 160px;
    	padding-bottom: 30px;
    }
    
    .b4 {
        
    	margin-left: 7px;
    	margin-top: 20px;
    }
    
    .b1 {
        
    	margin-top: 20px;
    }
    
    #b6 {
        
    	height: 130px;
    	text-align: center;
    }
    
    #b3 li:hover {
        
    	margin-top: 5px;
    }
    
    #b4 li:hover {
        
    	margin-top: 5px;
    }
    
    .b4:hover {
        
    	margin-top: 15px;
    }
    
    .b1:hover {
        
    	margin-top: 15px;
    }

## 需要源程序私信我 ##

[a176c68fa76543e3a882e99b68e167b5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/7fc4f552d32c404da6f934856b819718.png
[8d50a9ddfecb4a66a6b8442f9f9ce6aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/4de89d2dd5b14004a9e1360a648a7707.png
[719bc1217e9d4504b21cc8adad9b9625.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/4098000d8fe64317bc406ed48b5711f3.png
[acf4edad75c8451b8161325e14e797b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/99b797783f504d8da2d0dee2c3409b6b.png