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. }

效果展示

示例

更多相关文章

  1. android 手机获取当前连接的wifi配置信息
  2. 用代码创建Android视图
  3. Android(安卓)Activity设置全屏
  4. Android(安卓)App 多语言切换
  5. Android(安卓)在Service里面启动Activity
  6. android典型代码系列(二十二)------按键使上面的EditText抖动
  7. PHP执行linux命令6个函数代码实例
  8. Android(安卓)UI - 带白边的自定义ImageView效果
  9. Android中对Group的各种操作示例代码

随机推荐

  1. 更新Android SDK Tools, revision 7报错
  2. 从零开始学习android
  3. Android(安卓)Studio 生成Jar包
  4. android 重用 c代码
  5. android studio 中一些比较好的插件
  6. Android HDMI( 三)
  7. Android 中文 API （102）—— CursorAdapter
  8. Nexus one (Android(安卓)2.1升级Android
  9. 系出名门Android(5) - 控件(View)
  10. Android网络应用接口