• 前端学成在线项目详细解析三

    19-推荐课程-内容样式

    HTML结构

    1. <ul>
    2.   <li>
    3.     <a href="#">
    4.       <div class="pic"><img src="./uploads/course01.png" alt="">div>
    5.       <div class="text">
    6.         <h4>JavaScript数据看板项目实战h4>
    7.         <p><span>高级span> · <i>1125i>人在学习p>
    8.       div>
    9.     a>
    10.   li>
    11.   <li>
    12.     <a href="#">
    13.       <div class="pic"><img src="./uploads/course02.png" alt="">div>
    14.       <div class="text">
    15.         <h4>Vue.js实战——面经全端项目h4>
    16.         <p><span>高级span> · <i>2726i>人在学习p>
    17.       div>
    18.     a>
    19.   li>
    20.   <li>
    21.     <a href="#">
    22.       <div class="pic"><img src="./uploads/course03.png" alt="">div>
    23.       <div class="text">
    24.         <h4>玩转Vue全家桶，iHRM人力资源项目h4>
    25.         <p><span>高级span> · <i>9456i>人在学习p>
    26.       div>
    27.     a>
    28.   li>
    29.   <li>
    30.     <a href="#">
    31.       <div class="pic"><img src="./uploads/course04.png" alt="">div>
    32.       <div class="text">
    33.         <h4>Vue.js实战医疗项目——优医问诊h4>
    34.         <p><span>高级span> · <i>7192i>人在学习p>
    35.       div>
    36.     a>
    37.   li>
    38.   <li>
    39.     <a href="#">
    40.       <div class="pic"><img src="./uploads/course05.png" alt="">div>
    41.       <div class="text">
    42.         <h4>小程序实战：小兔鲜电商小程序项目h4>
    43.         <p><span>高级span> · <i>2703i>人在学习p>
    44.       div>
    45.     a>
    46.   li>
    47.   <li>
    48.     <a href="#">
    49.       <div class="pic"><img src="./uploads/course06.png" alt="">div>
    50.       <div class="text">
    51.         <h4>前端框架Flutter开发实战h4>
    52.         <p><span>高级span> · <i>2841i>人在学习p>
    53.       div>
    54.     a>
    55.   li>
    56.   <li>
    57.     <a href="#">
    58.       <div class="pic"><img src="./uploads/course07.png" alt="">div>
    59.       <div class="text">
    60.         <h4>熟练使用React.js——极客园H5项目h4>
    61.         <p><span>高级span> · <i>95682i>人在学习p>
    62.       div>
    63.     a>
    64.   li>
    65.   <li>
    66.     <a href="#">
    67.       <div class="pic"><img src="./uploads/course08.png" alt="">div>
    68.       <div class="text">
    69.         <h4>熟练使用React.js——极客园PC端项目h4>
    70.         <p><span>高级span> · <i>904i>人在学习p>
    71.       div>
    72.     a>
    73.   li>
    74.   <li>
    75.     <a href="#">
    76.       <div class="pic"><img src="./uploads/course09.png" alt="">div>
    77.       <div class="text">
    78.         <h4>前端实用技术，Fetch API 实战h4>
    79.         <p><span>高级span> · <i>1516i>人在学习p>
    80.       div>
    81.     a>
    82.   li>
    83.   <li>
    84.     <a href="#">
    85.       <div class="pic"><img src="./uploads/course10.png" alt="">div>
    86.       <div class="text">
    87.         <h4>前端高级Node.js零基础入门教程h4>
    88.         <p><span>高级span> · <i>2766i>人在学习p>
    89.       div>
    90.     a>
    91.   li>
    92. ul>

    CSS样式

    1. .bd li .pic {
    2.   height: 156px;
    3. }
    4. ​
    5. .bd li .text {
    6.   padding: 20px;
    7.   height: 115px;
    8.   background-color: #fff;
    9. }
    10. ​
    11. .bd li .text h4 {
    12.   margin-bottom: 13px;
    13.   height: 40px;
    14.   font-size: 14px;
    15.   line-height: 20px;
    16.   font-weight: 400;
    17. }
    18. ​
    19. .bd li .text p {
    20.   font-size: 14px;
    21.   line-height: 20px;
    22.   color: #999;
    23. }
    24. ​
    25. .bd li .text p span {
    26.   color: #fa6400;
    27. }
    28. ​
    29. .bd li .text p i {
    30.   font-style: normal;
    31. }

    20-前端开发工程师区域

    HTML结构

    2. <div class="wrapper">
    3.   
    4.   <div class="hd">
    5.     <h3>前端开发工程师h3>
    6.     <ul>
    7.       <li><a href="#" class="active">热门a>li>
    8.       <li><a href="#">初级a>li>
    9.       <li><a href="#">中级a>li>
    10.       <li><a href="#">高级a>li>
    11.     ul>
    12.     <a href="#" class="more">查看全部a>
    13.   div>
    14.   <div class="bd">
    15.     <div class="left">
    16.       <img src="./uploads/web_left.png" alt="">
    17.     div>
    18.     <div class="right">
    19.       <div class="top"><img src="./uploads/web_top.png" alt="">div>
    20.       <div class="bottom">
    21.         <ul>
    22.           <li>
    23.             <a href="#">
    24.               <div class="pic"><img src="./uploads/web01.png" alt="">div>
    25.               <div class="text">
    26.                 <h4>JS高级javaScript进阶面向对象ES6h4>
    27.                 <p><span>高级span> · <i>101937i>人在学习p>
    28.               div>
    29.             a>
    30.           li>
    31.           <li>
    32.             <a href="#">
    33.               <div class="pic"><img src="./uploads/web02.png" alt="">div>
    34.               <div class="text">
    35.                 <h4>零基础玩转微信小程序h4>
    36.                 <p><span>高级span> · <i>133781i>人在学习p>
    37.               div>
    38.             a>
    39.           li>
    40.           <li>
    41.             <a href="#">
    42.               <div class="pic"><img src="./uploads/web03.png" alt="">div>
    43.               <div class="text">
    44.                 <h4>JavaScript基础——语法解析+项目实战h4>
    45.                 <p><span>高级span> · <i>8927i>人在学习p>
    46.               div>
    47.             a>
    48.           li>
    49.           <li>
    50.             <a href="#">
    51.               <div class="pic"><img src="./uploads/web04.png" alt="">div>
    52.               <div class="text">
    53.                 <h4>前端框架Vue2+Vue3全套视频h4>
    54.                 <p><span>高级span> · <i>26022i>人在学习p>
    55.               div>
    56.             a>
    57.           li>
    58.         ul>
    59.       div>
    60.     div>
    61.   div>
    62. div>

    CSS样式

    1. /* 前端 */
    2. .hd ul {
    3.   display: flex;
    4. }
    5. ​
    6. .hd li {
    7.   margin-right: 60px;
    8.   font-size: 16px;
    9. }
    10. ​
    11. .hd li .active {
    12.   color: #00a4ff;
    13. }
    14. ​
    15. .bd {
    16.   display: flex;
    17.   justify-content: space-between;
    18. }
    19. ​
    20. .bd .left {
    21.   width: 228px;
    22.   /* background-color: pink; */
    23. }
    24. ​
    25. .bd .right {
    26.   width: 957px;
    27.   /* background-color: pink; */
    28. }
    29. ​
    30. .bd .right .top {
    31.   margin-bottom: 15px;
    32.   height: 100px;
    33. }

    21-版权-布局

    HTML结构

    2. <div class="footer">
    3.   <div class="wrapper">
    4.     <div class="left">leftdiv>
    5.     <div class="right">rightdiv>
    6.   div>
    7. div>

    CSS样式

     

    1. /* 版权 */
    2. .footer {
    3.   margin-top: 60px;
    4.   padding-top: 60px;
    5.   height: 273px;
    6.   background-color: #fff;
    7. }
    8. ​
    9. .footer .wrapper {
    10.   display: flex;
    11.   justify-content: space-between;
    12. }
    13. ​
    14. .footer .left {
    15.   width: 440px;
    16.   background-color: pink;
    17. }
     

    22-版权-内容
     

    HTML结构
     

    1. <div class="left">
    2.   <a href="#"><img src="./images/logo.png" alt="">a>
    3.   <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
    4.     © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号p>
    5.   <a href="#" class="download">下载APPa>
    6. div>
    7. <div class="right">
    8.   <dl>
    9.     <dt>关于学成网dt>
    10.     <dd><a href="#">关于a>dd>
    11.     <dd><a href="#">管理团队a>dd>
    12.     <dd><a href="#">工作机会a>dd>
    13.     <dd><a href="#">客户服务a>dd>
    14.     <dd><a href="#">帮助a>dd>
    15.   dl>
    16.   <dl>
    17.     <dt>新手指南dt>
    18.     <dd><a href="#">如何注册a>dd>
    19.     <dd><a href="#">如何选课a>dd>
    20.     <dd><a href="#">如何拿到毕业证a>dd>
    21.     <dd><a href="#">学分是什么a>dd>
    22.     <dd><a href="#">考试未通过怎么办a>dd>
    23.   dl>
    24.   <dl>
    25.     <dt>合作伙伴dt>
    26.     <dd><a href="#">合作机构a>dd>
    27.     <dd><a href="#">合作导师a>dd>
    28.   dl>
    29. div>
     

    CSS样式
     

    1. .footer .left p {
    2.   margin-top: 24px;
    3.   margin-bottom: 14px;
    4.   font-size: 12px;
    5.   line-height: 17px;
    6.   color: #666;
    7. }
    8. ​
    9. .footer .left .download {
    10.   display: block;
    11.   width: 120px;
    12.   height: 36px;
    13.   border: 1px solid #00a4ff;
    14.   text-align: center;
    15.   line-height: 34px;
    16.   font-size: 16px;
    17.   color: #00a4ff;
    18. }
    19. ​
    20. .footer .right {
    21.   display: flex;
    22. }
    23. ​
    24. .footer .right dl {
    25.   margin-left: 130px;
    26. }
    27. ​
    28. .footer .right dt {
    29.   margin-bottom: 12px;
    30.   font-size: 16px;
    31.   line-height: 23px;
    32. }
    33. ​
    34. .footer .right a {
    35.   font-size: 14px;
    36.   color: #666;
    37.   line-height: 24px;
    38. }
    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
Android学习笔记 28. Fragement总结                            
    
轻松省钱赚佣金：微信返利机器人的制作教程                            
    
高校就业管理系统设计与实现                            
    
Spring Boot前后端简单集成MinIo开发                            
    
EPAI手绘建模APP常用工具栏_1                            
    
快速排序（Quick Sort）                            
    
（附源码）计算机毕业设计SSM教务排课管理系统                            
    
使用Redis常遇到的问题                            
    
网页大作业代码自取【HTML+CSS制作美味糖果网站】                            
    
Python散点图                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/qq_69748833/article/details/134001376
                
    •