页面效果
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开发 <span class="iconfont icon-youjiantou"></span></a> <a href="">大前端 <span class="iconfont icon-youjiantou"></span></a> <a href="">后端开发 <span class="iconfont icon-youjiantou"></span></a> <a href="">数据库 <span class="iconfont icon-youjiantou"></span></a> <a href="">移动端 <span class="iconfont icon-youjiantou"></span></a> <a href="">运维开发 <span class="iconfont icon-youjiantou"></span></a> <a href="">UI设计 <span class="iconfont icon-youjiantou"></span></a> <a href="">计算机基础 <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">问答社区  <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; }
用到的图标
