search

博客列表 >布局实战代码

布局实战代码

shooter
shooter原创
2022年03月28日 12:57:53529浏览

效果图

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
  8.       rel="stylesheet"
  9.       href="//at.alicdn.com/t/font_3280886_zb7zws8num9.css"
  10.     />
  11.     <link rel="stylesheet" href="static/css/1.css" />
  12.     <link rel="stylesheet" href="static/css/2.css" />
  13.     <link rel="stylesheet" href="static/css/3.css" />
  14.     <title>仿php中文网</title>
  15.   </head>
  16.   <body>
  17.     <!-- 页眉 -->
  18.     <header>
  19.       <!-- 顶部 -->
  20.       <div class="top">
  21.         <div class="content">
  22.           <div class="title">PHP中文网，程序员梦开始的地方！</div>
  23.           <div class="right">
  24.             <a href="" class="iconfont icon-lingdang"></a>
  25.             <a href=""><img src="static/images/user-pic.jpeg" alt="" /></a>
  26.           </div>
  27.         </div>
  28.       </div>
  29.       <!-- 导航 -->
  30.       <div class="navs">
  31.         <div class="content">
  32.           <a href="" class="logo"
  33.             ><img src="static/images/logo.png" alt=""
  34.           /></a>
  35.           <nav>
  36.             <a href="" class="active">首页</a>
  38.             <a href=""
  39.               >视频教程<span class="iconfont icon-xiajiankuohao jkh"></span>
  40.             </a>
  42.             <a href=""
  43.               >学习路径<span class="iconfont icon-xiajiankuohao jkh"></span
  44.             ></a>
  45.             <a href="">php培训</a>
  47.             <a href=""
  48.               >资源下载<span class="iconfont icon-xiajiankuohao jkh"></span
  49.             ></a>
  50.             <a href=""
  51.               >技术文章<span class="iconfont icon-xiajiankuohao jkh"></span
  52.             ></a>
  53.             <a href=""
  54.               >社区<span class="iconfont icon-xiajiankuohao jkh"></span
  55.             ></a>
  56.             <a href="" class="iconfont icon-Phoneshouji shouji">APP下载</a>
  57.             <a href="" class="iconfont icon-qita"></a>
  58.           </nav>
  59.           <div class="search">
  60.             <input type="search" placeholder="输入关键字搜索" />
  61.             <span class="iconfont icon-sousuo fdj"></span>
  62.           </div>
  63.         </div>
  64.       </div>
  65.     </header>
  67.     <!-- 主题 -->
  68.     <main>
  69.       <div class="navs">
  70.         <!-- 两行三列 -->
  71.         <div class="left">
  72.           <a href="">php开发</a>
  73.           <a href="">大前端</a>
  74.           <a href="">后端开发</a>
  75.           <a href="">数据库</a>
  76.           <a href="">移动端</a>
  77.           <a href="">运维开发</a>
  78.           <a href="">UI设计</a>
  79.           <a href="">计算机基础</a>
  80.         </div>
  81.         <div class="slider">
  82.           <a href=""><img src="static/images/slider.jpeg" alt="" /></a>
  83.         </div>
  84.         <div class="right">
  85.           <div class="des">
  86.             <a href=""><img src="static/images/dwtl.jpg" alt="" /></a>
  87.             <div class="name">
  88.               <a href="">大威天龙</a>
  89.               <br /><br />
  90.               <span>P豆 8</span>
  91.             </div>
  92.             <a href="" class="wdxx">我的学习</a>
  93.           </div>
  94.           <div class="new">
  95.             <div class="doc1">
  96.               <span>社区问答</span>
  97.               <a href="" class="ys">答疑</a>
  98.             </div>
  99.             <div class="doc2">
  100.               <span>头条</span>
  101.               <a href="" class="doc">程序员有多好</a>
  102.             </div>
  103.             <div class="doc3">
  104.               <span>新课</span>
  105.               <a href="" class="doc">3.9号公益直播课</a>
  106.             </div>
  107.             <div class="doc4">
  108.               <span>新班</span>
  109.               <a href="" class="doc">19期PHP直播班</a>
  110.             </div>
  111.             <div class="doc5">
  112.               <span>招募</span>
  113.               <a href="" class="doc">课程合作计划</a>
  114.             </div>
  115.             <div class="doc6">
  116.               <span>公告</span>
  117.               <a href="" class="doc">APP上线啦</a>
  118.             </div>
  119.           </div>
  120.         </div>
  121.         <div class="bottom-left">
  122.           <!-- 学习路径 -->
  123.           <div class="desc">
  124.             <div class="title">学习路径</div>
  125.             <span>全部七个&gt;</span>
  126.           </div>
  127.           <ul class="detail">
  128.             <li onclick="">
  129.               <img src="static/images/dgjj.png" alt="" />
  130.               <a href="">独孤九剑</a>
  131.               <span>9门课程</span>
  132.             </li>
  133.             <li onclick="">
  134.               <img src="static/images/ynxj.png" alt="" />
  135.               <a href="">玉女心经</a>
  136.               <span>5门课程</span>
  137.             </li>
  138.             <li onclick="">
  139.               <img src="static/images/tlbb.png" alt="" />
  140.               <a href="">天龙八部</a>
  141.               <span>3门课程</span>
  142.             </li>
  143.             <li onclick="">
  144.               <img src="static/images/phpkjkf.png" alt="" />
  145.               <a href="">自学指南</a>
  146.               <span>19门课程</span>
  147.             </li>
  148.             <li onclick="">
  149.               <img src="static/images/phpksrm.png" alt="" />
  150.               <a href="">趣味闯关</a>
  151.               <span>22门课程</span>
  152.             </li>
  153.           </ul>
  154.         </div>
  155.         <div class="bottom-right">
  156.           <div>
  157.             <a href="" class="iconfont icon-weixin"></a>
  158.             <a href=""><h2>官方公众号</h2></a>
  159.           </div>
  160.           <div>
  161.             <a href="" class="iconfont icon-QQ"></a>
  162.             <a href=""><h2>官方QQ群</h2></a>
  163.           </div>
  164.         </div>
  165.       </div>
  166.     </main>
  167.   </body>
  168. </html>

css代码

页面元素样式初始化

  2. /* 页面元素样式初始化 */
  4. * {
  5.   margin: 0;
  6.   padding: 0;
  7.   box-sizing: border-box;
  8. }
  10. a {
  11.   text-decoration: none;
  12.   color: #555;
  13. }
  15. body {
  16.   background-color: rgb(243, 245, 247);
  17. }
  19. li {
  20.   list-style: none;
  21. }
  24. `

css

  1. header .top {
  2.   width: 100vw;
  3.   height: 40px;
  4.   background-color: rgb(52, 52, 52);
  5.   color: #aaa;
  6. }
  8. header .top .content img {
  9.   width: 50%;
  10.   border-radius: 50%;
  11. }
  13. header .top .content {
  14.   width: 1200px;
  15.   display: grid;
  16.   grid-template-columns: 400px 100px;
  17.   grid-auto-rows: 40px;
  18.   place-content: space-between;
  19.   place-items: center start;
  20.   margin: auto;
  21. }
  23. header .top .content .right .iconfont {
  24.   color: #eee;
  25.   font-size: large;
  26. }
  28. header .top .content .right {
  29.   display: grid;
  30.   grid-template-columns: repeat(2, 1fr);
  31.   place-items: center;
  32. }
  34. /* 导航 */
  36. header .navs {
  37.   width: 100vw;
  38.   height: 90px;
  39.   background-color: #fff;
  40. }
  42. header .navs .content {
  43.   width: 1200px;
  44.   display: grid;
  45.   grid-template-columns: 140px 1fr 200px;
  46.   grid-auto-rows: 90px;
  47.   gap: 20px;
  48.   margin: auto;
  49.   place-items: center start;
  50. }
  52. header .navs .content img {
  53.   width: 100%;
  54. }
  56. header .navs .content nav a.active,
  57. header .navs .content nav a:hover {
  58.   color: red;
  59.   font-weight: bold;
  60. }
  62. header .navs .content nav span.jkh {
  63.   font-size: 10px;
  64.   height: 36px;
  65.   position: relative;
  66.   top: -3px;
  67.   left: 5px;
  68. }
  70. header .navs .content nav a.shouji {
  71.   color: red;
  72. }
  74. header .navs .content .search {
  75.   display: flex;
  76. }
  78. header .navs .content nav a {
  79.   padding: 0 13px;
  80. }
  82. header .navs .content .search input[type="search"] {
  83.   width: 200px;
  84.   height: 36px;
  85.   border: none;
  86.   background-color: #f7f8fa;
  87.   border-radius: 20px;
  88.   padding-left: 10px;
  89. }
  91. header .navs .content .search .fdj {
  92.   font-size: 22px;
  93.   color: #ccc;
  94.   position: relative;
  95.   left: -40px;
  96.   top: 5px;
  97. }
  1. main {
  2.   font-size: 14px;
  3. }
  5. main .navs {
  6.   /* 两行三列 */
  7.   display: grid;
  8.   grid-template-columns: 160px 810px 190px;
  9.   grid-auto-rows: 400px 80px;
  10.   gap: 20px;
  11.   place-content: center;
  12.   margin: 30px 0;
  13. }
  15. main .navs > * {
  16.   background-color: #fff;
  17.   border-radius: 20px;
  18. }
  20. /* 底部左侧占两列 */
  22. main .navs .bottom-left {
  23.   grid-column: span 2;
  24. }
  26. main .navs .slider img {
  27.   width: 100%;
  28.   border-radius: 20px;
  29. }
  31. /* 左侧导航 */
  33. main .navs .left {
  34.   display: grid;
  35.   place-items: center;
  36.   padding: 20px 0;
  37. }
  39. main .navs .left a:hover {
  40.   color: red;
  41.   background-color: rgb(250, 223, 227);
  42. }
  44. main .navs .left a {
  45.   border-radius: 20px;
  46.   padding: 10px 20px;
  47. }
  49. /* 底部左侧 */
  50. main .navs .bottom-left {
  51.   display: grid;
  52.   grid-template-columns: 100px 1fr;
  53. }
  55. main .navs .bottom-left .desc {
  56.   display: grid;
  57.   place-items: center;
  58.   padding: 16px;
  59. }
  61. main .navs .bottom-left .detail img {
  62.   width: 100%;
  63.   grid-row: span 2;
  64. }
  66. main .navs .bottom-left .detail {
  67.   display: flex;
  68.   place-items: center;
  69.   place-content: space-between;
  70. }
  72. main .navs .bottom-left .detail li {
  73.   display: grid;
  74.   grid-template-columns: 36px 85px;
  75.   gap: 0 10px;
  76.   place-items: center start;
  77. }
  79. main .navs .bottom-left .detail li a {
  80.   font-size: 14px;
  81. }
  83. main .navs .bottom-left .detail li a:hover {
  84.   color: red;
  85. }
  87. main .navs .bottom-left .detail li span,
  88. main .navs .bottom-left .desc span {
  89.   font-size: 12px;
  90.   color: #999;
  91. }
  93. /* 右侧导航 */
  95. main .navs .right {
  96.   display: grid;
  97.   grid-template-rows: 142px 1fr;
  98.   gap: 10px;
  99. }
  101. main .right .des img {
  102.   width: 60%;
  103.   border-radius: 100%;
  104.   margin-left: 18px;
  105.   margin-top: 10px;
  106. }
  108. main .right .des {
  109.   display: grid;
  110.   grid-template-rows: repeat(2, 1fr);
  111.   grid-template-columns: repeat(2, 1fr);
  112.   place-content: center;
  113.   place-items: center center;
  114.   background-color: #fff;
  115.   border-radius: 10px;
  116.   border-bottom: 2px solid #eeeeee;
  117. }
  119. main .right .name {
  120.   place-self: center start;
  121. }
  123. main .right .name a {
  124.   font-size: large;
  125.   font-weight: bold;
  126. }
  128. main .right .name a:hover {
  129.   color: red;
  130. }
  132. main .right .name span {
  133.   font-size: 14px;
  134.   color: #d0d0df;
  135. }
  137. main .right .des .wdxx {
  138.   grid-column: span 2;
  139.   background-color: #f11717;
  140.   width: 150px;
  141.   height: 30px;
  142.   border-radius: 20px;
  143.   padding: auto;
  144.   text-align: center;
  145.   font-size: large;
  146.   font-weight: bold;
  147.   color: #fff;
  148. }
  150. main .right .new {
  151.   font-size: 15px;
  152.   display: grid;
  153.   grid-template-rows: repeat(6, 1fr);
  154.   background-color: #fff;
  155.   border-radius: 20px;
  156.   margin-left: 20px;
  157. }
  159. main .right .new .doc1 {
  160.   margin-top: 10px;
  161. }
  163. main .right .new .doc1 .ys {
  164.   font-size: 13px;
  165.   background-color: red;
  166.   color: #fff;
  167. }
  169. main .right .new a:hover {
  170.   color: red;
  171. }
  173. main .right .new .doc {
  174.   color: #999;
  175. }
  177. main .bottom-right {
  178.   display: grid;
  179.   grid-template-columns: repeat(2, 1fr);
  180.   background: #fff;
  181.   border-radius: 20px;
  182.   gap: 10px;
  183.   place-content: space-between;
  184.   place-items: center;
  185.   padding: 12px;
  186. }
  188. main .bottom-right .iconfont {
  189.   font-size: 30px;
  190.   border-radius: 100%;
  191.   margin: 10px;
  192.   color: #fff;
  193.   background: #d0d0d0;
  194. }
  196. main .bottom-right a h2 {
  197.   font-size: 10px;
  198. }
  200. main .bottom-right a h2:hover {
  201.   color: red;
  202. }
上一条：动态框案例下一条：模态框案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多