应用商城

效果预览：

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #app{

        }
        #home{
            width: 100%;
            height: 500px;
            background-image: url("banner.jpg");
            position: relative;
        }
        .header{
            width: 80%;
            height: 44px;
            margin: 0 auto;
            padding-top: 20px;
            display: flex;
            justify-content: space-between;
        }
        .logo{
            width: 100px;
            height: 27px;
        }
        .search{
            width: 36%;
            height: 30px;
            background-color: #FFFFFF;
            display: flex;
            justify-content: space-between;
            border-radius: 10px;

        }
        .input{
            padding-left: 10px;
            width: 80%;
            height: 30px;
            border-radius: 10px 0 0 10px;
            border: none;
            outline: none;
        }

        .button{
            width: 20% ;
            height: 25px;
            background-color: #FFFFFF;
            border-color: #FFFFFF;
            font-size: 74%;
            font-weight: bold;
            color: red;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            text-align: center;
            padding-top: 2px;
        }
        .search span{
            width: 4px;
            height: 100%;
            display: flex;
            /*justify-content: space-between;*/
            color: #c9c9c9;
        }
        .personal{
            width: 168px;
            height: 40px;
            display: flex;
            justify-content: space-between;
        }
        .personal img{
            width: 40px;
            height: 40px;
            border-radius: 50%;

        }
        a{
            text-decoration: none;
            color: rgb(255,255,255);

        }
        .personal div{
            margin-left: 25px;
            color: #FFFFFF;
            text-align: center;
            cursor: pointer;
            /*display: inline-block;*/

        }
        .nav{
            margin: 40px auto 0;

            width: 70%;
            height: 10%;
            display: flex;
            justify-content: space-between;


        }
        ul li{
            font-size: 14px;
            width: 60px;
            height: 20px;
            list-style: none;
            display: inline-block;
            padding:17px;
            margin:0 46px ;
        }
        /*li:active{*/
        /*    !*background-color: #FFFFFF;*!*/
        /*    border-radius: 30px;*/
        /*}*/
        a:hover{
            color: #ff7ee6;
            font-weight: bold;
            font-size: 15px;

        }
        .loop-wrap{
            width: 70%;

            min-width: 1224px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            /*bottom: 248px;*/
            margin: 0 267px;
            /*position: fixed;*/
            bottom:20px;
            z-index:999;

        }
        #top{
            /*justify-content 属性有哪些*/
            width: 72%;
            min-width:1223px ;
            display: flex;
            justify-content: space-around;
            height: 160px;
            background-color: #fff;
            margin: 0 auto;
            margin-bottom: 20px;
            box-shadow: 1px 2px 2px rgba(0,0,0,.3);
        }

        /*.loop-images-container{*/
            /*position: absolute;*/
        /*    left: 0; top: 0;*/
            /*    width: 500%;*/
        /*    height: 100%;*/
        /*    font-size: 0;*/
        /*    !*transform: translate(0,0); !* 初始位置位移 *!*!*/
        /*    !*animation: loop 10s linear infinite;*!*/
        /*}*/
        .pic{
            width: 140px;
            height: 132px;
            margin: auto 20px;

        }
        .download{
            width: 160px;
            height: 40px;
            line-height: 40px;
            background-color: red;
            color: #FFFFFF;
            text-align: center;
            font-size: 19px;
            margin: 60px;
            border-radius: 4px;
            cursor: pointer;
        }

        .text-top{
            font-size: 18px;
            font-weight: 700;
            margin-right: 20px;
            margin-top: 10px;
            color: black;
            height: 33%;
        }
        .text-middle{
            display: flex;
            justify-content: space-between;
            font-size: 24px;
            color: black;
            height: 33%;

        }
        .text-bottom{
            color: #797979;
            font-size: 12px;
            height: 33%;
            margin-top: 16px;
        
        }
        .picc{}

    </style>
</head>
<body>
<div id="app">
    <div id="home">
        <div class="header">
            <div class="logo">
                <img src="logo.png" alt="">
            </div>
            <div class="search">
                <input type="text" placeholder="请输入搜索内容" class="input">
                <span>|</span>
                <div class="button">搜索</div>
            </div>
            <div class="personal">
                <img src="per.png" alt="" >
                <div>登录/注册</div>
            </div>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">软件推荐</a></li>
                <li><a href="#">软件分类</a></li>
                <li><a href="#">装机必备</a></li>
                <li><a href="#">热门帖子</a></li>
                <li><a href="#">最新上架</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
        <div class="loop-wrap">
            <div class="loop-images-container">
                <img src="360压缩.jpg" alt="" class="loop-image">
                <img src="360安全卫士.jpg" alt="" class="loop-image">
                <img src="360浏览器.jpg" alt="" class="loop-image">
                <img src="微信.jpg" alt="" class="loop-image">
                <img src="淘宝.jpg" alt="" class="loop-image">
                <img src="搜狗.jpg" alt="" class="loop-image">
<!--                <img src="钉钉.jpg" alt="" class="loop-image">-->
<!--                <img src="美图秀秀.jpg" alt="" class="loop-image">-->
            </div>
        </div>
    </div>
    <div id="picc"></div>
    <div id="top">
        <div class="pic">
            <img src="002.jpg" alt="">
        </div>
        <div class="text">
            <div class="text-top">桌面天气&emsp;1.0.1-1</div>
            <div class="text-middle">
                <p>大小：115.5</p>
                <p>发布时间：2021/08/06</p>
                <p>类型：其他应用</p>
            </div>
            <div class="text-bottom">
                天气是一款简单、精致、实用的天气预报软件，具有高度自定义功能，功能比较强大，除了最基础的提供天气预报和时钟外，这款软件还能够提供诸如收藏此类的功能。
            </div>
        </div>
        <div class="download">立即下载</div>
    </div>
</div>

</body>
</html>
posted @ 2021-08-17 16:02  博客zhu虎康  阅读(432)  评论(0)  编辑  收藏  举报