前端页面----昵图网（简单版）

已于 2022-03-15 10:09:19 修改
阅读量2.9k 收藏 9
点赞数 2
分类专栏： 前端页面 文章标签： 前端 html css
于 2022-03-15 10:05:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52130160/article/details/123494636
版权

昵图网（源网址：）https://www.nipic.com/index.html

图片为昵图网大致页面，还有很多细节没有写到！！！
前端小白新手，记录自己成长为前端工程师的过程，写的有点乱，欢迎赐教哈~~~

 

 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 在这里引入custom.css public.css -->
<link rel="stylesheet" href="./css0/custom.css">
<link rel="stylesheet" href="./css0/public.css">

<body>
    <div class="page-container">
        <!-- 顶部 -->
        <div class="header">
            <div class="content layout-flex-between">
                <div class="logo"></div>
                <div class="nav-bar">
                    <a href="">首页</a>
                    <a href="">设计</a>
                    <a href="">摄影</a>
                    <a href="">多媒体</a>
                </div>
                <div class="about-user">
                    <input class="btn btn-primary" type="button" value="登录">
                    <input class="btn btn-normal" type="button" value="注册">
                </div>
            </div>
        </div>
        <!-- 中间区域 -->
        <div class="main">
            <div class="content">
                <div class="banner-container">
                    <img src="./image/top1.jpg" alt="">
                    <div class="search-bar layout-flex-between border-box">
                        <input class="border-box" type="text" placeholder="请输入">
                        <input class="btn btn-primary" type="button" value="搜索">
                    </div>
                    <span class="pre "></span>
                    <span class="next "></span>
                </div>
            </div>
            <div class="top-middle">
                <div class="top-middle-img layout-flex-between">
                    <div class="img1">
                        <img src="./image/Chun-Ji-Mei-Chen.jpg" alt="">
                        <div class="label-hidden">春季美陈</div>
                    </div>
                    <div class="img1">
                        <img src="./image/Xin-Cha-Shang-Shi.jpg" alt="">
                        <div class="label-hidden">春季美陈</div>
                    </div>
                    <div class="img1">
                        <img src="./image/Cai-Cha-Cha-Hua.jpg" alt="">
                        <div class="label-hidden">春季美陈</div>
                    </div>
                    <div class="img1">
                        <img src="./image/JinZhe.jpg" alt="">
                        <div class="label-hidden">春季美陈</div>
                    </div>
                </div>
                <div class="character1 layout-flex-around">
                    <input class="btn1  " type="button" value="星空">
                    <input class="btn1  " type="button" value="打折促销海报">
                    <input class="btn1  " type="button" value="美食海报">
                    <input class="btn1  " type="button" value="旅游海报">
                    <input class="btn1  " type="button" value="党建雕塑">
                    <input class="btn1  " type="button" value="虎年美陈">
                    <input class="btn1  " type="button" value="最新图片">
                    <input class="btn1  " type="button" value="查看更多>>">
                </div>
            </div>
            <div class="last-middle">
                <div class="last-middle-img layout-flex-between">
                    <div class="last-middle-img-left ">
                        <img style=" width: 280px;" src="./image/Huo-Dong-Ce-Hua.jpg" alt="">
                    </div>
                    <div class="last-middle-img-right ">
                        <div class="right-top layout-flex-between">
                            <img src="./image/flower.jpg" alt="">
                            <img src="./image/Fang-Di-Chang.jpg" alt="">
                            <img src="./image/hunli.jpg" alt="">
                        </div>
                        <div class="right-bottom layout-flex-between">
                            <img src="./image/flower.jpg" alt="">
                            <img src="./image/JinZhe.jpg" alt="">
                            <img src="./image/flower.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="character1 layout-flex-around">
                    <input class="btn1  " type="button" value="工作总结">
                    <input class="btn1  " type="button" value="邀请函">
                    <input class="btn1  " type="button" value="黄昏">
                    <input class="btn1  " type="button" value="道德讲堂">
                    <input class="btn1  " type="button" value="商务办公">
                    <input class="btn1  " type="button" value="APP界面设计">
                    <input class="btn1  " type="button" value="周年庆海报">
                    <input class="btn1  " type="button" value="查看更多>>">
                </div>
            </div>

            <!-- 底部 -->
            <div class="footer">
                <div class="footer-inside layout-flex-between">
                    <div class="table">
                        <div class="table-in">
                            <h3>免费素材</h3>
                            <h6 style="color: rgb(207, 204, 204);">海量共享图任你选择</h6>
                            <input class="btn-last" type="button" value="去看看">
                        </div>
                    </div>
                    <div class="table">
                        <div class="table-in">
                            <h3>原创精品</h3>
                            <h6 style="color: rgb(207, 204, 204);">海量共享图任你选择</h6>
                            <input class="btn-last" type="button" value="去看看">
                        </div>
                    </div>
                    <div class="table">
                        <div class="table-in">
                            <h3>正版图库</h3>
                            <h6 style="color: rgb(207, 204, 204);">海量共享图任你选择</h6>
                            <input class="btn-last" type="button" value="汇图网">
                        </div>
                    </div>
                    <div class="table">
                        <div class="table-in">
                            <h3>汇图悬赏</h3>
                            <h6 style="color: rgb(207, 204, 204);">海量共享图任你选择</h6>
                            <input class="btn-last" type="button" value="去看看">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 最底部 -->
        <div class="bottom">
            <div class="bottom-top">
                <div class="bt-in layout-flex-between">
                    <div class="bt-in-table">

                        <div class="bt1">

                            <p style="font-size: 13px;">关于昵图</p>
                            <a href="">昵图简称</a>
                            <a href="">网站公约</a>
                            <a href="">版权申明</a>

                            <a href="">昵图简称</a>
                            <a href="">网站公约</a>
                            <a href="">版权申明</a>

                        </div>
                    </div>
                    <div class="bt-in-table">
                        <div class="bt1">

                            <p style="font-size: 13px;">常见问题</p>
                            <a href="">昵图简称</a>
                            <a href="">网站公约</a>
                            <a href="">版权申明</a>

                            <a href="">昵图简称</a>
                            <a href="">网站公约</a>
                            <a href="">版权申明</a>

                        </div>
                    </div>
                    <div class="bt-in-table">
                        <div class="bt1">
                            <p style="font-size: 13px;">联系我们</p>
                            <p style="font-size: 10px;">QQ在线时间 08:30-21:30</p>
                            <img src="./image/qq1.png" alt="">
                        </div>
                    </div>
                    <div class="bt-in-table">
                        <div class="bt1">
                            <p style="font-size: 13px;">友情链接</p>
                            <img style=" width: 150px;height:  40px;" src="./image/zhaohang_logo.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom-bottom ">
                <div class="bb1 layout-flex-around1">
                    <span style="font-size: 8px;"> Copyright © 2022 NiPic.com All Rights Reserved　版权所有·昵图网 昵图网是网络服务平台方，
                        若您的权利被侵害，请联系 copyright@nipic.com 本站法律顾问：陈明律师 </span>
                </div>
                <div class="bb2 layout-flex-around1">
                    <p style="font-size: 8px;">
                        <a href="">浙ICP备14012994号-1 增值电信业务经营许可证：浙B2-20140130</a> 违法和不良信息举报电话：0571-89267010
                    </p>
                </div>
                <div class="bb3 layout-flex-between">
                    <div class="bb3-1">
                        <P style="font-size: 8px;margin-left: 30px;">网络工商电子营业执照</P>
                    </div>
                    <div class="bb3-2">
                        <P style="font-size: 8px;margin-left: 30px;"> 浙公网安备 33011002011092号</P>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>

</html>

        /* custom.css */
        
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            min-width: 1260px;
        }
        
        .page-container {
            width: 100%;
            height: 100%;
        }
        
        .header {
            width: 100%;
            height: 75px;
            box-shadow: 0px 0px 10px #b6b3b3;
            /* x轴偏移量 y轴偏移量 阴影大小 yanse */
        }
        
        .header .content {
            width: 1000px;
            height: 100%;
            margin: auto;
            box-sizing: border-box;
        }
        
        .logo {
            width: 149px;
            height: 100%;
            background-image: url("	https://static.ntimg.cn/original/images/soso.png");
            background-size: 309px 45px;
            background-position-y: 15px;
            background-repeat: no-repeat;
            /* float: left; */
        }
        
        .nav-bar {
            width: 370px;
            height: 100%;
            /* float: left; */
            margin-right: 300px;
        }
        
        .nav-bar a:first-child {
            color: skyblue;
        }
        
        .nav-bar a {
            line-height: 75px;
            margin-left: 30px;
            text-decoration: none;
            color: rgb(0, 0, 0);
        }
        
        .nav-bar a:hover {
            color: skyblue;
        }
        
        .main {
            width: 100%;
            height: 1282px;
        }
        
        .banner-container {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .banner-container:hover .pre {
            display: inline-block;
            left: 30px
        }
        
        .banner-container:hover .next {
            display: inline-block;
            right: 30px;
        }
        
        .banner-container img {
            width: 100%;
            height: 100%;
        }
        
        .search-bar {
            width: 692px;
            height: 58px;
            position: absolute;
            top: calc(50% - 29px);
            left: calc(50% - 346px);
            border: 3px solid rgba(10, 10, 10, 0.4);
            box-sizing: border-box;
        }
        /* 减号两边一定要有空格 */
        
        .search-bar input:first-child {
            width: 588px;
            height: 100%;
            outline: none;
            box-sizing: border-box;
        }
        
        .search-bar input:last-child {
            width: 97px;
            height: 100%;
        }
        
        .search-bar input:first-child::placeholder {
            font-size: 15px;
            color: chartreuse;
        }
        
        .banner-container .pre,
        .next {
            display: inline-block;
            width: 80px;
            height: 120px;
            background-color: rgb(123, 126, 121);
            background-size: 100% 100%;
            position: absolute;
            top: calc(50% - 60px);
            transition: all 0.5s;
        }
        
        .banner-container .pre {
            left: -80px;
            background-image: url("./../image/arr-l.png");
        }
        
        .banner-container .next {
            right: -80px;
            background-image: url("./../image/arr-r.png");
        }
        
        .top-middle {
            width: 100%;
            height: 388px;
            position: relative;
        }
        
        .top-middle-img {
            width: 1100px;
            height: 202px;
            /* background-color: darkblue; */
            position: absolute;
            top: calc(50% - 101px);
            left: calc(50% - 550px);
        }
        /* .top-middle-img .img {
            width: 240px;
            height: 200px;
        } */
        
        .top-middle img {
            width: 240px;
            height: 200px;
            position: relative;
        }
        
        .character1 {
            width: 1100px;
            height: 48px;
            position: absolute;
            margin-top: 320px;
            left: calc(50% - 550px);
        }
        
        .last-middle {
            width: 100%;
            height: 608px;
            position: relative;
            background-color: rgb(246, 246, 246);
        }
        
        .last-middle-img {
            width: 1100px;
            height: 418px;
            position: absolute;
            top: calc(50% - 209px);
            left: calc(50% - 550px);
        }
        
        .last-middle-img-left {
            width: 280px;
            height: 408px;
        }
        
        .last-middle-img-right {
            width: 810px;
            height: 418px;
        }
        
        .last-middle-img-right img {
            width: 240px;
            height: 200px;
        }
        
        .right-top {
            width: 810px;
            height: 209px;
        }
        
        .right-bottom {
            width: 810px;
            height: 209px;
        }
        
        .last-middle .character1 {
            margin-top: 530px;
        }
        
        .footer {
            width: 100%;
            height: 286px;
            position: relative;
        }
        
        .footer-inside {
            width: 1100px;
            height: 186px;
            position: absolute;
            top: calc(50% - 93px);
            left: calc(50% - 550px);
        }
        
        .table {
            width: 414px;
            height: 186px;
            border: 1px solid rgb(233, 232, 232);
            position: relative;
        }
        
        .table-in {
            width: 180px;
            height: 160px;
            top: calc(50% -80px);
            left: calc(50% - 90px);
            position: absolute;
        }
        
        .bottom {
            width: 100%;
            height: 300px;
            background-color: rgb(246, 246, 246);
            margin-top: 450px;
        }
        
        .bottom-top {
            width: 100%;
            height: 150px;
            position: relative;
        }
        
        .bt-in {
            width: 1100px;
            height: 100px;
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 550px);
            position: absolute;
        }
        
        .bottom-bottom {
            height: 150px;
            position: relative;
        }
        
        .bt-in-table {
            width: 275px;
            height: 100px;
            border: 1px solid rgb(238, 237, 237);
            position: relative;
        }
        
        a {
            text-decoration: none;
            font-size: 10px;
            color: #333;
        }
        
        a:hover {
            color: rgb(19, 158, 212);
        }
        
        .bt1 {
            width: 170px;
            height: 100px;
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 85px);
        }
        
        .bb3 {
            width: 410px;
            height: 29px;
            position: absolute;
            left: calc(50% - 200px);
        }
        
        .bb3-1 {
            width: 200px;
            height: 29px;
            background-image: url("./../image/gongan_icon.png");
            background-repeat: no-repeat;
        }
        
        .bb3-2 {
            width: 210px;
            height: 29px;
            background-image: url("./../image/webgongshang_icon.png");
            background-repeat: no-repeat;
        }
        /* 细节补充 */
        
        .btn-last:hover {
            background-color: rgb(19, 158, 212);
        }
        
        .btn1:hover {
            color: rgb(49, 204, 255)
        }
/* public  公共部分，方便调用 */

.border-1s {
    border: 1px solid black;
}

.btn {
    min-width: 60px;
    min-height: 30px;
    font-size: 16px;
    color: black;
    border-radius: 3px;
}

.btn1 {
    min-width: 130px;
    min-height: 48px;
    background-color: white;
    border: 1px solid rgb(214, 215, 216);
    font-size: 14px;
    /* color: rgb(49, 204, 255); */
    border-radius: 3px;
}

.btn-last {
    min-width: 140px;
    min-height: 42px;
    border: 1px solid rgb(49, 204, 255);
    background-color: white;
    font-size: 16px;
    color: skyblue;
    border-radius: 3px;
}

.btn-primary {
    background-color: rgb(49, 204, 255);
    border: 1px rgb(49, 204, 255) solid;
    color: white;
}

.btn-normal {
    background-color: white;
    border: 1px rgb(49, 204, 255) solid;
    color: black;
}

.btn-normal:hover {
    background-color: skyblue;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: skyblue;
    cursor: pointer;
}

.layout-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.layout-flex-around {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.layout-flex-around1 {
    display: flex;
    justify-content: space-around;
}

.layout-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.layout-flex-middle {
    display: flex;
    justify-content: center;
}

.layout-align-middle {
    display: flex;
    justify-content: center;
}

.border-box {
    box-sizing: border-box;
}

.hidden {
    display: none;
}

.label-hidden {
    width: 240px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    position: absolute;
    background-color: rgb(109, 99, 87);
    margin-top: -55px;
    opacity: 0;
}

.label-hidden:hover {
    opacity: 0.7;
    color: white;
}

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值