欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML+CSS的小实例

程序员文章站 2022-09-13 23:31:24
通过一个月以来对HTML5+CSS的学习。这篇随笔给大家来做一个简单的网页中常见的导航栏。 这些都称之为网页中的导航栏。 我简单的做了一个某宝和58同城的导航栏,供大家学习参考。 一、58同城导航栏: 解析:首先我们来看到这个导航栏,我们可以把它分成两个部分 左边为一部分,右边为一部分。把导航栏拆分 ......

  通过一个月以来对html5+css的学习。这篇随笔给大家来做一个简单的网页中常见的导航栏。

HTML+CSS的小实例

HTML+CSS的小实例

这些都称之为网页中的导航栏。

我简单的做了一个某宝和58同城的导航栏,供大家学习参考。

一、58同城导航栏:

解析:首先我们来看到这个导航栏,我们可以把它分成两个部分 左边为一部分,右边为一部分。把导航栏拆分成两个部分 这样这个导航栏的难度就大大降低了。

HTML+CSS的小实例

 

 

 

html5部分:

  1 <!doctype html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="utf-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="x-ua-compatible" content="ie=edge">
  8     <link rel="stylesheet" href="master1.css">
  9     <link rel="shortcut icon" href="56.ico" />
 10     <title>【58同城 58.com】珠海分类信息 - 本地 免费 高效</title>
 11 
 12 </head>
 13 
 14 <body>
 15     <div class="warpper">
 16 
 17         <div class="top-nav-wrap">
 18             <div class="top-nav">
 19                 <!--左-->
 20                 <ul class="top-nav-l">
 21                     <!-- <li class="top-nav-menu area">
 22                         <a href="#">
 23                             <span>珠海</span>
 24                         </a>
 25                     </li>-->
 26                     <li class="top-nav-menu city">
 27                         <span class="area">珠海</span>
 28                         <span>
 29                             <a href="#">[切换城市</a>
 30                         </span>
 31                         <a href="#">澳门</a>
 32                         <a href="#">中山</a>
 33                         <a href="#">重庆]</a>
 34                     </li>
 35                     <li class="top-nav-menu tianqi">
 36                         <span class="bg-pic yl-pic"></span>
 37                         &nbsp;
 38                         <span>晴</span>
 39                         <span>28 ~ 21℃</span>
 40                         &nbsp;
 41                         <span class="bg-pic zl-pic"></span>
 42                     </li>
 43                 </ul>
 44 
 45                 <!--右-->
 46                 <ul class="top-nav-r">
 47                     <li class="top-nav-menu login">
 48                         <a href="#">
 49                             <span class="c-span">登录 / 注册 </span>
 50                         </a>
 51                     </li>
 52                     <!-- <li class="top-nav-menu cut-off">
 53                         <span>/</span>
 54                     </li>
 55 
 56                     <li class="top-nav-menu login">
 57                         <a href="#">
 58                             <span class="c-span">注册</span>
 59                         </a>
 60                     </li>-->
 61                     <li class="top-nav-menu per">
 62                         <a href="#">
 63                             <span class="c-span">个人中心</span>
 64                         </a>
 65                         <span class="bg-pic xsj-pic"></span>
 66                     </li>
 67 
 68                     <li class="top-nav-menu mer">
 69                         <a href="#">
 70                             <span class="c-span">商家中心</span>
 71                         </a>
 72                         <span class="bg-pic xsj-pic"></span>
 73                     </li>
 74 
 75                     <li class="top-nav-menu help">
 76                         <a href="#">
 77                             <span class="c-span">帮助中心</span>
 78                         </a>
 79                         <span class="bg-pic xsj-pic"></span>
 80                     </li>
 81 
 82                     <li class="top-nav-menu ser">
 83                         <a href="#">
 84                             <span class="c-span">联系客服</span>
 85                         </a>
 86                     </li>
 87 
 88                     <li class="top-nav-menu vig">
 89                         <a href="#">
 90                             <span class="c-span">网站导航</span>
 91                         </a>
 92                         <span class="bg-pic xsj-pic"></span>
 93                     </li>
 94 
 95                 </ul>
 96             </div>
 97         </div>
 98     </div>
 99 </body>
100 
101 </html>

 css代码部分:

  1 /*页面初始化*/
  2 *{
  3     margin:0;
  4     padding:0;
  5     list-style: none;
  6     text-decoration:none;
  7 }
  8 /*页面的整体显示*/
  9 html,
 10 body{
 11     width:100%;
 12     height:100%;
 13     background-color:#f4f4f4;
 14     color:#555;
 15     overflow: hidden;
 16 }
 17 /*页面的模块*/
 18 .warpper{
 19     width:100%;
 20     height:100%;
 21     
 22 }
 23 /*设置导航栏的宽高*/
 24 .warpper .top-nav-wrap{
 25     width:100%;
 26     height:35px;
 27     background-color:#fff;
 28     border-bottom: 1px solid #ddd;/*下标线*/
 29     /*background-color:1px solid #000;*/
 30 } 
 31 /*给显示东西的导航栏设置宽高*/
 32 .warpper .top-nav-wrap .top-nav{
 33     width:1190px;
 34     height:35px;
 35     /*border:1px solid red;*/
 36     margin:0 auto;
 37      
 38 }
 39 /*将左边的内容 向左靠齐*/
 40 .warpper .top-nav-wrap .top-nav .top-nav-l{
 41     float:left;
 42 }
 43 /*将右边的内容 向右靠齐*/
 44 .warpper .top-nav-wrap .top-nav .top-nav-r{
 45     float:right;
 46 }
 47 /*将所以的内容区域水平排列*/
 48 .warpper .top-nav-wrap .top-nav ul li{
 49     float:left;
 50     margin:5px;
 51 }
 52 /*将内容的所以的a标签改变颜色大小等*/
 53 .warpper .top-nav-wrap .top-nav  a{
 54     color:#555;
 55     font-size:12.5px;
 56     padding:0 5px;
 57     margin:0;
 58 }
 59 /*将内容首个   改变样式和字体,大小*/
 60 .warpper .top-nav-wrap .top-nav .area{
 61     color:#ff552e;
 62     font-size:7.5px;
 63     font-weight:bold;/*字体加粗*/
 64     float: left;
 65     padding-top: 4px;
 66 }
 67 /*改变所以span的内容字体大小*/
 68 .warpper .top-nav-wrap .top-nav span{
 69     font-size:11px;
 70    
 71 }
 72 /*鼠标指向改变状态。。颜色*/
 73 .warpper .top-nav-wrap .top-nav  a:hover{
 74     color:#ff552e;
 75 }
 76 /*内容间距*/
 77 .warpper .top-nav-wrap .top-nav .city{
 78     padding:0 -6px;
 79     word-spacing:-10px; 
 80     letter-spacing: 1px;
 81 }
 82 
 83 
 84 /*图片设置*/
 85 .warpper .top-nav-wrap .top-nav .bg-pic{
 86     display:inline-block;
 87     width:14px;
 88     height:9px;
 89     background-size:100% 100%;
 90     vertical-align:middle; 
 91 }
 92 
 93 .warpper .top-nav-wrap .top-nav .bg-pic.xsj-pic{
 94     background-image: url('./xsj1.png');
 95     width:9px;
 96     height:7px;
 97 }
 98 .warpper .top-nav-wrap .top-nav .bg-pic.yl-pic{
 99     background-image: url('./tq.png');
100     width:16px;
101     height:10px;
102 }
103 .warpper .top-nav-wrap .top-nav .bg-pic.zl-pic{
104     background-image: url('./zl.png');
105     width:18px;
106     height:18px;
107 }

 运行效果:

HTML+CSS的小实例

二、淘宝导航栏

 

html代码部分:

 1 <!doctype html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="x-ua-compatible" content="ie=edge">
 8     <link rel="stylesheet" href="master.css">
 9 
10     <title>淘宝网 - 淘!我喜欢</title>
11 </head>
12 
13 <body>
14 
15     <div class="wrapper">
16         <!--导航栏-->
17         <div class="top-nav-wrap">
18             <div class="top-nav">
19 
20                 <ul class="top-nav-l">
21                     <li class="top-nav-menu china">
22                         <span class="c-span">*</span>
23                         <span class="bg-pic xsj-pic"></span>
24                     </li>
25                     <li class="top-nav-menu login-sign">
26                         <a href="#">亲,请登录</a>
27                         <a href="#">免费注册</a>
28                     </li>
29                     <li class="top-nav-menu ">
30                         <a href="#">手机逛淘宝</a>
31                     </li>
32                 </ul>
33 
34                 <ul class="top-nav-r">
35                     <li class="top-nav-menu my-taobao">
36                         <a href="#">我的淘宝</a>
37                         <span class="bg-pic xsj-pic"></span>
38                     </li>
39                     <li class="top-nav-menu shop-car">
40                         <a href="#">
41                             <span class="bg-pic shopcar-pic"></span>
42                             <span>购物车0</span>
43                         </a>
44                         <span class="bg-pic xsj-pic"></span>
45                     </li>
46                     <li class="top-nav-menu like">
47                         <a href="#">
48                             <span class="bg-pic like-pic"></span>
49                             <span>收藏夹</span>
50                         </a>
51                         <span class="bg-pic xsj-pic"></span>
52                     </li>
53 
54                     <li class="top-nav-menu goods">
55                         <a href="#">商品分类</a>
56                     </li>
57 
58                     <li class="top-nav-menu cut-off">
59                         <span>|</span>
60                     </li>
61                     <li class="top-nav-menu seller">
62                         <a href="#">
63                             <span class="c-span">卖家中心</span>
64                             <span class="bg-pic xsj-pic"></span>
65                         </a>
66                     </li>
67                     <li class="top-nav-menu cutsomer">
68                         <a href="#">
69                             <span class="c-span">联系客服</span>
70                             <span class="bgpic xsj"></span>
71                         </a>
72                     </li>
73                     <li class="top-nav-menu web-nav">
74                         <a href="#">
75                             <span class="bg-pic web-nav-pic"></span>
76                             <span>网站导航</span>
77                         </a>
78                         <span class="bg-pic xsj-pic"></span>
79                     </li>
80                 </ul>
81             </div>
82             <!--导航图片
83             <div class="ad-wrap">
84                 <img src="toutiao4.png" alt="图">
85             </div>-->
86         </div>
87     </body>
88     </html>

 

 css代码部分:

  1 /*初始化工作*/
  2 *{
  3     margin: 0;/*去边距*/
  4     padding: 0;
  5     list-style:none;/*去标签小圆点*/
  6     text-decoration: none;/*去下划线*/
  7 }
  8 /*想设置页面的宽度,必须先让父元素先修改值*/
  9 html,
 10 body{
 11     width: 100%;
 12     height: 100%;
 13     background-color:#f4f4f4;
 14     color:#3c3c3c;
 15     overflow: hidden;/*去纵向滚动条*/
 16 }
 17 .wrapper{
 18     width: 100%;
 19     height: 100%;
 20 }
 21 /*上导航栏条*/
 22 .wrapper .top-nav-wrap{
 23     width: 100%;
 24     height:35px;
 25     /*border:1px solid #000;*/
 26 }
 27 .wrapper .top-nav-wrap .top-nav{
 28     width: 1190px;
 29     height: 35px;
 30     /*border:1px solid black;*/
 31     margin:0 auto;/*让导航条居中在页面中间*/
 32 }
 33 .wrapper .top-nav-wrap .top-nav .top-nav-l{
 34     float:left;/*让左侧的东西靠左*/
 35 }
 36 .wrapper .top-nav-wrap .top-nav .top-nav-r{
 37     float:right;/*让右侧的东西靠右*/
 38 }
 39 .wrapper .top-nav-wrap .top-nav ul li{
 40     float:left;/*导航条水平排列*/
 41     margin:6px;/*字间距*/
 42 }
 43 .wrapper .top-nav-wrap .top-nav a{
 44     color:#6c6c6c;
 45     font-size:12.5px;
 46     padding:0 6px;
 47     margin:0;  
 48 }
 49 /*伪类 鼠标指针指向*/
 50 .wrapper .top-nav-wrap .top-nav a:hover{
 51     color:#f40;
 52 }
 53 .wrapper .top-nav-wrap .top-nav .china{
 54     color:black;
 55     font-size:13px;
 56     padding-top:3.5px;
 57 }
 58 .wrapper .top-nav-wrap .top-nav .my-taobao a{
 59     color:black;
 60 }
 61 .wrapper .top-nav-wrap .top-nav .login{
 62     color:#f40;
 63 }
 64 .wrapper .top-nav-wrap .top-nav .c-span{
 65     padding:0 3px;
 66     
 67 }
 68 .wrapper .top-nav-wrap .top-nav .bg-pic{
 69     display:inline-block;
 70     width:10px;
 71     height:10px;
 72     background-size:100% 100%;
 73     vertical-align:middle; 
 74 }
 75 .wrapper .top-nav-wrap .top-nav .bg-pic.xsj-pic{
 76     background-image: url('./xsj.png');
 77     
 78 }
 79 .wrapper .top-nav-wrap .top-nav .like-pic{
 80     background-image: url('./xxx.png');
 81     width:13px;
 82     height:9px;
 83    padding-top:4px;
 84     
 85 }
 86 .wrapper .top-nav-wrap .top-nav .bg-pic.shopcar-pic{
 87     background-image: url('./gwc.png');
 88     width:14px;
 89     height:15px;
 90     
 91 }
 92 .wrapper .top-nav-wrap .top-nav .bg-pic.web-nav-pic{
 93     background-image: url('./xuanxiang.png');
 94     width:10px;
 95     height:8px;
 96     padding-top:2px;
 97 }
 98 .wrapper .top-nav-wrap .top-nav .cut-off{
 99     line-height:25px;
100     color:#ddd;
101 }

注:因为没有运用到javascript所以很多动态交互无法实现,图标都是图片暂时放上的。所以请多多理解。

运用的知识:1.title显示, 2.css样式引入, 3.css选择器与选择器权重, 4.横向滚动条消失, 5.display, 6.浮动, 7.居中, 8.文字竖直居中, 9.background, 10.伪类, 11.定位position, 12.margin/padding