search

博客列表 >grid仿PHP中文网首页

grid仿PHP中文网首页

小丑0o鱼
小丑0o鱼原创
2021年07月20日 19:34:05528浏览
  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. }
上一条：仿jd手机端下一条：JS的引入方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多