页面效果

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/nav.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3279262_g4m9xqg0me8.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/footer.css">
</head>
<body>
    <!-- 页面头部 -->
    <header>
        <div class="content">
            <div class="title">
                    php中文网-程序员梦开始的地方! 
            </div>
            <div class="right">
                <span class="iconfont icon-lingsheng "></span>
                <img src="images/user-pic.jpeg" alt="">
            </div>
        </div>
    </header>
    <!-- 页面导航 -->
    <nav>
        <div class="content">
            <a href=""> <img src="images/logo.png" alt=""></a>
            <div class="kernel">
                <a href="#">首页<span  class="iconfont icon-xiangxia"></span></a>
                <a href="">视频教程<span class="iconfont icon-xiangxia"></span></a>
                <a href="">学习路径<span class="iconfont icon-xiangxia"></span></a>
                <a href="">php培训<span  class="iconfont icon-xiangxia"></span></a>
                <a href="">资源下载<span class="iconfont icon-xiangxia" ></span></a>
                <a href="">技术文章<span class="iconfont icon-xiangxia" ></span></a>
                <a href="">社区<span class="iconfont icon-xiangxia"></span></a>
                <a href="">app下载 <span class="iconfont icon-shouji"></span></a>
            </div>
            <div class="search">
                    <input type="search" placeholder="请输入关键字">
                    <span class="iconfont icon-41"></span>
            </div>
        </div>
    </nav>
    <!-- 页面主体 -->
    <main>
        <div class="main">
            <!-- 左边主体 -->
                <div class="left">
                    <a href="#">php开发&nbsp;<span class="iconfont icon-youjiantou"></span></a>
                    <a href="">大前端&nbsp;<span class="iconfont icon-youjiantou"></span></a>
                    <a href="">后端开发&nbsp;<span class="iconfont icon-youjiantou"></span></a>
                    <a href="">数据库&nbsp;<span class="iconfont icon-youjiantou"></span></a>
                    <a href="">移动端&nbsp;<span class="iconfont icon-youjiantou"></span></a>
                    <a href="">运维开发&nbsp;<span class="iconfont icon-youjiantou"></span></a>
                    <a href="">UI设计&nbsp;<span class="iconfont icon-youjiantou"></span></a>
                    <a href="">计算机基础&nbsp;<span class="iconfont icon-youjiantou"></span></a>
                </div>
                <!-- 中心主体 -->
                <div class="content">
                    <img src="images/slider.jpeg" alt="">
                </div>
                    <!-- 右边头部主体 -->
                <div class="right">
                    <div class="top">
                        <img src="images/user-pic.jpeg" alt="">
                        <div class="top-name">
                            <span>想做一个躺平的程序员</span>
                            <p>p豆: <a href="">18</a> </p>
                        </div>
                        <a href="">我的学习</a> 
                    </div>
                    <!-- 右边尾部主题 -->
                    <div class="botton">
                        <div  class="doubt">问答社区 &nbsp<a href="">疑问</a> </div>
                        <div class="give">
                            <a href="">头条:
                                <span>“程序员做饭指南”，GitHub热榜第一！</span>
                            </a>
                            <a href="">新课: <span>3.9号公益直播课</span></a>
                           <a href="">新班:<span>19期PHP直播班</span></a>
                            <a href="">招募:<span>课程合作计划</span></a>
                           <a href="">公告:<span>APP上线啦</span> </a>
                        </div>                                      
                    </div>
                </div>
        </div>
    </main>
    <!-- 主体尾部 -->
    <div class="main-footer">
        <div class="learning">
            <a class="learning-path">
                <span>学习路径</span>
                <p>全部7部 <span class="iconfont icon-youjiantou"></span></p>
            </a>
        </div>
        <!-- 主题尾部内容 -->
        <div class="learning-content">
                    <a href="">
                        <img src="images/dgjj.png" alt="">
                        <dl>
                            <dt>独孤九剑</dt>
                            <dd>九门课程</dd>
                        </dl>
                    </a>
                    <a href="">
                        <img src="images/ynxj.png" alt="">
                        <dl>
                            <dt>玉女心经</dt>
                            <dd>七门课程</dd>
                        </dl>
                    </a>
                    <a href="">
                        <img src="images/tlbb.png" alt="">
                        <dl>
                            <dt>天龙八部</dt>
                            <dd>三门课程</dd>
                        </dl>
                    </a>
                    <a href="">
                        <img src="images/phpksrm.png" alt="">
                        <dl>
                            <dt>自学指南</dt>
                            <dd>19门课程</dd>
                        </dl>
                    </a>
                    <a href="">
                        <img src="images/phpkjkf.png" alt="">
                        <dl>
                            <dt>趣味闯关</dt>
                            <dd>22门课程</dd>
                        </dl>
                    </a>
        </div>
        <!-- 主题尾部右边 -->
        <div class="learning-right">
            <a href="">
                <span class="iconfont icon-gongzhonghao1"></span>
                <p>微信公众号</p>
            </a>
            <a href="">
                <span class="iconfont icon-weixingongzhonghao"></span>
                <p>QQ公众号</p>
            </a>
        </div>                              
    </div>    
    <!-- 页面尾部 -->
    <footer>
        <!-- 尾部标题 -->
        <div class="top">
            <p>最新课程</p>
            <a href="">更多</a>
        </div>
        <!-- 尾部内容 -->
        <div class="content">
            <div class="item">
                <a href="">
                    <img src="https://img.php.cn/upload/course/000/000/068/623d6ce036b81626.jpg" alt="">
                    <dl>
                        <dt>
                            <span>初级</span>
                            <dd>javaScript基础语法[domlbomles6新语</dd>
                        </dt>
                    </dl>
                    <div>
                        <span>学习105次</span>
                        <span class="iconfont icon-shoucang" >  收藏</span>
                    </div>
                 </a>
            </div>
            <div class="item">
                <a href="">
                    <img src="https://img.php.cn/upload/course/000/000/068/62398b673ecc4667.jpg" alt="">
                    <dl>
                        <dt>
                            <span>初级</span>
                            <dd>前端最全HTTP基础原理及应用</dd>
                        </dt>
                    </dl>
                    <div>
                        <span>学习105次</span>
                        <span class="iconfont icon-shoucang" >  收藏</span>
                    </div>
                 </a>
            </div>
            <div class="item">
                <a href="">
                    <img src="https://img.php.cn/upload/course/000/000/068/62398b5dadc79937.jpg" alt="">
                    <dl>
                        <dt>
                            <span>初级</span>
                            <dd>HTTP协议</dd>
                        </dt>
                    </dl>
                    <div>
                        <span>学习105次</span>
                        <span class="iconfont icon-shoucang" >  收藏</span>
                    </div>
                 </a>
            </div>
            <div class="item">
                <a href="">
                    <img src="https://img.php.cn/upload/course/000/000/068/62381b3e817d4409.jpg" alt="">
                    <dl>
                        <dt>
                            <span>中级</span>
                            <dd>API接口开发规范【服务器标准的接口Restful API开发</dd>
                        </dt>
                    </dl>
                    <div>
                        <span>学习22</span>
                        <span class="iconfont icon-shoucang" >  收藏</span>
                    </div>
                 </a>
            </div>
            <div class="item">
                <a href="">
                    <img src="https://img.php.cn/upload/course/000/000/068/623057031def7707.jpg" alt="">
                    <dl>
                        <dt>
                            <span>高级</span>
                            <dd>Mysql查询优化方案【大厂架构师亲授】</dd>
                        </dt>
                    </dl>
                    <div>
                        <span>学习55次</span>
                        <span class="iconfont icon-shoucang">收藏</span>
                    </div>
                 </a>
            </div>
            <div class="item">
                <a href="">
                    <img src="https://img.php.cn/upload/course/000/000/068/622efba5b8f59620.jpg" alt="">
                    <dl>
                        <dt>
                            <span>初级</span>
                            <dd>Wen前端Promise教程</dd>
                        </dt>
                    </dl>
                    <div>
                        <span>学习44次</span>
                        <span class="iconfont  icon-shoucang">收藏</span>
                    </div>
                 </a>
            </div>
            <div class="item">
                <a href="">
                    <img src="https://img.php.cn/upload/course/000/000/068/622ee24c8180c270.jpg" alt="">
                    <dl>
                        <dt>
                            <span>初级</span>
                            <dd>Bootstrap框架讲解</dd>
                        </dt>
                    </dl>
                    <div>
                        <span>学习10次</span>
                        <span class="iconfont  icon-shoucang"> 收藏</span>
                    </div>
                 </a>
            </div>
            <div class="item">
                <a href="">
                    <img src="https://img.php.cn/upload/course/000/000/068/6226fe0150292919.jpg" alt="">
                    <dl>
                        <dt>
                            <span>初级</span>
                            <dd>javaScript基础语法[domlbomles6新语</dd>
                        </dt>
                    </dl>
                    <div>
                        <span>学习12次</span>
                        <span class=" iconfont  icon-shoucang" >  收藏</span>
                    </div>
                 </a>
            </div>
        </div>
    </footer>
</body>
</html>

css代码

初始化

`*` {
    /*初始化 */
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}
a{
    /* 取消a链接下划线 */
    text-decoration: none;
}
body{
    /* 给页面主体添加背景颜色 */
    background-color: rgb(243, 245, 247);
}

css头部代码

header{
    /* 宽度为 100% 高度为40px 背景颜色为知道你自定义 */
    width: 100%;
    height: 40px;
    background-color: rgb(52, 52, 52)
    ;
}
header .content{
    /* 宽度为1200px 高度为40px 自动居中 */
    width: 1200px;
    height: 40px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 240px 1fr;
    place-items: center;
}
header .content .title{
    /* 字体加粗 字体颜色为浅灰色 字体样式为自定义 */
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   color: silver;
}
header .content .right{
     /* 设置为弹性容器 ，定义项目在主轴的对齐方式 */
   display: flex;
   justify-content:end;
}
header .content .right span{
    /* 添加字体颜色 设置内边距 */
    color: azure;
    padding: 10px 10px;
}
header .content .right img{
    /* 定义图片的宽度和高度，边框半径 内边距 */
    width: 3%;
    height: 3%;
    border-radius: 10em;
    padding: 5px 10px;
}

css导航代码

nav{
    /* //定义自定义的宽度和高度 背景颜色为白色 */
    width: 100%;
    height: 90px;
    background-color:rgb(255, 255, 255)
    ;
}
nav .content{
    /* 定义宽度1200px 高度为90px 外边距为居中 
    设置为网格容器  1行3列 */
    width: 1200px;
    height: 90px;
    margin: auto;
    display: grid;
    grid-template-columns: 140px 1fr 190px;
}
nav .content img{
    padding: 1em 1em 1em 0;
    width: 100%;
}
nav .content .kernel{
    /* 设置为弹性容器 子项目在主轴的对齐方式为两端对齐 */
    padding: 1em;
    display: flex;  
    justify-content: space-between;
    /* 子项目在交叉轴的对齐方式为居中 */
    place-items: center;
}
nav .content .kernel a{
    /* 字体加粗 字体大小位20px 字体位黑体 */
    color: black;
    font-size: 20px;
    font-weight: bold;
}
nav .content .kernel a:hover{
    /* 设置鼠标移到指定的元素，字体颜色改变为自定义的，字体加大 */
    color: brown;
    font-size: 25px;
}
nav .content .kernel a:first-of-type{
    /* first-of-type：第一个
    设置第一个a链接的颜色为红色 */
    color: brown;
}
nav .content  .search{
    /* 设置为弹性容器 项目在交叉轴的对齐方式为居中 */
    display: flex;
    align-items: center;
}
nav .content .search input{
    /* 去掉轮廓 边框为none 边框半径为20px
    背景颜色为 自定义 */
    outline: none;
    border: none;
    border-radius: 20px;
    height: 40px;
    width: 200px;
    background-color: rgb(247, 248, 250);
}
nav .content .search  .icon-41{
    /* 定位为相等定位，向左移动-30px */
    position: relative;
    left: -30px;
}

css主题(main)代码

 main .main{
      /*设置宽度为1200px 高度为400px
     自动居中 外边距头部为10px
     设置为网格容器，1行3列 */
    width: 1200px;
    height: 400px;
    margin: auto;
    margin-top: 10px;
    display: grid;
    /* 定义网格容器的列数 */
    grid-template-columns: 160px 1fr 190px;
 }
 main .main .left{
     /* 高度为400px 背景颜色为白色
     边框半径为 1em 内边距头部距离为10px
     设置为网格容器 水平对齐方式为居中 垂直对齐方式为居中 */
     height: 400px;
     background-color: white;
     border-radius: 1em;
     padding-top: 10px;
     display: grid;
     place-items: center center;
 }
 main .main .left a{
     /* 字体大小为18px 字体颜色为黑体 字体加粗 */
     font-size: 18px;
     color: black;
     font-weight: bold;
 }
 main .main .left a:hover{
     /* 鼠标移到 a链接上 背景改变为自定义 */
    padding: 1px;
     background-color:rgba(212, 34, 34, 0.8);
 }
 main .main .content{
     padding: 0 10px;
 }
 main .main .content img{
     /* 图片的边框半径为1em 字体加粗 */
    border-radius: 1em;
    font-weight: bold;
 }
 main .main .right{
     /* 设置为网格容器 2行1列 边框半径为10px */
     display: grid;
     grid-template-rows: 140px 260px;
     border-radius: 10px;
 }
 main .main .right .top{
     /* 设置为网格容器 定义 2行2列 垂直对齐方式为stretch
     背景颜色为 白色 */
     display: grid;
     margin-top: 10px;
     grid-template-columns: 50px 1fr;
     grid-template-rows: 80px 1fr;
     align-items: stretch;
     background-color:  white;
 }
 main .main .right .top img{
     width: 100%;
     border-radius: 100%;
 }
 main .main .right .top .top-name{
     /* 设置为 网格容器 2行1列 */
     display: grid;
     grid-template-rows: 1fr 1fr;
 }
 main .main .right .top span{
     /* 字体大小为20px 字体样式为自定义 字体加粗
     超出的内容会以省略号显示 */
    font-size: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
     /*下面三个属性实现 文本内容超出一定范围内会以省略号显示*/
     white-space:nowrap;
     overflow : hidden;
     text-overflow: ellipsis;
 }
 main .main .right .top .top-name p,
 main .main .right .top .top-name p a{
        color: silver;
 }
 main .main .right .top> a{
     /* 外边距为自动填充 
     子项目跨越3列
     子项目在垂直方向的对齐方式为居中
     轮廓为none
     字体颜色为白色
     背景颜色为红色 */
    margin: auto;
    grid-column: span 3;
    place-items: center;  
    outline: none;
    border-radius: 5px;
    color: white;
    padding: 10px;
    background-color:red;
 }
main .main .right .botton{
    margin-top: 10px;  
    background-color:  white; 
    border-radius: 10px;  
}
 main .main .right .botton .doubt{
     /* 设置为弹性容器 字体大小为20px */
     font-size: 20px;
     display: flex;
 }
 main .main .right .botton .doubt a{
     background-color: red;
     color: white;
 }
 main .main .right .botton .give{
    /* 设置为网格容器  定义为5行1列 */
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;      
 }
 main .main .right .botton .give a{
   padding:1px;
   font-size: 18px;
    color: black;  
 }
 main .main .right .botton .give a span{
     /* 定义文本超出一定范围内会以省略号显示
     字体大小为10px
     字体颜色为浅灰色
     */
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
    font-size: 10px;
    color: silver;
 }
 .main-footer{
    /* 宽度为1200px 高度为80px 外边距填充为居中
    背景颜色为 白色 
    设置为网格容器 1行3列 */
     width: 1200px;
     height: 80px;
     margin: auto;
     margin-top: 20px;
     border-radius: 1px;
     background-color:white;
     display: grid;
     grid-template-columns: 190px 1fr 290px;
 }
 .main-footer .learning .learning-path{
     /* 设置为弹性容器 主轴为垂直 */
    display: flex;
    flex-direction: column;
    padding: 20px 0 0 10px;        
}
.main-footer .learning .learning-path span{
    font-weight: bold;
    font-size: 17px;
}
.main-footer .learning .learning-path p{
    color: silver;
}
.main-footer .learning .learning-path p>span{
    font-size: 10px;
}
.main-footer  .learning-content{
    /* 设置为网格容器 1行 列 */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;        
}
.main-footer  .learning-content a{
    /* 设置为弹性容器 默认主轴为水平 项目在交叉轴的对齐方式为居中 */
    display: flex;
    align-items: center;      
} 
.main-footer  .learning-content img{
    width: 30%;
    height: 50%;
}
.main-footer .learning-content  dt{
    font-weight: bold;
    color: black;   
}
.main-footer .learning-content  dd{
    font-size: 14px;
    font-weight: bold;
    color: silver;
}
.main-footer .learning-right{
    /* 设置为网格容器 1行2列 子项目在垂直方向的对齐方式为居中 */
    display: grid;
    grid-template-columns: 1fr 1fr; 
    place-items: center;
}
.main-footer .learning-right a{
    font-size: 20px;
    font-weight: bold;
}

css尾部代码

footer{
    margin-top: 20px;
}
footer .top{
    /* 宽度为1200px 高度为40px
    外边距填充为居中
    设置为弹性容器 默认主轴为水平
    主轴对齐方式为两端对齐
    交叉轴对齐方式为 底部向上 */
    width: 1200px;
    height: 40px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
footer .top p {
    font-size: 25px;
    font-weight: bold;
}
footer .top a{
    color: silver;
    font-size: 15px;
}
footer .content{
    /* 宽度为1200px 高度为530px
    设置为网格容器 2行4列
    外边距填充为居中
    外边距头部为10xp
    边框半径为1px */
    width: 1200px;
    height: 530px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 265px 265px;
    margin: auto;
    margin-top: 10px;
    border-radius: 1px;
}
footer .content .item{
    /* 外边距为5px
    设置为网格容器 3行 1列
    背景颜色为白色 */
    margin-top: 5px;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    margin: 5px 5px;
    background-color: white;
}
footer .content .item a{
    border-radius: 10px;
}
footer .content .item img{
    width: 100%;
}
footer .content .item dl dd {
    /* 字体大小为18px
    字体加粗
    字体颜色为黑体
    高度为48px
    内边距左边为10px
    内边距头部为5px */
    font-size: 18px;
    font-weight: bold;
    padding-top: 5px;
    height: 48px;
    padding-left: 10px;
    color: black;
}
footer .content .item dl dt{
    font-size: 16px;
    color:silver;
    padding-left: 10px;
}
footer .content .item div{
    /* 外边距为 上下位0 左右位10px
    字体大小位 15px
    设置为 弹性容器 默认为主轴为水平
    主轴的对齐方式为两端对齐 
    交叉轴的对齐方式为居中
    字体颜色为 浅灰色 */
    margin: 0 10px;
    font-size: 15px;
    display: flex;
    justify-content:space-between;
    align-items: center;  
    color: silver;      
}

用到的图标

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

想躺平的第一天

2022-03-17 12:21:06