国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > web課程設(shè)計 基于html+css+javascript+jquery女性化妝品商城

web課程設(shè)計 基于html+css+javascript+jquery女性化妝品商城

時間：2023-10-07 16:06:01 | 來源：網(wǎng)站運營

時間：2023-10-07 16:06:01 來源：網(wǎng)站運營

web課程設(shè)計 基于html+css+javascript+jquery女性化妝品商城：
常見網(wǎng)頁設(shè)計作業(yè)題材有 個人、 美食、 公司、 學(xué)校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書籍、 婚紗、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他等網(wǎng)頁設(shè)計題目, A+水平作業(yè), 可滿足大學(xué)生網(wǎng)頁大作業(yè)網(wǎng)頁設(shè)計需求都能滿足你的需求。原始HTML+CSS+JS頁面設(shè)計, web大學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼，畫面精明，排版整潔，內(nèi)容豐富，主題鮮明，非常適合初學(xué)者學(xué)習(xí)使用。
?精彩專欄推薦

? 【作者主頁—— 獲取更多優(yōu)質(zhì)源碼】 ? 【web前端期末大作業(yè)—— 畢設(shè)項目精品實戰(zhàn)案例(1000套)】

@TOC

一、網(wǎng)頁介紹

1 網(wǎng)頁簡介：此作品為學(xué)生個人主頁網(wǎng)頁設(shè)計題材，HTML+CSS 布局制作,web前端期末大作業(yè),大學(xué)生網(wǎng)頁設(shè)計作業(yè)源碼，這是一個不錯的網(wǎng)頁制作，畫面精明，代碼為簡單學(xué)生水平, 非常適合初學(xué)者學(xué)習(xí)使用。

2.網(wǎng)頁編輯：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運行及修改編輯等操作）。

3.知識應(yīng)用：技術(shù)方面主要應(yīng)用了網(wǎng)頁知識中的: Div+CSS、鼠標(biāo)滑過特效、Table、導(dǎo)航欄效果、Banner、表單、二級三級頁面等，視頻、 音頻元素 、Flash，同時設(shè)計了Logo（源文件）所需的知識點。

一、網(wǎng)頁效果




在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述



二、代碼展示

1.HTML結(jié)構(gòu)代碼

代碼如下（示例）：以下僅展示部分代碼供參考~

<!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()">關(guān)閉</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">關(guān)注雅妝</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在搜索：保濕水 &nbsp;&nbsp;美白面霜 &nbsp;&nbsp;護手霜 &nbsp;&nbsp;補水眼精華</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區(qū)護理</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="#">大衛(wèi)杜夫</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>護發(fā)專區(qū)</h2> <ul> <li><a href="#">洗發(fā)</a></li> <li><a href="#">護發(fā)</a></li> <li><a href="#">發(fā)膜</a></li> <li><a href="#">美發(fā)造型</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="#">衛(wèi)生巾</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>護膚專區(qū)</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>彩妝專區(qū)</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="#">敏感修復(fù)</a></li> <li><a href="#">去黑頭</a></li> <li><a href="#">去角質(zhì)</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">特惠專區(qū)<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青春煥彩修復(fù)眼霜</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青春煥彩修復(fù)眼霜</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青春煥彩修復(fù)眼霜</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青春煥彩修復(fù)眼霜</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青春煥彩修復(fù)眼霜</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青春煥彩修復(fù)眼霜</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">特惠專區(qū)<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>美妝電商的領(lǐng)跑者</dt> <dd>購物無憂</dd> </dl> <dl> <dt>周二周五定時發(fā)貨</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="#">服務(wù)協(xié)議</a></li> <li><a href="#">優(yōu)惠券使用詳細(xì)</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="#">積分使用規(guī)則</a></li> <li><a href="#">訂單查詢</a></li> <li><a href="#">找回密碼</a></li> </ul> <ul class="service"> <li class="title">售后服務(wù)</li> <li><a href="#">商務(wù)合作</a></li> <li><a href="#">退款說明</a></li> <li><a href="#">售后售前服務(wù)</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="#">聯(lián)系我們</a></li> <li><a href="#">網(wǎng)站地圖</a></li> <li><a href="#">友情鏈接</a></li> <div class="clear"></div> </ul> </div> </div> <div id="footer_four"> <p>2013年杭州銳化傳媒有限公司jumei.com保留一切權(quán)力?？头峋€：068155</p> <p>京公安網(wǎng)備案110105006780|京ICPZ證11103|營業(yè)執(zhí)照</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;/*優(yōu)先級*/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;}

三、個人總結(jié)

一套合格的網(wǎng)頁應(yīng)該包含(具體可根據(jù)個人要求而定) 1. 頁面分為頁頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分； 2. 所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成； 3. 頁面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯亂，使用Div+Css技術(shù)； 4. 菜單美觀、醒目，二級菜單可正常彈出與跳轉(zhuǎn)； 5. 要有JS特效，如定時切換和手動切換圖片新聞； 6. 頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用； 7. 頁面清爽、美觀、大方，不雷同。
8. 網(wǎng)站前端程序不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。

四、更多干貨

1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “ 點贊” “??評論” “ 收藏”一鍵三連哦！

2.??【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！

3.以上內(nèi)容技術(shù)相關(guān)問題 歡迎一起交流學(xué)習(xí)【主頁—— 獲取更多優(yōu)質(zhì)源碼】



關(guān)鍵詞：女性,化妝品,商城,課程,設(shè)計

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉