简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >Grid布局php中文网 电脑端首页，由于php开学，暂停

Grid布局php中文网 电脑端首页，由于php开学，暂停

张浩刚
张浩刚原创
2019年11月13日 16:23:21689浏览

实例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="demo1.css">
    <style>
html,body,ul,li,p,h3,h4{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
    color: rgba(0, 0, 0, 0.9);
}
a:hover{
    color: rgba(0, 0, 0, 0.6);
}
body{
    background-color: #F2F4F6;
}
input{
    outline: none;
}
img{
    display: block;
}
/*头部导航*/
header{
    height: 60px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    display: grid;
    grid-template-columns: 200px 900px 1fr;
    align-items: center;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
}
header>.logo{
    margin-left: 10px;
}
header>.logo img{
    height: 56px;
    width: 130px;
}
header>nav>ul{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}
header>nav>ul a{
    color: rgba(255, 255, 255, .8);
    font-size: smaller;
}
header>.header-right{
    justify-self: flex-end;
    display: flex;
    align-items: center;
}
header>.header-right>a{
    margin-right: 20px;
    color: white;
}
header>.header-right img{
    width: 40px;
    border-radius: 50%;
}
main{
    width: 1200px;
    margin: 30px auto;
}
/*顶部banner模块区*/
main>article:first-of-type{
    display: grid;
    height: 500px;
    grid-template-columns: 200px 1fr;
    box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
    border-radius: 10px;
}
main>article:first-of-type>aside{
    background-color: #2B333B;
    border-radius: 10px 0 0 10px;
}
main>article:first-of-type>aside>ul{
    margin-top: 12%;
    height: 90%;
    display: grid;
    grid-template-rows: repeat(8, 1fr);
}
main>article:first-of-type>aside>ul>li{
    display: grid;
    grid-template-columns: 1fr 10px;
    padding: 0 10%;
}
main>article:first-of-type>aside>ul>li>a,main>article:first-of-type>aside>ul>li>i{
    color: rgba(255, 255, 255, .7);
    align-self: center;
}
main>article:first-of-type>aside>ul>li:hover{
    background-color: rgba(255, 255, 255, .2);
}

main>article:first-of-type>section{
    background-color: white;
    border-radius: 10px;
    display: grid;
    grid-template-rows: 50px 1fr 108px;
}
main>article:first-of-type>section>ul{
    display: grid;
    grid-template-columns: repeat(9,1fr);
    place-items: center;
}
main>article:first-of-type>section>ul>li>a{
    font-size: 14px;
    color: #333;
}
main>article:first-of-type>section>ul>li span{
    font-size: 12px;
    color: white;
    padding: 1px 6px;
    margin-left: 5px;
    background-color: salmon;
}
main>article:first-of-type>section>ul>li:nth-of-type(3)>span{
    background-color: lightgreen;
}
main>article:first-of-type>section>ul>li:nth-of-type(5)>span{
    background-color: lightseagreen;
}
main>article:first-of-type>section>ul>li:last-of-type{
    grid-column: 8/span 2;
}
main>article:first-of-type>section>ul>li:last-of-type input{
    height: 30px;
    width: 100%;
    background-color: rgba(153, 153, 153, .2);
    border: none;
}
main>article:first-of-type>section>aside{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    place-items: center;
}
main>article:first-of-type>section>aside img{
    border-radius: 10px;
}

/*ad1*/
main>aside{
    margin:25px auto
}

/*头条区间*/
main>article:nth-of-type(2){
    height: 500px;
    display: grid;
    grid-template-columns: 290px 635px 1fr;
    gap: 10px;
}
main>article:nth-of-type(2)>aside:first-of-type,
main>article:nth-of-type(2)>section,
main>article:nth-of-type(2)>aside:last-of-type{
    background-color: white;
    box-sizing: border-box;
    padding: 15px;
    border-radius: 10px;
    font-size: 14px;
    height: 500px;
}
main>article:nth-of-type(2) h4{
    border-bottom: 1px solid #dedede;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    display: grid;
    grid-template-columns: 3fr 1fr;
}
main>article:nth-of-type(2)>aside:last-of-type>h4>a{
    justify-self: end;
    align-self: center;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
}

main>article:nth-of-type(2)>aside:first-of-type>ul{
    height: 92%;
    display: grid;
    grid-template-rows: repeat(12, 1fr);
    align-items: center;
}
main>article:nth-of-type(2)>aside:first-of-type>ul>li{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

main>article:nth-of-type(2)>section>ul>li img{
    width: 170px;
}
main>article:nth-of-type(2)>section>ul{
    display: grid;
    grid-template-rows: repeat(2, 1f);
    grid-template-columns: repeat(3, 1fr);
    /* grid-template: 1fr 1fr/1fr 1fr 1fr; */
    place-items: center;
    height: 90%;
    column-gap: 10px;
}
main>article:nth-of-type(2)>section>ul>li{
    box-shadow:0 0 8px rgba(0, 0, 0, 0.2);
    padding: 10px 10px 50px;
    position: relative;
}
main>article:nth-of-type(2)>section>ul>li p{
    line-height: 25px;
    background-color: white;
    position: absolute;
    top: 103px;
    padding: 7px 8px 0;
    margin-right: 10px;
    border-radius: 10px 10px 0 0;
}
main>article:nth-of-type(2)>section>ul>li i{
    font-style: normal;
    background-color: coral;
    padding: 0 5px;
    margin-right: 5px;
    color: white;
}
main>article:nth-of-type(2)>aside:last-of-type>ul{
    height: 90%;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    align-items: center;
}
main>article:nth-of-type(2)>aside:last-of-type>ul img{
    width: 40px;
}
main>article:nth-of-type(2)>aside:last-of-type>ul>li{
    display: grid;
    grid-template-columns: 50px 1fr;
}
main>article:nth-of-type(2)>aside:last-of-type>ul>li a{
    font-size: 13px;
    padding-right: 6px;
}
main>article:nth-of-type(2)>aside:last-of-type>ul>li a:last-of-type{
    padding-right: 0;
}
main>article:nth-of-type(3){
    margin-top: 30px;
    background-color: white;
    height: 630px;
    padding: 15px 15px 0;
}
main>article:nth-of-type(3)>h3{
    text-align: center;
    margin-bottom: 20px;
}
main>article:nth-of-type(3)>ul{
    display: grid;
    grid-template: repeat(3, 1fr)/repeat(5, 217px);
    gap: 28px 20px;
}
main>article:nth-of-type(3)>ul>li:first-of-type{
    grid-row: 1 / span 2;
    /* grid-area: 1 / 1 / 3 / 2; */

    /*或者 grid-row: 1 / 3;
    grid-column: 1 / 2; */
}
main>article:nth-of-type(3)>ul img{
    border-radius: 10px 10px 0 0 ;
    width: 217px;
    justify-self: center;
}
main>article:nth-of-type(3)>ul>li:first-of-type>img{
    border-radius:0;
}

main>article:nth-of-type(3)>ul>li>a{
    display: grid;
    grid-template-rows: 120px 1fr;
    place-content: center;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(153, 153, 153, 0.9);
}

main>article:nth-of-type(3)>ul>li p{
    font-size: 14px;
    padding: 5px 10px 5px;
}
main>article:nth-of-type(3)>ul>li p i{
    font-style: normal;
    background-color: lightpink;
    color: white;
    padding: 0 5px;
    margin-right: 5px;
}
    </style>
</head>

<body>
    <header>
        <a href="" class="logo"><img src="https://www.php.cn/static/images/logo.png" alt=""></a>
        <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>
                <li><a href="">资源下载</a></li>
                <li><a href="">工具下载</a></li>
            </ul>
        </nav>
        <div class="header-right">
            <a href="">##</a>
            <a href=""><img src="https://img.php.cn/upload/avatar/000/000/001/66dc81b343aeeae65130d56e2f75ae42.jpg" alt=""></a>
        </div>
    </header>
    <main>
        <article>
            <aside>
                <ul>
                    <li><a href="">php开发</a><i>></i></li>
                    <li><a href="">前端开发</a><i>></i></li>
                    <li><a href="">服务器开发</a><i>></i></li>
                    <li><a href="">移动开发</a><i>></i></li>
                    <li><a href="">数据库</a><i>></i></li>
                    <li><a href="">服务器运维&下载</a><i>></i></li>
                    <li><a href="">在线工具箱</a><i>></i></li>
                    <li><a href="">常用类库</a><i>></i></li>
                </ul>
            </aside>
            <section>
                <ul>
                    <li><a href="">php头条</a><span>新</span></li>
                    <li><a href="">独孤九贱</a></li>
                    <li><a href="">学习路线</a><span>新</span></li>
                    <li><a href="">在线工具</a></li>
                    <li><a href="">趣味课堂</a><span>新</span></li>
                    <li><a href="">社区问答</a></li>
                    <li><a href="">课程直播</a></li>
                    <li><input type="search" name="" id=""></li>
                </ul>
                <div class="banner"><img src="https://www.php.cn/static/images/index_banner7.jpg" alt=""></div>
                <aside>
                    <a href=""><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""></a>
                    <a href=""><img src="https://www.php.cn/static/images/index_php_item2.jpg?1" alt=""></a>
                    <a href=""><img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt=""></a>
                    <a href=""><img src="https://www.php.cn/static/images/index_php_new4.jpg?1" alt=""></a>
                </aside>
            </section>
        </article>
        <aside><a href=""><img src="https://www.php.cn/static/images/index_ad222.jpg" alt=""></a></aside>
        <article>
            <aside>
                <h4>头条</h4>
                <ul>
                    <li><a href="">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a></li>
                    <li><a href="">php中文网《玉女心经》公益***系列课程汇总</a></li>
                    <li><a href="">php中文网线上班前端（HTML5/CSS3）测试题</a></li>
                    <li><a href="">PHP成立25周年：看看大佬们对PHP都有哪些评价</a></li>
                    <li><a href="">同为动态语言，PHP为何比Python快那么多？原因解析</a></li>
                    <li><a href="">2019年最新最全面的CMS开发视频教程（收藏）</a></li>
                    <li><a href="">ThinkPHP6.0今天正式发布</a></li>
                    <li><a href="">预警！！！PHP 远程代码执行漏洞</a></li>
                    <li><a href="">优化CSS并加速网站的21种方法</a></li>
                    <li><a href="">Web 性能优化：图片优化让网站大小减少 62%</a></li>
                    <li><a href="">四大常见PHP开源CMS网站系统安装视频教程</a></li>
                    <li><a href="">金九银十，学习正当时！ php中文网新课不断上线中！</a></li>
                </ul>
            </aside>
            <section>
                <h4>最新课程</h4>
                <ul>
                    <li><a href=""><img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt=""><p><i>初级</i>2019python自学视频自学视频</p></a></li>
                    <li><a href=""><img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt=""><p><i>初级</i>2019python自学视频自学视频</p></a></li>
                    <li><a href=""><img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt=""><p><i>初级</i>2019python自学视频自学视频</p></a></li>
                    <li><a href=""><img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt=""><p><i>初级</i>2019python自学视频</p></a></li>
                    <li><a href=""><img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt=""><p><i>初级</i>2019python自学视频自学视频</p></a></li>
                    <li><a href=""><img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt=""><p><i>初级</i>2019python自学视频自学视频</p></a></li>
                </ul>
            </section>
            <aside>
                <h4>常见手册<a href="">更多</a></h4>
                <ul>
                    <li>
                        <img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg" alt="">
                        <span>
                            <a href="">php手册</a>
                            <a href="">Linux手册</a>
                            <a href="">ThinkPHP6.0</a>
                            <a href="">CI手册大全</a>
                        </span>
                    </li>
                    <li>
                        <img src="https://www.php.cn/upload/system/000/000/001/57d55f537896d439.jpg" alt="">
                        <span>
                            <a href="">JavaScript中文参考手册</a>
                            <a href="">ThinkPHP6.0</a>
                            <a href="">CI手册大全</a>
                        </span>
                    </li>
                    <li>
                        <img src="https://www.php.cn/upload/system/000/000/001/57d560a2c0e5f831.jpg" alt="">
                        <span>
                            <a href="">MySQL参考手册大全</a>
                            <a href="">ThinkPHP6.0</a>
                            <a href="">CI手册大全</a>
                        </span>
                    </li>
                    <li>
                        <img src="https://www.php.cn/upload/system/000/000/001/57d56222bfab2642.jpg" alt="">
                        <span>
                            <a href="">Python参考手册大全</a>
                            <a href="">ThinkPHP6.0</a>
                            <a href="">CI手册大全</a>
                        </span>
                    </li>
                    <li>
                        <img src="https://www.php.cn/upload/system/000/000/001/57d55f07ccfb6991.jpg" alt="">
                        <span>
                            <a href="">php手册</a>
                            <a href="">Linux手册</a>
                            <a href="">ThinkPHP6.0</a>
                            <a href="">CI手册大全</a>
                        </span>
                    </li>
                    <li>
                        <img src="https://www.php.cn/upload/system/000/000/000/5a911102396d0195.jpg" alt="">
                        <span>
                            <a href="">ASP参考手册大全</a>
                            <a href="">ThinkPHP6.0</a>
                            <a href="">CI手册大全</a>
                        </span>
                    </li>
                </ul>
            </aside>
        </article>
        <article>
            <h3>PHP学习</h3>
            <ul>
                <li>
                    <img src="https://www.php.cn/static/images/index_learn_middel.jpg" alt="">
                </li>
                <li>
                    <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
                    <p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
                </li>
                <li>
                    <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24010108e3d268.jpg" alt="">
                    <p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
                </li>
                <li>
                    <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a372b552a2c4233.jpg" alt="">
                    <p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
                </li>
                <li>
                    <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a3728258bf9f213.jpg" alt="">
                    <p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
                </li>
                <li>
                    <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a373991d9cd9819.jpg" alt="">
                    <p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
                </li>
                <li>
                    <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt="">
                    <p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
                </li>
                <li>
                    <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a5322a085219472.jpg" alt="">
                    <p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
                </li>
                <li>
                    <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a53090b27254106.jpg" alt="">
                    <p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
                </li>
                <li>
                    <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d22b615e56bf130.jpg" alt="">
                    <p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
                </li>
                <li>
                    <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2402695ce37351.jpg" alt="">
                    <p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
                </li>
                <li>
                    <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
                    <p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
                </li>
                <li>
                    <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
                    <p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p>
                    
                </a>
                </li>
                <li>
                    <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
                    <p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p>
                    
                </a>
                </li>
            </ul>
        </article>
    </main>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


上一条：PHP教学-1.判断函数 2. 运算符 3. 赋值运算符 4. 比较运算符 5. 逻辑运算符下一条：PHP运算符-PHP培训第九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多