html网页制作——基于html+css+javascript+jquery女性化妆品商城

最新推荐文章于 2024-04-27 00:02:03 发布
最新推荐文章于 2024-04-27 00:02:03 发布
阅读量149 收藏 2
点赞数
分类专栏： 学生div+css静态网页设计成品 web大学生个人网站作业模 文章标签： javascript html css html5期末大作业 前端 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_524614081/article/details/134881284
版权

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。

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

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录🌰

一、网页介绍📖

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在搜索：保湿水 &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区护理</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;}

三、个人总结😊

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

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

四、更多干货🚀

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

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

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

优质内容贡献
关注
专栏目录
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
web前端期末大作业：基于html化妆品购物商城项目的设计与实现——化妆品官方网站设计与实现(HTML+CSS+JS)
qq_38514094的博客
04-02 360
💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站 、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设
【HTML】HTML网页设计---模仿化妆品官网
coding加油站
08-25 2200
html作业，html期末课程设计，官网
HTML+CSS作品展示（学成在线网）
weixin_42541725的博客
01-21 1807
HTML+CSS作品展示（学成在线网）
大二Web课程设计期末考试——基于HTML+CSS+JavaScript+jQuery电商类化妆品购物商城
08-10
综上所述，这份基于HTML、CSS和JavaScript的化妆品购物商城网页设计项目不仅能够帮助学生掌握网页开发的基本技能，还能够提升他们在实际项目中解决问题的能力。通过这个项目的实践，学生可以在理论知识的基础上...
大二Web课程设计——基于HTML+CSS+JavaScript+jquery手表商城购物网站(17页d
08-10
蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! ...
HTML+CSS+JS网页设计期末课程大作业—— 绿色化妆品HTML+CSS+JavaScript
08-10
通过上述分析可以看出，本项目综合运用了HTML5、CSS3以及JavaScript等前端技术，旨在构建一个具有吸引力的绿色化妆品网站。该网站不仅具备良好的视觉效果，而且通过合理的布局和交互设计，提升了用户体验。此外，...
学生个人html静态网页制作 基于HTML+CSS+JavaScript+jquery仿苏宁易购官网商城模板
weixin__BJ050106的博客
08-07 4421
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
HTML5期末大作业：化妆品网站设计——绿色的化妆品静态页面 HTML+CSS+JavaScript
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
09-01 2668
HTML5期末大作业：化妆品网站设计——绿色的化妆品静态页面 HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：HTML期末大学生网页设计作业 ,喜欢的可以
基于html化妆品网站
06-14
本资源是基于html的化妆品网站，代码和格式比较清晰，包含了基本的特效等内容，是在初识html的时候编写而成。
html化妆品网页设计模板下载
07-21
html化妆品网页设计模板下载，基于html+css设计
化妆品购物网站HTML
12-11
化妆品购物网站HTML Javascript CSS 很好的购物网站 欢迎大家下载 不要积分的
125. web前端 绿色的化妆品企业站静态网页 网页制作html+css+js
最新发布
A240307的博客
04-27 778
绿色的化妆品企业站静态网页，应用html+css+js，，供大家参考。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！
制作一个简单HTML中华传统文化网页（HTML+CSS）
热门推荐
HTML网页设计
08-02 1万+
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
HTML网页设计基础期末作业——绿色化妆品网页(HTML+CSS)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-06 9748
HTML网页设计基础期末作业——绿色化妆品网页(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：黑色通用的IT程序员资讯交流个人博客网站模板。喜欢的可以下载，文章页支持手机P
html简单网页代码：基于Html+Css+javascript的网页制作（化妆品公司网站制作）
html精品源码
12-15 1345
💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站 、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设...
HTML网页设计制作大作业 基于HTML+CSS+JavaScript实现炫丽口红网化妆品网站(10页)
wx___BJ050106的博客
01-08 316
💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站 、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设...
HTML5+CSS3+jQuery构建视频播放器教程
“HTML5+CSS3+jQuery制作视频播放器完全指南” 在当前的技术趋势下，HTML5已经逐渐成为网页开发的主流标准，特别是在视频播放领域。随着Flash的逐渐淘汰，许多知名的视频平台如YouTube已经转向HTML5播放器。尽管...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值