临近期末,大一新生的各种考试和专业结课作业纷至沓来。什么高数啊、线代啊、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>
<!-- start header -->
<header>
<div class="top center">
<div class="left fl">
<ul>
<li><a href="http://www.mi/" 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 小米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 京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 知识,互相学习」!
3.以上内容技术相关问题😈欢迎一起交流学习🔥
更多推荐
学生个人网页设计作品 HTML+CSS+JavaScript仿小米商城(8页) 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计
发布评论