web课程设计基于html+css+javascript+jquery女性化妆品商城

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

文章目录🌰

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


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="#">Burberrya>li>
                     <li><a href="#">Diora>li>
                     <li><a href="#">伊莎雅顿a>li>
                     <li><a href="#">范思哲a>li>
                     <li><a href="#">CKa>li>
                     <li><a href="#">安娜苏a>li>
                     <li><a href="#">大卫杜夫a>li>
                     <li><a href="#">LANVINa>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 Areah3>
          li>
          <li> 
              <a href="#"><img src="images/img_nav_05.jpg"  />a>
              <h3>Hair Areah3>
          li>
          <li class="man"> 
              <a href="#"><img src="images/img_nav_07.jpg"  />a>
              <h3>Man Areah3>
          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>423span><span class="guoqu_price">￥324span><a href="#">去看看a>p>
            div>  
          li>
          <li>
            <a href="#"><img src="images/index_12.jpg"  />a>
            <div>
              <h4>SK-II青春焕彩修复眼霜h4>
              <p>￥<span>423span><span class="guoqu_price">￥324span><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>423span><span class="guoqu_price">￥324span><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>423span><span class="guoqu_price">￥324span><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>423span><span class="guoqu_price">￥324span><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>423span><span class="guoqu_price">￥324span><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保留一切权力。客服热线：068155p>
      <p>京公安网备案110105006780|京ICPZ证11103|营业执照p>
   div>
  div>
div>
body>
html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433

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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

三、个人总结😊

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

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

四、更多干货🚀

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

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

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

相关阅读:
Hadoop (十五) --------- Hadoop 数据压缩
 java-net-php-python-jsp校园美食点评系统计算机毕业设计程序
 安卓车轮视图 WheelView kotlin
Java数据结构——第十二节 - Map和Set
fuzz——AFL基础使用方法
 VScdoe将字体修改为宋体
 springboot线程池配置使用
 [MIT 6.830 SimpleDB] Lab1 Exercise 1-3
不要错过，Hadoop、Spark 核心技术栈讲解
 mongoDB 优化（1）索引
原文地址：https://blog.csdn.net/m0_73081085/article/details/127610467

web课程设计 基于html+css+javascript+jquery女性化妆品商城