常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】
❤ 【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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>雅妆化妆品</title>
<link type="text/css" rel="stylesheet" href="css/public.css" />
<link type="text/css" rel="stylesheet" href="css/index.css" />
<link type="text/css" rel="stylesheet" href="css/nivo-slider.css" />
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
<script src="js/public.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript" ></script>
<script type="text/javascript">
DD_belatedPNG.fix('.theme-default a, .theme-default .nivo-controlNav a');
</script>
<![endif]-->
</head>
<body id="body">
<div id="div1"></div>
<div id="div2">
<div id="div3"><a onclick="closeShow()">关闭</a></div>
<form action="#" method="post">
<p class="shuru name"><input type="text" name="uname" id="name" onfocus="name_onfocus()" onblur="name_onblur()" onmouseover="over(this.id)" onmouseout="out(this.id)"/>
<span id="mz">用户名</span>
</p>
<p class="shuru"><input type="password" name="pws" id="pws" onfocus="pws_onfocus()" onblur="pws_onblur()" onmouseover="over(this.id)" onmouseout="out(this.id)"/>
<span id="mm">密码</span>
</p>
<div class="auto">
<p>
<input type="checkbox" id="jizhu" checked="checked" />
<label for="jizhu">下次自动登录</label>
</p>
<a>忘记密码？</a>
<div class="clear"></div>
</div>
<p><input type="submit" value="登录" id="anniu"/></p>
<p class="zhuce"><span>还没有雅妆账号？</span><a>立即注册</a></p>
</form>
<div id="div4">
<p>还可以使用以下方式登录</p>
<ul>
<li><img src="images/qq-logo.jpg" alt="qq登录" /></li>
<li><img src="images/sina-logo.jpg" alt="sina登录" /></li>
<div class="clear"></div>
</ul>
</div>
</div>
<div id="wrap">
<div id="top">
<div class="top_inner">
<p>Hi,欢迎来到雅妆！</p>
<ul>
<li><a onclick="show()">登陆</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">订单查询</a></li>
<li><a href="#" class="my_zhuang">我的雅妆</a></li>
<li><a href="#" class="help">帮助中心</a></li>
<li><a href="#">收藏雅妆</a></li>
<li><a href="#" class="guanzhu">关注雅妆</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
<div id="header">
<div class="logo">
<a href="index.html" title="欢迎来到雅妆"><img src="images/header_img_03.jpg" alt="欢迎来到雅妆" /></a>
</div>
<form class="search">
<input type="text" value="面膜"/>
<button type="button"></button>
<label>MM在搜索：保湿水 美白面霜 护手霜 补水眼精华</label>
</form>
<img src="images/header_img_08.jpg" class="accounts" />
<div class="clear"></div>
</div>
<div id="nav">
<div class="nav_inner">
<ul class="nav">
<li><a href="#">首页</a></li>
<li class="mall"><a href="#">美妆商城</a>
<div class="mei_hover">
<div class="neirong">
<div class="hover">
<h2>护肤</h2>
<ul>
<li><a href="product.html">洁面</a></li>
<li><a href="product.html">化妆水</a></li>
<li><a href="product.html">面贴面膜</a></li>
<li><a href="product.html">免洗面膜</a></li>
<li><a href="product.html">精华</a></li>
<li><a href="product.html">乳液</a></li>
<li><a href="product.html">晚霜</a></li>
<li><a href="product.html">眼部护理</a></li>
<li><a href="product.html">T区护理</a></li>
<div class="clear"></div>
</ul>
</div>
<div class="hover">
<h2>香水</h2>
<ul>
<li><a href="#">菲拉格慕</a></li>
<li><a href="#">Burberry</a></li>
<li><a href="#">Dior</a></li>
<li><a href="#">伊莎雅顿</a></li>
<li><a href="#">范思哲</a></li>
<li><a href="#">CK</a></li>
<li><a href="#">安娜苏</a></li>
<li><a href="#">大卫杜夫</a></li>
<li><a href="#">LANVIN</a></li>
</ul>
</div>
<div class="hover">
<h2>男士</h2>
<ul>
<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>
<li><a href="#">沐浴</a></li>
</ul>
</div>
<div class="hover">
<h2>彩妆</h2>
<ul>
<li><a href="#">隔离/妆前</a></li>
<li><a href="#">BB霜</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>
<li><a href="#">底妆</a></li>
<li><a href="#">卸妆</a></li>
</ul>
</div>
<div class="hover">
<h2>护发专区</h2>
<ul>
<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="hover">
<h2>个人护理</h2>
<ul>
<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>
<img src="images/mei_hover_03.jpg" class="yifu"/>
</div>
</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>
<div class="banner slide-box">
<div class="slider">
<div class="theme-default">
<div id="slider" class="nivoSlider">
<a href="#" title="户外专题"><img src="images/banner_img1.jpg" data-thumb="images/banner_img1.jpg" alt="" /></a>
<a href="#/" title="运动夹克秋季新品"><img src="images/banner_img5.jpg" data-thumb="images/banner_img5.jpg" alt="" /></a>
<a href="#/" title="时尚泳衣"><img src="images/banner_img2.jpg" data-thumb="images/banner_img2.jpg" alt="" /></a>
<a href="#"><img src="images/banner_img3.jpg" data-thumb="images/banner_img3.jpg" alt="" /></a>
<a href="#" title="篮球鞋专题"><img src="images/banner_img6.jpg" data-thumb="images/banner_img6.jpg" alt="" /></a>
<a href="#" title="羽毛球装备"><img src="images/banner_img4.jpg" data-thumb="images/banner_img4.jpg" alt="" /></a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div id="content">
<div class="main">
<div class="remen">
<h1 class="title">热门品牌</h1>
<ul>
<li title="images/caidan_hover_12.jpg"><a href="#"><img src="images/remen_18.jpg" title="images/remen_18.jpg"/></a></li>
<li title="images/caidan_hover_14.jpg"><a href="#"><img src="images/remen_20.jpg" title="images/remen_20.jpg"/></a></li>
<li title="images/caidan_hover_16.jpg"><a href="#"><img src="images/remen_22.jpg" title="images/remen_22.jpg"/></a></li>
<li title="images/caidan_hover_18.jpg"><a href="#"><img src="images/remen_24.jpg" title="images/remen_24.jpg"/></a></li>
<li title="images/caidan_hover_20.jpg"><a href="#"><img src="images/remen_26.jpg" title="images/remen_26.jpg"/></a></li>
<li title="images/caidan_hover_22.jpg"><a href="#"><img src="images/remen_28.jpg" title="images/remen_28.jpg"/></a></li>
<li title="images/caidan_hover_24.jpg"><a href="#"><img src="images/remen_30.jpg" title="images/remen_30.jpg"/></a></li>
<li class="wei" title="images/caidan_hover_26.jpg"><a href="#"><img src="images/remen_32.jpg" title="images/remen_32.jpg"/></a></li>
<li title="images/caidan_hover_36.jpg"><a href="#"><img src="images/remen_42.jpg" title="images/remen_42.jpg"/></a></li>
<li title="images/caidan_hover_37.jpg"><a href="#"><img src="images/remen_43.jpg" title="images/remen_43.jpg"/></a></li>
<li title="images/caidan_hover_38.jpg"><a href="#"><img src="images/remen_44.jpg" title="images/remen_44.jpg"/></a></li>
<li title="images/caidan_hover_39.jpg"><a href="#"><img src="images/remen_45.jpg" title="images/remen_45.jpg"/></a></li>
<li title="images/caidan_hover_40.jpg"><a href="#"><img src="images/remen_46.jpg" title="images/remen_46.jpg"/></a></li>
<li title="images/caidan_hover_41.jpg"><a href="#"><img src="images/remen_47.jpg" title="images/remen_47.jpg"/></a></li>
<li title="images/caidan_hover_42.jpg"><a href="#"><img src="images/remen_48.jpg" title="images/remen_48.jpg"/></a></li>
<li class="wei" title="images/caidan_hover_43.jpg"><a href="#"><img src="images/remen_49.jpg" title="images/remen_49.jpg" /></a></li>
<div class="clear"></div>
</ul>
</div>
<div class="c_nav">
<div class="ci_nav">
<h2>护肤专区</h2>
<ul>
<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>
<li><a href="#">身体护理</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
<div class="ci_nav">
<h2>彩妆专区</h2>
<ul>
<li><a href="#">隔离/妆前</a></li>
<li><a href="#">BB霜</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>
<li><a href="#">底妆</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
<div class="ci_nav">
<h2>热门功效</h2>
<ul>
<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>
<li><a href="#">收毛孔</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
<ul class="img_nav">
<li>
<a href="#"><img src="images/img_nav_03.jpg" /></a>
<h3 class="perfume">Perfume Area</h3>
</li>
<li>
<a href="#"><img src="images/img_nav_05.jpg" /></a>
<h3>Hair Area</h3>
</li>
<li class="man">
<a href="#"><img src="images/img_nav_07.jpg" /></a>
<h3>Man Area</h3>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="preferential">
<h1 class="title qu">特惠专区<a href="#">更多</a></h1>
<ul>
<li class="fangchengshi"><a href="#"><img src="images/tehui_img_07.jpg" /></a></li>
<li>
<a href="#"><img src="images/index_09.jpg" /></a>
<div>
<h4>SK-II青春焕彩修复眼霜</h4>
<p>￥<span>423</span><span class="guoqu_price">￥324</span><a href="#">去看看</a></p>
</div>
</li>
<li>
<a href="#"><img src="images/index_12.jpg" /></a>
<div>
<h4>SK-II青春焕彩修复眼霜</h4>
<p>￥<span>423</span><span class="guoqu_price">￥324</span><a href="#">去看看</a></p>
</div>
</li>
<li class="teshu">
<a href="#"><img src="images/tehui_img_15.jpg" /></a>
<div>
<h4>SK-II青春焕彩修复眼霜</h4>
<p>￥<span>423</span><span class="guoqu_price">￥324</span><a href="#">去看看</a></p>
</div>
</li>
<li class="teshu">
<a href="#"><img src="images/tehui_img_19.jpg" /></a>
<div>
<h4>SK-II青春焕彩修复眼霜</h4>
<p>￥<span>423</span><span class="guoqu_price">￥324</span><a href="#">去看看</a></p>
</div>
</li>
<li class="teshu">
<a href="#"><img src="images/tehui_img_20.jpg" /></a>
<div>
<h4>SK-II青春焕彩修复眼霜</h4>
<p>￥<span>423</span><span class="guoqu_price">￥324</span><a href="#">去看看</a></p>
</div>
</li>
<li class="ie6">
<a href="#"><img src="images/tehui_img_17.jpg" /></a>
<div>
<h4>SK-II青春焕彩修复眼霜</h4>
<p>￥<span>423</span><span class="guoqu_price">￥324</span><a href="#">去看看</a></p>
</div>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="new">
<h1 class="title qu">特惠专区<a href="#">更多</a></h1>
<ul>
<li><a href="#"><img src="images/xinpi_img_59.jpg" /></a></li>
<li><a href="#"><img src="images/xinpi_img_62.jpg" /></a></li>
<li><a href="#"><img src="images/xinpi_img_65.jpg" /></a></li>
<li class="n_four"><a href="#"><img src="images/xinpi_img_68.jpg" /></a></li>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
<div id="footer">
<div id="footer_one">
<div class="one">
<h1>雅妆</h1>
<dl>
<dt>7天无理由退货</dt>
<dd>购物无忧</dd>
</dl>
<dl>
<dt>美妆电商的领跑者</dt>
<dd>购物无忧</dd>
</dl>
<dl>
<dt>周二周五定时发货</dt>
<dd>顾客放心</dd>
</dl>
<div class="clear"></div>
</div>
</div>
<div id="footer_two">
<div class="two">
<ul class="shopping">
<li class="title">购物指南</li>
<li><a href="#">用户注册</a></li>
<li><a href="#">服务协议</a></li>
<li><a href="#">优惠券使用详细</a></li>
</ul>
<ul class="pay">
<li class="title">购物/付款</li>
<li><a href="#">购物流程</a></li>
<li><a href="#">付款流程</a></li>
<li><a href="#">付款方式</a></li>
</ul>
<ul class="way">
<li class="title">配送方式</li>
<li><a href="#">配送范围及时间</a></li>
<li><a href="#">配送说明</a></li>
</ul>
<ul class="questions">
<li class="title">常见问题</li>
<li><a href="#">积分使用规则</a></li>
<li><a href="#">订单查询</a></li>
<li><a href="#">找回密码</a></li>
</ul>
<ul class="service">
<li class="title">售后服务</li>
<li><a href="#">商务合作</a></li>
<li><a href="#">退款说明</a></li>
<li><a href="#">售后售前服务</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
<div id="footer_three">
<div class="three">
<ul>
<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>
<div class="clear"></div>
</ul>
</div>
</div>
<div id="footer_four">
<p>2013年北京锐化传媒有限公司jumei.com保留一切权力。客服热线：068155</p>
<p>京公安网备案110105006780|京ICPZ证11103|营业执照</p>
</div>
</div>
</div>
</body>
</html>
2.CSS样式代码 🏠
@charset "utf-8";
/* CSS Document */
html, body{height:100%;}
#div1 {width:100%;height:100%;position:fixed;_position:absolute;top:0;left:0;display:none;background:#333;z-index:5;opacity:0.5;filter:alpha(opacity=50);}
#div2 {width:400px;/*显示宽度*/
height:420px;/*显示高度*/
position:absolute;/*绝对定位*/
z-index:6;/*优先级*/
display: none;/*是否显示*/
background-color:#F7F7F7;
top:50%;
left:50%;
margin:-210px 0 0 -200px;
}
#div2 form {width:380px;margin:0 auto;clear:both;}
#div2 form input {border:1px #ccc solid;}
#div2 form p.shuru {position:relative;}
#div2 form p.shuru span {position:absolute;top:33px;left:10px;color:#CCC;}
#div2 form p.name span {top:53px;}
#div2 form input#name,#div2 form input#pws {width:380px;height:40px;margin-top:40px;}
#div2 form input#pws {margin-top:20px;}
#div2 form p.zhuce {height:40px;line-height:40px;cursor:pointer;}
#div2 form div.auto {padding:20px 0;}
#div2 form div.auto p {float:left;}
#div2 form div.auto input,#div2 form div.auto label {vertical-align:middle;}
#div2 form div.auto a,#div2 form p.zhuce {float:right;}
#div2 form div.auto a,#div2 form p.zhuce a {color:#69F;cursor:pointer;}
#div2 form div.auto a:hover,#div2 form p.zhuce a:hover { text-decoration:underline;}
#div2 form input#anniu {border:none;background:#f0145c;width:380px;height:40px;margin-top:0px;color:#fff;font-weight:bold;font-size:18px;cursor:pointer;}
#div3 {height:50px;background:#F4EAD4;line-height:50px;padding:0 10px;}
#div3 a {display:block;float:right;color:#000;font-weight:bold;font-size:18px;cursor:pointer;}
#div3 a:hover {color:#f0145c;}
#div4 {clear:both;padding:0 10px;border-top:1px #ccc solid;}
#div4 p {line-height:40px;}
#div4 ul li {float:left;width:30px;cursor:pointer;}
#content { background:#f4ead4;}
#content .main {clear:both;width:960px; margin:0 auto; background:#FFF; padding:0 15px;}
#content .main .remen {clear:both; padding-top:30px;}
#content .main h1.title { background:url(../images/remen_img_11.jpg) no-repeat center; font-family:"黑体"; font-size:24px; color:#000; text-align:center;}
#content .main .remen ul {clear:both; margin-top:20px;}
#content .main .remen ul li {float:left;width:116px;padding-right:4px;padding-bottom:7px;}
#content .main .remen ul li.wei {padding-right:0;}
#content .main .remen ul li a img {float:left;}
#content .main .c_nav {clear:both; padding-top:53px; *padding-top:26px;padding-bottom:30px;}
#content .main .ci_nav {clear:both;padding-bottom:10px;}
#content .main .ci_nav h2 {float:left;width:119px;height:43px;line-height:43px;padding-left:26px;border:1px #f0145c solid; background:url(../images/ci_nav_67.jpg) no-repeat 116px center;font-family:"宋体"; font-size:20px;font-weight:bold;color:#000;}
#content .main .ci_nav ul {float:left;width:763px;margin-left:26px;border-bottom:1px #cccccc solid;}
#content .main .ci_nav ul li {float:left;padding-right:30px;line-height:43px;}
#content .main .ci_nav ul li a { font-family:"宋体";font-size:14px;}
#content .main .ci_nav ul li a:hover {color:#f0145c;text-decoration:underline;}
#content .main .c_nav ul.img_nav {padding-top:30px;}
#content .main .c_nav ul.img_nav li {float:left; width:311px;padding-right:13px;}
#content .main .c_nav ul.img_nav li.man {padding:0;}
#content .main .c_nav ul.img_nav li h3 {line-height:42px; font-size:14px; padding-left:100px; background:url(../images/img_nav_sanjiao_24.jpg) no-repeat 188px center;}
#content .main .c_nav ul.img_nav li h3.perfume {padding-left:78px;}
#content .main .c_nav ul.img_nav li.man h3 {padding-left:107px;}
#content .main .c_nav ul.img_nav li h3.h_hover { background:#debac9;padding:0; text-align:center;}
#content .main .preferential {clear:both; padding-top:40px; *padding-top:20px;}
#content .main h1.qu {padding-left:37px; *padding-left:0px;}
#content .main h1.qu a {float:right;display:block;*margin-top:-28px;line-height:14px; width:37px; font-size:12px; color:#FFF; font-weight:normal; background:#2b2220;}
#content .main h1.qu a:hover { background:#f0145c;}
#content .main .preferential ul {margin-top:20px;}
#content .main .preferential ul li {float:left; width:222px;height:281px;}
#content .main .preferential ul li.teshu {padding-right:24px;}
#content .main .preferential ul li img {float:left;}
#content .main .preferential ul li.fangchengshi {width:714px;height:540px;padding-right:24px;}
#content .main .preferential ul li div {clear:both;padding:8px 0 10px 10px;background:#e3e0e0; *padding-top:4px;}
#content .main .preferential ul li.ie6 div {*padding:4px 0 3px 10px; *overfloaw:hidden;}
#content .main .preferential ul li div h4 {font-weight:normal; font-size:14px; color:#1c1c1c;}
#content .main .preferential ul li div p {color:#f0145c;}
#content .main .preferential ul li div p span {padding-right:10px; font-size:18px; font-weight:bold;}
#content .main .preferential ul li div p span.guoqu_price {padding-right:78px;color:#9a9797; font-size:12px; text-decoration:line-through;}
#content .main .preferential ul li div p a {padding:5px 6px; background:#f0145c; color:#FFF;}
#content .main .preferential ul li div p a:hover {color:#000;}
#content .main .new {clear:both;padding-top:40px; padding-bottom:20px;*padding-top:20px;}
#content .main .new ul {padding-top:15px;}
#content .main .new ul li {float:left; width:189px;padding-right:68px;padding-top:5px;}
#content .main .new ul li.n_four {padding-right:0;}
#content .main .new ul li.l_hover { background:url(../images/xinpin_img_03.jpg) no-repeat left top;}
三、个人总结😊
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、更多干货🚀
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习🔥
![6.Paddle Graph Learning (PGL)图学习之图游走类模型[系列四]](https://img-blog.csdnimg.cn/img_convert/6650fbd6617cf6a29743bac5c75814c7.jpeg)
![[基础服务] [操作系统] 类Linux的文件和目录](https://img-blog.csdnimg.cn/76577f35de244789901ef9bf11a8b2e0.png)
