ASCII码 ASCII码

完善课堂的案例,将右侧布局实现

发布于：2022-04-14 13:47:24  栏目：技术文档

右侧布局实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>PHP中文网</title>
  7.     <link rel="stylesheet" href="index.css" />
  8.     <link rel="stylesheet" href="xxx.css" />
  9.     <link rel="stylesheet" href="//at.alicdn.com/t/font_3282106_cgq8n3yup8o.css" />
  10.     <link rel="stylesheet" href="ring.css" />
  13.    <link rel="stylesheet" href="zhong.css" />
  15.   </head>
  17.   <body>
  23.         <header>
  25.         <!-- 顶部 -->
  27.        <div class="top">
  29.             <div class="box">
  31.                 <div class="tlt">PHP中文网-程序员梦开始的地方</div>
  33.                <div class="youc">
  35.                     <a href=" " class="iconfont  icon-icon_lingdang"></a>
  37.                       <img       
  38.                     src="https://www.php.cn/static/images/user_avatar.jpg" />
  40.                 </div>
  41.             </div>
  46.         </div>
  47.         <!-- 导航 -->
  48.         <div class="nav">
  49.             <div class="bos">
  50.                 <a href=""><img src="logo.png" /></a>
  51.                 <div class="lic">
  52.                     <a href="" style="color: red;">首页</a>
  53.                     <a href="">视频教程</a>
  54.                     <a href="">学习路径</a>
  55.                     <a href="">PHP培训</a>
  56.                     <a href="">资源下载</a>
  57.                     <a href="">技术文章</a>
  58.                     <a href="">社区</a>
  59.                 </div>
  62.                 <div class="sear">
  63.                     <input type="search" placeholder="输入关键字搜索" />
  64.                     <span class="iconfont  icon-Magnifier"></span>
  66.                 </div>
  71.             </div>
  73.     </header>
  74.     <!-- 底部 -->
  75.     <main>
  76.         <div class="navs">
  77.             <div class="lef ">
  78.                 <a href="">php开发</a>
  79.                 <a href="">大前端</a>
  80.                 <a href="">后端开发</a>
  81.                 <a href="">数据库</a>
  82.                 <a href="">移动端</a>
  83.                 <a href="">运维开发</a>
  84.                 <a href="">UI设计</a>
  85.             </div>
  86.             <div class="mix">
  87.                 <img src="course.jpg" />
  89.             </div>
  90.             <div class="div1">
  91.                 <ul class="fss">
  92.                     <li>
  93.                         <img src="https://www.php.cn/static/images/user_avatar.jpg">
  94.                         <a href="">没耐心的..</a>
  95.                         <span>P豆：14</span>
  96.                         <button><a href="">我的学习</a></button>
  98.                     </li>
  99.                 </ul>
  102.                 <div class="rt">
  103.                     <div style="margin-top: 20px;">
  104.                         <span>问答社区</span>
  105.                         <a href="" class="dfg">答疑</a>
  106.                     </div>
  107.                     <div>
  108.                         <span>头条</span>
  109.                         <a href="">首个采用中文编写的操作系统出现了！</a>
  110.                     </div>
  111.                     <div>
  112.                         <span>新课</span>
  113.                         <a href="">3.9日公益直播课</a>
  114.                     </div>
  115.                     <div>
  116.                         <span>新班</span>
  117.                         <a href="">19期PHP直播班</a>
  118.                     </div>
  119.                     <div>
  120.                         <span>招募</span>
  121.                         <a href="">课程合作计划</a>
  122.                     </div>
  123.                     <div>
  124.                         <span>公告</span>
  125.                         <a href="">APP上线了</a>
  126.                     </div>
  127.                 </div>
  128.             </div>
  129.             <div class="btomm-left">
  130.                 <div class="dss">
  131.                     <div class="titx">学习路径</div>
  132.                     <span>全部7个&gt;</span>
  133.                 </div>
  134.                 <ul class="dtt">
  135.                     <li>
  136.                         <img src="dgjj.png">
  137.                         <a href="">独孤九剑</a>
  138.                         <span>9们课程</span>
  139.                     </li>
  140.                     <li>
  141.                         <img src="ynxj.png">
  142.                         <a href="">玉女心经</a>
  143.                         <span>9们课程</span>
  144.                     </li>
  145.                     <li>
  146.                         <img src="tlbb.png">
  147.                         <a href="">天龙八部</a>
  148.                         <span>9们课程</span>
  149.                     </li>
  150.                     <li>
  151.                         <img src="phpkjkf.png">
  152.                         <a href="">自学指南</a>
  153.                         <span>9们课程</span>
  154.                     </li>
  155.                     <li>
  156.                         <img src="phpksrm.png">
  157.                         <a href="">趣味闯关</a>
  158.                         <span>9们课程</span>
  159.                     </li>
  164.             </div>
  165.             <div class="btomm-rin">
  166.                 <div class="iconfont   icon-a-ziyuan602">
  167.                     <div>官方微信</div>
  169.                 </div>
  170.                 <div class="iconfont   icon-changyonglogo41">
  173.                     <div>官方QQ群</div>
  174.                 </div>
  179.             </div>
  183.     </main>
  184.     </body>
  186. </html>

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行