博主信息
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
博文
117
粉丝
5
评论
7
访问量
22006
积分:0
P豆:238

gird布局实战案例:仿PHP中文网首页

2020年12月30日 12:42:34阅读数:153博客 / 李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰/ web前端学习

仿php中文网首页

1.html代码部分:

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>php中文网</title>
  8. <link rel="stylesheet" href="static/style/layout.css">
  9. <link rel="stylesheet" href="static/style/header.css">
  10. <link rel="stylesheet" href="static/style/main-top.css">
  11. <link rel="stylesheet" href="static/style/footer.css">
  12. </head>
  13. <body>
  14. <header>
  15. <a href="#" class="logo">
  16. <span>php</span>
  17. <span>中文网</span>
  18. </a>
  19. <ul>
  20. <li><a href="">首页</a></li>
  21. <li><a href="">视频教程</a></li>
  22. <li><a href="">入门教程</a></li>
  23. <li><a href="">社区问答</a></li>
  24. <li><a href="">技术文章</a></li>
  25. <li><a href="">资源下载</a></li>
  26. <li><a href="">编程词典</a></li>
  27. <li><a href="">工具下载</a></li>
  28. <li><a href="">PHP培训</a></li>
  29. </ul>
  30. <div class="user">
  31. <span>登陆</span>
  32. <span>注册</span>
  33. </div>
  34. </header>
  35. <main>
  36. <div class="main-top">
  37. <ul>
  38. <li><a href=""><span>php开发</span><span>&gt;</span></a></li>
  39. <li><a href=""><span>前端开发</span><span>&gt;</span></a></li>
  40. <li><a href=""><span>服务端开发</span><span>&gt;</span></a></li>
  41. <li><a href=""><span>移动开发</span><span>&gt;</span></a></li>
  42. <li><a href=""><span>数据库</span><span>&gt;</span></a></li>
  43. <li><a href=""><span>服务器维护&下载</span><span>&gt;</span></a></li>
  44. <li><a href=""><span>在线工具箱</span><span>&gt;</span></a></li>
  45. <li><a href=""><span>常用类库</span><span>&gt;</span></a></li>
  46. </ul>
  47. <div>
  48. <ul>
  49. <li><a href="">PHP头条</a></li>
  50. <li><a href="">孤独九剑</a></li>
  51. <li><a href="">学习路线</a></li>
  52. <li><a href="">在线工具</a></li>
  53. <li><a href="">趣味课堂</a></li>
  54. <li><a href="">社区课堂</a></li>
  55. <li><a href="">课程直播</a></li>
  56. <li><input type="search"><span></span></li>
  57. </ul>
  58. <img src="./static/images/banner.jpg" alt="">
  59. <div>
  60. <a href=""><img src="static/images/1.jpg" alt=""></a>
  61. <a href=""><img src="static/images/2.png" alt=""></a>
  62. <a href=""><img src="static/images/3.jpg" alt=""></a>
  63. <a href=""><img src="static/images/4.jpg" alt=""></a>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="articles-list">
  68. <div>
  69. <h4>头条</h4>
  70. <ul>
  71. <li><a href="">文章标题列表文章名名字1</a></li>
  72. <li><a href="">文章标题列表文章名名字2</a></li>
  73. <li><a href="">文章标题列表文章名名字3</a></li>
  74. <li><a href="">文章标题列表文章名名字4</a></li>
  75. <li><a href="">文章标题列表文章名名字5</a></li>
  76. <li><a href="">文章标题列表文章名名字6</a></li>
  77. <li><a href="">文章标题列表文章名名字7</a></li>
  78. <li><a href="">文章标题列表文章名名字8</a></li>
  79. <li><a href="">文章标题列表文章名名字9</a></li>
  80. <li><a href="">文章标题列表文章名名字10</a></li>
  81. <li><a href="">文章标题列表文章名名字11</a></li>
  82. </ul>
  83. </div>
  84. <div>
  85. <h4>最新课程</h4>
  86. <div>
  87. <div>
  88. <img src="static/images/article1.png" alt="">
  89. <div>
  90. <span>中级</span>
  91. <p>通用后台管理系统实战开发实战开发</p>
  92. </div>
  93. </div>
  94. <div>
  95. <img src="static/images/article2.png" alt="">
  96. <div>
  97. <span>高级</span>
  98. <p>ThinkPHP5.1企业站点快速开发快速开发</p>
  99. </div>
  100. </div>
  101. <div>
  102. <img src="static/images/article3.png" alt="">
  103. <div>
  104. <span>中级</span>
  105. <p>ThinkPHP5.1企业站点快速开发</p>
  106. </div>
  107. </div>
  108. <div>
  109. <img src="static/images/article1.png" alt="">
  110. <div>
  111. <span>中级</span>
  112. <p>ThinkPHP5.1企业站点快速开发</p>
  113. </div>
  114. </div>
  115. <div>
  116. <img src="static/images/article2.png" alt="">
  117. <div>
  118. <span>高级</span>
  119. <p>ThinkPHP5.1企业站点快速开发</p>
  120. </div>
  121. </div>
  122. <div>
  123. <img src="static/images/article3.png" alt="">
  124. <div>
  125. <span>中级</span>
  126. <p>ThinkPHP5.1企业站点快速开发</p>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. <div>
  132. <div>
  133. <h4>常用手册</h4>
  134. <h4>更多</h4>
  135. </div>
  136. <div>
  137. <div>
  138. <img src="static/images/article-logo.jpg" alt="">
  139. <p>JavaScript参考手册JavaScript参考手册</p>
  140. </div>
  141. <div>
  142. <img src="static/images/article-logo.jpg" alt="">
  143. <p>JavaScript参考手册JavaScript参考手册</p>
  144. </div>
  145. <div>
  146. <img src="static/images/article-logo.jpg" alt="">
  147. <p>JavaScript参考手册JavaScript参考手册</p>
  148. </div>
  149. <div>
  150. <img src="static/images/article-logo.jpg" alt="">
  151. <p>JavaScript参考手册JavaScript参考手册</p>
  152. </div>
  153. <div>
  154. <img src="static/images/article-logo.jpg" alt="">
  155. <p>JavaScript参考手册JavaScript参考手册</p>
  156. </div>
  157. <div>
  158. <img src="static/images/article-logo.jpg" alt="">
  159. <p>JavaScript参考手册JavaScript参考手册</p>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. <div class="container">
  165. <span><i>&lt;/&gt;</i><h3>php入门精品课程</h3><i>&lt;/&gt;</i></span>
  166. <img src="static/images/span2.jpg" alt="">
  167. <div class="item">
  168. <img src="static/images/article-detail.jpg" alt="">
  169. <div>
  170. <span><span>初级</span>2018前端入门_HTML5</span>
  171. <span>18w次播放</span>
  172. </div>
  173. </div>
  174. <div class="item">
  175. <img src="static/images/article-detail.jpg" alt="">
  176. <div>
  177. <span><span>初级</span>2018前端入门_HTML5</span>
  178. <span>18w次播放</span>
  179. </div>
  180. </div>
  181. <div class="item">
  182. <img src="static/images/article-detail.jpg" alt="">
  183. <div>
  184. <span><span>初级</span>2018前端入门_HTML5</span>
  185. <span>18w次播放</span>
  186. </div>
  187. </div>
  188. <div class="item">
  189. <img src="static/images/article-detail.jpg" alt="">
  190. <div>
  191. <span><span>初级</span>2018前端入门_HTML5</span>
  192. <span>18w次播放</span>
  193. </div>
  194. </div>
  195. <div class="item">
  196. <img src="static/images/article-detail.jpg" alt="">
  197. <div>
  198. <span><span>初级</span>2018前端入门_HTML5</span>
  199. <span>18w次播放</span>
  200. </div>
  201. </div>
  202. <div class="item">
  203. <img src="static/images/article-detail.jpg" alt="">
  204. <div>
  205. <span><span>初级</span>2018前端入门_HTML5</span>
  206. <span>18w次播放</span>
  207. </div>
  208. </div>
  209. <div class="item">
  210. <img src="static/images/article-detail.jpg" alt="">
  211. <div>
  212. <span><span>初级</span>2018前端入门_HTML5</span>
  213. <span>18w次播放</span>
  214. </div>
  215. </div>
  216. <div class="item">
  217. <img src="static/images/article-detail.jpg" alt="">
  218. <div>
  219. <span><span>初级</span>2018前端入门_HTML5</span>
  220. <span>18w次播放</span>
  221. </div>
  222. </div>
  223. <div class="item">
  224. <img src="static/images/article-detail.jpg" alt="">
  225. <div>
  226. <span><span>初级</span>2018前端入门_HTML5</span>
  227. <span>18w次播放</span>
  228. </div>
  229. </div>
  230. <div class="item">
  231. <img src="static/images/article-detail.jpg" alt="">
  232. <div>
  233. <span><span>初级</span>2018前端入门_HTML5</span>
  234. <span>18w次播放</span>
  235. </div>
  236. </div>
  237. <div class="item">
  238. <img src="static/images/article-detail.jpg" alt="">
  239. <div>
  240. <span><span>初级</span>2018前端入门_HTML5</span>
  241. <span>18w次播放</span>
  242. </div>
  243. </div>
  244. <div class="item">
  245. <img src="static/images/article-detail.jpg" alt="">
  246. <div>
  247. <span><span>初级</span>2018前端入门_HTML5</span>
  248. <span>18w次播放</span>
  249. </div>
  250. </div>
  251. <div class="item">
  252. <img src="static/images/article-detail.jpg" alt="">
  253. <div>
  254. <span><span>初级</span>2018前端入门_HTML5</span>
  255. <span>18w次播放</span>
  256. </div>
  257. </div>
  258. </div>
  259. </main>
  260. <footer>
  261. <div class="content">
  262. <ul>
  263. <li><a href="">网站链接1</a></li>
  264. <li><a href="">网站链接2</a></li>
  265. <li><a href="">网站链接3</a></li>
  266. <li><a href="">网站链接4</a></li>
  267. <li><a href="">网站链接5</a></li>
  268. <li><a href="">网站链接6</a></li>
  269. <li><a href="">网站链接7</a></li>
  270. <li><a href="">网站链接8</a></li>
  271. <li><a href="">网站链接9</a></li>
  272. </ul>
  273. <p>php中文网:公益在线php培训,帮助PHP学习者快速成长!</p>
  274. <p>Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1 </p>
  275. <ul>
  276. <li><a href="">关于我们1</a></li>
  277. <li><a href="">关于我们1</a></li>
  278. <li><a href="">关于我们1</a></li>
  279. <li><a href="">关于我们1</a></li>
  280. </ul>
  281. <div class="logo-QR">
  282. <img src="static/images/种业圈.jpg" alt="">
  283. <img src="static/images/种业圈.jpg" alt="">
  284. </div>
  285. </div>
  286. </footer>
  287. </body>
  288. </html>

2.css代码部分:

  1. /*重置样式*/
  2. *{
  3. padding: 0;
  4. margin: 0;
  5. box-sizing: border-box;
  6. }
  7. a{
  8. text-decoration: none;
  9. }
  10. ul{
  11. list-style: none;
  12. }
  13. :root{
  14. font-size: 16px;
  15. }
  16. /*整体页面布局样式*/
  17. @import url("reset.css");
  18. body{
  19. background-color: #f3f5f7;
  20. }
  21. body > main{
  22. /* outline: 1px solid red; */
  23. width: 80vw;
  24. min-height: 50rem;
  25. margin: 0 auto;
  26. }
  27. /*导航条样式*/
  28. @import url("reset.css");
  29. header{
  30. background-color: #000;
  31. /* width: 100vw; */
  32. min-width: 1400px;
  33. height: 3.75rem;
  34. display: grid;
  35. grid-template-columns: 9rem 1fr 9rem;
  36. place-content:center space-between;
  37. grid-gap: 0.8rem;
  38. color:#969896;
  39. font-size: 1rem;
  40. }
  41. header > .logo{
  42. display: flex;
  43. justify-content: center;
  44. align-items: center;
  45. color:white;
  46. padding-left: 0.8rem;
  47. font-size: 1rem;
  48. font-weight: 400;
  49. }
  50. header > .logo > span:first-of-type{
  51. background-color: #fb4847;
  52. color:white;
  53. width: 3rem;
  54. height: 2rem;
  55. text-align: center;
  56. line-height: 2rem;
  57. font-size:1.2rem;
  58. font-weight: bolder;
  59. /* 通过设置背景圆角来绘制logo底色 */
  60. border-bottom-left-radius:20rem 12rem;
  61. border-bottom-right-radius:20rem 12rem ;
  62. border-top-left-radius:20rem 12rem ;
  63. border-top-right-radius:20rem 12rem ;
  64. margin-right: 0.2rem;
  65. }
  66. header > ul {
  67. display: flex;
  68. justify-content: flex-start;
  69. align-items: center;
  70. /* height: 3.75rem; */
  71. }
  72. header > ul > li > a:hover{
  73. /* background-color: rgba(255,255,255,.3); */
  74. border-bottom:0.3rem solid green;
  75. color:whitesmoke;
  76. }
  77. header > ul > li > a{
  78. display: inline-block;
  79. height: 3.75rem;
  80. width: 6rem;
  81. line-height: 3.75rem;
  82. text-align: center;
  83. color:#969896;
  84. }
  85. header > .user{
  86. font-size: 1rem;
  87. display: flex;
  88. justify-content: space-evenly;
  89. align-items: center;
  90. font-weight: bolder;
  91. }
  92. header > .user > span {
  93. height: 3.75rem;
  94. width: 20rem;
  95. line-height: 3.75rem;
  96. text-align: center;
  97. }
  98. header > .user > span:hover{
  99. background-color: rgba(255,255,255,.3);
  100. /* border-bottom: 2px solid green; */
  101. color:whitesmoke;
  102. }
  103. /*主题内容样式*/
  104. @import url("reset.css");
  105. main > .main-top {
  106. margin-top:1.2rem ;
  107. min-width: 78rem;
  108. height: 33rem;
  109. box-shadow: 0 0 10px lightslategrey;
  110. border-radius: 0.5rem;
  111. display: grid;
  112. grid-template-columns: 12rem minmax(66rem,1fr);
  113. }
  114. main > .main-top > ul{
  115. background-color: #2b333b;
  116. border-top-left-radius:0.5rem ;
  117. border-bottom-left-radius:0.5rem ;
  118. display: flex;
  119. flex-flow: column nowrap;
  120. justify-content: space-evenly;
  121. }
  122. main > .main-top > ul > li > a{
  123. display: flex;
  124. width: 12rem;
  125. height: 3.5rem;
  126. line-height:3.5rem;
  127. padding: 0 1rem;
  128. justify-content: space-between;
  129. font-size: 1.1rem;
  130. color:lightslategray;
  131. }
  132. main > .main-top > ul > li > a:hover{
  133. background-color: rgba(255,255,255,.3);
  134. color: white;
  135. }
  136. main > .main-top > div >ul{
  137. display: flex;
  138. /* flex-flow: row nowrap; */
  139. /* background-color: #fff; */
  140. /* width:60rem ; */
  141. }
  142. main >.main-top > div > ul{
  143. display: flex;
  144. justify-content: space-around;
  145. height: 3.5rem;
  146. align-items: center;
  147. }
  148. main >.main-top > div > img{
  149. width:66rem;
  150. }
  151. main >.main-top > div > div {
  152. padding-top:0.5rem ;
  153. display: flex;
  154. justify-content: space-around;
  155. }
  156. main >.main-top > div > div > a >img{
  157. width: 16rem;
  158. border-radius: 1rem;
  159. }
  160. /* 文章列表区 */
  161. main > .articles-list {
  162. margin-top: 1.5rem;
  163. min-width: 78rem;
  164. height: 24rem;
  165. display: grid;
  166. grid-template-columns: 19rem 40rem 17rem;
  167. /* box-shadow: 0 0 10px lightslategrey;
  168. border-radius: 0.5rem; */
  169. grid-gap: 1rem;
  170. margin-bottom: 1.5rem;
  171. }
  172. main > .articles-list >div:first-of-type{
  173. box-shadow: 0 0 10px lightslategrey;
  174. border-radius: 0.5rem;
  175. }
  176. main > .articles-list >div:first-of-type > h4{
  177. height: 2.5rem;
  178. /* background-color: red; */
  179. line-height: 2.5rem;
  180. margin: 0 1rem;
  181. padding-left:1rem ;
  182. border-bottom: 1px solid #969896;
  183. }
  184. main > .articles-list >div:first-of-type > ul{
  185. height: 21.5rem;
  186. display: flex;
  187. flex-flow: column nowrap;
  188. justify-content: space-evenly;
  189. padding-left:1rem ;
  190. }
  191. main > .articles-list >div:first-of-type > ul a {
  192. color:#778899;
  193. }
  194. main > .articles-list > div:nth-of-type(2){
  195. box-shadow: 0 0 10px lightslategrey;
  196. border-radius: 0.5rem;
  197. }
  198. main > .articles-list > div:nth-of-type(2) > div{
  199. display: grid;
  200. height: 21.5rem;
  201. grid-template-columns: repeat(3,13rem);
  202. grid-template-rows:repeat(2,10rem);
  203. place-content:center center;
  204. place-items: center center;
  205. }
  206. main > .articles-list > div:nth-of-type(2) > div > div{
  207. width: 12rem;
  208. /* background-color: red; */
  209. space-self:center center;
  210. padding-top: 1rem;
  211. /* position: relative; */
  212. }
  213. main > .articles-list > div:nth-of-type(2) > div > div > div > * {
  214. display: inline;
  215. /* background-color: lightblue; */
  216. font-size: 0.8rem;
  217. }
  218. main > .articles-list > div:nth-of-type(2) > div > div > div {
  219. height: 4rem;
  220. padding: 0.2rem;
  221. background-color: #fff;
  222. border-radius: 0.5rem;
  223. position: relative;
  224. top:-1.5rem;
  225. /* line-height: 4rem; */
  226. }
  227. main > .articles-list > div:nth-of-type(2) > div > div > div> span{
  228. background-color: #708090;
  229. /* width: 6rem; */
  230. padding: 0 0.2rem;
  231. border-radius: 0.5rem;
  232. }
  233. main > .articles-list >div:nth-of-type(2) > h4{
  234. height: 2.5rem;
  235. /* background-color: red; */
  236. line-height: 2.5rem;
  237. margin: 0 1rem;
  238. padding-left:1rem ;
  239. border-bottom: 1px solid #969896;
  240. }
  241. main > .articles-list > div:nth-of-type(2) img{
  242. width: 12rem;
  243. height: 6rem;
  244. display: block;
  245. border-radius: 0.5rem;
  246. }
  247. main > .articles-list > div:last-of-type{
  248. box-shadow: 0 0 10px lightslategrey;
  249. border-radius: 0.5rem;
  250. }
  251. main > .articles-list > div:last-of-type > div:first-child {
  252. line-height: 2.5rem;
  253. margin: 0 1rem;
  254. padding:0 1rem ;
  255. border-bottom: 1px solid #969896;
  256. }
  257. main > .articles-list >div:last-of-type > div:last-of-type{
  258. height: 21.5rem;
  259. display: flex;
  260. flex-flow: column nowrap;
  261. justify-content: space-evenly;
  262. padding-left:1rem ;
  263. }
  264. main > .articles-list > div:last-of-type img {
  265. width: 3rem;
  266. }
  267. main > .articles-list > div:last-of-type >div:first-of-type{
  268. display: flex;
  269. justify-content: space-between;
  270. }
  271. main > .articles-list > div:last-of-type >div:last-of-type > div{
  272. display: flex;
  273. }
  274. main > .articles-list > div:last-of-type >div:last-of-type > div > p{
  275. margin-left: 1rem;
  276. }
  277. /* 精品课程css 布局 */
  278. main > .container {
  279. min-width:78rem;
  280. display: grid;
  281. grid-template-columns: repeat(5,14rem);
  282. grid-template-rows: 4rem repeat(3,10rem);
  283. grid-gap: 0.5rem;
  284. box-shadow: 0 0 10px lightslategrey;
  285. border-radius: 0.5rem;
  286. margin-bottom: 2rem;
  287. place-content: space-evenly space-evenly;
  288. place-items: center center;
  289. padding-bottom: 1rem;
  290. }
  291. main > .container > span {
  292. grid-area: span 1 / span 5;
  293. width: 14rem;
  294. display: flex;
  295. justify-content: center;
  296. align-items: center;
  297. }
  298. main > .container > img{
  299. grid-area: 2 / 1 / 4 / 2;
  300. width: 13rem;
  301. height: 20rem;
  302. border-radius: 0.5rem;
  303. box-shadow: 0 0 10px lightslategrey;
  304. }
  305. main > .container > .item {
  306. position: relative;
  307. box-shadow: 0 0 10px lightslategrey;
  308. border-radius: 0.5rem;
  309. }
  310. main > .container > .item > img{
  311. width: 13rem;
  312. height: 9rem;
  313. border-radius: 0.5rem;
  314. }
  315. main > .container > .item > div {
  316. width: 13rem;
  317. background-color: #fff;
  318. display: flex;
  319. flex-flow: column nowrap;
  320. justify-content: space-between;
  321. padding: 0.4rem 0.2rem 0.2rem;
  322. font-size: 0.9rem;
  323. border-radius: 0.5rem;
  324. /* z-index: 10; */
  325. position: absolute;
  326. bottom:0;
  327. height: 3rem;
  328. }
  329. main > .container > .item > div:hover{
  330. height: 5rem;
  331. }
  332. main > .container > .item > div > span > span{
  333. background-color: #969896;
  334. color: white;
  335. font-style: none;
  336. margin-left: 0.4rem;
  337. margin-right: 0.4rem;
  338. }
  339. main > .container > .item > div > span:last-child{
  340. font-size: 0.6rem;
  341. color:#D3D3D3;
  342. }

3.代码运行结果图:

批改状态:未批改

老师批语:

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • CSS3在制作时采用层叠样式表技术,可以有效地对面的、字体、颜色、背景和其它效果现更加精确的控制,利用css3,可以做出更丰富多彩的画面,如动画的效果,过渡的效果等等。