学生个人网页设计作品 HTML+CSS+JavaScript仿小米商城(8页) 学生个人网页模板简单个人主页成品个人网页制作 HTML学生个人网站作业设计

html精品源码

已于 2023-12-07 14:54:25 修改

阅读量8.1k

点赞数 7

分类专栏： html期末大作业 dw静态网页设计与制作 web前端大作业文章标签： javascript html css HTML网页设计结课作业 web网站设计与实现

于 2022-08-15 23:07:14 首次发布

本文链接：https://blog.csdn.net/html_wangye/article/details/126183216

版权

web前端大作业同时被 3 个专栏收录

729 篇文章 14 订阅

订阅专栏

dw静态网页设计与制作

674 篇文章 19 订阅

订阅专栏

html期末大作业

663 篇文章 9 订阅

订阅专栏

临近期末，大一新生的各种考试和专业结课作业纷至沓来。什么高数啊、线代啊、C语言、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。。

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

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

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小米商城</title>
		<link rel="stylesheet" type="text/css" href="./css/style.css">
	</head>
	<body>
	<!-- start header -->
		<header>
			<div class="top center">
				<div class="left fl">
					<ul>
						<li><a href="http://www.mi.com/" target="_blank">小米商城</a></li>
						<li>|</li>
						<li><a href="">MIUI</a></li>
						<li>|</li>
						<li><a href="">米聊</a></li>
						<li>|</li>
						<li><a href="">游戏</a></li>
						<li>|</li>
						<li><a href="">多看阅读</a></li>
						<li>|</li>
						<li><a href="">云服务</a></li>
						<li>|</li>
						<li><a href="">金融</a></li>
						<li>|</li>
						<li><a href="">小米商城移动版</a></li>
						<li>|</li>
						<li><a href="">问题反馈</a></li>
						<li>|</li>
						<li><a href="">Select Region</a></li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="right fr">
					<div class="gouwuche fr"><a href="">购物车</a></div>
					<div class="fr">
						<ul>
							<li><a href="./login.html" target="_blank">登录</a></li>
							<li>|</li>
							<li><a href="./register.html" target="_blank" >注册</a></li>
							<li>|</li>
							<li><a href="">消息通知</a></li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</header>
	<!--end header -->

<!-- start banner_x -->
		<div class="banner_x center">
			<a href="./index.html" target="_blank"><div class="logo fl"></div></a>
			<a href=""><div class="ad_top fl"></div></a>
			<div class="nav fl">
				<ul>
					<li><a href="./liebiao.html" target="_blank">小米手机</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>
					<li><a href="">智能硬件</a></li>
					<li><a href="">服务</a></li>
					<li><a href="">社区</a></li>
				</ul>
			</div>
			<div class="search fr">
				<form action="" method="post">
					<div class="text fl">
						<input type="text" class="shuru"  placeholder="小米6&nbsp;小米MIX现货">
					</div>
					<div class="submit fl">
						<input type="submit" class="sousuo" value="搜索"/>
					</div>
					<div class="clear"></div>
				</form>
				<div class="clear"></div>
			</div>
		</div>
<!-- end banner_x -->

	<!-- start banner_y -->
		<div class="banner_y center">
			<div class="nav">				
				<ul>
					<li>
						<a href="">手机</a>
						<a href="">电话卡</a>
						<div class="pop">
							<div class="left fl">
								<div>
									<div class="xuangou_left fl">
										<a href="">
											<div class="img fl"><img src="./image/xm6_80.png" alt=""></div>
											<span class="fl">小米6</span>
											<div class="clear"></div>
										</a>
									</div>
									<div class="xuangou_right fr"><a href="./xiangqing.html" target="_blank">选购</a></div>
									<div class="clear"></div>
								</div>
								<div>
									<div class="xuangou_left fl">
										<a href="">
											<div class="img fl"><img src="./image/5c_80.png" alt=""></div>
											<span class="fl">小米手机5c</span>
											<div class="clear"></div>
										</a>
									</div>
									<div class="xuangou_right fr"><a href="">选购</a></div>
									<div class="clear"></div>
								</div>
								<div>
									<div class="xuangou_left fl">
										<a href="">
											<div class="img fl"><img src="./image/xmNOTE2-80.jpg" alt=""></div>
											<span class="fl">小米Note 2</span>
											<div class="clear"></div>
										</a>
									</div>
									<div class="xuangou_right fr"><a href="">选购</a></div>
									<div class="clear"></div>
								</div>
								<div>
									<div class="xuangou_left fl">
										<a href="">
											<div class="img fl"><img src="./image/MIX-80.jpg" alt=""></div>
											<span class="fl">小米MIX</span>
											<div class="clear"></div>
										</a>
									</div>
									<div class="xuangou_right fr"><a href="">选购</a></div>
									<div class="clear"></div>
								</div>
								<div>
									<div class="xuangou_left fl">
										<a href="">
											<div class="img fl"><img src="./image/MIX-80.jpg" alt=""></div>
											<span class="fl">小米5s</span>
											<div class="clear"></div>
										</a>
									</div>
									<div class="xuangou_right fr"><a href="">选购</a></div>
									<div class="clear"></div>
								</div>
								<div>
									<div class="xuangou_left fl">
										<a href="">
											<div class="img fl"><img src="./image/xm5Splus.jpg" alt=""></div>
											<span class="fl">小米5s Plus</span>
											<div class="clear"></div>
										</a>
									</div>
									<div class="xuangou_right fr"><a href="">选购</a></div>
									<div class="clear"></div>
								</div>								
							</div>
							<div class="ctn fl">
								<div>
									<div class="xuangou_left fl">
										<a href="">
											<div class="img fl"><img src="./image/xm5-80.jpg" alt=""></div>
											<span class="fl">小米手机5</span>
		pan>
								<span>来至于mi狼牙的评价</span>
							</a>
						</div>
					</div>
					<div class="remen fl">
						<div class="xinpin"><span style="background:#fff"></span></div>
						<div class="tu"><a href=""><img src="./image/peijian8.jpg"></a></div>
						<div class="miaoshu"><a href="">米家随身风扇</a></div>
						<div class="jiage">19.9元</div>
						<div class="pingjia">372人评价</div>
					</div>
					<div class="remen fl">
						<div class="xinpin"><span style="background:#fff"></span></div>
						<div class="tu"><a href=""><img src="./image/peijian9.jpg"></a></div>
						<div class="miaoshu"><a href="">红米4X 高透软胶保护套</a></div>
						<div class="jiage">59元</div>
						<div class="pingjia">775人评价</div>
					</div>
					<div class="remenlast fr">
						<div class="hongmi"><a href=""><img src="./image/hongmin4.png" alt=""></a></div>
						<div class="liulangengduo"><a href=""><img src="./image/liulangengduo.png" alt=""></a></div>					
					</div>
					<div class="clear"></div>
				</div>				
			</div>
		</div>
		<footer class="mt20 center">			
			<div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
			<div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
		</footer>
	</body>
</html>

2.CSS样式代码 🏠

*{margin: 0;padding: 0;text-decoration: none;list-style-type: none;font-family: Times New Roman;}

img{border:none;}
a{border:none;text-decoration: none;color:#000;}
.border{border:1px solid red;}
.center{margin: 0 auto;}
.w{width: 1226px;margin: 0 auto;}
.fl{float: left;}
.fr{float: right;}
.clear{clear:both;}
.mt20{margin-top: 20px;}
.mt10{margin-top: 10px;}
.ml20{margin-left: 20px;}
.ml40{margin-left: 40px;}
.mr40{margin-right: 40px;}
.mb20{margin-bottom: 20px;}
.border2{border:2px solid #ff6700;}
.ft20{font-size: 20px;}
.ftbc{color: #ff6700;font-weight: bold;}
.pr{padding-right: 40px;}

.h3{font-size: 22px;font-weight: bold;}


/*header*/
header{width: 100%;height: 40px;background: #333}
header .top{width: 1226px;height: 40px;line-height: 40px;}
header .top .left ul li{float: left;font-size: 12px;color: #ccc;}
header .top .left ul li a{display:block;padding:0 8px;font-size: 12px;font-family: Times New Roman;color: #b0b0b0;}
header .top .left ul li a:hover{color:#fff;}
header .top .right ul li{float: left;font-size: 12px;color: #ccc;}
header .top .right ul li a{display:block;padding:0 8px;font-size: 12px;font-family: Times New Roman;color: #b0b0b0;}
header .top .right ul li a:hover{color:#fff;}
header .top .right .gouwuche a{color:#fff;}
header .top .right .gouwuche{margin:0 20px;background: #424242;width: 120px;text-align: center;font-size: 12px;cursor:pointer;background: #ff6700;color: #fff;}

header .top .right .gouwuche:hover{color:#000;background: #666;}
/*banner_x*/
.banner_x {width: 1226px;height: 100px;}
.banner_x .logo{background: url('../image/logo_top.png') no-repeat center center;width: 50px;height: 100px;}
.banner_x .ad_top{width: 180px;height: 100px;background: url('../image/yyymix.gif') no-repeat center center;}
.banner_x .nav ul li{float: left;height: 100px;line-height: 100px;}
.banner_x .nav ul li a{display:inline-block;color: #000;font-size: 16px;padding: 0 10px;}
.banner_x .nav ul li a:hover{color: rgb(255,103,0); }
.banner_x .search{width: 308px;height: 100px;line-height: 100px;}
.banner_x .search .text{width: 250px;height:50px;line-height: 50px;font-size: 12px;margin-top: 25px;border:1px solid #ccc;}
.banner_x .search .text:hover{border-color: #ff6700;}
.banner_x .search .text .shuru{border: none;width: 250px;height: 50px;}
.banner_x .search .submit{width: 50px;height:50px;line-height: 50px;text-align:center;font-size: 12px;margin-top: 25px;border:1px solid #ccc;}
.banner_x .search .submit .sousuo{letter-spacing:3px;text-align:center;width: 50px;height:50px;border: none;background: none;cursor:pointer;}
.banner_x .search .submit:hover{border-color: #ff6700;color:#ff6700;} 
/*banner_y*/
.banner_y{width:1226px;height:460px;background: url('../image/banner2.jpg') no-repeat;}
.banner_y .nav{width: 234px;height: 460px;background: rgb(12,12,19);}
.banner_y .nav ul{padding: 20px 0;position:relative;}
.banner_y .nav ul li{display: block;width: 174px;height: 40px;line-height:40px;font-size: 14px;padding: 0 30px;}
.banner_y .nav ul li .pop{width: 800px;height: 460px;background: #fff;position:absolute;left:234px;top:0px;display: none;}
.banner_y .nav ul li:hover .pop{display: block;box-shadow: 2px 3px 5px #ccc; border-top: 1px solid #ccc;}
.banner_y .nav ul li .pop .left{width: 265px;height: 460px;background: #fff;}
.banner_y .nav ul li .pop .left div{margin-bottom: 3px;}
.banner_y .nav ul li .pop .left .xuangou_left{height: 40px;line-height:40px; font-size: 14px;margin-left: 10px;margin-top: 20px;}
.banner_y .nav ul li .pop .left .xuangou_left a{color: #000;}
.banner_y .nav ul li .pop .left .xuangou_left a img{valign:middle;}
.banner_y .nav ul li .pop .left .xuangou_left a span{display: inline-block;margin-left: 10px;font-size: 14px;}
.banner_y .nav ul li .pop .left .xuangou_left a span:hover{color:#ff6700;}
.banner_y .nav ul li .pop .left .xuangou_right{margin-top: 25px;height: 40px;line-height: 40px;}
.banner_y .nav ul li .pop .left .xuangou_right a{display: block;width: 60px;line-height:24px;height: 24px;text-align: center;font-size: 12px;color:#ff6700;border:1px solid #ff6700;}
.banner_y .nav ul li .pop .left .xuangou_right a:hover{display: block;background:#ff6700;color:#fff; }

.banner_y .nav ul li .pop .ctn{width: 265px;height: 460px;}
.banner_y .nav ul li .pop .ctn div{margin-bottom: 3px;}
.banner_y .nav ul li .pop .ctn .xuangou_left{height: 40px;line-height:40px; font-size: 14px;margin-left: 10px;margin-top: 20px;}
.banner_y .nav ul li .pop .ctn .xuangou_left a{color: #000;}
.banner_y .nav ul li .pop .ctn .xuangou_left a img{valign:middle;}
.banner_y .nav ul li .pop .ctn .xuangou_left a span{display: inline-block;margin-left: 10px;font-size: 14px;}
.banner_y .nav ul li .pop .ctn .xuangou_left a span:hover{color:#ff6700;}
.banner_y .nav ul li .pop .ctn .xuangou_right{margin-top: 25px;height: 40px;line-height: 40px;}
.banner_y .nav ul li .pop .ctn .xuangou_right a{display: block;width: 60px;line-height:24px;height: 24px;text-align: center;font-size: 12px;color:#ff6700;border:1px solid #ff6700;}
.banner_y .nav ul li .pop .ctn .xuangou_right a:hover{display: block;background:#ff6700;color:#fff; }

.banner_y .nav ul li .pop .right{width: 265px;height: 460px;margin-right: 5px;}
.banner_y .nav ul li .pop .right div{margin-bottom: 3px;}
.banner_y .nav ul li .pop .right .xuangou_left{height: 40px;line-height:40px; font-size: 14px;margin-left: 10px;margin-top: 20px;}
.banner_y .nav ul li .pop .right .xuangou_left a{color: #000;}
.banner_y .nav ul li .pop .right .xuangou_left a img{valign:middle;}
.banner_y .nav ul li .pop .right .xuangou_left a span{display: inline-block;margin-left: 10px;font-size: 14px;}
.banner_y .nav ul li .pop .right .xuangou_left a span:hover{color:#ff6700;}
.banner_y .nav ul li .pop .right .xuangou_right{margin-top: 25px;height: 40px;line-height: 40px;}
.banner_y .nav ul li .pop .right .xuangou_right a{display: block;width: 60px;line-height:24px;height: 24px;text-align: center;font-size: 12px;color:#ff6700;border:1px solid #ff6700;}
.banner_y .nav ul li .pop .right .xuangou_right a:hover{display: block;background:#ff6700;color:#fff; }

.banner_y .nav ul li:hover{background: #ff6700; }
.banner_y .nav ul li a{display:inline-block;margin-left:10px;color: #fff;}

/*sub_banner*/
.sub_banner{width: 1226px;height: 170px;margin-top: 15px;}
.sub_banner .sidebar{width: 234px;height: 170px;}
.sub_banner .sidebar div{width: 78px;height: 85px;marign:0;padding: 0;}
.sub_banner .sidebar div a img{opacity:0.8;}
.sub_banner .sidebar div a img:hover{opacity:1;}
.sub_banner .datu{width: 316px;height: 170px;margin-left: 14px;}
.sub_banner .datu a img{width: 316px;height: 170px;opacity:0.8;}
.sub_banner .datu a img:hover{opacity:1;}
/*danpin*/
.biaoti{width: 1226px;height: 58px;line-height: 58px;font-size: 
22px;font-weight: bold;margin-top: 20px;}
.danpin .main{width: 1226px;height: 340px;}
.danpin .main .mingxing{width: 234px;height: 339px;background: rgb(250,250,250);}
.danpin .main .mingxing:nth-of-type(1){border-top: 1px solid orange;margin-right:14px;}
.danpin .main .mingxing:nth-of-type(2){border-top: 1px solid green;margin-right:14px;}
.danpin .main .mingxing:nth-of-type(3){border-top: 1px solid blue;margin-right:14px;}
.danpin .main .mingxing:nth-of-type(4){border-top: 1px solid red;margin-right:14px;}
.danpin .main .mingxing:nth-of-type(5){border-top: 1px solid teal;}
.danpin .main .mingxing .sub_mingxing{padding: 37px;}
.danpin .main .mingxing .sub_mingxing a img{display:block;width: 160px;height: 160px;opacity: 0.85}
.danpin .main .mingxing .sub_mingxing a img:hover{width: 160px;height: 160px;opacity: 1;}
.danpin .main .mingxing .pinpai{width: 234px;height: 14px;line-height: 14px;text-align: center;margin-top: -10px;}
.danpin .main .mingxing .pinpai a{font-size: 14px;color:#333;}
.danpin .main .mingxing .youhui{width: 234px;height: 12px;line-height: 12px;margin:15px 0;font-size: 12px;color: rgb(176,176,176);text-align: center;}
.danpin .main .mingxing .jiage{font-size: 14px;text-align: center;color:#ff6709;}

/*peijian*/
.peijian{background: rgb(245,245,245);}
.peijian .main{height:614px;}
.peijian .main .content{width: 1226px;height: 300px;}
.peijian .main .content:nth-of-type(2){margin-top: 14px;}
.peijian .main .content .remen{width:234px;height: 300px;margin-right: 14px;position:relative;background: #fff;}
.peijian .main .content .remen:hover{margin-top: -2px;box-shadow: 0px 0px 30px #ccc;}
.peijian .main .content .remen:nth-of-type(5){margin:0;}
.peijian .main .content .remen .xinpin span{display: block;margin:0 auto;font-size: 10px;line-height:20px;height: 20px;color:#fff;width: 65px;background: #83c44e;text-align: center;}
.peijian .main .content .remen .tu a img{margin:10px 42px 20px 42px;}
.peijian .main .content .remen .miaoshu{width: 234px;height: 25px;line-height: 25px;text-align: center;overflow: hidden;}
.peijian .main .content .remen .miaoshu a{color:#000;font-size: 14px;}
.peijian .main .content .remen .jiage{color:#ff6700;font-size: 14px;text-align:center;width: 234px;height: 25px;line-height: 25px;}
.peijian .main .content .remen .pingjia{width:234px;height: 15px;line-height: 15px;font-size: 12px;color:#aaa;text-align: center;}
.peijian .main .content .remen .piao{width: 204px;height: 60px;font-size:12px;padding:10px 0px 0px 30px;background:#ff6700; position: absolute;display: none;}
.peijian .main .content .remen .piao a{color:#fff;}
.peijian .main .content .remen .piao span{display: block;margin-top:5px;}
.peijian .main .content .remen:hover .piao{display: block;margin-top: -40px;}
.peijian .main .content .remenlast{width:234px;height: 300px;}
.hongmi:hover{margin-top: -2px;box-shadow: 0px 0px 15px #ccc;}
.liulangengduo{margin-top: 12px;}
.liulangengduo:hover{margin-top: 10px;box-shadow: 0px 0px 30px #ccc;}
/*xiangqing*/
.xiangqing{width: 100%;height: 58px;background: rgb(240,240,240);}
.xiangqing .neirong{height: 58px;width: 1226px;}
.xiangqing .neirong .xiaomi6{width:300px;height: 58px;line-height: 58px;font-size: 
22px;font-weight: bold;}
.xiangqing .neirong nav{display:inline-block;width: 410px;height: 58px;line-height: 58px;}
.xiangqing .neirong nav li{font-size:14px;float: left;display: block;margin:0px 5px;}
.xiangqing .neirong nav li a{color: #333;font-size: 14px;}
.xiangqing .neirong nav li a:hover{color:#ff6700;}
/*jieshao*/
.jieshao{height: 560px; }
.jieshao .left{width:560px;height:560px;border:1px solid #ccc;}
.jieshao .right{width:620px;background: rgb(248,248,248);height: 600px;}
.jieshao .right .jianjie{font-size: 14px;color: rgb(176,176,176);line-height: 20px;}
.jieshao .right .jiage{font-size: 18px;color:#ff6700;font-weight: bold;}
.jieshao .right .xzbb{height: 58px;line-height:58px;}
.jieshao .right .xzbb .banben{height: 58px;line-height: 58px;width: 278px;cursor:pointer;margin-right: 5px;border:1px solid #bbb;}
.jieshao .right .xzbb .banben a{display:block;font-size: 18px;color:#000;padding:0 10px;}
.jieshao .right .xzbb .banben a span{display: inline-block;margin-right: 10px;}
.jieshao .right .xzbb .banben a:hover{color:#ff6700;}
.jieshao .right .xzbb .banben:hover{border:1px solid #ff6700;}
.jieshao .right .xzbb .banben a .yuandian{display: inline-block;height: 15px;width: 15px;border-radius: 50%;background: #000;margin-left: 80px;}
/*选取详情*/
.xqxq{height: 80px;width: 555px;background: rgb(255,255,255);padding:20px;}
/*是否下单*/
.xiadan{height: 50px;line-height: 50px;}
.xiadan .jrgwc{height: 50px;width: 200px;border:none;background:#ff6700;color:#fff;font-size: 18px;font-weight: bold;cursor:pointer;margin-right: 50px;}
.xiadan .jrgwc:hover{border:1px solid #fff;}
/*我的购物车*/
.banner_x .wdgwc{height: 100px;line-height: 100px;font-weight:bold;font-size: 24px;}
.banner_x .wxts{height: 90px;line-height: 105px;font-size: 12px;color:#777;}
.banner_x .dlzc{height: 100px;line-height: 100px;}
.banner_x .dlzc ul li{float: left;font-size: 12px;}
.banner_x .dlzc ul li a{display:block;padding:0 8px;font-size: 12px;font-family: Times New Roman;color: #777;}
.banner_x .dlzc ul li a:hover{color:#ff6700; }
.xiantiao{width: 100%;height: 2px;background:#ff6700; }
/*购物车详单*/
.gwcxqbj{width: 100%;height:400px;background: rgb(245,245,245);padding-bottom: 20px;}
.gwcxqbj .gwcxd{background: #fff;width: 1226px;height: auto;padding-top: 30px;}
.gwcxqbj .gwcxd .top2{width:1226px;height: 70px;}
.gwcxqbj .gwcxd .top2 .sub_top{width: 100px;height: 70px;line-height:36px;margin-right: 0px;margin-top:0px;margin-left: 30px;}
.gwcxqbj .gwcxd .top2 .sub_top:nth-of-type(2){margin-left: 100px;}
.gwcxqbj .gwcxd .top2 .sub_top:nth-of-type(3){margin-left: 300px;}
.gwcxqbj .gwcxd .top2 .sub_top:nth-of-type(4){margin-left: 60px;}
.gwcxqbj .gwcxd .top2 .sub_top:nth-of-type(5){margin-left: 60px;}
.gwcxqbj .gwcxd .top2 .sub_top .quanxuan{width:18px;height:18px;border:1px solid #ccc;background: none;}
.gwcxqbj .gwcxd .content2{width:1226px;height: 120px;border-top: 1px solid #ccc;}
.gwcxqbj .gwcxd .content2 .sub_content{width:50px;height: 120px;line-height:120px;margin-right: 0px;}
.gwcxqbj .gwcxd .sub_content .quanxuan{width:18px;height:18px;border:1px solid #ccc;background: none;}
.gwcxqbj .gwcxd .content2 .sub_content img{vertical-align: middle;}
.gwcxqbj .gwcxd .content2 .sub_content:nth-of-type(1){margin-left: 30px;} 
.gwcxqbj .gwcxd .content2 .sub_content:nth-of-type(2){margin-left: 35px;}
.gwcxqbj .gwcxd .content2 .sub_content:nth-of-type(3){margin-left: 55px;width: 330px;}
.gwcxqbj .gwcxd .content2 .sub_content:nth-of-type(4){margin-left: 55px;}
.gwcxqbj .gwcxd .content2 .sub_content:nth-of-type(5){margin-left: 115px;}
.gwcxqbj .gwcxd .content2 .sub_content:nth-of-type(6){margin-left: 115px;color:#ff6700;}
.gwcxqbj .gwcxd .content2 .sub_content:nth-of-type(7){margin-left: 145px;font-size: 25px;}
.gwcxqbj .gwcxd .content2 .sub_content .shuliang{width: 70px;height: 35px;border:2px solid #ccc;text-align: center;font-size:16px;color:#ff6700;}
.gwcxqbj .gwcxd .content2 .sub_content a{display: block;width: 20px;height: 20px;border-radius: 10px;color:#000;}
.gwcxqbj .gwcxd .content2 .sub_content a:hover{color:#ff6700;}
/*结算单*/
.jiesuandan{width:1226px;height: 50px;background: #fff;}
.jiesuandan .tishi{width: 400px;height: 50px;line-height: 50px;}
.jiesuandan .tishi ul li{float: left; font-size: 14px;display: inline-block;padding:0 10px;color:#666;}
.jiesuandan .tishi ul li a{color:#666;}
.jiesuandan .tishi ul li a:hover{color:#ff6700;}
.jiesuandan .tishi ul li span{display:inline-block;color:#ff6700;margin:0 4px;}
.jiesuandan .jiesuan{width: 500px;height: 50px;line-height: 50px;font-size: 14px;color:#ff6700;}
.jiesuandan .jiesuan .jiesuanjiage span{font-size: 24px;font-weight: bold;}
.jiesuandan .jiesuan .jsanniu .jsan{width: 200px;height: 50px;color:#fff;background:rgb(255,103,0); font-size: 20px;border:none;cursor:pointer;}
.jiesuandan .jiesuan .jsanniu .jsan:hover{background: rgb(242,88,7);}
/*个人中心*/
.grzxbj{width: 100%;height:auto;background: rgb(245,245,245);padding-bottom: 20px;padding-top: 20px;}
.grzxbj .selfinfo{width: 1226px;}
.grzxbj .selfinfo .lfnav{width: 234px;height: 500px;background: #fff;}
.grzxbj .selfinfo .lfnav .ddzx{width: 234px;height: 40px;line-height: 40px;font-size: 19px; margin:30px 20px 10px 40px;color:rgb(51,51,51);}
.grzxbj .selfinfo .lfnav .subddzx ul li{display: block;width: 194px;height: 40px;line-height: 40px;padding-left: 40px;}
.grzxbj .selfinfo .lfnav .subddzx ul li a{color:rgb(117,117,117);}
.grzxbj .selfinfo .lfnav .subddzx ul li a:hover{color:rgb(51,51,51);}
.grzxbj .selfinfo .rtcont{width: 978px;height: 500px;background: #fff;}
.grzxbj .selfinfo .rtcont .ddzxbt{width: 938px;height: 60px;line-height: 60px;font-size: 22px;font-weight:bold;color:rgb(117,117,117);padding-left: 40px;border-bottom: 1px solid #ccc;}
.grzxbj .selfinfo .rtcont .grzlbt{width:938px;height: 60px;line-height: 60px;font-size: 20px;color:rgb(117,117,117);}
.grzxbj .selfinfo .rtcont .subgrzl{height: 45px;line-height: 45px;width: 900px;background: rgb(253,253,253);border:1px solid #aaa;margin-top: 10px;margin-bottom: 10px;border-radius: 3px;}
.grzxbj .selfinfo .rtcont .subgrzl span:nth-of-type(1){display: inline-block;font-size: 15px;font-weight: bold;color:rgb(117,117,117);width: 70px;height: 45px;line-height: 45px;padding-left: 20px;}
.grzxbj .selfinfo .rtcont .subgrzl span:nth-of-type(2){display: inline-block;font-size: 15px;color:rgb(117,117,117);width: 480px;height: 45px;line-height: 45px;padding-left: 120px;
}
.grzxbj .selfinfo .rtcont .subgrzl span:nth-of-type(3){display: inline-block;font-size: 15px;width: 160px;height: 45px;line-height: 45px;text-align: right;}
.grzxbj .selfinfo .rtcont .subgrzl span a{color:teal; }
.grzxbj .selfinfo .rtcont .subgrzl span a:hover{color:#ff6700; }

/*订单中心*/
.grzxbj .selfinfo .rtcont .ddxq{width: 938px;height: 120px;line-height: 120px;font-size: 17px;color:rgb(117,117,117); 
	border-bottom: 1px solid #ccc;padding-left: 40px;}
.grzxbj .selfinfo .rtcont .ddxq .ddspt{width: 80px;height: 80px;margin: 19px 25px 0 0;border:1px solid #aaa;}
.grzxbj .selfinfo .rtcont .ddxq .ztxx ul li{display: inline-block;width: 130px;height: 60px;line-height:60px;float: left;border-left:1px solid #aaa; margin-top: 30px;text-align: center;}
.grzxbj .selfinfo .rtcont .ddxq .ztxx ul li a{color:rgb(117,117,117);}
.grzxbj .selfinfo .rtcont .ddxq .ztxx ul li a:hover{color:#ff6700;}
/*footer*/
footer{width: 100%;height: 120px;line-height: 30px;text-align: center;font-size: 12px;background: rgb(250,250,250);padding:30px 0;}

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
所有页面相互超链接，可到三级页面，有5-10个页面组成；
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
菜单美观、醒目，二级菜单可正常弹出与跳转；
要有JS特效，如定时切换和手动切换图片新闻；
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

html精品源码

关注

7
点赞
踩
51

收藏

觉得还不错? 一键收藏
0
评论
学生个人网页设计作品 HTML+CSS+JavaScript仿小米商城(8页) 学生个人网页模板简单个人主页成品个人网页制作 HTML学生个人网站作业设计

⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
复制链接

扫一扫