ASCII码 ASCII码

模仿php.cn首页

发布于：2022-05-17 10:58:51  栏目：技术文档

代码预览地址

预览：www.chly.love

  1. html代码
  2.     <link rel="stylesheet" href="./css/index.css">
  3.     <script src="./js/index.js"></script>
  4.     <!--顶部登陆区域-->
  5.     <div class="nav">
  6.         <div class="content">
  7.             <div class="title">php中文网，程序员梦开始的地方</div>
  8.             <div class="right">
  9.                 <div><img src="https://img.icons8.com/office/16/000000/appointment-reminders--v1.png" /></div>
  10.                 <div><img style="width: 25px;  height: 25px;" src="./static/touxiang.png" alt="touxiang"></div>
  11.             </div>
  12.         </div>
  13.     </div>
  15.     <!--顶部导航栏-->
  16.     <div class="daohang">
  17.         <a href=""><img src="./static/logo.png" alt="logo"></a>
  18.         <div class="item">
  19.             <a href="">首页</a>
  20.             <a href=""> 视频教程</a>
  21.             <a href="">学习路径</a>
  22.             <a href="">php培训</a>
  23.             <a href="">资料下载</a>
  24.             <a href="">技术文章</a>
  25.             <a href="">社区</a>
  26.             <a href="">APP下载</a>
  27.             <a href="">***</a>
  28.         </div>
  29.         <div class="search">
  30.             <input type="search" placeholder="搜索关键词"><span>?</span>
  31.         </div>
  32.     </div>
  34.     <!--轮播图区域-->
  35.     <div class="main">
  36.         <div class="lunbotu">
  37.             <div class="left">
  38.                 <a href="">项目*1</a>
  39.                 <a href="">项目*2</a>
  40.                 <a href="">项目*3</a>
  41.                 <a href="">项目*4</a>
  42.                 <a href="">项目*5</a>
  43.                 <a href="">项目*6</a>
  44.                 <a href="">项目*7</a>
  45.                 <a href="">项目*8</a>
  46.             </div>
  47.             <div class="center">轮播图</div>
  48.             <div class="right">登陆区</div>
  49.             <div class="bot">
  50.                 <div class="title">
  51.                     <a href="">学习路径</a>
  52.                     <span>全部7个&rArr;</span>
  53.                 </div>
  55.                 <ul class="detail">
  56.                     <li class="list">
  57.                         <img src="./static/touxiang.png" alt="">
  58.                         <a href="">独孤九贱</a>
  59.                         <span>9门课程</span>
  60.                     </li>
  61.                      <li class="list">
  62.                         <img src="./static/touxiang.png" alt="">
  63.                         <a href="">独孤九贱</a>
  64.                         <span>9门课程</span>
  65.                     </li>
  66.                     <li class="list">
  67.                         <img src="./static/touxiang.png" alt="">
  68.                         <a href="">独孤九贱</a>
  69.                         <span>9门课程</span>
  70.                     </li>
  71.                     <li class="list">
  72.                         <img src="./static/touxiang.png" alt="">
  73.                         <a href="">独孤九贱</a>
  74.                         <span>9门课程</span>
  75.                     </li>
  76.                     <li class="list">
  77.                         <img src="./static/touxiang.png" alt="">
  78.                         <a href="">独孤九贱</a>
  79.                         <span>9门课程</span>
  80.                     </li>
  81.                 </ul>
  83.             </div>
  84.             <div class="wechart">ddd</div>
  87.         </div>
  88.     </div>

CSS部分

  1. /*项目初始化*/
  2. * {
  3.     margin: 0px;
  4.     border: 0px;
  5.     padding: 0px;
  6.     box-sizing: border-box;
  7. }
  9. /*去掉列表前的黑点*/
  10. a {
  11.     text-decoration: none;
  12.     text-align: center;
  13. }
  15. /*访问前初始化*/
  16. a:link {
  17.     font-size: 12px;
  18.     color: #000000;
  19.     text-decoration: none;
  20. }
  22. /*访问后初始化*/
  23. a:visited {
  24.     font-size: 12px;
  25.     color: #000000;
  26.     text-decoration: none;
  27. }
  29. /*链接初始化*/
  30. li {
  31.     list-style: none;
  32. }
  34. /*顶部登基础设置*/
  35. .nav {
  36.     width: 100vw;
  37.     height: 40px;
  38.     background-color: rgb(52, 52, 52);
  40.     color: aliceblue;
  41. }
  43. /*顶部内容栏目设置*/
  44. .content {
  45.     display: grid;
  46.     width: 1000px;
  47.     grid-template-columns: 240px 100px;
  48.     grid-template-rows: 40px;
  49.     place-content: space-between;
  50.     margin: auto;
  51.     place-items: center;
  52. }
  54. /*顶部登陆设置 登陆略*/
  55. .content .right {
  56.     width: 60px;
  57.     height: 40px;
  58.     display: grid;
  59.     grid-template-columns: 30px 30px;
  60.     grid-template-rows: 40px;
  61.     place-content: space-between;
  62.     place-items: center;
  63.     line-height: 50%;
  65. }
  68. /* --------导航栏开始----------*/
  70. /* 顶部导航栏
  71. 1行10列
  72. grid布局*/
  73. .daohang {
  74.     /* 选择div内的所有lu*/
  75.     display: grid;
  76.     /* 启用grid布局*/
  77.     width: 1100px;
  78.     /* 宽度设置*/
  79.     grid-template-columns: 60px 1fr 200px;
  80.     /* 3列1行*/
  81.     grid-template-rows: 60px;
  82.     /* 子元素上下,左右剧中*/
  83.     margin: auto;
  84.     place-items: center;
  86.     grid-auto-flow: column;
  87. }
  89. .daohang .item {
  90.     /* 选择div内的所有lu*/
  91.     display: grid;
  92.     /* 启用grid布局*/
  93.     width: 800px;
  94.     /* 宽度设置*/
  95.     grid-template-columns: repeat(8, 90px) auto;
  96.     /* 10列1行*/
  97.     grid-template-rows: 60px;
  98.     /* 子元素上下,左右剧中*/
  99.     place-content: space-between;
  100.     place-items: center;
  101. }
  102. /* ----搜索输入-----*/
  103. .daohang input {
  105.     background-color: bisque;
  106.     margin-left: 10px;
  107. }
  110. /*logo大小设置*/
  111. .daohang a img {
  112.     width: 60px;
  113.     height: 30px;
  114. }
  115. /* ----搜索框-----*/
  116. .daohang .search {
  117.     display: flex;
  118.     background-color: bisque;
  119.     border-radius: 10px;
  120. }
  124. /* ----轮播开始-----*/
  126. .main .lunbotu {
  127.     display: grid;
  128.     grid-template-columns: 150px 800px 150px;
  129.     grid-template-rows: 400px 100px;
  130.     background-color: beige;
  131.     place-content: center;
  132.     gap: 20px;
  133.     margin: 30px auto 30px auto;
  136. }
  138. /* ----网格边界 辅助-----*/
  139. .main .lunbotu>* {
  140.     background-color: #ffff;
  141.     outline: 1px solid red;
  143. }
  144. /* ----底部跨两行-----*/
  145. .main .lunbotu .bot {
  146.     grid-column: span 2;
  147. }
  148. /* ----左边菜单grid布局-----*/
  149. .main .lunbotu .left {
  150.     display: grid;
  151.     place-items: center;
  153. }
  154. /* ----左边菜单grid布局-----*/
  155. .main .lunbotu .left a {
  156.     display: grid;
  157.     place-items: center;
  158.     padding: 10px 20px 10px 20px;
  159.     border-radius: 15px;
  161. }
  162. /* ----左边菜单grid布局鼠标经过效果-----*/
  163. .main .lunbotu .left a:hover {
  164.     background-color: darksalmon;
  165.     color: red;
  166. }
  167. /* ----下边菜单grid布局-----*/
  168. .main .lunbotu .bot {
  169.     display: grid;
  170.     grid-template-columns: 100px 1fr;
  171.     grid-template-rows: 100px;
  172.     place-items: center;
  173. }
  174. /* ----下左边栏目grid布局-----*/
  175. .main .lunbotu .bot .title {
  176.     display: grid;
  177.     place-items: center;
  178. }
  180. .main .lunbotu .bot .title span {
  181.     font-size: 0.1rem;
  182. }
  183. /* ----下边栏目grid布局-----*/
  184. .main .lunbotu .detail {
  185.     display: grid;
  186.     grid-template-columns: repeat(5, 174px);
  187.     grid-template-rows: 20px 20px;
  188.     place-items: center;
  189.     grid-template-rows: 100px;
  190. }
  192. .main .lunbotu .detail .list {
  193.     display: grid;
  194.     grid-template-columns: 50px 50px;
  195.     grid-template-rows: 20px 20px;
  196.     place-content: center start;
  197.     place-items: center;
  198.     gap: 0 10px;
  199.     font-size: 0.08rem;
  201. }
  203. .main .lunbotu .detail .list img {
  204.     width: 100%;
  205.     grid-row: span 2;
  206. }
  207. .main .lunbotu .detail .list a:hover {
  208.     color: red;
  209. }
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行