ASCII码 ASCII码

布局实战小结

发布于：2022-03-27 10:55:50  栏目：技术文档

仿写PHP中文网结构

代码

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="static/css/initial.css">
  8.     <link rel="stylesheet" href="static/css/top.css">
  9.     <link rel="stylesheet" href="static/css/main.css">
  10.     <link rel="stylesheet" href="//at.alicdn.com/t/font_3279636_17208zykr8dj.css">
  11.     <title>php中文网</title>
  12. </head>
  13. <body>
  14.     <div class="header">
  15.         <div class="top">
  16.             <div class="title">            
  17.                 <span>php中文网-程序员梦开始的地方</span>
  18.             </div>
  19.             <div class="userimg">
  20.                 <a href="" class="iconfont icon-lingdang-xianxing"></a>
  21.                 <a href=""><img src="static/images/wallhaven-j3dg1m.jpg" alt=""></a>
  22.             </div>
  23.         </div>
  24.     </div>
  25.     <div class="nav">
  26.         <div class="content">
  27.             <a href="" class="logo"><img src="static/images/logo.png" alt=""></a>
  28.             <div class="meddle">
  29.                 <a href="" class="item">首页</a>
  30.                 <a href="" class="item">视频教程</a>
  31.                 <a href="" class="item">学习路径</a>
  32.                 <a href="" class="item">php培训</a>
  33.                 <a href="" class="item">资源下载</a>
  34.                 <a href="" class="item">技术文章</a>
  35.                 <a href="" class="item">社区</a>
  36.                 <a href="" class="iconfont icon-shouji">app下载</a>
  37.                 <a href="" class="iconfont icon-gengduo gengduo"></a>
  38.             </div>
  39.             <div class="left">
  40.                 <input type="search" placeholder="请输入关键字搜索">
  41.                 <span class="iconfont icon-Magnifier fangdajing"></span>
  42.             </div>
  43.         </div>
  44.     </div>
  45.     <div class="main">
  46.         <div class="left-top">
  47.             <a href="" class="item">php开发</a>
  48.             <a href="" class="item">大前端</a>
  49.             <a href="" class="item">后端开发</a>
  50.             <a href="" class="item">数据库</a>
  51.             <a href="" class="item">移动端</a>
  52.             <a href="" class="item">运维开发</a>
  53.             <a href="" class="item">UI设计</a>
  54.             <a href="" class="item">计算机基础</a>
  55.         </div>
  56.         <div class="slider">
  57.             <a href=""><img src="static/images/slider.jpeg" alt=""></a>
  58.         </div>
  59.         <div class="right-top">
  60.             <div class="message">            
  61.                 <a href=""><img src="static/images/wallhaven-j3dg1m.jpg" alt=""></a>
  62.                 <div class="user">
  63.                     <a href="">Jason</a>
  64.                     <br></br>
  65.                     <dd>P豆:9999</dd>
  66.                 </div>  
  67.                 <a href="" class="mine">我的学习</a>
  68.             </div>
  69.             <div class="news">
  70.                 <p class="cont1">
  71.                     <span>社区问答</span>
  72.                     <a href="" class="red">答疑</a>
  73.                 </p>
  74.                 <p class="cont2">
  75.                     <span>头条</span><span class="cont">xxxx</span>
  76.                 </p>
  77.                 <p class="cont3">
  78.                     <span>新课</span><span class="cont">xxxx</span>
  79.                 </p>                
  80.                 <p class="cont4">
  81.                     <span>新班</span><span class="cont">xxxx</span>
  82.                 </p>                
  83.                 <p class="cont5">
  84.                     <span>招募</span><span class="cont">xxxx</span>
  85.                 </p>
  86.                 <p class="cont6">
  87.                     <span>公告</span><span class="cont">xxxx</span>
  88.                 </p>
  89.             </div>
  90.         </div>
  91.         <div class="left-bottom">
  92.             <div class="lesson">
  93.                 <span>学习路径</span>
  94.                 <em>全部7个&gt;</em>
  95.             </div>
  96.             <div class="outward">
  97.                 <div class="inside">
  98.                     <a href="" class="categlory">
  99.                         <img src="static/images/dgjj.png" alt="">
  100.                         <dl>
  101.                             <dt>独孤九贱</dt>
  102.                             <dd>9门课程</dd>
  103.                         </dl>
  104.                     </a>
  105.                     <a href="" class="categlory">
  106.                         <img src="static/images/ynxj.png" alt="">
  107.                         <dl>
  108.                             <dt>玉女心经</dt>
  109.                             <dd>5门课程</dd>
  110.                         </dl>
  111.                     </a>
  112.                     <a href="" class="categlory">
  113.                         <img src="static/images/tlbb.png" alt="">
  114.                         <dl>
  115.                             <dt>天龙八部</dt>
  116.                             <dd>3门课程</dd>
  117.                         </dl>
  118.                     </a>
  119.                     <a href="" class="categlory">
  120.                         <img src="static/images/phpkjkf.png" alt="">
  121.                         <dl>
  122.                             <dt>自学指南</dt>
  123.                             <dd>19门课程</dd>
  124.                         </dl>
  125.                     </a>
  126.                     <a href="" class="categlory">
  127.                         <img src="static/images/phpksrm.png" alt="">
  128.                         <dl>
  129.                             <dt>趣味闯关</dt>
  130.                             <dd>22门课程</dd>
  131.                         </dl>
  132.                     </a>
  133.                 </div>
  134.             </div>
  135.         </div>
  136.         <div class="right-bottom">
  137.             <div>
  138.                 <a href="" class="iconfont icon-weixin"></a><h2>微信公众号</h2>
  139.             </div>
  140.             <div>
  141.                 <a href="" class="iconfont icon-QQ"></a><h2>官方QQ群</h2>
  142.             </div>
  144.         </div>
  146.     </div>
  147.     <div class="more">
  148.         <div class="zhiboke">
  149.             <h2>直播课</h2>
  150.             <a href="">更多&gt;</a>
  151.         </div>
  152.         <div class="zhiboke-detail">
  153.             <a href="" class="zhibolesson"><img src="static/images/61a0ab3d9520d816.jpg" alt=""></a>
  154.             <a href="" class="zhibolesson"><img src="static/images/6226d78b754aa110.png" alt=""></a>
  155.             <a href="" class="zhibolesson"><img src="static/images/623bd189be2bd107.jpg" alt=""></a>
  156.             <div class="left">
  157.                 <ul>
  158.                     <li>1 xxxx</li>
  159.                     <li>2 xxxx</li>
  160.                     <li>3 xxxx</li>
  161.                     <li>4 xxxx</li>
  162.                     <li>5 xxxx</li>
  163.                     <li>6 xxxx</li>
  164.                 </ul>
  165.             </div>
  166.             <a href="" class="one">直播课1</a>
  167.             <a href="" class="one">直播课2</a>
  168.             <a href="" class="one">直播课3</a>
  169.             <div>
  170.                 <span style="margin-left: 10px;">精彩回放</span>
  171.                 <span style="color: #b7b7b7;margin-right: 10px;">99999人感兴趣</span>
  172.             </div>
  173.             <div>
  174.                 <span style="color: #f11717;margin-left: 10px;">精彩回放</span>
  175.                 <span style="color: #b7b7b7;margin-right: 10px;">99999人感兴趣</span>
  176.             </div>
  177.             <div>
  178.                 <span style="color: #f11717;margin-left: 10px;">即将开课</span>
  179.                 <span style="color: #b7b7b7;margin-right: 10px;">99999人感兴趣</span>
  180.             </div>
  181.         </div>
  182.     </div>
  183. </body>
  184. </html>

css

  • initial.css
  1. * {
  2.     /* 页面初始化 */
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  8. /* a标签初始化 */
  9. a {
  10.     text-decoration: none;
  11.     /* 去掉下划线 */
  12.     color: #555;
  13. }
  15. body {
  16.     background-color: rgb(243,245,247);
  17. }
  19. li {
  20.     list-style: none;
  21.     /* 去掉无序列表前的小圆点 */
  22. }
  • top.css
  1. .header {
  2.     width: 100vw;
  3.     height: 40px;
  4.     background-color: #343434;
  5. }
  6. .header .top .userimg img{
  7.     width:70%;
  8.     border-radius:200px;
  9. }
  10. .header .top {
  11.     width: 1200px;
  12.     height: 40px;
  13.     display: grid;
  14.     grid-template-columns: 400px 100px;
  15.     margin: auto;
  16.     grid-auto-rows: 40px;
  17.     place-content: space-between;
  18.     place-items: center start; 
  19. }
  20. .header .top .title {
  21.     color: #aaa;
  22. }
  23. .header .top .userimg {
  24.     display: grid;
  25.     grid-template-columns: repeat(2,1fr);
  26.     place-content: space-between;
  27.     place-items: center center;
  28. }
  29. .header .top .userimg .iconfont {
  30.     font-size: larger;
  31.     color: #eee;
  32. }
  34. .nav{
  35.     width: 100vw;
  36.     height: 90px;
  37.     background-color: #fff;
  38. }
  39. .nav .content {
  40.     width: 1200px;
  41.     height: 90px;
  42.     display: grid;
  43.     grid-template-columns: 150px 1fr 220px;
  44.     grid-auto-rows: 90px;
  45.     margin: auto;
  46.     place-content: space-between;
  47.     place-items: center start;
  48.     gap:20px
  49. }
  50. .nav .content .logo img {
  51.     width: 100%;
  52. }
  53. .nav .content .meddle a:first-of-type,
  54. .nav .content .meddle a:hover{
  55.     color: red;
  56.     font-weight: bolder;
  57. }
  58. .nav .content .meddle {
  59.     display: flex;
  60.     place-content: space-between;
  61.     position: relative;
  62.     left: 20px;
  63. }
  64. .nav .content .meddle a{
  65.     padding: 0 12px;
  66.     font-size: large;
  67. }
  68. .nav .content .meddle .gengduo{
  69.     font-size:x-large;
  70.     font-weight: bolder;
  71.     color: #000;
  72. }
  74. .nav .content .left{
  75.     display: flex;
  76.     place-content: space-between;
  77.     place-items: center;
  78. }
  79. .nav .content .left input {
  80.     width: 200px;
  81.     height: 40px;
  82.     border: none;
  83.     outline: none;
  84.     background-color: #f7f8fa;
  85.     border-radius: 20px;
  86.     padding-left: 20px;
  87. }
  88. .nav .content .left .fangdajing{
  89.     font-size: larger;
  90.     font-weight: bolder;
  91.     color:#ccc;
  92.     position: relative;
  93.     left: -30px;
  94. }
  • main.css
  1. .main {
  2.     font-size: 14px;
  3.     display: grid;
  4.     grid-template-columns: 160px 810px 190px;
  5.     grid-template-rows: 400px 80px;
  6.     gap:20px;
  7.     place-content: center;
  8.     margin: 30px 0;
  10. }
  11. .main .left-top{
  12.     display: grid;
  13.     /* grid-template-rows: repeat(8,1fr);
  14.     background-color: #fff;
  15.     border-radius: 10px; */
  16.     place-items: center;
  17.     padding:20px 0;
  18.     background-color: #fff;
  19.     border-radius: 20px;
  20. }
  21. .main .left-top a{
  22.     border-radius: 20px;
  23.     padding: 10px 20px;
  24.     font-size: large;
  25. }
  26. .main .left-top a:hover{
  27.     background-color: red;
  28.     background-color: rgb(250, 223, 227);
  29. }
  30. .main .slider img{
  31.     width: 100%;
  32.     height: 400px;
  33.     border-radius: 20px;
  34.     vertical-align: top;
  35. }
  37. .main .right-top{
  38.     /* background-color: #fff; */
  39.     display: grid;
  40.     grid-template-rows: 142px 1fr;
  41.     gap:10px;
  42.     /* place-content: space-between; */
  43.     /* border-radius: 10px;   */
  45. }
  46. .main .right-top .message img{
  47.     width: 60%;
  48.     border-radius:100%;
  49.     margin-left: 18px;
  50.     margin-top: 10px;
  51. }
  52. .main .right-top .message {
  53.     display: grid;
  54.     grid-template-rows: repeat(2,1fr);
  55.     grid-template-columns: repeat(2,1fr);
  56.     place-content: center;
  57.     place-items: center center;
  58.     background-color: #fff;
  59.     border-radius: 10px;  
  60. }
  61. .main .right-top .user{
  62.     place-self: center start;
  64. }
  65. .main .right-top .user a{
  66.     font-size: large;
  67.     font-weight: bold;
  68. }
  69. .main .right-top .user a:hover{
  70.     color: #f11717;
  71. }
  72. .main .right-top .user dd{
  73.     font-size:14px;
  74.     color: #d0d0df;
  75. }
  76. .main .right-top .message .mine{
  77.     grid-column: span 2;
  78.     background-color:#f11717;
  79.     width: 150px;
  80.     height: 30px;
  81.     border-radius: 20px;
  82.     padding: auto;
  83.     text-align: center;
  84.     font-size: large;
  85.     font-weight: bold;
  86.     color: #fff;
  87. }
  88. .main .right-top .news{
  89.     font-size: 15px;
  90.     display: grid;
  91.     grid-template-rows: repeat(6,1fr);
  92.     background-color: #fff;
  93.     border-radius: 20px;
  94. }
  95. .main .right-top .news p{
  96.     margin-left: 20px;
  97. }
  98. .main .right-top .news .cont1{
  99.     margin-top: 10px;
  100. }
  101. .main .right-top .news .cont1 .red{
  102.     background-color: red;
  103.     color: #fff;
  104. }
  105. .main .right-top .news .cont{
  106.     margin-left: 20px;
  107.     color: #d0d0df;
  108. }
  110. .main .left-bottom {
  111.     grid-column: span 2;
  112.     display:grid;
  113.     grid-template-columns: 100px 1fr;
  114.     background-color: #fff; 
  115.     border-radius: 20px;
  116. }
  117. .main .left-bottom .lesson{
  118.     display: grid;
  119.     place-items: center;
  120.     padding: 16px;
  121.     border-radius: 20px;
  122. }
  123. .main .left-bottom  .outward .inside .categlory img{
  124.     width: 36px;
  125.     height: 36px;
  126. }
  127. .main .left-bottom .outward .inside{
  128.     display: flex;
  129.     place-items: center;
  130.     place-content: space-between;
  131. }
  132. .main .left-bottom  .outward .inside .categlory{
  133.     display: grid;
  134.     grid-template-columns: repeat(2,1fr);
  135.     place-content: center;
  136.     place-items: center;
  137.     margin: 23px;
  138. }
  139. .main .right-bottom{
  140.     display: grid;
  141.     grid-template-columns: repeat(2,1fr);
  142.     background:#fff;
  143.     border-radius: 20px;
  144.     gap:10px;
  145.     place-content: space-between;
  146.     place-items: center;
  147.     padding: 12px;
  148. }
  150. .main .right-bottom .iconfont{
  151.     font-size: 40px;
  152.     border-radius: 100%;
  153.     margin: 10px;
  154.     color: #fff;
  155.     background: #d0d0d0;
  156. }
  157. .main .right-bottom  h2{
  158.     font-size: 12px;
  159. }
  160. .more .zhiboke {
  161.     width: 1200px;
  162.     height: 32px;
  163.     display: flex;
  164.     place-content: space-between;
  165.     margin:auto;
  166. }
  167. .more .zhiboke h2{
  168.     font: 22px;
  169.     color: #333;
  170. }
  171. .more .zhiboke a{
  172.     font:14px;
  173.     width: 78px;
  174.     height: 32px;
  175.     color: #999;
  176.     background-color: rgb(240,241,244);
  177.     border-radius: 20px;
  178.     text-align: center;
  179.     padding-top: 10px;
  180. }
  181. .more .zhiboke-detail{
  182.     width: 1200px;
  183.     height: 275px;
  184.     display: grid;
  185.     grid-template-columns: repeat(4,280px);
  186.     grid-template-rows: 200px 50px 25px;
  187.     column-gap:26px;
  188.     place-content: center;
  189.     margin: auto;
  190.     margin-top: 30px;
  191. }
  192. .more  .zhiboke-detail img{
  193.     width: 100%;
  194.     height: 100%;
  195.     /* border-radius: 20px; */
  196.     /* position: relative;
  197.     left: 14px;
  198.     top:10px; */
  200. }
  201. .more .zhiboke-detail .left{
  202.     grid-row: span 3;
  203. }
  204. .more  .zhiboke-detail .zhibolesson{
  205.     background-color: #fff;
  206.     /* border-radius: 20px 20px 0 0; */
  207. }
  208. .more  .zhiboke-detail .one {
  209.     background-color: #fff;
  210.     font-size: 16px;
  211.     padding: 10px 10px
  212. }
  213. .more  .zhiboke-detail .one:hover{
  214.     color: #f11717;
  215. }
  216. .more  .zhiboke-detail div{
  217.     background-color: #fff;
  218.     /* border-radius:0 0 20px 20px; */
  219.     display: flex;
  220.     place-content: space-between;
  221.     font-size: 14px;
  222.     color: #666;
  223. }
  224. .more  .zhiboke-detail .left{
  225.     border-radius: 20px;
  226. }
  227. .more  .zhiboke-detail .left li{
  228.     margin: 24px;
  229.     margin-left: 40px;
  230.     list-style: disc;
  231. }

效果展示：

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行