search

博客列表 >仿PHP中文网右侧部分

仿PHP中文网右侧部分

想做肥仔
想做肥仔原创
2022年04月04日 02:51:08750浏览

HTML代码

  1.     <header>
  2.         <!-- 头部个人信息 -->
  3.         <div class="php-top">
  4.             <div class="cnotent-top">
  5.                 <div class="title">php中文网,程序员梦开始的地方!</div>
  6.                 <div class="right">
  7.                     <a href="" class="iconfont icon-tixing"></a>
  8.                     <a href=""><img src="static/images/user-pic.jpg" alt="">             </a>
  9.                 </div>
  10.             </div>
  11.         </div>
  13.         <!-- 头部导航 -->
  14.         <div class="nvas-top">
  15.             <div class="content">
  16.                 <!-- logo -->
  17.                 <a href="">
  18.                     <img src="static/images/logo.png" alt="">
  19.                 </a>
  20.                 <!-- 导航栏 -->
  21.                 <nav>
  22.                     <a href="" class="active">首页</a>
  23.                     <a href="">视频教程</a>
  24.                     <a href="">学习路径</a>
  25.                     <a href="">php培训</a>
  26.                     <a href="">资源下载</a>
  27.                     <a href="">技术文章</a>
  28.                     <a href="">社区</a>
  29.                     <a href="">APP下载</a>
  30.                     <a href="">...</a>
  31.                 </nav>
  32.                 <!-- 输入框 -->
  33.                 <div class="search">
  34.                     <input type="search" placeholder="输入关键词搜索">
  35.                     <span class="iconfont icon-fangdajing"></span>
  36.                 </div>
  38.             </div>
  39.         </div>
  40.     </header>
  43.     <!-- 主体 -->
  44.     <main>
  45.         <div class="part">
  46.             <!-- 左侧导航 -->
  47.             <div class="left">
  48.                 <a href="">php开发</a>
  49.                 <a href="">大前端</a>
  50.                 <a href="">后端开发</a>
  51.                 <a href="">数据库</a>
  52.                 <a href="">移动端</a>
  53.                 <a href="">运维开发</a>
  54.                 <a href="">UI设计</a></a>
  55.                 <a href="">计算机基础</a>
  56.             </div>
  57.             <!-- 中间轮播图 -->
  58.             <div class="mid">
  59.                 <a href=""><img src="static/images/623980ded5fcf319.jpg"                     alt=""></a>
  60.             </div>
  61.             <!-- 右侧公告 -->
  62.             <div class="right">
  63.                 <!-- 上 -->
  64.                 <div class="top-r">
  65.                     <div class="top-r-img">
  66.                         <img src="static/images/user-pic.jpg" alt="">
  67.                         <a href="">晴天有雨</a>
  68.                         <span>P豆:14</span>
  69.                     </div>
  70.                     <div class="rbox"><a href="">我的学习</a></div>
  71.                 </div>
  72.                 <!-- 下 -->
  73.                 <div class="main-box">
  74.                     <p>
  75.                        <span>问答社区</span>
  76.                         <a href="">答疑</a>
  77.                     </p>
  79.                    <ul class="hos">
  80.                        <li>
  81.                            <span>头条</span>
  82.                            <a href="">首个中文操作系统出现了</a>
  83.                         </li>
  84.                        <li>
  85.                            <span>新课</span>
  86.                            <a href="">3.9号公益直播课</a>
  87.                        </li>
  88.                        <li>
  89.                            <span>新班</span>
  90.                            <a href="">19期PHPH直播班</a>
  91.                        </li>
  92.                        <li>
  93.                            <span>招募</span>
  94.                            <a href="">课程合作计划</a>
  95.                        </li>
  96.                        <li>
  97.                            <span>公告</span>
  98.                            <a href="">APP上线了</a>
  99.                        </li>
  100.                    </ul>
  101.                 </div>
  102.             </div>
  105.             <!-- !底部左侧 -->
  106.             <div class="bottom-left">
  107.                 <!-- 学习路径 -->
  108.                 <div class="desc">
  109.                     <div class="title">学习路径</div>
  110.                     <span>全部7个&gt;</span>
  111.                 </div>
  112.                 <!-- 详情 -->
  113.                 <ul class="detail">
  114.                     <li onclick="">
  115.                         <img src="static/images/dgjj.png" alt="">
  116.                         <a href="">独孤九贱</a>
  117.                         <span>9门课程</span>
  118.                     </li>
  119.                     <li onclick="">
  120.                         <img src="static/images/ynxj.png" alt="">
  121.                         <a href="">欲女心经</a>
  122.                         <span>3门课程</span>
  123.                     </li>
  124.                     <li onclick="">
  125.                         <img src="static/images/tlbb.png" alt="">
  126.                         <a href="">天龙八部</a>
  127.                         <span>15门课程</span>
  128.                     </li>
  129.                     <li onclick="">
  130.                         <img src="static/images/ynxj.png" alt="">
  131.                         <a href="">自学指南</a>
  132.                         <span>8门课程</span>
  133.                     </li>
  134.                     <li onclick="">
  135.                         <img src="static/images/phpksrm.png" alt="">
  136.                         <a href="">趣味闯关</a>
  137.                         <span>22门课程</span>
  138.                     </li>
  139.                 </ul>
  140.             </div>
  141.             <!-- 底部右侧 -->
  142.             <div class="bottom-right">
  143.                 <div class="bottom-right1">
  144.                     <a href="" class="iconfont icon-weixin"></a>
  145.                     <h1>官网公共号</h1>
  146.                 </div>
  147.                 <div class="bottom-right2">
  148.                     <a href="" class="iconfont icon-qq"></a>
  149.                     <h1>官方QQ群</h1>
  150.                 </div>
  151.             </div>
  152.         </div>
  153.     </main>

CSS部分代码

  1.     /* 右侧 */
  2. main .part .right .main-box {
  3.     width: 150px;
  4.     height: auto;
  5.     position: relative;
  6.     left: 28px;
  7.     top: 24px;
  8.     /* display: grid;
  9.     place-items: center; */
  10. }
  12. main .part .right .main-box p{
  13.     font-size: 14px;
  14. }
  16. main .part .right .main-box p span{
  17.     font-size: larger;
  18.     color: #333333;
  19. }
  21. main .part .right .main-box p a {
  22.     position: relative;
  23.     font-size: 12px;
  24.     color: white;
  25.     left: 8px;
  26.     background-color: red;
  27.     padding: 1px;
  28.     /* display: grid; */
  29. }
  31. main .part .right .main-box .hos{
  32.     width: 140px;
  33.     height: auto;
  34. }
  36. main .part .right .main-box .hos li {
  37.     padding-top: 5px;
  38.     height: 38px;
  39.     font-size: 10px;
  40. }
  42. main .part .right .main-box .hos li:nth-of-type(1){
  43.     padding-top: 5px;
  44.     height: 41px;
  45. }
  47. main .part .right .main-box .hos li a {
  49.     padding-left: 5px;
  50.     color: #b6b6b6;
  51.     font-size: 12px;
  52. }
  54. main .part .right .main-box .hos li a:hover{
  55.     color: red;
  56. }
  60. /* 底部右侧 */
  62. main .part .bottom-right{
  63.     display: grid;
  64.     grid-template-columns: repeat(2,1fr);
  65.     place-items: center;
  66. }
  68. main .part .bottom-right .bottom-right1 {
  69.     display: grid;
  70.     place-items: center;
  71. }
  73. main .part .bottom-right .bottom-right1 h1{
  74.     font-size: 14px;
  75. }
  77. main .part .bottom-right .bottom-right1 h1 :hover{
  78.     color: red;
  79. }
  81. main .part .bottom-right .bottom-right1 .icon-weixin {
  82.    font-size: 26px;
  83. }
  86. main .part .bottom-right .bottom-right2 {
  87.     display: grid;
  88.     place-items: center;
  89. }
  91. main .part .bottom-right .bottom-right2 .icon-qq {
  92.     font-size: 26px;
  93. }
  95. main .part .bottom-right .bottom-right2 h1{
  96.     font-size: 14px;
  97. }
  99. main .part .bottom-right .bottom-right2 h1 :hover{
  100.     background-color: red;
  101. }

效果展示

示例

上一条：如何使用短链接增大您的网站推广效益？（t.cn短链接附带接口）下一条：留言板功能
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多