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

news2025/7/11 14:59:23

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

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

  • 一、网页介绍📖
  • 一、网页效果🌌
  • 二、代码展示😈
    • 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>
	<!-- 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;}

三、个人总结😊

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

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

四、更多干货🚀

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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/36761.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

《人月神话》（The Mythical Man-Month）4概念一致性：专制、民主和系统设计(System Design）...

《人月神话》（The Mythical Man-Month）4概念一致性：专制、民主和系统设计(System Design）...

主题&#xff1a;概念一致性 &#xff08;Conceptual Integrity&#xff09;4. 专制、民主和系统设计(System Design&#xff09;Chapter 4. Aristocracy, Democracy, and System Design大教堂是艺术史上无与伦比的成就。它的原则既不乏味也不混乱……真正达到了风格上的极致&a…
阅读更多...
【蓝桥杯选拔赛真题30】python计算倒数和 青少年组蓝桥杯python 选拔赛STEMA比赛真题解析

【蓝桥杯选拔赛真题30】python计算倒数和 青少年组蓝桥杯python 选拔赛STEMA比赛真题解析

目录 python计算倒数和 一、题目要求 1、编程实现 2、输入输出 3、评分标准
阅读更多...
【深度学习】手写数字识别

【深度学习】手写数字识别

一、机器学习问题的求解步骤 学习 使用训练数据进行权重参数的学习 推理使用学习到的参数对输入的数据进行分类 二、MNIST数据集 2.1 load_mnist(flattenTrue, normalizeFalse) flattentrue 读入的图像一维numpy数组的形式保存 2.2 函数学习 def fromarray(obj, modeNone…
阅读更多...
第六章《类的高级特性》第2节：包的创建和使用

第六章《类的高级特性》第2节：包的创建和使用

在一个Java工程中，往往会包含很多类。为了方便工程管理，程序员总是希望能够把这些类按照功能分开存放。为了达到这个目的，Java语言允许开发者把不同的类放入不同的包中。所谓“包”就是存放类的容器，在一个包中可以存放多个类。 6.2.1创建包 程序员使用IDEA可以很轻松的创…
阅读更多...
开环控制（自动控制理论）

开环控制（自动控制理论）

自动控制的基本原理方式 自动控制&#xff1a;是指没有人直接参与的情况下&#xff0c;利用控制装置&#xff08;称为控制器&#xff09;&#xff0c;使整个生产过程或工作机械&#xff08;称被控对象&#xff09;的某个工作状态或参数&#xff08;即被控量&#xff09;自动地按…
阅读更多...
ubuntu 22.04 配置 Prometheus 和 Grafana 服务器监控

ubuntu 22.04 配置 Prometheus 和 Grafana 服务器监控

由于内存白菜价&#xff0c; 家里的虚拟机越来越多了。 1个是难以管理hostname 和 ip&#xff0c; 只靠/etc/hosts 去记住其实并不方便 试过宝塔linux面板&#xff0c; 可惜是单机的&#xff0c;不适用于管理集群linux服务器&#xff0c; 而且里面一股金钱气息。 至于他们另1…
阅读更多...
李宏毅2017机器学习课程 回归

李宏毅2017机器学习课程 回归

李宏毅2017机器学习课程 P3 回归 Regression 下文不区分w和ω&#xff08; 文章目录李宏毅2017机器学习课程 P3 回归 Regression回归定义举例:Pokemon精灵攻击力预测(Combat Power of a Pokemon)模型步骤Step1&#xff1a;模型假设-线性模型一元线性模型&#xff08;单个特征&…
阅读更多...
搭建lnmp+nfs+调度器

搭建lnmp+nfs+调度器

→→→大虾好吃吗←←← 目录 搭建lnmp平台 nginx配置 mysql配置 php配置 验证 nfs调度器 安装服务 nfs配置 调度器配置 验证 →→→大虾好吃吗←←← 实验目标&#xff1a;搭建lnmp平台&#xff0c;安装wordpress论坛搭建nfs&#xff0c;客户端通过调度器访问nfs论坛。 实验拓…
阅读更多...
pandas数据分析：十分钟快速入门重点函数速查

pandas数据分析：十分钟快速入门重点函数速查

文章目录前言一、生成Series对象和DataFrame对象二、查看数据三、获取数据3.1 获取单列数据3.2 按照标签选择数据&#xff1a;loc函数3.2 按照位置选择数据&#xff1a;iloc函数3.3 布尔索引3.4 赋值四、缺失值五、运算六、merge&#xff1a;合并DataFrame6.1 concat函数6.2 me…
阅读更多...
体系结构31_机群计算机

体系结构31_机群计算机

目前流行的高性能并行计算机系统结构通常可以分成五类&#xff1a;并行向量处理机&#xff08;PVP&#xff09;、对称多处理机&#xff08;SMP&#xff09;、大规模并行处理机&#xff08;MPP&#xff09;、分布共享存储&#xff08;DSM&#xff09;多处理机和机群&#xff08;…
阅读更多...
现代密码学导论-13-归约证明

现代密码学导论-13-归约证明

目录 3.3.2 Proofs by Reduction 最后来理一遍&#xff1a; 3.3.2 Proofs by Reduction 如果我们希望证明一个给定的构造&#xff08;例如&#xff0c;加密方案&#xff09;在计算上是安全的&#xff0c;那么——除非该方案在信息理论上是安全的——我们必须依赖于未经证明的…
阅读更多...
影像匹配基本算法(摄影测量)

影像匹配基本算法(摄影测量)

影像匹配实质上是在两幅(或多幅)影像之间识别同名点&#xff0c;它是计算机视觉及数字摄影测量的核心问题。由于早期的研究一般使用相关技术解决影像匹配问题&#xff0c;所以影像匹配常常被称为影像相关。 根据影像匹配过程中匹配基元选择的不同&#xff0c;影像匹配方法可分…
阅读更多...
iptables应用大全

iptables应用大全

iptables四表五链&#xff1a; 1、“四表”是指 iptables 的功能 ——filter 表&#xff08;过滤规则表&#xff09;&#xff1a;控制数据包是否允许进出及转发 ——nat 表&#xff08;地址转换规则表&#xff09;&#xff1a;控制数据包中地址转换 ——mangle&#xff08;修改…
阅读更多...
【C++笔试强训】第三十天

【C++笔试强训】第三十天

&#x1f387;C笔试强训 博客主页&#xff1a;一起去看日落吗分享博主的C刷题日常&#xff0c;大家一起学习博主的能力有限&#xff0c;出现错误希望大家不吝赐教分享给大家一句我很喜欢的话&#xff1a;夜色难免微凉&#xff0c;前方必有曙光 &#x1f31e;。 &#x1f4a6;&a…
阅读更多...
计算机网络——应用层重点协议【HTTP协议】

计算机网络——应用层重点协议【HTTP协议】

目录 1、HTTP是什么 抓包工具Fidder的下载及使用 2、HTTP协议工作过程 3、HTTP协议格式 HTTP请求&#xff1a; HTTP响应&#xff1a; 协议格式总结&#xff1a; 4、HTTP请求 4.1、URL / URI 4.1.1、URL(I)基本格式 4.1.2、URL encode 4.2、认识“方法” 4.2.1、GET…
阅读更多...
五、ROS2接口及其使用

五、ROS2接口及其使用

接口&#xff0c;即interface&#xff0c;其实是一种规范。 举个例子&#xff0c;不同厂家生产出不同类型的激光雷达&#xff0c;每种雷达的驱动方式&#xff0c;扫描速率都不相同。 当机器人进行导航时&#xff0c;需要激光雷达的扫描数据&#xff0c;假如没有统一接口&#x…
阅读更多...
Nginx (6)：nginx防盗链配置

Nginx (6)：nginx防盗链配置

先说一下含义&#xff0c;就是想让nginx里的静态资源只供它反向代理连接的内部服务器去访问&#xff0c;其他人想访问&#xff0c;就不给。比如01虚拟机充当nginx服务器&#xff0c;它里面存了很多静态资源&#xff0c;04虚拟机proxy_pass到01虚拟机&#xff0c;想访问它的页面…
阅读更多...
Linux--信号量共享内存

Linux--信号量共享内存

1.基础知识&#xff1a; &#xff08;1&#xff09;共享内存是最快的IPC形式。一旦这样的内存映射到共享它的进程的地址空间&#xff0c;这些进程间的数据传递不再涉及内核&#xff0c;即进程不再通过执行进入内核的系统调用来传递彼此的数据。 &#xff08;2&#xff09;共享…
阅读更多...
MySQL浅析之架构概览

MySQL浅析之架构概览

MySQL主要分为Server层&#xff0c;跟存储引擎层。 Server层负责“逻辑处理”&#xff0c;包括连接器、分析器、优化器、执行器以及所有内置函数。所有跨存储引擎的功能都在这一层实现&#xff0c;比如存储过程、触发器、视图等。 存储引擎层跟文件系统交互&#xff0c;负责数…
阅读更多...
bug探索之路：List＜Map＞get取出元素却是String?

bug探索之路：List＜Map＞get取出元素却是String?

一、bug初现峥嵘 有一说一我定义的List<Map>对吧&#xff0c;我get(0)取出的元素也应该是Map类型没问题吧。不行&#xff0c;编译器告诉我&#xff0c;java.lang.String cannot be cast to java.util.Map。 这个意思就是说&#xff0c;你这个就是String类型&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023