第九、十天：网站首页案例

最新推荐文章于 2024-07-18 17:34:14 发布

鳕鱼&羚羊

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量155

点赞数 1

分类专栏： web前端学习之路文章标签： css html5 html

本文链接：https://blog.csdn.net/Y1_1Y1_1y1_1y/article/details/120479893

版权

web前端学习之路专栏收录该内容

57 篇文章 1 订阅

订阅专栏

网站首页项目：

    * {
        margin: 0;
        padding: 0;
    }
    
    .w {
        width: 1080px;
        margin: auto;
    }
    
    .header {
        height: 65px;
    }
    
    .nav li {
        list-style: none;
    }
    
    a {
        text-decoration: none;
    }
    
    .logo {
        float: left;
        margin-top: 15px;
    }
    
    .logo,
    div a img {
        width: 130px;
        height: 50px;
    }
    
    .nav {
        float: left;
        margin-left: 80px;
    }
    
    .nav ul li {
        float: left;
    }
    
    .nav ul li a {
        display: block;
        padding-top: 38px;
        padding-right: 50px;
        font-size: 18px;
        color: black;
    }
    
    .search {
        float: left;
        margin-left: 255px;
    }
    
    .search img {
        width: 22px;
        height: 22px;
        margin-top: 38px;
    }
    
    .button {
        float: left;
        margin-left: 20px;
    }
    
    .button1 {
        width: 40px;
        height: 26.5px;
        margin-top: 35px;
        margin-left: 12px;
        background-color: white;
        border: 1px solid;
        border-color: red;
        border-radius: 2px;
        color: red;
    }
    
    .button1,
    .button2:hover {
        cursor: pointer;
    }
    
    .button1 a:visited {
        color: red;
    }
    
    .nav ul li a:hover {
        color: #ff6700;
    }
    
    .banner {
        height: 300px;
        margin-top: 12px;
        background-image: url(../img/original.jpg);
        background-repeat: no-repeat;
        background-position: center;
    }
    
    .banner h1 {
        margin-left: 800px;
        padding-top: 35px;
        color: whitesmoke;
        font-weight: 400;
    }
    
    .banner p {
        margin-left: 855px;
    }
    
    div p span {
        display: block;
        float: left;
        height: 30px;
        line-height: 30px;
        margin: 22px 7px;
        background-color: rgba(255, 255, 255, 0.2);
        color: whitesmoke;
        text-align: center;
        border-radius: 3px;
    }
    
    .span1 {
        width: 88px;
    }
    
    .span2 {
        width: 52px;
    }
    
    .span3 {
        width: 52px;
    }
    
    em {
        margin-left: 860px;
        font: normal 400 15px "Fira Code";
        color: whitesmoke;
    }
    
    .button2 {
        float: left;
        width: 200px;
        height: 38px;
        margin-left: 888px;
        margin-top: 20px;
        color: whitesmoke;
        background-color: rgba(255, 0, 0, .65);
        font-size: 18px;
        border: 0;
        border-radius: 3px;
    }
    
    .button2 a:visited {
        color: white;
    }
    
    .hot {
        height: 340px;
    }
    
    .hot h1 {
        margin-left: 188px;
        padding-top: 19px;
        font-size: 20px;
    }
    
    .hot1 {
        float: left;
        width: 200px;
        height: 250px;
        margin-right: 30px;
        margin-top: 20px;
        border-radius: 5px;
        border: 1px solid rgba(192, 189, 189, .5);
    }
    
    .hot1 img {
        width: 200px;
        height: 250px;
    }
    
    .hot2 {
        float: left;
        margin-top: 120px;
        margin-left: 135px;
    }
    
    .hot3 {
        float: left;
        margin-top: 120px;
    }
    
    .hot4 {
        margin-left: 15px;
    }
    
    #hot5 {
        margin-right: 15px;
    }
    
    .apply {
        height: 525px;
    }
    
    h2 {
        float: left;
        margin-left: 188px;
        padding-top: 19px;
        font-size: 20px;
    }
    
    .apply0 {
        float: left;
        width: 898px;
        margin-top: 20px;
        margin-left: 188px;
    }
    
    .apply1 {
        float: left;
        width: 200px;
        height: 210px;
        margin-right: 30px;
        margin-bottom: 20px;
        border: 1px solid rgba(192, 189, 189, .5);
        border-radius: 5px;
        background-color: white;
    }
    
    .apply1 img {
        width: 200px;
        height: 115px;
    }
    
    .apply1 p {
        margin: 8px;
        font-size: 12.7px;
    }
    
    .apply1 li {
        color: gray;
        font-size: 12px;
        margin-top: 15px;
        margin-left: 8px;
    }
    
    .apply1 li img {
        width: 13px;
        height: 13px;
    }
    
    .apply2 {
        float: right;
        margin-top: 19px;
        margin-right: 180px;
    }
    
    .apply2 a {
        color: red;
        font-size: 14px;
    }
    
    .apply3 {
        margin-right: 0;
    }
    
    .apply4 {
        margin-left: 90px;
    }
    
    .apply5 {
        margin-left: 6px;
    }
    
    .shopping {
        height: 320px;
    }
    
    .shopping .apply1 li {
        list-style: none;
        margin-left: 54px;
    }
    
    .find {
        height: 1100px;
        background-color: rgba(214, 205, 205, 0.1);
    }
    
    .find h3 {
        margin-left: 10px;
        font-size: 15px;
        font-weight: 400;
    }
    
    .find p {
        color: gray;
    }
    
    .find li {
        list-style: none;
    }
    
    .find span {
        color: red;
        font-size: 14px;
    }
    
    #down {
        display: block;
        float: left;
        margin-top: 20px;
        margin-left: 575px;
        font-size: 15px;
        color: red;
    }
    
    #down img {
        width: 17px;
        height: 9px;
    }
    
    .footer {
        height: 400px;
        background-color: #505050;
    }
    
    .footer1 {
        float: left;
        height: 300px;
        margin-right: 30px;
        margin-top: 42px;
    }
    
    .footer1 p {
        margin-top: 28px;
        font-size: 14px;
        color: #a8a8a8;
    }
    
    .footer1 h4 {
        font-size: 14px;
        font-weight: 400;
        color: white;
    }
    
    .footer1 li {
        list-style: none;
        margin-top: 5px;
        font-size: 14px;
    }
    
    .footer1 li a {
        color: #a8a8a8;
        font-size: 12.5px;
    }
    
    .footer1 li a:hover {
        color: #ff6700;
    }
    
    .footer2 {
        margin-left: 180px;
    }
    
    div .footer3 {
        margin-top: 28px;
    }
    
    .footer4 {
        margin-top: 60px;
    }
    
    #copyright {
        float: left;
        margin-left: 575px;
        color: #a8a8a8;
        font-size: 14px;
    }

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>极果-全球好物消费推荐平台</title>
    <link rel="stylesheet" href="./css/index.css">
</head>


<body>
    <div class="header w">
        <div class="logo">
            <a href="http://www.jiguo.com/">
                <img src="./img/header-logo@2x.png" alt="图片加载失败">
            </a>
        </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>
            </ul>
        </div>
        <div class="search">
            <a href="#"><img src="img/search.png" alt="图片加载失败"></a>
        </div>
        <div class="button">
            <button class="button1"><a href="#">注册</a></button>
        </div>
    </div>
    <div class="banner">
        <h1>幻响小贝HiFi2.1音箱</h1>
        <p>
            <span class="span1">126人申请</span>
            <span class="span2">&yen;599</span>
            <span class="span3">20台</span>
        </p>
        <em>申请时间剩余：13天5小时37分钟</em>
        <button class="button2"><a href="">立即申请</a></button>
    </div>
    <div class="hot">
        <h1>热门试用</h1>
        <div class="hot2"><img src="./img/prev.png" alt="图片加载失败"></div>
        <div class="hot1 hot4"><img src="img/图层1.png" alt="图片加载失败"></div>
        <div class="hot1"><img src="img/图层2.png" alt="图片加载失败"></div>
        <div class="hot1"><img src="img/图层3.png" alt="图片加载失败"></div>
        <div class="hot1" id="hot5"><img src="img/图层4.png" alt="图片加载失败"></div>
        <div class="hot3"><img src="./img/next.png" alt="图片加载失败"></div>
    </div>
    <div class="apply">
        <h2>报名精选</h2>
        <div class="apply2">
            <a href="">查看更多 </a>
            <img src="img/readMore.png" alt="图片加载失败">
        </div>
        <div class="apply0">
            <div class="apply1"><img src="img/re1.jpg" alt="图片加载失败">
                <p>空气净化器里面学问多的惊呆你，你选对了吗？</p>
                <li>苏苏 <img src="img/zan.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/re2.jpg" alt="图片加载失败">
                <p>怎么骑都不会累的智能自行车：云马 C1试骑体验</p>
                <li>好吗 <img src="img/zan.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/re3.jpg" alt="图片加载失败">
                <p>声音不是最优秀，但它形完美的结合，足够打动人心</p>
                <li>iAra <img src="img/zan.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1 apply3"><img src="img/re1.jpg" alt="图片加载失败">
                <p>风光大片信手拈来！vivo X6Plus不只是快，还是一台拍照利器</p>
                <li>苏苏 <img src="img/zan.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/re2.jpg" alt="图片加载失败">
                <p>空气净化器里面学问多的惊呆你，你选对了吗？</p>
                <li>苏苏 <img src="img/zan.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/re3.jpg" alt="图片加载失败">
                <p>声音不是最优秀，但它形完美的结合，足够打动人心</p>
                <li>苏苏 <img src="img/zan.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/re1.jpg" alt="图片加载失败">
                <p>怎么骑都不会累的智能自行车：云马 C1试骑体验</p>
                <li>苏苏 <img src="img/zan.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1 apply3"><img src="img/re2.jpg" alt="图片加载失败">
                <p>空气净化器里面学问多的惊呆你，你选对了吗？</p>
                <li>苏苏 <img src="img/zan.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
        </div>
    </div>
    <div class="shopping">
        <h2>导购精选</h2>
        <div class="apply2">
            <a href="">查看更多 </a>
            <img src="img/readMore.png" alt="图片加载失败">
        </div>
        <div class="apply0">
            <div class="apply1"><img src="img/g1.jpg" alt="图片加载失败">
                <p>花万元把蜗居秒变"豪宅"？这12件家具就能帮你办到</p>
                <li> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/g2.jpg" alt="图片加载失败">
                <p>到底有没有完美的iPhone手机配件，答案都在这里</p>
                <li> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/g3.jpg" alt="图片加载失败">
                <p>2016，这8支钢笔够你装逼一整年</p>
                <li> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1 apply3"><img src="img/g4.jpg" alt="图片加载失败">
                <p>他用12年找一把完美剃须刀，给你2万字终极购买指南</p>
                <li> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
        </div>
    </div>
    <div class="find">
        <h2>发现酷玩</h2>
        <div class="apply2">
            <a href="">查看更多 </a>
            <img src="img/readMore.png" alt="图片加载失败">
        </div>
        <div class="apply0">
            <div class="apply1"><img src="img/k1.jpg" alt="图片加载失败">
                <h3>SCiO 微型光谱仪</h3>
                <p>可以测食物成分及营养</p>
                <li>
                    <span>&yen; 1212</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/k2.jpg" alt="图片加载失败">
                <h3>B&O BeoSound 35 音响</h3>
                <p>支持所有音乐流媒体服务</p>
                <li>
                    <span>&yen; 512</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/k3.jpg" alt="图片加载失败">
                <h3>Mozbii 触控吸色笔</h3>
                <p>能吸取65000种颜色</p>
                <li>
                    <span>&yen; 暂无</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3
                </li>
            </div>
            <div class="apply1 apply3"><img src="img/k4.jpg" alt="图片加载失败">
                <h3>XPLORER 2 航拍飞行器</h3>
                <p>搭载自动避障系统</p>
                <li><span>&yen; 433</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/k1.jpg" alt="图片加载失败">
                <h3>SCiO 微型光谱仪</h3>
                <p>可以测食物成分及营养</p>
                <li><span>&yen; 1212</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/k2.jpg" alt="图片加载失败">
                <h3>B&O BeoSound 35 音响</h3>
                <p>支持所有音乐流媒体服务</p>
                <li><span>&yen; 512</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/k3.jpg" alt="图片加载失败">
                <h3>Mozbii 触控吸色笔</h3>
                <p>能吸取65000种颜色</p>
                <li><span>&yen; 暂无</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1 apply3"><img src="img/k4.jpg" alt="图片加载失败">
                <h3>XPLORER 2 航拍飞行器</h3>
                <p>搭载自动避障系统</p>
                <li><span>&yen; 433</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/k1.jpg" alt="图片加载失败">
                <h3>SCiO 微型光谱仪</h3>
                <p>可以测食物成分及营养</p>
                <li><span>&yen; 1212</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/k2.jpg" alt="图片加载失败">
                <h3>B&O BeoSound 35 音响</h3>
                <p>支持所有音乐流媒体服务</p>
                <li><span>&yen; 512</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/k3.jpg" alt="图片加载失败">
                <h3>Mozbii 触控吸色笔</h3>
                <p>能吸取65000种颜色</p>
                <li><span>&yen; 暂无</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1 apply3"><img src="img/k4.jpg" alt="图片加载失败">
                <h3>XPLORER 2 航拍飞行器</h3>
                <p>搭载自动避障系统</p>
                <li><span>&yen; 433</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/k1.jpg" alt="图片加载失败">
                <h3>SCiO 微型光谱仪</h3>
                <p>可以测食物成分及营养</p>
                <li><span>&yen; 1212</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/k2.jpg" alt="图片加载失败">
                <h3>B&O BeoSound 35 音响</h3>
                <p>支持所有音乐流媒体服务</p>
                <li><span>&yen; 512</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1"><img src="img/k3.jpg" alt="图片加载失败">
                <h3>Mozbii 触控吸色笔</h3>
                <p>能吸取65000种颜色</p>
                <li><span>&yen; 暂无</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
            <div class="apply1 apply3"><img src="img/k4.jpg" alt="图片加载失败">
                <h3>XPLORER 2 航拍飞行器</h3>
                <p>搭载自动避障系统</p>
                <li><span>&yen; 433</span> <img src="img/xin.png" alt="图片加载失败" class="apply4">3<img src="img/reply.png" alt="图片加载失败" class="apply5">3</li>
            </div>
        </div>
        <a href="#" id="down"><img src="img/more.png" alt="图片加载失败"> 点击加载更多</a>
    </div>
    <div class="footer">
        <div class="footer1 footer2"><img src="img/code.png" alt="图片加载失败"></div>
        <div class="footer1"><img src="img/logoImg.jpg" alt="">
            <p>全球酷玩适用导购平台 <br> 酷·新奇·好玩·品质
            </p>
            <p>微信添加 "JguoJguo" <br> 获取我们的服务。
            </p>
        </div>
        <div class="footer1">
            <h4>免费试用</h4>
            <li class="footer3">
                <a href="">试用流程</a>
            </li>
            <li>
                <a href="">如何提高成功率</a>
            </li>
        </div>
        <div class="footer1">
            <h4>友情链接</h4>
            <li class="footer3">
                <a href="">智东西</a></li>
            <li>
                <a href="">搜狐IT</a></li>
            <li>
                <a href="">搜狐数码</a></li>
            <li>
                <a href="">凤凰数码</a></li>
            <li>
                <a href="">泡泡网</a></li>
            <li>
                <a href="">ZUK社区</a></li>
            <li>
                <a href="">极客公园</a></li>
            <li>
                <a href="">果库</a>
            </li>
        </div>
        <div class="footer1 footer4">
            <li class="footer3">
                <a href="">WEIBUSI</a>
            </li>
            <li>
                <a href="">腾讯科技</a>
            </li>
            <li>
                <a href="">凤凰科技</a>
            </li>
            <li>
                <a href="">PConline</a>
            </li>
            <li>
                <a href="">3W咖啡</a>
            </li>
            <li>
                <a href="">亿觅emie</a>
            </li>
            <li>
                <a href="">易迅易启玩</a>
            </li>
        </div>
        <div class="footer1">
            <h4>购买攻略</h4>
            <li class="footer3">
                <a href="">美亚海淘教程</a>
            </li>
            <li>
                <a href="">日亚海淘教程</a>
            </li>
            <li>
                <a href="">海淘转运攻略</a>
            </li>
            <li>
                <a href="">kickstarter 众筹购买攻略</a>
            </li>
            <li>
                <a href="">indiegogo 众筹购买攻略</a>
            </li>
        </div>
        <div class="footer1">
            <h4>厂商合作</h4>
            <li class="footer3">
                <a href="">关于极果</a>
            </li>
            <li>
                <a href="">联系我们</a>
            </li>
            <li>
                <a href="">商务合作 : BD@jiguo.com</a>
            </li>
            <li>
                <a href="">CEO邮箱 : CEO@jiguo.com</a>
            </li>
        </div>
        <div id="copyright">© 2016 极果版权所有</div>
    </div>
</body>

</html>

总结：这两天花功夫精心制作了极果网站之前的网站首页，虽然中途有时候晕头转向的，但是终究还是爆肝出来了，收获满满，对于网页整体布局有了较为明确的方向，代码还有很多冗余部分，还可以更为精简，希望大家不吝赐教，本网站转自极果2016

鳕鱼&羚羊

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
第九、十天：网站首页案例

网站首页项目： * { margin: 0; padding: 0; } .w { width: 1080px; margin: auto; } .header { height: 65px; } .nav li { list-style: none; } a { text-decora
复制链接

扫一扫