Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid仿PHP中文网首页
Blogger Information
Blog 52
fans 1
comment 1
visits 38785
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
grid仿PHP中文网首页
小丑0o鱼
Original
527 people have browsed it
  1. index.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="css/graid.css">
  10.     <link rel="stylesheet" href="css/header.css">
  11.     <link rel="stylesheet" href="css/main.css">
  12. </head>
  13. <body>
  14.     <header class="header row">
  15.         <div class="item col-12-1"><span>php</span><span>中文网</span></div>
  16.         <div class="item col-12-1">首页</div>
  17.         <div class="item col-12-1">视频教程</div>
  18.         <div class="item col-12-1">入门教程</div>
  19.         <div class="item col-12-1">社区问答</div>
  20.         <div class="item col-12-1">技术文章</div>
  21.         <div class="item col-12-1">资源下载</div>
  22.         <div class="item col-12-1">编程词典</div>
  23.         <div class="item col-12-1">工具下载</div>
  24.         <div class="item col-12-1">php培训</div>
  25.         <div class="item col-12-1"></div>
  26.         <div class="item col-12-1">
  27.             <div class="col-12-6"></div>
  28.             <div class="col-12-6"><img src="img/user_avatar.jpg" alt=""></div>
  29.         </div>
  30.     </header>
  31.     <div class="container">
  32.         <div class="ad">
  33.             <div class="left">
  34.                 <div class="row">
  35.                     <div class="col-12-12">
  36.                         <ul>
  37.                             <li><span>php开发</span>
  38.                                 <span>&gt;</span>
  39.                             </li>
  40.                             <li><span>前端开发</span>
  41.                                 <span>&gt;</span>
  42.                             </li>
  43.                             <li><span>服务器开发</span>
  44.                                 <span>&gt;</span>
  45.                             </li>
  46.                             <li><span>移动开发</span>
  47.                                 <span>&gt;</span>
  48.                             </li>
  49.                             <li>
  50.                                 <span>数据库</span>
  51.                                 <span>&gt;</span>
  52.                             </li>
  53.                             <li><span>服务器运维&下载</span>
  54.                                 <span>&gt;</sapn>
  55.                             </li>
  56.                             <li><span>在线工具箱</span>
  57.                                 <span>&gt;</span>
  58.                             </li>
  59.                             <li><span>常用类库</span>
  60.                                 <span>&gt;</sapn>
  61.                             </li>
  62.                         </ul>
  63.                     </div>
  64.                 </div>
  65.             </div>
  66.             <div class="right">
  67.                 <div class="row">
  68.                     <div class="col-12-12">
  69.                         <ul>
  70.                             <div class="item">
  71.                                 <span>PHP头条</span>
  72.                                 <span>新</span>
  73.                             </div>
  74.                             <div class="item">
  75.                                 <span>独孤九贱</span>
  76.                             </div>
  77.                             <div class="item">
  78.                                 <span>学习路线</span>
  79.                                 <span>新</span>
  80.                             </div>
  81.                             <div class="item">
  82.                                 <span>在线工具</span>
  83.                             </div>
  84.                             <div class="item">
  85.                                 <span>趣味课堂</span>
  86.                                 <span>新</span>
  87.                             </div>
  88.                             <div class="item">
  89.                                 <span>社区问答</span>
  90.                             </div>
  91.                             <div class="item">
  92.                                 <span>课程直播</span>
  93.                             </div>
  94.                             <div class="item search">
  95.                                 <input type="text" placeholder="  输入关键司搜索">
  96.                             </div>
  97.                         </ul>
  98.                     </div>
  99.                 </div>
  100.                 <div class="row">
  101.                     <div class="col-12-12"> <img src="img/index_banner1.png" alt=""></div>
  102.                 </div>
  103.                 <div class="row">
  104.                     <div class="item col-12-3"><img src="img/index_php_item2_.png" alt="" srcset=""></div>
  105.                     <div class="item col-12-3"><img src="img/index_php_item3.jpg" alt="" srcset=""></div>
  106.                     <div class="item col-12-3"><img src="img/index_php_new4.jpg" alt="" srcset=""></div>
  107.                     <div class="item col-12-3"><img src="img/index_yunv.jpg" alt="" srcset=""></div>
  108.                 </div>
  109.             </div>
  110.         </div>
  111.         <div class="row php15">
  112.             <div class="col-12-12">
  113.                 <img src="img/6034a36c9c07c118.png" alt="" srcset="">
  114.             </div>
  115.         </div>
  116.     </div>
  117. </body>
  118. </html>
  119. grid.css
  120. /* 初始化 */
  121. * {
  122.   margin: 0;
  123.   padding: 0;
  124.   box-sizing: border-box;
  125. }
  126. :root {
  127.   font-size: 10px;
  128. }
  129. body {
  130.   font-size: 1.6rem;
  131.   width: 100vw;
  132.   height: 100vh;
  133.   display: grid;
  134.   place-content: start center;
  135. }
  136. .container {
  137.   width: 80vw;
  138.   display: grid;
  139. }
  140. .item {
  141.   color: gray;
  142. }
  143. .row {
  144.   display: grid;
  145.   grid-template-columns: repeat(12, 1fr);
  146.   grid-auto-flow: row;
  147.   grid-auto-rows: minmax(5rem, 10rem);
  148. }
  149. .col-12-12 {
  150.   grid-area: auto / span 12;
  151. }
  152. .col-12-11 {
  153.   grid-area: auto / span 11;
  154. }
  155. .col-12-10 {
  156.   grid-area: auto / span 10;
  157. }
  158. .col-12-9 {
  159.   grid-area: auto / span 9;
  160. }
  161. .col-12-8 {
  162.   grid-area: auto / span 8;
  163. }
  164. .col-12-7 {
  165.   grid-area: auto / span 7;
  166. }
  167. .col-12-6 {
  168.   grid-area: auto / span 6;
  169. }
  170. .col-12-5 {
  171.   grid-area: auto / span 5;
  172. }
  173. .col-12-4 {
  174.   grid-area: auto / span 4;
  175. }
  176. .col-12-3 {
  177.   grid-area: auto / span 3;
  178. }
  179. .col-12-2 {
  180.   grid-area: auto / span 2;
  181. }
  182. .col-12-1 {
  183.   grid-area: auto / span 1;
  184. }
  185. header.css
  186. .header {
  187.   background-color: #000;
  188.   width: 100vw;
  189.   height: 5rem;
  190.   place-items: center;
  191. }
  192. .header > div {
  193.   width: minmax(5rem, auto);
  194. }
  195. .header > div:first-of-type {
  196.   color: #fff;
  197. }
  198. .header > div:first-of-type span:first-of-type {
  199.   font-size: 2rem;
  200.   font-style: italic;
  201.   background-color: #f11514;
  202.   border-radius: 0.5rem;
  203. }
  204. .header > div:first-of-type span:last-of-type {
  205.   font-size: 2.5rem;
  206.   font-style: italic;
  207. }
  208. .header > div:last-of-type img {
  209.   height: 3rem;
  210.   width: 3rem;
  211.   border-radius: 3rem;
  212. }
  213. main.css
  214. body {
  215.   background-color: #f3f5f7;
  216.   gap: 1.5rem;
  217. }
  218. ul {
  219.   list-style: none;
  220. }
  221. body > .container {
  222.   place-self: start center;
  223. }
  224. .container > .ad {
  225.   display: grid;
  226.   grid-auto-flow: row;
  227.   grid-template-columns: 25% 75%;
  228.   border-radius: 1rem;
  229.   background-color: #fff;
  230. }
  231. .container > .ad > .left {
  232.   /* grid-area: 3span / auto; */
  233.   /* background-color: gold; */
  234.   background-color: #2b333b;
  235.   color: #9da0a4;
  236.   border-radius: 1rem 0 0 1rem;
  237. }
  238. .container > .ad > .left ul {
  239.   display: flex;
  240.   flex-flow: column;
  241.   justify-content: stretch;
  242. }
  243. .container > .ad > .left ul li {
  244.   padding: 1.7rem;
  245.   flex: auto;
  246.   position: relative;
  247. }
  248. .container > .ad > .left ul li span:nth-of-type(2) {
  249.   position: absolute;
  250.   right: 2rem;
  251. }
  252. .container > .ad > .right .row {
  253.   grid-area: auto / span 3;
  254. }
  255. .container > .ad > .right .row ul {
  256.   height: 100%;
  257.   display: flex;
  258.   justify-content: space-around;
  259.   align-items: center;
  260.   color: #3e3e3e;
  261. }
  262. .container > .ad > .right .row ul > .item:nth-of-type(1) span:nth-of-type(2) {
  263.   color: #fff;
  264.   background-color: #ff5722;
  265. }
  266. .container > .ad > .right .row ul > .item:nth-of-type(3) span:nth-of-type(2) {
  267.   color: #fff;
  268.   background-color: #2f4056;
  269. }
  270. .container > .ad > .right .row ul > .item:nth-of-type(5) span:nth-of-type(2) {
  271.   color: #fff;
  272.   background-color: #ffb800;
  273. }
  274. .container > .ad > .right .row ul .search > input {
  275.   width: 25rem;
  276.   height: 3rem;
  277.   background-color: #f1f0f0;
  278.   border: none;
  279. }
  280. .container > .ad > .right .row:first-of-type {
  281.   place-content: end;
  282.   height: 5rem;
  283. }
  284. .container > .ad > .right .row:nth-of-type(2) {
  285.   height: 31rem;
  286. }
  287. .container > .ad > .right .row:nth-of-type(2) img {
  288.   width: 100%;
  289. }
  290. .container > .ad > .right .row:last-of-type {
  291. }
  292. .container > .ad > .right .row:last-of-type img {
  293.   width: 100%;
  294.   border-radius: 1rem;
  295. }
  296. .container > .ad > .right .row:last-of-type .col-12-3 {
  297.   margin: 1rem 0.5rem;
  298. }
  299. .container > .row.php15 {
  300.   margin: 3rem 0;
  301. }
  302. .container > .row.php15 img {
  303.   width: 100%;
  304.   border-radius: 1.5rem;
  305. }
Correction status：Uncorrected

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