仿制php中文网首页部分 - 大前端

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

博主信息

博文 49

粉丝 0

访问量 33896

专题推荐

更多>

仿制php中文网首页部分：

<!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">
    <link rel="stylesheet" href="../static/css/reset2.css">
    <link rel="stylesheet" href="../static/css/header2.css">
    <link rel="stylesheet" href="../static/css/main-nav2.css">
    <title>仿写php中文网页首页部分</title>
</head>
<body>
   <!-- *页眉 -->
   <header>
       <!-- *1顶部 -->
       <div>
           <div class="top">
               <!-- *在下面再创建一盒子好做居中 -->
               <div class="content">
                   <div class="title">php中文网-程序员梦开始的地方</div>
                   <div class="right">
                      <a href="" class="iconfont icon-tixing"></a>
                      <a href=""><img src="../static/images/user-pic.jpeg" alt=""></a>
                   </div>
               </div>
           </div>
       </div>
       <!-- *2导航 -->
       <div>
           <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>
                    </nav>
                    <div class="search">
                        <input type="search" placeholder="输入关键字搜索">
                        <span class="iconfont icon-fangdajing fdj"></span>
                    </div>
                </div>
           </div>
       </div>
   </header>
   <!-- *主体 -->
   <main>
       <div class="navs">
           <!-- *2行3列 -->
           <!-- *.left>a*8 -->
           <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">
                <!-- *图片与朱老师 -->
                <ul class="detail">
                    <li onclick="">
                        <img src="../static/images/user-pic.jpeg" alt="">
                        <a href=""><div class="zls">朱老师</div></a>
                        <span class="pdou">p豆100</span>
                    </li>
                    <li onclick="">
                        <div>
                            <a href=""><div class="xuexi">我的学习</div></a>
                        </div>
                    </li>
                    <li onclick="">
                        <span>问答社区</span>
                        <a href=""><div class="dayi">答疑</div></a>
                    </li>
                    <li onclick="">
                        <span>头条</span>
                        <a href="">发展情况报告</a>
                    </li>
                    <li onclick="">
                        <span>福利</span>
                        <a href="">限时折扣</a>
                    </li>
                    <li onclick="">
                        <span>新班</span>
                        <a href="">20期php上线</a>
                    </li>
                    <li onclick="">
                        <span>招募</span>
                        <a href="">课程合作计划</a>
                    </li>
                    <li onclick="">
                        <span>公告</span>
                        <a href="">php上线啦</a>
                    </li>
                </ul>
            </div>
            <div class="bottom-left">
                <!-- *学习路径 -->
                <div class="desc">
                    <div class="title">学习路径</div>
                    <span>全部7个&gt;</span>
                </div>
                <ul class="detail">
                    <li onclick="">
                        <img src="../static/images/dgjj.png" alt="">
                        <a href="">孤独九贼</a>
                        <span>九门课程</span>
                    </li>
                    <li onclick="">
                        <img src="../static/images/ynxj.png" alt="">
                        <a href="">孤独九贼</a>
                        <span>九门课程</span>
                    </li>
                    <li onclick="">
                        <img src="../static/images/tlbb.png" alt="">
                        <a href="">孤独九贼</a>
                        <span>九门课程</span>
                    </li>
                    <li onclick="">
                        <img src="../static/images/phpksrm.png" alt="">
                        <a href="">孤独九贼</a>
                        <span>九门课程</span>
                    </li>
                    <li onclick="">
                        <img src="../static/images/phpkjkf.png" alt="">
                        <a href="">孤独九贼</a>
                        <span>九门课程</span>
                    </li>
                </ul>
            </div>
            <div class="bottom-right">
                <div class="gzh">
                  <a href=""><span class="iconfont icon-weixin"></span></a>
                  <span>官方公众号</span>
                </div>
                <div class="qqq">
                    <a href=""><span class="iconfont icon-tree-round-QQgroup"></span></a>
                    <span>官方QQ群</span>
                  </div>
            </div>
       </div>
   </main>
</body>
</html>

对应的reset2.css文件：

@import "../icon_font/font_icon4/iconfont.css";
/* *初始化三部曲 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* *a标签取消下划线 */
a{
    text-decoration: none;
    color: #555;
}
body{
    background-color: rgb(243,245,247); 
}
/* *取消无序列表中的小黑点 */
li{
    list-style: none;
}

对应的header2.css文件：

header .top{
    width: 100vw;
    height: 40px;
    background-color: rgb(52,52,52);
    /* *顶部文字颜色 */
    color: #aaa;
}
header .top .content img{
    width: 50%;
    /* *边框半径50%就是一个圆 */
    border-radius: 50%;
}
header .top .content{
    /* *必须限定宽高，否则无法在容器中居中 */
    width: 1200px;
    /* *网格布局 */
    display: grid;
   /* *分成两列，一列宽400，另一列宽100 */
    grid-template-columns: 400px 100px;
    /* *行高40 */
    grid-auto-rows: 40px;
     /* *两端对齐 */
     place-content: space-between;
     /* *垂直居中 水平向左 */
     place-items: center start;
     /* *设置外边距margin-auto就可居中 */
     margin: auto;
}
/* *设置文字图标 */
header .top .content .right .iconfont{
    color: #eee;
    font-size: larger;
}
header .top .content .right{
    /* *网格布局 */
    display: grid;
    /* *两列期剩余空间对半分 */
    grid-template-columns: repeat(2,1fr);
    /* *容器里边的两个项目在垂直与水平上居中 */
    place-items: center;
}
/* *导航 */
header .navs{
    width: 100vw;
    height: 90px;
    background-color: #fff;
}
header .navs .content{
    width: 1200px;
    /* border: 1px solid #000; */
    display: grid;
    /* *各列宽度 */
    grid-template-columns: 140px 1fr 200px;
    /* *行高 */
    grid-auto-rows: 90px;
    /* *列与列及行与行之间的间隙 */
    gap: 10px;
    /* *居中对齐 */
    margin: auto;
    /* *所有项目在单元格中垂直居中，水平向左 */
    place-items: center start;
}
/* *logo这张图片 */
header .navs .content img{
    width: 100%;
}
/* *第一项字体为红色，其余各项当鼠标放上时字体为红色 */
header .navs .content nav a.active,
header .navs .content nav a:hover{
    color: red;
    font-weight: bold;
}
header .navs .content nav{
    /* *flex布局 */
    display: flex;
}
header .navs .content nav a{
    /* *上下为0，左右10px */
    padding: 0 10px;
}
/* *设置搜索框 */
header .navs .content .search input[type='search']{
    width: 170px;
    height: 36px;
    border: 1px solid red;
    outline: none;
    background-color: #f7f8fa;
    border-radius: 20px;
    padding-left: 10px;
}

对应的main-nav2.css文件：

main{
    font-size: 14px;
}
main .navs{
    /* *grid布局 */
    display: grid;
    /* *3列的列宽分别是160，810，190 */
    grid-template-columns: 160px 810px 190px;
    /* *两行的行高分别是400，80 */
    grid-template-rows: 400px 80px;
    /* *行列间隙 */
    gap: 20px;
    /* *垂直与水平居中 */
    place-content: center;
    /* *外边距上下30，左右为0 */
    margin: 30px 0;
}
/* *主体的导航的所有儿子 */
main .navs>*{
    background-color: #fff;
    border-radius: 20px;
    /* *添加轮廓线作为辅助线则看得更清晰 */
    /* outline: 1px solid red; */
}
/* *底部左侧占两列 */
main .navs .bottom-left{
   grid-column: span 2;
}
main .navs .slider img{
    width: 100%;
    /* *图片加圆角 */
    border-radius: 20px;
}
/* *左侧导航 */
main .navs .left{
   /* *grid: 默认每个项目都是"块级", 垂直排列  */
    display: grid;
    /* *当前项目在每个网络单元中, 垂直,水平均居中 */
    place-items: center;
    /* *内边距上下20，左右为0 */
    padding: 20px 0;
}
/* *当鼠标放上a标签上时 */
main .navs .left a:hover{
    color: red;
    background-color: rgb(258, 223, 223);
}
/* *a标签的设置 */
main .navs .left a{
    border-radius: 20px;
    padding: 10px 20px;
}
/* *底部左侧 */
main .navs .bottom-left{
    /* *网格布局 */
    display: grid;
    /* *分为两列 */
    grid-template-columns: 100px 1fr;
}
main .navs .bottom-left .desc{
    display: grid;
    place-items: center;
    /* *学习路径两行之间分得太开 */
    padding: 16px ;
}
main .navs .bottom-left .detail img{
    width: 100%;
    /* *图片跨行处理 */
    grid-row: span 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 span{
    font-size: 12px;
}
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 .navs .right .detail{
    display: grid;
    place-items: center;
}
main .navs .right .detail li{
    display: grid;
    grid-template-columns: 60px 130px;
    gap: 0 10px;
    /* *每项垂直居中，水平靠左 */
    place-items: center start;
    padding: 15px 10px;
}
main .navs .right .detail img{
    width: 50%;
    border-radius: 50%;
    /* *图片跨行处理 */
    grid-row: span 2;
}
main .navs .right .detail a>.dayi{
    display: block;
    width: 2em;
    height: 1em;
    background-color: red;
    color: white;
    border-radius: 3px;
}
main .navs .right .detail a>.xuexi{
    display: block;
    width: 8em;
    height: 2.5em;
    background-color: red;
    color: white;
    border-radius: 20px;
    padding: 10px 30px;
    font-size: 16px;
}
main .navs .right .detail .zls{
    font-size: 16px;
    color: #000;
    font-weight: bold;
}
main .navs .right .detail .pdou{
    color: #999;
}
main .navs .right .detail a{
    color: #999;
}
main .navs .right .detail a:hover{
    color: red;
}
main .navs .bottom-right{
    display: grid;
    grid-template-columns:1fr 1fr;
}
main .navs .bottom-right .gzh{
    display: grid;
    place-items: center;
    /* *学习路径两行之间分得太开 */
    padding: 10px ;
}
main .navs .bottom-right .qqq{
    display: grid;
    place-items: center;
    /* *学习路径两行之间分得太开 */
    padding: 10px ;
}
.iconfont.icon-weixin,.iconfont.icon-tree-round-QQgroup{
    font-size: 25px;
}
main .navs .bottom-right .gzh a:hover{
    color: red;
}
main .navs .bottom-right .qqq a:hover{
    color: red;
}
main .navs .right .detail a>.zls:hover{
    color:red
}

效果图如下：

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

Vue常用指令与使用及实例

2022-09-19 13:58:00