• 导航栏的多样设置


     

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

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

    注意:在日常的项目中,要尽量少的使用这种写法,会降低浏览器的性能,网页的响应速度,因为每遇到一个元素,就会去匹配去设置,尽管这个元素不需要设置padding、margin值,所以还是写一套默认的样式比较好

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

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

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

    以下是代码部分

     <div class="nav">
    	<ul>
    		<li><a href="#">评论</a></li>
    		<li><a href="#">问答</a></li>
    		<li><a href="#">笔记</a></li>
    		<li><a href="#">同学代码</a></li>
    	</ul>
      </div>
    css样式
    *{
         margin:0px;
    	 padding:0px;
      }
         .nav{
    		border-bottom:1px solid #c0c0c0;
    		1000px;
    		height:60px;
    		margin-left:40px;
    		//background-color:#c3ffdd;
    		}
    		
    	  ul li{
    	   list-style-type:none;
    	   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的设置内容顶不到下边框的最左边,设置完代码后就可以了


  • 相关阅读:
    最通俗易懂的技术解读
    laya学习查漏补缺
    vue+webpack实现懒加载的三种方式
    web安全防范策略
    http/1.x、http/2与https的区别、以及http3
    设备检测
    移动端调试利器------微信开源项目
    SqlConnection 在linux 连接 mssql 挂起的问题。
    rabbitmq 启用日志跟踪
    使用脚本把.net core 程序部署到 docker 容器中
  • 原文地址:https://www.cnblogs.com/king-ying/p/5509276.html
Copyright © 2020-2023  润新知