简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >仿php中文网演练

仿php中文网演练

Blackeye
Blackeye原创
2022年03月28日 14:52:33429浏览

show1

  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.     <title>仿php中文网</title>
  8.     <link rel="stylesheet" href="static/css/reset.css">
  9.     <link rel="stylesheet" href="static/css/hw.css">
  10. </head>
  11. <body>
  12.     <!-- 头部 -->
  13.     <div class="top">
  14.         <div class="content">
  15.             <div class="top-left top-left-icon"></div>
  16.             <div class="top-right">
  17.                 <div class="top-right-icon"></div>
  18.                 <img src="static/image/user.jpeg" alt="user img">
  19.             </div>
  20.         </div>
  21.     </div>
  22.     <!-- 导航栏 -->
  23.     <div class="nav">
  24.         <div class="content">
  25.             <div class="logo"></div>
  26.             <div class="nav-list">
  27.                 <nav>
  28.                     <a href="">首页</a>
  29.                     <a href="">视频教程</a>
  30.                     <a href="">学习路径</a>
  31.                     <a href="">php培训</a>
  32.                     <a href="">资源下载</a>
  33.                     <a href="">技术文章</a>
  34.                     <a href="">社区</a>
  35.                 </nav>
  36.             </div>
  37.             <div class="search">
  38.                 <input type="text" placeholder="输入关键词搜索">
  39.                 <input type="submit" class="inputSearch">
  40.             </div>
  41.         </div>
  42.     </div>
  43.     <!-- 主体 -->
  44.     <main>
  45.         <div class="first-row">
  46.             <div class="mainContent">
  47.                 <!-- 1 -->
  48.                 <div class="class-list">
  49.                     <a href="">php开发</a>
  50.                     <a href="">大前端</a>
  51.                     <a href="">后端开发</a>
  52.                     <a href="">数据库</a>
  53.                     <a href="">移动端</a>
  54.                     <a href="">运维开发</a>
  55.                     <a href="">UI设计</a>
  56.                     <a href="">计算机基础</a>
  57.                 </div>
  58.                 <!-- 2 -->
  59.                 <div class="banner">
  60.                     <a href="">
  61.                         <img src="static/image/slider.jpeg" alt="" />
  62.                     </a>
  63.                 </div>
  64.                 <!-- 3 -->
  65.                 <div class="notice">
  66.                     <div class="noticeTop">
  67.                         <div class="userinfo">
  68.                             <div class="userinfo-left">
  69.                                 <img src="static/image/user.jpeg" alt="">
  70.                             </div>
  71.                             <div class="userinfo-right">
  72.                                 <div>Blackeye</div>
  73.                                 <div>P豆 &nbsp; 9999</div>
  74.                             </div>
  75.                         </div>
  76.                         <div class="myinfo">
  77.                             <button>我的学习</button>
  78.                         </div>
  79.                     </div>
  80.                     <div class="noticeButtom">
  81.                         <div><span>问答社区</span><a href="#" class="notice-first">答疑</a></div>
  82.                         <div>
  83.                             <span>头条</span>
  84.                             <div class="roll">
  85.                                 <div class="animation">
  86.                                     <a href="/toutiao-490267.html" target="_blank">“程序员做饭指南”，GitHub热榜第一！</a>
  87.                                     <a href="/toutiao-490161.html" target="_blank">首个采用中文编写的操作系统出现了！</a>
  88.                                     <a href="/toutiao-489943.html" target="_blank">Web3现状如何？能否在政策助推下复刻互联网辉煌？</a>
  89.                                     <a href="/toutiao-489887.html" target="_blank">JetBrains和Gitlab均表明暂停在俄罗斯的业务，国内网友对此有何看法？</a>
  90.                                     <a href="/toutiao-489859.html" target="_blank">美国Figma封停大疆等被制裁中国公司账号，国内就没替代了？</a>
  91.                                     <a href="/toutiao-489822.html" target="_blank">程序员有多好？阿姨懂！</a>
  92.                                 </div>
  93.                             </div>
  94.                         </div>
  95.                         <div><span>新课</span><a href="" class="asite">3.9号公益直播课</a></div>
  96.                         <div><span>新班</span><a href="" class="asite">19期PHP直播班</a></div>
  97.                         <div><span>招募</span><a href="" class="asite">课程合作计划</a></div>
  98.                         <div><span>公告</span><a href="" class="asite">APP上线啦</a></div>
  99.                     </div>
  100.                 </div>
  101.                 <!-- 4 -->
  102.                 <div class="pathWay">
  103.                     <div class="pathWay-left">
  104.                         <div>学习路径</div>
  105.                         <div>全部7个&gt;</div>
  106.                     </div>
  107.                     <div class="pathWay-right">
  108.                         <div><a href=""><img src="static/image/dgjj.png" alt=""><span>独孤九剑<br><p>9门课程</p></span></a></div>
  109.                         <div><a href=""><img src="static/image/dgjj.png" alt=""><span>独孤九剑<br><p>9门课程</p></span></a></div>
  110.                         <div><a href=""><img src="static/image/dgjj.png" alt=""><span>独孤九剑<br><p>9门课程</p></span></a></div>
  111.                         <div><a href=""><img src="static/image/dgjj.png" alt=""><span>独孤九剑<br><p>9门课程</p></span></a></div>
  112.                         <div><a href=""><img src="static/image/dgjj.png" alt=""><span>独孤九剑<br><p>9门课程</p></span></a></div>
  113.                     </div>
  114.                 </div>
  115.                 <!-- 5 -->
  116.                 <div class="social">
  117.                     <div class="WX-div">
  118.                         <div class="WX"></div>
  119.                         <a href="">官方公众号</a>
  120.                     </div>
  121.                     <div class="QQ-div">
  122.                         <div class="QQ"></div>
  123.                         <a href="">官方QQ群</a>
  124.                     </div>
  125.                 </div>
  126.             </div>
  127.         </div>
  129.         <div class="mainContent"></div>
  130.         <div class="mainContent"></div>
  131.         <div class="mainContent"></div>
  132.         <div class="mainContent"></div>
  133.     </main>
  134. </body>
  135. </html>
  1. /* 统一居中样式 */
  2. .content {
  3.   width: 1200px;
  4.   display: grid;
  5.   margin: auto;
  6. }
  8. /* 顶部细节 */
  9. .top {
  10.   width: 100vw;
  11.   background-color: #343434;
  12. }
  14. /* 顶部grid样式 */
  15. .top .content {
  16.   height: 40px;
  17.   grid-template-columns: 230px 75px;
  18.   grid-auto-flow: 40px;
  19.   place-content: space-between;
  20. }
  21. /* 顶部左侧精灵图 */
  22. .top-left-icon {
  23.   width: 230px;
  24.   height: 16px;
  25.   background: url(../image/sprite.png) no-repeat 0px 0px;
  26.   margin: 13px 0px 0px 0px;
  27. }
  29. /* 顶部右边子grid */
  30. .top-right {
  31.   display: grid;
  32.   grid-template-columns: 15px 30px;
  33.   place-content: space-between;
  34. }
  36. /* 顶部右侧精灵图 */
  37. .top-right-icon {
  38.   width: 13px;
  39.   height: 14px;
  40.   background: url(../image/sprite.png) no-repeat 0px -105px;
  41.   margin: 17px 0px 0px 0px;
  42. }
  44. /* 顶部image位置 */
  45. .top-right img {
  46.   width: 25px;
  47.   height: 25px;
  48.   border-radius: 50%;
  49.   margin-top: 7px;
  50.   border: 1px solid #343434;
  51.   margin-left: 30px;
  52. }
  54. /* 设置导航条默认属性 */
  55. .nav {
  56.   width: 100vw;
  57.   background-color: #fff;
  58. }
  60. /* 设置导航条grid样式 */
  61. .nav .content {
  62.   height: 90px;
  63.   grid-template-columns: 140px 825px 200px;
  64.   grid-auto-flow: 90px;
  65.   place-content: center;
  66.   gap: 0px 40px;
  67. }
  69. /* php中文网logo */
  70. .nav .content .logo {
  71.   place-items: center;
  72.   width: 140px;
  73.   height: 34px;
  74.   background: url(../image/logo.png) no-repeat;
  75. }
  77. /* 设置导航条位置 */
  78. .nav .content .nav-list nav {
  79.   margin-top: 13px;
  80. }
  82. /* 设置导航条文字大小 */
  83. .nav .content .nav-list nav a {
  84.   margin-right: 10px;
  85.   font-size: 16px;
  86.   /* font-weight: bold; */
  87. }
  89. /* 设置导航条文字间距及字号 */
  90. .nav .content .nav-list nav a {
  91.     padding: 5px;
  92.   margin-right: 10px;
  93.   font-size: 16px;
  94.   /* font-weight: bold; */
  95. }
  97. /* 设置首页和悬浮效果 */
  98. .nav .content .nav-list nav a:first-of-type,
  99. .nav .content .nav-list nav a:hover {
  100.   font-weight: bold;
  101.   color: red;
  102. }
  104. /* 设置搜索框位置 */
  105. .nav .content .search {
  106.   margin-top: 10px;
  107. }
  109. /* 设置搜索框大小 */
  110. .nav .content .search input {
  111.   width: 175px;
  112.   height: 36px;
  113.   border: none;
  114.   outline: none;
  115.   border-radius: 20px;
  116.   background-color: #f7f8fa;
  117.   color: #999;
  118.   font-size: 12px;
  119.   padding-left: 20px;
  120. }
  122. /* 设置搜索图标 */
  123. .nav .content .search .inputSearch {
  124.   width: 17px;
  125.   height: 17px;
  126.   border: none;
  127.   background: url(../image/sprite.png) no-repeat -45px -25px;
  128.   position: relative;
  129.   left: -40px;
  130. }
  132. /* 设置搜索图标悬浮样式 */
  133. .nav .content .search .inputSearch:hover {
  134.   cursor: pointer;
  135.   background: url(../image/sprite.png) no-repeat -70px -25px;
  136. }
  138. /* 设置主题框字号 */
  139. main {
  140.   font-size: 14px;
  141. }
  143. /* 设置主内容区grid */
  144. main .first-row .mainContent {
  145.   display: grid;
  146.   grid-template-columns: 160px 810px 190px;
  147.   grid-template-rows: 400px 80px;
  148.   gap: 20px;
  149.   place-content: center;
  150.   margin: 30px 0;
  151. }
  153. /* 设置填充背景 */
  154. main .first-row > .mainContent > * {
  155.   background-color: #fff;
  156.   border-radius: 20px;
  157. }
  159. /* 设置左侧导航栏grid */
  160. main .first-row .mainContent .class-list {
  161.   display: grid;
  162.   place-items: center;
  163.   padding: 20px 0;
  164. }
  166. /* 设置左侧导航栏内边距 */
  167. main .first-row .mainContent .class-list a {
  168.   padding: 10px 20px;
  169.   border-radius: 20px;
  170. }
  172. /* 设置左侧导航栏悬浮状态 */
  173. main .first-row .mainContent .class-list a:hover {
  174.   color: red;
  175.   background-color: rgb(250, 223, 227);
  176. }
  178. /* 设置图片圆角 */
  179. main .first-row .mainContent .banner img {
  180.   border-radius: 20px;
  181. }
  183. /* 设置左下跨行 */
  184. main .first-row .mainContent .pathWay {
  185.   grid-column: 1 / span 2;
  186. }
  188. /* 设置右下grid */
  189. main .first-row .mainContent .social {
  190.   display: grid;
  191.   grid-template-columns: 60px 60px;
  192.   place-content: space-around;
  193.   font-size: 12px;
  194.   font-weight: bold;
  195. }
  197. /* 设置微信图标 */
  198. main .first-row .mainContent .social .WX {
  199.   width: 30px;
  200.   height: 30px;
  201.   background: url(../image/sprite.png) no-repeat -40px -60px;
  202.   margin: auto;
  203. }
  205. /* 设置QQ图标 */
  206. main .first-row .mainContent .social .QQ {
  207.   width: 30px;
  208.   height: 30px;
  209.   background: url(../image/sprite.png) no-repeat 0px -60px;
  210.   margin: auto;
  211. }
  213. /* 设置悬浮鼠标状态 */
  214. main .first-row .mainContent .social div:hover {
  215.   cursor: pointer;
  216. }
  218. /* 设置右下悬浮状态 */
  219. main .first-row .mainContent .social .WX-div > a:hover,
  220. main .first-row .mainContent .social .QQ-div > a:hover {
  221.   color: red;
  222. }
  224. /* 右侧gird布局 */
  225. main .first-row .mainContent .notice {
  226.   display: grid;
  227.   grid-template-rows: 140px 240px;
  228.   place-content: space-around;
  229.   /* grid-auto-flow: column; */
  230. }
  232. /* 右侧上半段grid布局 */
  233. main .first-row .mainContent .notice .noticeTop {
  234.   display: grid;
  235.   grid-template-rows: 60px 34px;
  236. }
  238. /* 右侧上半段边界 */
  239. .notice .noticeTop {
  240.   border-bottom: 1px solid #eee;
  241. }
  244. .notice .noticeTop .userinfo {
  245.   display: grid;
  246.   grid-template-columns: 40px 44px;
  247. }
  249. .notice .noticeTop .userinfo .userinfo-left img {
  250.   width: 40px;
  251.   height: 40px;
  252.   border-radius: 100px;
  253.   margin-top: 20px;
  254. }
  256. .notice .noticeTop .userinfo .userinfo-right {
  257.   margin-left: 20px;
  258.   width: 105px;
  259. }
  261. .notice .noticeTop .userinfo .userinfo-right div:first-of-type {
  262.   margin: 20px 0 0 0;
  263.   font-weight: bold;
  264. }
  266. .notice .noticeTop .userinfo .userinfo-right div:first-of-type:hover {
  267.   cursor: pointer;
  268.   color: red;
  269. }
  271. .notice .noticeTop .userinfo .userinfo-right div:last-of-type {
  272.   height: 16px;
  273.   overflow: hidden;
  274.   font-size: 12px;
  275.   color: #999;
  276.   margin-top: 8px;
  277. }
  279. .notice .noticeTop .myinfo button {
  280.   width: 150px;
  281.   height: 34px;
  282.   background: #f11717;
  283.   border-radius: 100px;
  284.   color: white;
  285.   margin-top: 20px;
  286.   outline: none;
  287.   border: none;
  288. }
  290. .notice .noticeTop .myinfo button:hover{
  291.     cursor: pointer;
  292.     background-color: rgb(255,31,31,0.75);
  293. }
  295. main .first-row .mainContent .notice .noticeButtom {
  296.   display: grid;
  297.   grid-template-rows: 18px 41px 18px 18px 18px 18px;
  298.   padding: 10px 0;
  299.   place-content: space-evenly;
  300. }
  302. main .first-row .mainContent .notice .noticeButtom div span {
  303.   color: #333;
  304. }
  306. /* 右侧答疑 */
  307. .notice .noticeButtom .notice-first {
  308.   display: inline-block;
  309.   width: 31px;
  310.   height: 16px;
  311.   background: #ff583d;
  312.   border-radius: 2px;
  313.   font-size: 12px;
  314.   color: #fff;
  315.   line-height: 16px;
  316.   text-align: center;
  317.   margin-left: 20px;
  318. }
  320. /* 轮播图初始化 */
  321. .notice .noticeButtom .roll {
  322.   width: 100px;
  323.   height: 41px;
  324.   margin-left: 50px;
  325.   overflow: hidden;
  326.   position: relative;
  327.   margin-top: -20px;
  328. }
  330. /* 右侧a标签 */
  331. .notice .noticeButtom .roll a {
  332.   color: #b6b6b6;
  333. }
  335. /* 右侧a标签 */
  336. .notice .noticeButtom .asite {
  337.   color: #b6b6b6;
  338.   margin-left: 20px;
  339. }
  341. /* 轮播图 */
  342. @keyframes anis {
  343.   100% {
  344.     transform: translateY(-200px);
  345.   }
  346. }
  348. img {
  349.   position: absolute;
  350. }
  351. .animation {
  352.   animation: anis 10s linear infinite;
  353. }
  355. .animation:hover {
  356.   animation-play-state: paused;
  357. }
  359. .pathWay{
  360.     display: grid;
  361.     grid-template-columns: 100px 870px;
  362. }
  364. .pathWay{
  365.     gap: 20px;
  366. }
  368. .pathWay-left{
  369.     place-self: center;
  370. }
  372. .pathWay-left div:last-of-type{
  373.     font-size: 12px;
  374.     color: #999;
  375.     margin-top: 5px;
  376. }
  378. .pathWay-right{
  379.     display: grid;
  380.     grid-template-columns: repeat(5, 1fr);
  381.     margin-top: 20px;
  382. }
  384. .pathWay-right img{
  385.     width: 36px;
  386.     height: 36px;
  387.     border-radius: 2px;
  388. }
  390. .pathWay-right span{
  391.     margin-left: 45px;
  393. }
  394. .pathWay-right span>*{
  395.     margin-left: 45px;
  397. }
上一条：什么？Android上面跑Linux？下一条：ModStartCMS模块化建站系统 v3.6.0 内容标签增强，电脑手机适配
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多