• 技术文章 >web前端 >html教程

    导航栏的多样设置 - King-英

    2016-05-20 13:46:35原创1396
    注意:觉得简单的人,别说话,悄悄的。。。。我也纯属是记录

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

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

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

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

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

    以下是代码部分

     
    css样式
    *{
         margin:0px;
    	 padding:0px;
      }
         .nav{
    		border-bottom:1px solid #c0c0c0;
    		width:1000px;
    		height:60px;
    		margin-left:40px;
    		//background-color:#c3ffdd;
    		}
    		
    	  ul li{
    	   list-style-type:none;
    	   width:120px;
    	   float:left;
    	 
    	 }
    	  li a{
    	        display:block;
    	        text-decoration:none;
    		color:black;
    		font-family:"微软雅黑";
    		text-align:center;
    		line-height:60px;	
    	 }
    	 li a:hover,li a:active{
    		 color:#f00;
    	 }
    	 li a:focus{
    	    border-bottom:2px solid #f00;
    	 }
    效果图

    先前我是死活标签hover的设置内容顶不到下边框的最左边,设置完代码后就可以了


    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:导航栏的多样设置 - King-英
    上一篇:[翻译]使用VH和VW实现真正的流体排版 - 脚后跟着猫 下一篇:实现bootstrap布局的input输入框中的图标点击功能 - hello八戒
    20期PHP线上班

    相关文章推荐

    精选22门好课,价值3725元,开通VIP免费学习!• ExtJs教程9(下)• 关于常用meta的总结 - 冰阡陌• 第 9 章 音频和视频_html/css_WEB-ITnose• 新手的成长记录点滴(十)_html/css_WEB-ITnose• 浏览器得到地址栏的相关信息_html/css_WEB-ITnose
    1/1

    PHP中文网