zoukankan      html  css  js  c++  java
  • 一道灵活的css笔试题

    今天在网上看到一css笔试题,乍一看很简单,实则内部暗藏玄机,题目大概是:九宫格,每格长宽50px,边框宽度5px,鼠标经过边框变红,效果如下:

    鼠标路过时:


    以下是代码(如有不足之处望多加指正)

    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    *{margin:0px;padding:0px;}
    
    ul{
        165px;
        height:165px;
        margin:20px auto;
    }
    li{
         50px;
        height:50px;
       margin:-5px 0 0 -5px;  //关键代码
        float:left;
        background: #ccc;
        border:5px solid blue;
        text-align:center;
        line-height:50px;
        cursor:pointer;
        list-style-type: none;
    }
    li:hover{
        border-color:red; 
        position:relative; //最为重要的一条代码,否则会出现下图中的错误
    }
    </style>
    <script language="JavaScript">
    
    </script>
     	<body>
    			<ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                </ul>
    	</body>
    </html>
    错误效果(没有position:relative;时的效果):

    错误效果(没有margin:-5px 0 0 -5px;时的效果):


    切记文档声明<DOCTYPE HTML>也很重要,如果没有此声明,IE8浏览器会出意外,如下:





  • 相关阅读:
    走进Android系统
    最后的一像素。
    rem介绍
    软件安装相关问题。
    iscroll
    程序员常用词语发音
    一个程序员眼中的好UI
    myeclipse性能优化
    注入配置数据
    java IO
  • 原文地址:https://www.cnblogs.com/chayangge/p/4288700.html
Copyright © 2011-2022 走看看