仿php中文网首页（部分） -

首页 > 博客列表 > 仿php中文网首页（部分）

博主信息

博文 46

粉丝 0

访问量 47565

专题推荐

更多>

仿php中文网首页

实现效果图如下：

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>仿php.cn中文网首页</title>
    <link rel="stylesheet" href="static/css/reset.css">
    <link rel="stylesheet" href="static/css/header.css">
    <link rel="stylesheet" href="////at.alicdn.com/t/font_3272169_a1dyfv37nht.css">
    <link rel="stylesheet" href="static/css/main-nav.css">
</head>
<body>
    <!-- 页眉 -->
    <header>
        <!-- 1.顶部 -->
        <div class="top">
            <div class="content">
                <div class="title">php中文网程序员梦开始的地方！</div>
                <div class="right">
                    <a href="" class="iconfont icon-tixingtianchong"></a>
                    <a href=""><img src="static/images/唯美3.jpeg" alt=""></a>
                </div>
            </div>
        </div>
        <!-- 2.导航 -->
        <div class="navs">
            <div class="content">
                <a href="" class="logo"><img src="static/images/logo.png" alt=""></a>
                <nav>
                    <a href="" class="active">首页</a>
                    <a href="">视频教程</a>
                    <a href="">学习路径</a>
                    <a href="">php培训</a>
                    <a href="">资源下载</a>
                    <a href="">技术文章</a>
                    <a href="">社区</a>
                    <a href="">APP下载</a>
                </nav>
                <div class="search">
                    <input type="search" placeholder="输入关键字搜索">
                    <span class="iconfont icon-fangdajing fdj"></span>
                </div>
            </div>
        </div>
    </header>
    <!-- 主体 -->
    <main>
        <div class="navs">
            <!-- 做个2行3列 -->
            <div class="left">
                <a href="">php开发</a>
                <a href="">大前端</a>
                <a href="">后端开发</a>
                <a href="">数据库/a>
                <a href="">移动端</a>
                <a href="">运维开发</a>
                <a href="">UI设计</a>
                <a href="">计算机基础</a>
            </div>
            <div class="slider">
                <a href="">
                    <img src="static/images/slider.jpeg" alt="">
                </a>
            </div>
            <div class="right">
                <div class="right1">
                    <img src="static/images/唯美3.jpeg" alt="">
                    <div class="right1-1"><a href="">上草一方</a><br>
                    <span>P豆：20豆</span></div>
                </div>
                <div class="right2"><a href="">我&nbsp;的&nbsp;学&nbsp;习</a></div>
                <div class="right3">
                    <span>问答社区</span>&nbsp;&nbsp;
                    <a href="">答&nbsp;疑</a>
                </div>
                <table class="right4">
                    <tr>
                        <td><span>头条</span>&nbsp;&nbsp;
                        <input type="text"></td>
                    </tr>
                    <tr>
                        <td><span>新课</span>&nbsp;&nbsp;
                        <a href="">x月x日公益直播课</a></td>
                    </tr>
                    <tr>
                        <td><span>新班</span>&nbsp;&nbsp;
                        <a href="">19期PHP直播班</a></td>
                    </tr>
                    <tr>
                        <td><span>招募</span>&nbsp;&nbsp;
                        <a href="">课程合作</a></td>
                    </tr>
                    <tr>
                        <td><span>公告</span>&nbsp;&nbsp;
                        <a href="">APP上线啦</a></td>
                    </tr>
                </table>
            </div>
            <!-- 底部左边的 -->
            <div class="bottom-left">
                <!-- 学习路径 -->
                <div class="desc">
                    <div class="title">学习路径</div>
                    <span>全部七个&gt;</span>
                </div>
                <ul class="detail">
                    <li onclick="">
                        <img src="static/images/dgjj.png" alt="">
                        <div><a href="">独孤九贱</a><br>
                        <span>9门课程</span></div>
                    </li>
                    <li onclick="">
                        <img src="static/images/ynxj.png" alt="">
                        <div><a href="">玉女心经</a><br>
                        <span>5门课程</span></div>
                    </li>
                    <li onclick="">
                        <img src="static/images/tlbb.png" alt="">
                        <div><a href="">天龙八部</a><br>
                        <span>3门课程</span></div>
                    </li>
                    <li onclick="">
                        <img src="static/images/phpkjkf.png" alt="">
                        <div><a href="">自学指南</a><br>
                        <span>19门课程</span></div>
                    </li>
                    <li onclick="">
                        <img src="static/images/phpksrm.png" alt="">
                        <div><a href="">趣味闯关</a><br>
                        <span>22门课程</span></div>
                    </li>
                </ul>
            </div>
            <!-- 底部右边的 -->
            <div class="bottom-right">
                <table>
                    <tr height="40">
                        <td width="100" align="center"><span class="iconfont icon-weixin wx"></span></td>
                        <td width="100" align="center"><span class="iconfont icon-qq qq1"></span></td>
                    </tr>
                    <tr>
                        <td align="center"><a href="">官方公众号</a></td>
                        <td align="center"><a href="">官方QQ群</a></td>
                    </tr>
                </table>
            </div>
    </div>
    </main>
</body>
</html>

头部CSS代码如下：

header .top {
    width: 100vw;
    height: 40px;
    background-color: rgb(52, 52, 52);
    color: #aaa;
}
header .top .content img{
    width: 60%;
    border-radius: 50%;
}
header .top .content{
    width: 1200px;
    display: grid;
    /* 将它分成两列 */
    grid-template-columns: 400px 100px;
    /* 两端对齐 */
    place-content: space-between;
    /* 下面不能用place-content:center，因为没有剩余空间 */
    margin: auto;
    /* 让文本垂直居中 */
    place-items: center start;
    /* 手工设置隐式网格行高 */
    grid-auto-rows: 40px;
    /* 这两行代码实现的效果一样，有什么区别？ */
    /* grid-template-rows: 40px; */
}
header .top .right .iconfont{
    color: #eee;
    font-size: large;
}
header .top .content .right{
    display: grid;
    /* 下面这行代码是两列，每一列自适应 */
    grid-template-columns: repeat(2,1fr);
    place-items: center;
}
/* 导航 */
header .navs{
    width: 100%;
    height: 90px;
    background-color: #fff;
}
header .navs .content{
    width: 1200px;
    /* border: 1px solid #000; */
    display: grid;
    grid-template-columns: 140px 1fr 200px;
    margin: auto;
    grid-auto-rows: 90px;
    /* 列与列之间的间隙 */
    gap: 10px;
    place-items: center start;
}
header .navs .content img{
    width: 100%;
    border-radius: 50%;
}
header .navs .content nav a.active,
header .navs .content nav a:hover{
    color: red;
    font-weight: bold;
}
header .navs .content .search{
    display: flex;
}
header .navs .content nav a{
    /* 让每个a标签之间有一些间隙，左右间隙 */
    padding: 0 15px;
}
/* 下面这一块代码似乎没有效果 */
header .navs .content .search input[type='search']{
    width: 200px;
    height: 36px;
    border: none;
    outline: none;
    background-color: #f7f8fa;
    border-radius: 20%;
    display: flex;
}
/* 给放大镜做一个定位 */
header .navs .content .search .fdj {
    font-size: 22px;
    color: #ccc;
    position: relative;
    left: -40px;
    top: 5px;
}

主体部分css代码如下：

main {
    font-size: 14px;
}
main .navs{
    display: grid;
    /* 分成三列，各自列宽如下 */
    grid-template-columns: 160px 810px 190px;
    /* 分成两行，各自行宽如下 */
    grid-template-rows: 400px 80px;
    /* 间隙 */
    gap: 20px;
    place-content: center;
    margin: 30px 0;
}
main .navs>* {
    background-color: #fff;
    border-radius: 4%;
    outline: 1px solid red;
}
/* 底部左侧占两列 */
main .navs .bottom-left{
    grid-column: span 2;
}
main .navs .slider img{
    width: 100%;
    border-radius: 4%;
}
/* 左侧导航 */
main .navs .left{
    display: grid;
    place-items: center;
    padding: 20px 0;
}
main .navs .left a{
    border-radius: 20px;
    padding: 10px 20px;
}
main .navs .left a:hover{
    color: red;
    background-color: rgb(250, 223, 227);
}
/* 底部左侧 */
main .navs .bottom-left{
    display: grid;
    grid-template-columns: 100px 1fr;
}
main .navs .bottom-left .desc{
    display: grid;
    place-items: center;
}
main .navs .bottom-left .detail img{
    width: 100%;
    /* 图片跨行操作，跨两行 */
    /* grid-row: sapn 2; */
}
main .navs .bottom-left .detail{
    display: flex;
    place-items: center;
    place-content: space-between;
}
main .navs .bottom-left .detail li{
    display: grid;
    grid-template-columns: 36px 85px;
    gap: 0 10px;
    place-items: center start;
}
main .navs .bottom-left .detail li a {
    font-size: 14px;
}
main .navs .bottom-left .detail li a:hover {
    color: red;
}
main .navs .bottom-left .detail li span,
main .navs .bottom-left .desc span {
    font-size: 12px;
    color: #999;
}
/* 右侧导航 */
main .right{
    display: grid;
}
main .right .right1{
    height: 100px;
    /* border: 1px solid black; */
    display: grid;
    grid-template-columns: 60px 1fr;
    place-content: space-between;
    place-content: center;
}
main .right .right1 img{
    width: 100%;
    border-radius: 50%;
}
main .right .right1 .right1-1{
    margin: auto;
}
main .right .right2 {
    width: 160px;
    height: 40px;
    border-radius: 20px;
    background-color: red;
    display: grid;
    place-content: center;
    margin: auto;
}
main .right .right2 a{
    color: #fff;
    font-weight: bold;
}
main .right .right3 a{
   background-color: red;
   color: #fff;
   font-weight: bold;
}
/* 底部右边的 */
main .navs .bottom-right .wx,
main .navs .bottom-right .qq1{
    font-size: 40px;
}

批改老师：

PHPz

批改状态：不合格

老师批语：轮播图左侧，数据库的<a></a>

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

实例演示元素来源与优先级

2022-03-19 21:38:03