简体中文（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

博客列表 >使用flex和girl布局仿PHP中文网部分静态页面

使用flex和girl布局仿PHP中文网部分静态页面

吴长清
吴长清原创
2022年07月15日 16:18:20565浏览

效果图：

HTML代码块

  1. <body>
  2.     <!-- 页眉 -->
  3.     <header>
  4.       <div class="top">
  5.         <div class="content">
  6.           <span>php中文网-程序员梦开始的地方</span>
  7.           <div class="login">
  8.             <a href="" class="iconfont icon-tixingtianchong"></a>
  9.             <a><img src="static/images/user-pic.jpeg" alt="" /></a>
  10.           </div>
  11.         </div>
  12.       </div>
  13.       <div class="bottom">
  14.         <div class="content">
  15.           <a href="#"><img src="static/images/logo.png" alt="" /></a>
  16.           <nav class="navs">
  17.             <a href="#" class="item">首页</a>
  18.             <a href="#" class="item">视频教程</a>
  19.             <a href="#" class="item">学习路径</a>
  20.             <a href="#" class="item">PHP培训</a>
  21.             <a href="#" class="item">资源下载</a>
  22.             <a href="#" class="item">技术文章</a>
  23.             <a href="#" class="item">社区</a>
  24.             <a href="#" class="item">APP下载</a>
  25.           </nav>
  26.           <div class="search">
  27.             <input type="search" placeholder="请输入关键字" />
  28.             <span class="iconfont icon-fangdajing1"></span>
  29.           </div>
  30.         </div>
  31.       </div>
  32.     </header>
  33.     <!-- 主体内容 -->
  34.     <main>
  35.       <div class="navs">
  36.         <div class="left">
  37.           <a href="">php开发</a>
  38.           <a href="">大前端</a>
  39.           <a href="">后端开发</a>
  40.           <a href="">数据库</a>
  41.           <a href="">移动端</a>
  42.           <a href="">运维开发</a>
  43.           <a href="">UI设计</a>
  44.           <a href="">计算机基础</a>
  45.         </div>
  46.         <div class="slider">
  47.           <a href=""><img src="static/images/slider.jpeg" alt="" /></a>
  48.         </div>
  49.         <div class="right">
  50.           <div class="userinfo">
  51.             <img
  52.               src="static/images/user-pic.jpeg" alt="" />
  53.             <a href="#">朱老师</a>
  54.             <span>p豆:1200</span>
  55.             <div class="btn">
  56.               <button>我的学习</button>
  57.             </div>
  58.           </div>
  59.           <ul class="derail">
  60.             <li onclick="">
  61.               <span>问答社区</span>
  62.               <a href="#"><span class="desc">答疑</span></a>
  63.             </li>
  64.             <li onclick="">
  65.               <span>头条</span>
  66.               <a href="#"><span>vue发展情况</span></a>
  67.             </li>
  68.             <li onclick="">
  69.               <span>福利</span>
  70.               <a href="#"><span>限时折扣</span></a>
  71.             </li>
  72.             <li onclick="">
  73.               <span>新班</span>
  74.               <a href="#"><span>20期PHP线上班</span></a>
  75.             </li>
  76.             <li onclick="">
  77.               <span>招募</span>
  78.               <a href="#"><span>课程合作计划</span></a>
  79.             </li>
  80.             <li onclick="">
  81.               <span>公告</span>
  82.               <a href="#"><span>App上线啦</span></a>
  83.             </li>
  84.           </ul>
  85.         </div>
  86.         <div class="bottom-left">
  87.           <div class="desc">
  88.             <div class="title">学习路径</div>
  89.             <span>全部7个&gt;</span>
  90.           </div>
  91.           <ul class="detail">
  92.             <li onclick="">
  93.               <img src="static/images/dgjj.png" alt="" />
  94.               <a href="">独孤九贱</a>
  95.               <span>9门课程</span>
  96.             </li>
  97.             <li onclick="">
  98.               <img src="static/images/ynxj.png" alt="" />
  99.               <a href="">独孤九贱</a>
  100.               <span>9门课程</span>
  101.             </li>
  102.             <li onclick="">
  103.               <img src="static/images/tlbb.png" alt="" />
  104.               <a href="">独孤九贱</a>
  105.               <span>9门课程</span>
  106.             </li>
  107.             <li onclick="">
  108.               <img src="static/images/phpkjkf.png" alt="" />
  109.               <a href="">独孤九贱</a>
  110.               <span>9门课程</span>
  111.             </li>
  112.             <li onclick="">
  113.               <img src="static/images/phpksrm.png" alt="" />
  114.               <a href="">独孤九贱</a>
  115.               <span>9门课程</span>
  116.             </li>
  117.           </ul>
  118.         </div>
  119.         <div class="bottom-right">
  120.           <div class="weixin">
  121.             <span class="iconfont icon-weixin1"></span>
  122.             <span>官方公众号</span>
  123.           </div>
  124.           <div class="qq">
  125.             <span class="iconfont icon-QQ"></span>
  126.             <span>官方QQ群</span>
  127.           </div>
  128.         </div>
  129.         <div class="live">
  130.           <div class="top">
  131.             <span class="title">直播课</span>
  132.             <a href="" class="more">更多></a>
  133.           </div>
  134.           <div class="bottom">
  135.             <ul class="list">
  136.               <li class="item">
  137.                 <img src="static/images/live/1.jpg" alt="" />
  138.                 <a href="#">
  139.                   公益直播:PHP入门到实战--实现邮箱验证（队列发送邮件）
  140.                 </a>
  141.                 <span class="sp1">精彩回放</span>
  142.                 <span class="sp2">21215人观看</span>
  143.               </li>
  144.               <li class="item">
  145.                 <img src="static/images/live/2.jpg" alt="" />
  146.                 <a href="#"> 第二期_大前端线上班 </a>
  147.                 <span class="sp1">精彩回放</span>
  148.                 <span class="sp2">21215人观看</span>
  149.               </li>
  150.               <li class="item">
  151.                 <img src="static/images/live/3.png" alt="" />
  152.                 <a href="#"> 第二十期_前端开发 </a>
  153.                 <span class="sp1">精彩回放</span>
  154.                 <span class="sp2">21215人观看</span>
  155.               </li>
  156.               <li class="item"></li>
  157.             </ul>
  158.           </div>
  159.         </div>
  160.       </div>
  161.     </main>
  162.     <!-- 页脚 -->
  163.     <footer></footer>
  164.   </body>

css代码

  1. @import url(reset.css);
  3. /* 页眉 */
  4. /* 顶部 */
  5. body header .top {
  6.   width: 100vw;
  7.   height: 40px;
  8.   background-color: #343434;
  9. }
  10. body header .top .content {
  11.   width: 1200px;
  12.   height: 40px;
  13.   margin: 0 auto;
  14.   display: flex;
  15.   place-content: space-between;
  16.   place-items: center;
  17. }
  18. body header .top .content span {
  19.   width: 300px;
  20.   color: rgba(206, 205, 205, 1);
  21.   font-family: "微软雅黑";
  22.   font-size: 14px;
  23. }
  24. body header .top .content .login {
  25.   width: 100px;
  26.   display: grid;
  27.   grid-template-columns: repeat(2, 1fr);
  28.   place-items: center;
  29. }
  30. body header .top .content .login .icon-tixingtianchong {
  31.   color: #eee;
  32.   font-size: larger;
  33. }
  34. body header .top .content .login img {
  35.   width: 50%;
  36.   border-radius: 50%;
  37. }
  38. /* 底部 */
  39. body header .bottom {
  40.   width: 100vw;
  41.   height: 90px;
  42.   background-color: white;
  43.   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  44. }
  45. body header .bottom .content {
  46.   width: 1200px;
  47.   margin: 0 auto;
  48.   display: grid;
  49.   grid-template-columns: 140px 1fr 200px;
  50.   grid-auto-rows: 90px;
  51.   gap: 10px;
  52.   place-items: center start;
  53. }
  54. body header .bottom .content img {
  55.   width: 140px;
  56.   margin-top: 3px;
  57. }
  58. body header .bottom .content .navs {
  59.   display: flex;
  60.   margin-left: 40px;
  61. }
  62. body header .bottom .content .navs a {
  63.   padding: 0 10px;
  64.   font-size: larger;
  65. }
  66. body header .bottom .content .navs a:first-of-type,
  67. body header .bottom .content .navs a:hover {
  68.   color: red;
  69.   font-weight: bold;
  70. }
  71. body header .bottom .content .search {
  72.   display: flex;
  73. }
  74. body header .bottom .content .search input[type="search"] {
  75.   border: none;
  76.   background-color: #eee;
  77.   width: 200px;
  78.   height: 36px;
  79.   border-radius: 20px;
  80.   padding-left: 10px;
  81.   outline: none;
  82. }
  83. body header .bottom .content .search .icon-fangdajing1 {
  84.   font-size: 22px;
  85.   left: -40px;
  86.   top: 5px;
  87.   color: rgb(168, 167, 167);
  88.   position: relative;
  89. }
  90. body header .bottom .content .search .icon-fangdajing1:hover {
  91.   color: red;
  92.   cursor: pointer;
  93. }
  95. body main .navs {
  96.   /* 2行3列 */
  97.   display: grid;
  98.   grid-template-rows: 400px 80px;
  99.   grid-template-columns: 160px 810px 190px;
  100.   gap: 20px;
  101.   place-content: center;
  102.   margin: 30px 0;
  103. }
  105. /* 统一样式,完成后可看到基本框架 */
  107. body main .navs > * {
  108.   background-color: #fff;
  109.   border-radius: 20px;
  110. }
  112. /* 底部左边占2列 */
  114. body main .navs .bottom-left {
  115.   grid-column: span 2;
  116. }
  118. /* 整体布局完成,剩下就是细节了 */
  120. /* 上部左边导航 */
  122. body main .navs .left {
  123.   padding: 20px 0;
  124.   /* grid: 默认每个项目都是"块级", 垂直排列  */
  125.   /* flex: 默认每个项目都是"行内块级", 水平排列 */
  126.   display: grid;
  127.   /* 当前项目在每个网络单元中, 垂直,水平均居中 */
  128.   /* place-items: 垂直方向  水平方向; */
  129.   place-items: center;
  130. }
  132. body main .navs .left a {
  133.   padding: 10px 20px;
  134. }
  136. body main .navs .left a:hover {
  137.   border-radius: 20px;
  138.   color: red;
  139.   background-color: rgb(250, 223, 227);
  140. }
  142. /* 轮播图,单图模拟 */
  144. body main .navs .slider img {
  145.   width: 100%;
  146.   border-radius: 20px;
  147. }
  149. /* 底部左侧 */
  151. body main .navs .bottom-left {
  152.   display: grid;
  153.   grid-template-columns: 100px 1fr;
  154. }
  156. body main .navs .bottom-left .desc {
  157.   padding: 16px 0;
  158.   display: grid;
  159.   place-items: center;
  160.   font-size: 14px;
  161. }
  163. body main .navs .bottom-left .desc span {
  164.   font-size: 12px;
  165.   color: #999;
  166. }
  168. body main .navs .bottom-left .detail {
  169.   display: flex;
  170.   place-items: center;
  171.   place-content: space-between;
  172.   padding: 20px;
  173. }
  175. body main .navs .bottom-left .detail li {
  176.   display: grid;
  177.   grid-template-columns: 36px 85px;
  178.   grid-template-columns: repeat(2, 36);
  179.   gap: 0 10px;
  180.   place-items: center start;
  181. }
  183. body main .navs .bottom-left .detail img {
  184.   width: 100%;
  185.   grid-row: span 2;
  186. }
  188. body main .navs .bottom-left .detail li a {
  189.   font-size: 14px;
  190. }
  192. body main .navs .bottom-left .detail li a:hover {
  193.   color: red;
  194. }
  196. body main .navs .bottom-left .detail li span {
  197.   font-size: 12px;
  198.   color: #999;
  199. }
  201. /* 用户信息 */
  202. body main .navs .right {
  203.   display: grid;
  204.   grid-template-rows: 140px 1fr;
  205.   place-items: center;
  206. }
  207. body main .navs .right .userinfo {
  208.   width: 100%;
  209.   display: grid;
  210.   grid-template-columns: 90px 100px;
  211.   grid-template-rows: 30px 30px 70px;
  212. }
  213. body main .navs .right .userinfo img {
  214.   grid-row: span 2;
  215.   border-radius: 40px;
  216.   place-self: center;
  217. }
  218. body main .navs .right .userinfo a {
  219.   place-self: center start;
  220. }
  222. body main .navs .right .userinfo span {
  223.   color: rgb(121, 120, 120);
  224.   font-size: 12px;
  225. }
  226. body main .navs .right .userinfo a:hover {
  227.   color: red;
  228. }
  229. body main .navs .right .userinfo a {
  230.   font-family: "微软雅黑";
  231.   font-weight: bold;
  232.   font-size: 12px;
  233.   color: black;
  234. }
  235. body main .navs .right .userinfo .btn {
  236.   width: 100%;
  237.   height: 70px;
  238.   grid-column: span 2;
  239.   border-bottom: 1px solid rgba(146, 145, 145, 0.3);
  240. }
  241. body main .navs .right .userinfo .btn button {
  242.   border-radius: 40px;
  243.   width: 80%;
  244.   height: 30px;
  245.   margin-top: 15px;
  246.   border: none;
  247.   background-color: red;
  248.   font-weight: bold;
  249.   cursor: pointer;
  250.   margin-left: 10%;
  251.   color: #fff;
  252. }
  253. body main .navs .right .derail {
  254.   margin: auto;
  255.   font-size: 14px;
  256. }
  258. body main .navs .right .derail li {
  259.   display: grid;
  260.   grid-template-columns: 60px 100px;
  261.   grid-auto-rows: 30px;
  262. }
  263. body main .navs .right .derail li span {
  264.   place-self: center;
  265.   font-weight: bold;
  266. }
  267. body main .navs .right .derail li a span {
  268.   font-weight: lighter;
  269.   color: rgb(151, 150, 150);
  270. }
  271. body main .navs .right .derail li:first-of-type a span {
  272.   display: block;
  273.   width: 40px;
  274.   text-align: center;
  275.   background-color: red;
  276.   color: #fff;
  277.   margin-left: 10px;
  278. }
  279. body main .navs .right .derail li a {
  280.   place-self: center start;
  281. }
  283. /* 底部右边 */
  284. body main .navs .bottom-right {
  285.   display: flex;
  286.   place-content: space-around;
  287. }
  288. body main .navs .bottom-right .weixin,
  289. body main .navs .bottom-right .qq {
  290.   display: grid;
  291.   place-items: center;
  292.   font-weight: bold;
  293. }
  294. body main .navs .bottom-right .weixin span:last-of-type,
  295. body main .navs .bottom-right .qq span:last-of-type {
  296.   font-size: 12px;
  297.   place-self: start center;
  298. }
  299. body main .navs .bottom-right .weixin .icon-weixin1,
  300. body main .navs .bottom-right .qq .icon-QQ {
  301.   display: inline-block;
  302.   font-size: 16px;
  303.   width: 30px;
  304.   height: 30px;
  305.   text-align: center;
  306.   line-height: 30px;
  307.   color: #fff;
  308.   background-color: #aaa;
  309.   border-radius: 30px;
  310. }
  312. /* 直播课板块 */
  313. body main .navs .live {
  314.   width: 1200px;
  315.   display: flex;
  316.   flex-flow: column nowrap;
  317.   background-color: rgb(243, 245, 247);
  318. }
  319. /* 顶部 */
  320. body main .navs .live .top {
  321.   width: 100%;
  322.   height: 32px;
  323.   display: flex;
  324.   place-content: space-between;
  325.   place-items: center;
  326. }
  327. body main .navs .live .top .title {
  328.   font-size: 22px;
  329.   font-weight: bold;
  330.   color: #333333;
  331. }
  332. body main .navs .live .top .more {
  333.   margin-right: 5px;
  334.   font-size: 14px;
  335.   color: #999999;
  336. }
  337. /* 底部 */
  338. body main .navs .live .bottom {
  339.   width: 100%;
  340.   margin-top: 10px;
  341. }
  342. body main .navs .live .bottom .list {
  343.   display: flex;
  344.   place-content: space-between;
  345. }
  346. body main .navs .live .bottom .list .item {
  347.   width: 280px;
  348.   height: 260px;
  349.   background-color: white;
  350.   border-radius: 10px;
  351.   display: grid;
  352.   grid-template-columns: 140px 140px;
  353.   grid-template-rows: 160px 50px 50px;
  354.   place-content: start center;
  355. }
  357. body main .navs .live .bottom .list img {
  358.   width: 280px;
  359.   height: 160px;
  360.   border-radius: 10px 10px 0 0;
  361.   grid-column: span 2;
  362. }
  363. body main .navs .live .bottom .list a {
  364.   width: 245px;
  365.   margin: auto;
  366.   grid-column: span 2;
  367.   color: #333333;
  368. }
  369. body main .navs .live .top .more:hover,
  370. body main .navs .live .bottom .list a:hover{
  371.     color: red;
  372. }
  373. body main .navs .live .bottom .list .sp1 {
  374.   width: 120px;
  375.   height: 18px;
  376.   margin-left: 18px;
  377.   font-size: 14px;
  378.   place-self: center start;
  379. }
  380. body main .navs .live .bottom .list .sp2 {
  381.   width: 100px;
  382.   height: 18px;
  383.   font-size: 14px;
  384.   place-self: center end;
  385.   color: #aaa;
  386. }
上一条：9个grid属性下一条：grid的9个属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多