首页 > 开发 > CSS > 正文

导航栏的多样设置简单实例

2024-07-11 08:25:40
字体:
来源:转载
供稿:网友

注意:觉得简单的人,别说话,悄悄的。。。。我也纯属是记录

网页默认存在margin值和padding值,并且后面的元素对margin、padding的修改过程中并不会生效,因此在样式设置过程中首先对所有的元素的margin和padding值清0;

代码:*{padding:0px;margin:0px;}     //*号代表所有

可以在后面的元素上设置你想要的margin和padding值,都会生效;

举一个例子:(就是因为这一个原因,累死宝宝了,想法是挺符合逻辑的,不过就是不是你想要的)

我是仿照imooc网站的的导航做的(全当练手,因为我是新手,什么都想试一试)

以下是代码部分

XML/HTML Code复制内容到剪贴板
  1. <div class="nav">   <ul>  
  2.     <li><a href="#">评论</a></li>       <li><a href="#">问答</a></li>  
  3.     <li><a href="#">笔记</a></li>       <li><a href="#">同学代码</a></li>  
  4. </ul>    </div>  

css样式

CSS Code复制内容到剪贴板
  1. *{         margin:0px;   
  2.      padding:0px;      }   
  3.      .nav{            border-bottom:1px solid #c0c0c0;   
  4.         width:1000px;            height:60px;   
  5.         margin-left:40px;            //background-color:#c3ffdd;   
  6.         }               
  7.       ul li{           list-style-type:none;   
  8.        width:120px;           float:left;   
  9.               }   
  10.       li a{                display:block;   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表