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

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

文章目录🌰

一、网页介绍📖
一、网页效果🌌
二、代码展示😈
- 1.HTML结构代码 🧱
- 2.CSS样式代码 🏠
三、个人总结😊
四、更多干货🚀

一、网页介绍📖

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>
	
		<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="">MIUIa>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 Regiona>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>
	


		<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 小米MIX现货">
					div>
					<div class="submit fl">
						<input type="submit" class="sousuo" value="搜索"/>
					div>
					<div class="clear">div>
				form>
				<div class="clear">div>
			div>
		div>


	
		<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">小米6span>
											<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">小米手机5cspan>
											<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 2span>
											<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">小米MIXspan>
											<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">小米5sspan>
											<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 Plusspan>
											<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">小米手机5span>
		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 Regiondiv>
			<div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号div> 
			<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试div>
		footer>
	body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203

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;}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244

三、个人总结😊

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

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

四、更多干货🚀

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

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

3.以上内容技术相关问题😈欢迎一起交流学习🔥 在这里插入图片描述

相关阅读:
【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境
 leetcode-hot100-矩阵
 计算机毕业设计ssm高校就业管理系统157v3系统+程序+源码+lw+远程部署
 2310d亚当1009
C语言 extern “C“的作用
 举例详解 TCP/IP 五层（或四层）模型与 OSI七层模型对比（画图详解一篇看懂！）
RabbitMQ 延迟消息实战
 也谈谈SDP零信任和传统公司接入的区别
 设计模式学习（十三）：观察者模式
 【iOS】—— 对象的底层结构和继承者链（isa、class）
原文地址：https://blog.csdn.net/qq_38513433/article/details/128048420

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