css 常用技巧

1.实现以下的定位(右边的menu紧跟随着左边的列表且位置不变)

左侧（.box）列表容器的宽度为800px且居中；

右侧(.menu)为固定fixed元素。这时。它的定位是有个小技巧的。

那么右侧的代码为：

.menu{
            position: fixed;
            top: 100px;
            left: 50%;
            margin-left: 400px;
        }

2. 图片排列样式.，主要看下面的display:inline 当图片一行放不下 自动放到下一行。

html:

<div class="content">
        <h1>购物商城</h1>
        <div class="item">
            <h2>1F 男装</h2>
            <ul>
                <li><a href="#"><img src="./images/1F.jpg" alt="" srcset=""></a></li>
                <li><a href="#"><img src="./images/1F.jpg" alt="" srcset=""></a></li>
                <li><a href="#"><img src="./images/1F.jpg" alt="" srcset=""></a></li>
                <li><a href="#"><img src="./images/1F.jpg" alt="" srcset=""></a></li>
                <li><a href="#"><img src="./images/1F.jpg" alt="" srcset=""></a></li>
                <li><a href="#"><img src="./images/1F.jpg" alt="" srcset=""></a></li>
                <li><a href="#"><img src="./images/1F.jpg" alt="" srcset=""></a></li>
            </ul>
        </div>
    </div>

css:

 

*{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 12px;
            line-height: 1.7;
        }
        li{
            list-style: none;
        }

        .content{
            width: 800px;
            margin: 0 auto;
            padding: 10px;
        }
        .content h1{
            color: red;
            margin-bottom: 20px;
        }
        .content .item{
            margin-bottom: 20px;
            padding: 20px;
            border: 1px dotted #ccc;
        }

        .content .item li{
            display: inline;
            margin-right: 10px;
        }
        .content .item li a img{
            width: 230px;
            height: 230px;;
        }