Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿php中文网
Blogger Information
Blog 20
fans 0
comment 0
visits 11022
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
仿php中文网
喜
Original
566 people have browsed it

1. 效果图

1.1

1.2

2.代码

  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 rel="stylesheet" href="./1.css">
  8.     <title>仿php中文网</title>
  9. </head>
  10. <body>
  11.     <div class="top">
  12.         <div class="w">
  13.             <span></span>
  14.             <div class="toux">
  15.                 <a href="#"></a>
  16.                 <a href="#">
  17.                     <img src="./626ab52564749608.jpg" alt="">
  18.                 </a>
  19.             </div>
  20.         </div>
  22.     </div>
  24.     <div class="nav">
  25.         <div class="w">
  26.             <div class="logo">
  27.                 <a href="#"></a>
  28.             </div>
  30.             <div class="middle">
  31.                 <a href="#" class="active">首页</a>
  32.                 <a href="#">视频教程
  33.                     <i></i>
  34.                 </a>
  35.                 <a href="#">学习路径
  36.                     <i></i>
  37.                 </a>
  38.                 <a href="#">PHP培训
  39.                     <div class="actividy">活动</div>
  40.                 </a>
  41.                 <a href="#">资源下载
  42.                     <i></i>
  43.                 </a>
  44.                 <a href="#">技术文章
  45.                     <i></i>
  46.                 </a>
  47.                 <a href="#">社区
  48.                     <i></i>
  49.                 </a>
  50.                 <a href="#">APP下载</a>
  51.                 <a href="#"></a>
  52.             </div>
  54.             <div class="search">
  55.                 <input type="search" placeholder="输入关键词搜索">
  56.         <i></i>
  57.             </div>
  58.         </div>
  59.     </div>
  61.     <div class="main w">
  62.     <ul>
  63.         <li><a href="#">php开发</a></li>
  64.         <li><a href="#">大前端</a></li>
  65.         <li><a href="#">后端开发</a></li>
  66.         <li><a href="#">数据库</a></li>
  67.         <li><a href="#">移动端</a></li>
  68.         <li><a href="#">运维开发</a></li>
  69.         <li><a href="#">UI设计</a></li>
  70.         <li><a href="#">计算机基础</a></li>
  71.     </ul>
  72.     <div class="img">
  73.       <a href="#">  <img src="./1.jpg" alt=""></a>
  74.     </div>
  76.     <div class="mainright">
  77.         <div class="righttop">
  78.             <div class="img"><a href="#">
  79.                 <img src="./626ab52564749608.jpg" alt="">
  80.             </a></div>
  81.             <div class="user">
  82.                 <span>喜</span>
  83.                 <p>P豆 52</p>
  84.             </div>
  85.             <button>我的学习</button>
  86.         </div>
  88.             <ul class="mainbottom">
  89.                 <li>
  90.                     <span>问答社区</span>
  91.                     <a href="#">答疑</a>
  92.                 </li>
  93.                 <li>
  94.                     <span>
  95.                         头条
  96.                     </span>
  97.                     <a href="#">2022年 Vue 的发展情况报告</a>
  98.                 </li>
  99.                 <li>
  100.                     <span>福利</span>
  101.                     <a href="#">限时折扣>></a>
  102.                 </li>
  103.                 <li>
  104.                     <span>新班</span>
  105.                     <a href="#">20期PHP线上班</a>
  106.                 </li>
  107.                 <li>
  108.                     <span>招募</span>
  109.                     <a href="#">课程合作计划</a>
  110.                 </li>
  111.                 <li>
  112.                     <span>公告</span>
  113.                     <a href="#">APP上线啦</a>
  114.                 </li>
  115.             </ul>
  117.     </div>
  118.     </div>
  120.     <div class="route w">
  121.         <div class="routeleft">
  122.             <div class="rleft">
  123.                 <p>学习路径</p>
  124.             <span>全部7个 ></span>
  125.             </div>
  127.             <ul>
  128.                 <li><a href="#" class="prve">
  129.                 </a></li>
  130.                 <li><a href="#" class="content">
  131.                     <div class="img">
  132.                         <img src="./1.png" alt="">
  133.                     </div>
  134.                   <div class="kec">
  135.                     <p>独孤九剑</p>
  136.                     <span>9门课程</span>
  137.                   </div>
  138.                 </a></li>
  139.                 <li><a href="#" class="content">
  140.                     <div class="img">
  141.                         <img src="./2.png" alt="">
  142.                     </div>
  143.                   <div class="kec">
  144.                     <p>玉女心经</p>
  145.                     <span>5门课程</span>
  146.                   </div>
  147.                 </a></li>
  148.                 <li><a href="#" class="content">
  149.                     <div class="img">
  150.                         <img src="./3.png" alt="">
  151.                     </div>
  152.                   <div class="kec">
  153.                     <p>天龙八部</p>
  154.                     <span>3门课程</span>
  155.                   </div>
  156.                 </a></li>
  157.                 <li><a href="#" class="content">
  158.                     <div class="img">
  159.                         <img src="./4.png" alt="">
  160.                     </div>
  161.                   <div class="kec">
  162.                     <p>自学指南</p>
  163.                     <span>19门课程</span>
  164.                   </div>
  165.                 </a></li>
  166.                 <li><a href="#" class="content">
  167.                     <div class="img">
  168.                         <img src="./5.png" alt="">
  169.                     </div>
  170.                   <div class="kec">
  171.                     <p>趣味通关</p>
  172.                     <span>22门课程</span>
  173.                   </div>
  174.                 </a></li>
  175.                 <li><a href="#" class="next"></a></li>
  176.             </ul>
  177.         </div>
  179.         <div class="routeright">
  180.             <a href="#" class="wx">
  181.                 官方公众号</a>
  182.             <a href="#" class="qq">
  183.                 官方QQ群</a>
  184.         </div>
  185.     </div>
  187.     <div class="zbo w">
  188.         <h3>直播课</h3>
  189.         <button>更多 ></button>
  190.     </div>
  192.     <ul class="xiao w">
  193.         <li>
  194.          <div class="img">
  195.             <a href="#"><img src="./11.jpg" alt=""></a>
  196.         <p class="dw">公益直播</p> 
  197.         </div>  
  198.          <h3>
  199.             <a href="#">公益直播：PHP入门到实战--实现邮箱验证（队列发送邮件）</a>
  200.          </h3> 
  201.          <p><span class="one">精彩回放</span><span class="two"><i>11291</i>人感兴趣</span></p>
  202.         </li>
  203.         <li>
  204.             <div class="img">
  205.                <a href="#"><img src="./12.jpg" alt=""></a>
  206.            <p class="dw">直播班</p> 
  207.            </div>  
  208.             <h3>
  209.                <a href="#">第二期_大前端线上班</a>
  210.             </h3> 
  211.             <p><span class="one">精彩回放</span><span class="two"><i>8948</i>人感兴趣</span></p>
  212.            </li>
  213.            <li>
  214.             <div class="img">
  215.                <a href="#"><img src="./13.png" alt=""></a>
  216.            <p class="dw">直播班</p> 
  217.            </div>  
  218.             <h3>
  219.                <a href="#">第二十期_前端开发</a>
  220.             </h3> 
  221.             <p><span class="one active">即将上课</span><span class="two"><i>3483</i>人感兴趣</span></p>
  222.            </li>
  224.            <li class="gyzb">
  225. <div class="gy">
  227. <div class="gycontent">
  228.     <span></span>
  229.     <a href="#" class="first">公益直播：2022大前端凭啥拿高薪？</a>
  230.     <a href="#" class="last">04月20日（周3）19:30</a>
  231. </div>
  233. <div class="gycontent">
  234.     <span></span>
  235.     <a href="#" class="first">公益直播：2022，PHP 王者归来！</a>
  236.     <a href="#" class="last">02月24日（周4）20:00</a>
  237. </div>
  238. <div class="gycontent">
  239.     <span></span>
  240.     <a href="#" class="first">公益直播 | 基于TP6的门店排号系统</a>
  241.     <a href="#" class="last">11月24日（周3）19:45</a>
  242. </div>
  244. </div>
  245.            </li>
  247.     </ul>
  248. </body>
  249. </html>

css

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6. a{
  7.     text-decoration: none;
  8.     color: #333;
  9. }
  10. li{
  11.     list-style: none;
  12. }
  13. i{
  14.     font-style: normal;
  15. }
  16. body{
  17.     background-color: #f3f5f7;
  18.     font-size: 14px;
  19. }
  20. img{
  21.     width: 100%;
  22. }
  23. .w{
  24.     width: 1200px;
  25.     margin: 0 auto;
  26. }
  27. .top{
  28.     width: 100%;
  29.     height: 40px;
  30.     background: #343434;
  31. }
  32. .top .w{
  33.     height: 100%;
  34.     display: flex;
  35.     justify-content: space-between;
  36.     place-items: center;
  37. }
  38. .top .w>span{
  39.     width: 230px;
  40.     height: 16px;
  41. background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat 0px 0px;
  42. }
  43. .top .toux {
  44.     display: flex;
  45.     justify-content: space-between;
  46.     place-items: center;
  47.     width: 74px;
  48.     height: 100%;
  49. }
  50. .top .toux a:first-of-type{
  51.     width: 13px;
  52.     height: 14px;
  53.     background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat 0px -105px;
  54. }
  55. .top .toux a:last-of-type{
  56.     position: relative;
  57. }
  58. .top .toux a img{
  60.     width: 27px;
  61.     height: 27px;
  62.     border: 1px solid #343434;
  63.     border-radius: 100px;
  64. }
  65. .top .toux a img:hover{
  66.     border: 1px solid red;
  67. }
  68. .top .toux a::after{
  69.     content: '';
  70.     display: block;
  71. position: absolute;
  72. right: -2px;
  73. bottom: 4px;
  74. width: 12px;
  75. height: 11px;
  76. background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -150px -105px;
  77. }
  79. .nav{
  80.     width: 100%;
  81.     background: #ffffff;
  82.     box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 4%);
  83. }
  84. .nav>.w{
  85.     height: 90px;
  86.     display: grid;
  87.     grid-template-columns: 140px 1fr 200px;
  88. }
  89. .nav .logo{
  90.     place-self: center;
  91. }
  92. .nav .logo a{
  93.     display: block;
  94.     width: 140px;
  95.     height: 34px;
  96.     background: -webkit-image-set(url(https://www.php.cn//static/images/new/logo.png) 1x, url(https://www.php.cn//static/images/new/logo-2x.png) 2x) no-repeat;
  98. }
  99. .nav .middle {
  100.     display: flex;
  101.     justify-content: space-evenly;
  102.     place-items: center;
  103.     font-size: 16px;
  104. }
  105. .nav .middle a{
  106.     display: flex;
  107.     position: relative;
  108.     place-items: center;
  109. }
  110. .nav .middle i{
  111.     display: inline-block;
  112.     width: 9px;
  113.     height: 5px;
  114.    margin-left: 5px;
  115.     background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -245px 0px;
  116. }
  117. .nav .middle a:nth-of-type(8){
  118.     color: #F11716;
  119. }
  120. .nav .middle a:nth-of-type(8)::before{
  121.     content: '';
  122.     display: block;
  123.     width: 12px;
  124.     height: 18px;
  125.     margin-right: 5px;
  126.     background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat 0px -25px;
  127. }
  128. .nav .middle .active{
  129.     color: #F11716;
  130.     font-weight: bold;
  131. }
  133. .nav .middle a:not(:nth-last-of-type(-n+2)):hover{
  134.     color: #F11716;
  135.     font-weight: bold;
  136. }
  137. .nav .middle a:last-of-type{
  138.     width: 16px;
  139.     height: 4px;
  140.     background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -20px -35px;
  141. }
  142. .nav .middle a:nth-of-type(5){
  143.     padding-left: 10px;
  144. }
  145. .nav .middle a .actividy{
  146.     padding: 0 5px;
  147.     height: 15px;
  148.     line-height: 15px;
  149.     background: #fd5050;
  150.     border-radius: 8px;
  151.     color: #FFFFFF;
  152.     position: absolute;
  153.     top: -6px;
  154.     right: -34px;
  155.     font-size: 12px;
  156. }
  157. .nav .w .search{
  158.     position: relative;
  159. place-self: center;
  160. }
  161. .nav .w .search input{
  162.     width: 200px;
  163.     height: 36px;
  164.     border-radius: 100px;
  165.     background: #f7f8fa;
  166.     border: none;
  167.     outline: none;
  168.     padding-left: 20px;
  169.     font-size: 12px;
  170. }
  171. .nav .w .search input::placeholder{
  172.     color: rgb(153, 153, 153);
  173. }
  174. .nav .w .search i{
  175.     position: absolute;
  176.     display: block;
  177.     width: 19px;
  178.     height: 17px;
  179.     bottom: 28%;
  180.     right: 15px;
  181.     border: none;
  182.     background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -45px -25px;
  183. }
  184. .nav .w .search:hover i{
  185.     background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -70px -25px;
  186. }
  187. input[type=search]::-webkit-search-cancel-button{
  188.     -webkit-appearance: none;
  189. }
  191. .main{
  192.     display: grid;
  193.     grid-template-columns: 160px 810px 190px;
  194.     gap:  0 18px ;
  195.     margin-top: 30px;
  196.     height: 400px;
  197. }
  198. .main>ul{
  199.     display: grid;
  200.     grid-template-rows: repeat(8,1fr);
  201.     height: 400px;
  202.     padding: 15px;
  203.     background: #ffffff;
  204.     border-radius: 12px;
  205. }
  206. .main>ul a{
  207.     display: block;
  208.     width: 126px;
  209.     height: 40px;
  210.   text-align: center;
  211.   line-height: 40px;
  212. }
  213. .main>ul a:hover{
  214.     background-color: rgb(254, 246,246);
  215.     color: #F11716;
  216.     border-radius: 100px;
  217. }
  218. .main>.img img{
  219.     transition: all 0.5s;
  220. }
  221. .main>.img{
  222.     overflow: hidden;
  223.     border-radius: 10px;
  224. }
  225. .main>.img img:hover{
  226.     transform: scale(1.1);
  227. }
  228. .mainright{
  229.     background: #ffffff;
  230.     border-radius: 12px;
  231.     height: 400px;
  232.     padding: 18px;
  233.     padding-top: 0;
  234. }
  235. .mainright .righttop{
  236.     display: grid;
  237.     grid-template-columns: 40px 1fr;
  238.     gap: 0 5px ;
  239.     width: 100%;
  240.     height: 141px;
  241.     border-bottom: 1px solid #eeeeee;
  242. }
  243. .mainright .righttop img{
  244.     border-radius: 100px;
  245. }
  246. .mainright .righttop .img{
  247.     width: 40px;
  248.     height: 40px;
  249. margin-right: 5px;
  250. margin-top: 20px;
  251. }
  252. .mainright .righttop span{
  254.     font-weight: bold;
  256. }
  257. .mainright .righttop p{
  258.     font-size: 12px;
  259.     color: #999;
  260.  margin-top: 8px;
  261. }
  262. .mainright .righttop .user{
  263.    margin-top: 15px;
  264.    margin-left: 8px;
  265. }
  266. .mainright .righttop button{
  267.     grid-area: 2/1/span 1/span 2 ;
  268.     width: 150px;
  269.     height: 34px;
  270.     background: #f11717;
  271.     border-radius: 100px;
  272.     line-height: 34px;
  273.     text-align: center;
  274.     color: #ffffff;
  275.     border: none;
  276.     cursor: pointer;
  277. } 
  278. .mainright .mainbottom{
  279.     display: grid;
  280.     grid-template-rows: repeat(6,1fr);
  281. height: 241px;
  282.     padding-top: 20px;
  283.     gap:10px;
  284. }
  285. .mainright .mainbottom li{
  286.     width: 100%;
  287.    display: grid;
  288.    grid-template-columns: 30px 1fr;
  289.    gap: 10px ;
  290. }
  291. .mainright .mainbottom a{
  292. color: #b6b6b6;
  293. }
  294. .mainright .mainbottom a:hover{
  295.     color: #f11717;
  296. }
  297. .mainright .mainbottom li:first-of-type a{
  298.     margin-left: 30px;
  299.     margin-top: 2px;
  300.     width: 31px;
  301.     height: 16px;
  302.     background: #ff583d;
  303.     border-radius: 2px;
  304.     font-size: 12px;
  305.     color: #ffffff;
  306.     line-height: 16px;
  307.     text-align: center;
  308. }
  309. .mainright .mainbottom span:first-of-type{
  310. width: 60px;
  311. }
  313. .route{
  314.     height: 80px;
  315.     margin-top: 18px;
  316.     display: grid;
  317.     grid-template-columns: 990px 190px;
  318.     gap: 0 18px;
  319. }
  320. .route .routeleft{
  321.     display: grid;
  322.     grid-template-columns: 100px 1fr;
  323.     gap: 0 10px;
  324.     background: #ffffff;
  325.     border-radius: 12px;
  326. }
  327. .route .routeleft .rleft{
  328.     place-self: center;
  329. }
  330. .route .routeleft .rleft span{
  331.     display: block;
  332.    font-size: 12px;
  333.    color: #999;
  334.    padding-top: 6px;
  335. }
  336. .route .routeleft ul{
  337.     display: flex;
  338.     place-items: center;
  339.     justify-content: space-between;
  340.     padding-right: 30px;
  341. }
  342. .route .routeleft ul a:hover p{
  343.     color: #F11716;
  344. }
  345. .route .routeleft .prve{
  346.     display: block;
  347.     width: 14px;
  348.     height: 29px;
  349.     background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -313px 0px;
  350. }
  351. .route .routeleft .prve:hover{
  352.     background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -335px 0px;
  353. }
  354. .route .routeleft .next:hover{
  355.     background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -375px 0px;
  356. }
  357. .route .routeleft .next{
  358.     display: block;
  359.     width: 14px;
  360.     height: 29px;
  361.     background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -355px 0px;
  362. }
  363. .route .routeleft img{
  364.     width: 36px;
  365.     height: 36px;
  366. }
  367. .route .routeleft .content{
  368.     display: flex;
  369. }
  370. .route .routeleft .content .img{
  371.     margin-right: 10px;
  372. }
  373. .route .routeleft .content .kec span{
  374.     font-size: 12px;
  375.     color: #999;
  376. }
  378. .route  .routeright{
  379.     display: flex;
  380.     justify-content: space-between;
  381.     place-items: center;
  382.     background: #ffffff;
  383.     border-radius: 12px;
  384.     padding: 0 26px ;
  385. }
  386. .route  .routeright .wx::before,
  387. .route  .routeright .qq::before{
  388.     content: '';
  389.     width: 30px;
  390.     height: 30px;
  391.     margin-bottom: 10px;
  392.     background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat;
  393. }
  394. .route  .routeright .wx::before{
  395.     background-position: -40px -60px;
  396. }
  397. .route  .routeright .qq::before{
  398.     background-position: 0px -60px;
  399. }
  400. .route  .routeright .wx,
  401. .route  .routeright .qq{
  402.     font-size: 12px;
  403.     font-weight: bold;
  404.     display: flex;
  405.     flex-flow: column nowrap;
  406.     place-items: center;
  407. }
  408. .route  .routeright .wx:hover,
  409. .route  .routeright .qq:hover{
  410.     color: #f11717;
  411. }
  412. .zbo{
  413.     display: flex;
  414.     justify-content: space-between;
  415.     place-items: center;
  416.     margin-top: 10px;
  417.     line-height: 100px;
  418. }
  419. .zbo h3{
  420.     font-size: 22px;
  421.     font-weight: bold;
  422.     color: #333333;
  423. }
  424. .zbo button{
  425.     width: 78px;
  426.     height: 32px;
  427.     background: #f0f1f4;
  428.    color: #999;
  429.     border-radius: 100px;
  430.     text-align: center;
  431.     line-height: 32px;
  432.     border: none;
  433.     cursor: pointer;
  434. }
  435. .zbo button:hover{
  436.     color: #ffffff;
  437.     background-color: #f11717;
  438. }
  440. ul.xiao{
  441.     display: grid;
  442.     grid-template-columns: repeat(4,280px);
  443.     gap: 0 20px;
  444.     height: 275px;
  445.     }
  446.     ul.xiao li{
  447.         background: #ffffff;
  448.         border-radius: 6px;
  449.     }
  450.     ul.xiao .img a{
  451.         display: block;
  452.         height: 160px;
  453.         transition: all 0.2s;
  454.     }
  455.     ul.xiao .img{
  456.         position: relative;
  457.         overflow: hidden;
  458.         border-radius: 8px 8px 0 0;
  459.     }
  460.     ul.xiao .dw{
  461.         position: absolute;
  462.     right: 8px;
  463.     top: 8px;
  464.         height: 22px;
  465.     background: linear-gradient(to top, rgb(235, 196, 134), rgba(250, 228, 193));
  466.     padding: 0px 3px 0px 3px;
  467.     border-radius: 3px;
  468.     color: #93652a;
  469.     font-size: 12px;
  470.     line-height: 22px;
  471.     }
  472.     ul.xiao img{
  473.         width: 100%;
  474.     }
  475.     ul.xiao  .img a:hover{
  476.         transform: scale(1.1);
  477.     }
  478.     ul.xiao  h3{
  479.         height: 42px;
  480.         font-size: 16px;
  481.         margin: 10px 15px ;
  482.         font-weight: normal;
  483.     }
  484.     ul.xiao h3:hover a{
  485.         color: red;
  486.     }
  487.     ul.xiao  p{
  488.         display: flex;
  489.         justify-content: space-between;
  490.         padding: 10px 15px;;
  491.         font-size: 14px;
  492.     }
  493.     ul.xiao  .one{
  494.         color: #666;
  495.     }
  496.     ul.xiao .two{
  497.         color: #b7b7b7;
  498.     }
  499.     ul.xiao .active{
  500.         color: #f11717;
  501.     }
  502.     ul.xiao .gyzb{
  503.         padding: 10px;
  504.         padding-bottom: 0;
  505.     }
  506.     ul.xiao .gy{
  507.         width: 230px;
  508.         border-left: 1px solid #eee;
  509.     }
  510.     ul.xiao .gy span{
  511.         position: absolute;
  512.         left: -17px;
  513.         width: 14px;
  514.         height: 14px;
  515.         background: #d6dae8;
  516.         border: 4px solid #f6f7fb;
  517.         border-radius: 50%;
  518.         transition: all .2s linear;
  519.         display: block;
  521.     }
  522.     .gycontent{
  523.         position: relative;
  524.         height: 84px;
  525.         margin-top: 3px;
  526.         margin-left: 10px;
  527.         white-space: nowrap;
  528.     }
  529.     .gycontent .last{
  530.         display: block;
  531.         margin-top: 5px;
  532.         font-size: 14px;
  533.         color: #b7b7b7;
  534.         white-space: nowrap;
  535.         overflow: hidden;
  536.         text-overflow: ellipsis;
  537.     }
  538.     ul.xiao .gy:hover span{
  539.         background-color: #f11717;
  541.     }
  543.     ul.xiao .gy:hover .first{
  544.         color: #f11717;
  545.     }
Correcting teacher：PHPzPHPz

Correction status：qualified

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