简单布局的实现

布局效果图，鼠标移动到图片上图片用定位上移

 

 网站布局： 

            1.整体入手 

            2.局部分析 

            3.调整位置 

            4.添加样式  

        开发规范： 

            目的：提高代码的可维护利用性 

                代码格式 

                命名规范 

                结构语义化

知识点：0.5秒的动画效果 transition: .5s;

<!-- 【超基础】一个简单布局的实现：浮动，及transition过渡 -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            .box{
                width: 1240px;
                height: 628px;
                background-color: #f5f5f5;
                margin:100px auto 0;/*上100 左右自适应 下0*/
            }
            .box .box-hot{
                width: 243px;
                height: 628px;
                float: left;
                margin-left: 10px;
            }
            .box .box-hot a img{
                width: 243px;
                height: 628px;
            }
            .box .box-list{
                width: 978px;
                height: 628px;
                float: left;
                margin-left: 9px;
            }
            .box .box-list .list-con{
                width: 234px;
                height: 300px;
                background-color: pink;
                float: left;
                margin:0px 0px 27px 9px;
                position: relative;
                transition: .5s;/*0.5秒的动画效果*/
            }
            .box .box-list .list-con:hover{
                top:-10px;/*用定位*/
            }
            .box .box-list .list-con a img{
                width: 160px;
                height: 160px;
                margin:10px auto;
                display: block;
            }
            .box .box-list .list-con p,h3{
                text-align: center;
                padding-top: 10px;
            }
        </style>    
    </head>
    <body>
        <div class="box">
            <!-- 热销展示 -->
            <div class="box-hot">
                <a href="#"><img src="img/mihot.png"></a>
            </div>
            <!-- 列表展示 -->
            <div class="box-list">
                <div class="list-con">
                    <a href="#">
                        <img src="img/list1.png">
                    </a>
                    <h3>小米6X 4GB+32GB</h3>
                    <p>全索尼相机，骁龙660 AIE处理器</p>
                    <p>1499元</p>
                </div>
                <div class="list-con"></div>
                <div class="list-con"></div>
                <div class="list-con"></div>
                <div class="list-con"></div>
                <div class="list-con"></div>
                <div class="list-con"></div>
                <div class="list-con"></div>
            </div>
        </div>  
    </body>
</html>

猜你喜欢