练习前端布局之老闫只牛批名画商城

仅作为日常练习记录~~

直接上代码！！！！！！！

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>老闫真牛逼之优化商城</title>
    <link href="../assets/shoping_css.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="../assets/js/shoping_js.js"></script>
</head>
<body>
    <div class="header">
        <div class="logo">
            <img src="../assets/home/image/logo.png" alt="">
        </div>
        <!--onmouseleave是鼠标的离开时间-->
        <div class="menu" onmouseleave="show_menu1()">
            <div class="menu_title" onclick="show_menu()">
                <a href="#">内容分类</a>
            </div>
            <ul id="menu1">
                <li>现实主义</li>
                <li>抽象主义</li>
            </ul>
        </div>
        <div class="auth">
            <ul>
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </div>
    <div class="content">
        <div class="banner">
            <img src="../assets/home/image/welcome.png" class="baner-img" alt="">
        </div>
        <div class="img-content">
             <ul>
                <li>
                    <img src="../assets/home/image/wumingnvlang.jpg" class="img-li" alt="">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>
                            请问老闫为什么这么帅？请问老闫为什么这么帅？
                            请问老闫为什么这么帅？请问老闫为什么这么帅？
                            请问老闫为什么这么帅？请问老闫为什么这么帅？
                            请问老闫为什么这么帅？请问老闫为什么这么帅？
                            请问老闫为什么这么帅？请问老闫为什么这么帅？
                        </p>
                        <div class="img-btn">
                            <div class="price">￥5800</div>
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="../assets/home/image/cart..svg" alt="">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../assets/home/image/me.jpg" class="img-li" alt="">
                    <div class="info">
                        <h3>无名男郎</h3>
                        <p>
                            啊哈哈哈哈！啊哈哈哈哈！啊哈哈哈哈！啊哈哈哈哈！啊哈哈哈哈！
                            啊哈哈哈哈！啊哈哈哈哈！啊哈哈哈哈！啊哈哈哈哈！啊哈哈哈哈！
                            啊哈哈哈哈！啊哈哈哈哈！啊哈哈哈哈！
                        </p>
                        <div class="img-btn">
                            <div class="price">$999999</div>
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="../assets/home/image/cart.svg" alt="">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../assets/home/image/wumingnvlang.jpg" class="img-li" alt="">
                    <div class="info">
                        <h3>无名女郎</h3>
                        <p>
                            请问老闫为什么这么帅？请问老闫为什么这么帅？
                            请问老闫为什么这么帅？请问老闫为什么这么帅？
                            请问老闫为什么这么帅？请问老闫为什么这么帅？
                            请问老闫为什么这么帅？请问老闫为什么这么帅？
                            请问老闫为什么这么帅？请问老闫为什么这么帅？
                        </p>
                        <div class="img-btn">
                            <div class="price">￥5800</div>
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="../assets/home/image/cart.svg" alt="">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../assets/home/image/ansheng.jpg" class="img-li" alt="">
                    <div class="info">
                        <h3>猫女郎</h3>
                        <p>
                            这是一只猫!这是一只猫!这是一只猫!这是一只猫!这是一只猫!这是一只猫!
                            这是一只猫!这是一只猫!这是一只猫!这是一只猫!这是一只猫!
                        </p>
                        <div class="img-btn">
                            <div class="price">￥5800</div>
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="../assets/home/image/cart.svg" alt="">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../assets/home/image/laoyao.jpg" class="img-li" alt="">
                    <div class="info">
                        <h3>大美女</h3>
                        <p>
                            这是大美女！！这是大美女！！这是大美女！！这是大美女！！这是大美女！！这是大美女！！
                            这是大美女！！这是大美女！！这是大美女！！这是大美女！！这是大美女！！
                            这是大美女！！
                        </p>
                        <div class="img-btn">
                            <div class="price">$888888</div>
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="../assets/home/image/cart.svg" alt="">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../assets/home/image/laosan.jpg" class="img-li" alt="">
                    <div class="info">
                        <h3>大老虎</h3>
                        <p>
                            这也是一只猫!这也是一只猫!这也是一只猫!这也是一只猫!这也是一只猫!这也是一只猫!这也是一只猫!
                            这也是一只猫!这也是一只猫!这也是一只猫!这也是一只猫!这也是一只猫!
                        </p>
                        <div class="img-btn">
                            <div class="price">￥5800</div>
                            <a href="#" class="cart">
                                <div class="btn">
                                    <img src="../assets/home/image/cart.svg" alt="">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="page-nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">上一页</a></li>
                <li><span class="first-page">1</span></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">...</a></li>
                <li><a href="#">98</a></li>
                <li><a href="#">99</a></li>
                <li><a href="#">下一页</a></li>
                <li><a href="#">尾页</a></li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <p><span>M-GALLARY</span>@2017 POWERED BY LAOYAN</p>
    </div>
</body>
</html>

css：

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: whitesmoke;
}


a{
    text-decoration: none;
}


.header{
    margin: 25px auto;
    width: 1200px;
}


.header .baner-img{
    width: 1200px;
    height: 239px;
}




.header .menu ul{
    display: none;
    list-style: none;
    position: absolute;
    width: 80px;
    /*opacity添加半透明效果*/
    opacity: 0.7;
    background-color: white;
}

.header .logo{
    float: left;
    position: relative;
}

.header .menu{
    float: left;
    position: relative;
    margin-top: 12px;
    margin-left: 16px;
}

.header .menu ul li{
    margin-top: 20px;
    text-align: center;
}

.header .menu .menu_title{
    border-bottom: 1px solid black;
    padding-bottom: 20px;
    width: 80px;
    text-align: center;
}

.header .auth{
    float: right;
}


.header .auth ul li{
    float: left;
    margin-top: 10px;
    margin-right: 70px;
    list-style: none;
}


.content{
    width: 1200px;
    margin: 25px auto;
}


.img-content img{
    width: 100%;
    height: 300px
}


















.content .banner .baner-img{
    margin-top: 20px;

}


.content .img-content ul{
    width: 1280px;
}

.content .img-content ul li{
    list-style: none;
    width: 360px;
    float: left;
    padding-bottom: 20px;
    margin: 30px 60px 60px 0;
    box-shadow: 3px 3px 6px 3px #ccc;
    background-color: white;
}

.img-content .info h3{
    font-size: 25px;
    color: red;
    margin-top: 20px;
    margin-bottom: 20px;
}

.img-content .info p{
    line-height: 25px;
     text-align: justify;
    margin-bottom: 20px;
    height: 200px;
}

.img-content .info{
    margin-left: 30px;
    margin-right: 30px;
}

.img-content .img-btn .price{
    color: red;
    font-size: 20px;
}

.img-content .info .img-btn{
    width: 300px;
}

.img-content .info .img-btn .btn{
    width: 60px;
    height: 30px;
    background-color: red;
    text-align: center;
    border-radius: 5px;
    float: right;
}

.img-content .info .img-btn .cart .btn  img{
    width: 25px;
    height: 20px;
    margin-top: 5px;

}

.img-content .info .img-btn .price{
    float: left;
}

.page-nav{
    width: 100%;
    height: 60px;
    line-height: 60px;
    overflow: hidden;
}

.page-nav ul li{
    float: left;
    margin-right: 20px;
    list-style: none;
}

.page-nav ul{
    margin: auto;
    width: 550px;
}

.first-page{
    border-radius: 50%;
    background-color: #c5c5c5;
    padding: 3px 9px;
}


.footer{
    width: 1200px;
    height: 100px;
    margin: 60px auto;
    border-top: 1px solid #ccc;
    overflow: hidden;
}
.footer p{
    text-align: center;
    line-height: 70px;
}

.footer span{
    color: red;
}

js：

var flag=true;

//处理点击menu显示菜单和关闭菜单
function show_menu(){
    const menu1 = document.getElementById("menu1");
    if(flag){
        menu1.style.display="block"
        flag=false
    }else {
        menu1.style.display="none"
        flag=true
    }
}

//处理鼠标离开menu时 隐藏菜单
function show_menu1(){
    // alert("ttt")
    const menu1 = document.getElementById("menu1");
    menu1.style.display="none"
    flag=true
}

效果展示：

写前端会上瘾哦！

还是前端好玩！！

python写着真无聊

posted @ 2021-12-10 18:26 隔壁老闫阅读(63) 评论(0) 收藏举报

刷新页面返回顶部

练习前端布局之老闫只牛批名画商城

公告