• 潭州课堂25班:Ph201805201 WEB 之 页面编写 第三课 (课堂笔记)


    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/common.css">
        <link rel="stylesheet" href="css/index.css">
        <link rel="stylesheet" href="css/login.css">
        <link rel="stylesheet" href="https://at.alicdn.com/t/font_791183_z2ywx2u4woc.css">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    </head>
    <body>
        <!--header star-->
        <div class="header">
            <div class="header-contain">
                <h1 class="log"><a href="#" class="logo-title"></a></h1>
                <ul class="menu">
                    <li><a href="#">首页</a> </li>
                    <li><a href="course.html">在线课堂</a> </li>
                    <li><a href="pay.html">付费课程</a> </li>
                    <li><a href="search.html">搜索</a> </li>
                </ul>
                <div class="log-box">
                    <i class="iconfont icon-iconuser"></i>             <!--引入图标时一般用 i 标签 -->
                    <span><a href="reg.html">注册</a> </span>
                    <span><a href="css/login.css">登录</a> </span>
                </div>
            </div>
        </div>
        <!--header end-->
    
        <!--main star-->
        <div class="main">
            <div class="main-box clearfix">
                <div class="main-contain">
    
                    <!--banner-->
                    <div class="banner">
                        <ul class="pic">
                            <li><img class="show" src="https://res.shiguangkey.com//file/201806/19/20180619142252602590185.jpg"></li>
                            <li><img  src="https://res.shiguangkey.com//file/201806/19/20180619141337485823895.jpg"></li>
                            <li><img  src="https://res.shiguangkey.com//file/201806/21/20180621150342030454625.jpg"></li>
                            <li><img  src="https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg"></li>
                        </ul>
                        <ul class="tab">
                            <li class="on"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <ul class="btn">
                            <li class="left"><</li>
                            <li class="right">&gt</li>
                        </ul>
                    </div>
                    <div class="contain">
                        <ul class="recommend-news">
                            <li>
                                <a href="#"><img src="https://res.shiguangkey.com//file/201806/04/20180604235838752491899.png!mall_course_a" alt="test"></a>
                                <p>
                                    <a href="#">SEO优化,最新快速排名技巧解答分享</a>
                                </p>
                            </li>
                            <li>
                                <a href="#"><img src="https://res.shiguangkey.com//file/201805/26/20180526105323340886406.png!" alt="test"></a>
                                <p>
                                    <a href="#">web前端零基础入门</a>
                                </p>
                            </li>
                           <li>
                                <a href="#"><img src="https://res.shiguangkey.com//file/201805/03/20180503165311843004082.png!" alt="test"></a>
                                <p>
                                    <a href="#">韩语小白变大神</a>
                                </p>
                            </li>
                        </ul>
                    </div>
    
                    <!--news nav-->
                    <div class="news-nav">
                        <ul class="nav">
                            <li class="active">python</li>
                            <li>前端</li>
                            <li>爬虫</li>
                            <li>网络安防</li>
                        </ul>
                        <ul class="contain">
                            <li class="show">
                                <div class="clearfix">
                                    <div class="left">
                                       <img src="https://res.shiguangkey.com//file/201805/03/20180503165311843004082.png!mall_course_a" alt="">
                                   </div>
                                    <div class="right">
                                       <p><span>可里:</span>大学韩国语专业 亚篮锦标赛韩语随同翻译 3年线上韩语教育经验</p>
                                       <p><span>小美:</span>大学韩语专业 韩语TOPIK6级 三年线上教学经验</p>
                                       <p><span>鸭梨:</span>大学韩国语专业 2年线上韩语教学经验 多年韩国漫画翻译经验</p>
                                       <p><span>可可:</span>韩语随同翻译 牙科医疗反映 丰富口译经验 多年爱豆站姐翻译经验</p>
                                   </div>
                                </div>
                                <div class="clearfix">
                                   <div class="left">
                                       <img src="https://res.shiguangkey.com//file/201807/23/20180723165649433839624.png!mall_course_a">
                                   </div>
                                   <div class="right">
                                       <p><span>Kayee:</span>口语水平优秀 语言表达能力强 教学经验丰富 对学员有耐心</p>
                                       <p><span>Celin:</span>课堂活泼有趣 注重和学员互动 轻轻松松帮大家理解英语知识</p>
                                       <p><span>Molly:</span>商务英语专业 对学员耐心 喜欢发掘不同类型的英语应用</p>
                                       <p><span>Zoey:</span>口语水平优秀 语言表达能力强 注重培养学员的口语能力和书写能力</p>
                                   </div>
                               </div>
                            </li>
                            <li>
                                <div class="clearfix">
                                     <div class="left">
                                        <img src="https://res.shiguangkey.com//file/201805/26/20180526105323340886406.png!mall_course_a" alt="">
                                    </div>
                                    <div class="right">
                                        <p><span>PC+移动开发班</span></p>
                                        <p>html + css</p>
                                        <p><span>移动网站开发内容</span></p>
                                        <p>html5 + css3</p>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <div class="left">
                                        <img src="https://res.shiguangkey.com//file/201804/11/20180411113302019932295.jpg!mall_course_a">
                                    </div>
                                    <div class="right">
                                        <p><span>javascript</span></p>
                                        <p>操作DOM 面向对象 Jquery ECMAScript6</p>
                                        <p><span>前端框架</span></p>
                                        <p>vue Angular React</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="clearfix">
                                    <div class="left">
                                        <img src="https://res.shiguangkey.com//file/201807/02/20180702141502580115367.png!mall_course_a" alt="">
                                    </div>
                                    <div class="right">
                                        <p><span>基础阶段</span></p>
                                        <p>python基础 python进阶 web前端</p>
                                        <p><span>实战阶段</span></p>
                                        <p>框架 项目</p>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <div class="left">
                                        <img src="https://res.shiguangkey.com//file/201807/02/20180702153723740596415.png!mall_course_a">
                                    </div>
                                    <div class="right">
                                        <p><span>Python数据分析与机器学习</span></p>
                                        <p>numpy pandas matplotlib seaborn</p>
                                        <p>K邻近算法 线性回归与逻辑回归算法</p>
                                        <p>决策树算法 集成算法与随机森林 贝叶斯算法 支持向量机</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="clearfix">
                                    <div class="left">
                                        <img src="https://res.shiguangkey.com//file/201804/19/20180419103002769224662.jpg!mall_course_a" alt="">
                                    </div>
                                    <div class="right">
                                        <p><span>c++课程体系</span></p>
                                        <p>C语言核心 C++语言核心</p>
                                        <p>Windows核心编程 Linux核心编程</p>
                                        <p>QT核心编程 服务器核心编程</p>
                                    </div>
                                </div>
                                <div class="clearfix">
                                    <div class="left">
                                        <img src="https://res.shiguangkey.com//file/201807/02/20180702153645933550456.png!mall_course_a">
                                    </div>
                                    <div class="right">
                                        <p><span>罗伯特:</span>十年项目开发经验 精通C/C++、Windows游戏编程</p>
                                        <p><span>九夏老师:</span>七年企业级项目实战经验,擅长Windows/Linux平台</p>
                                        <p><span>Danny:</span>八年大型项目开发经验,精通C/C++编程语言,擅长WindowsAPI</p>
                                        <p><span>强森老师:</span>五年企业级IT项目开发经验,三年线下教学经验</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="more">加载更多</div>
                </div>
                <div class="aside">
                    <div class="side-activities">
                        <h2>公开课<span>更多</span></h2>
                        <div>
                            <img src="https://res.shiguangkey.com/file/201804/19/20180419161303876645368.png!mall_course_b">
                            <p>python零基础入门到项目实战</p>
                            <hr>
    
                        </div>
                        <div>
                        <h2>VIP课<span>更多</span></h2>
                        <div>
                            <img src="https://res.shiguangkey.com//file/201804/19/20180419103636100353500.jpg!mall_course_a" alt="">
                            <p>Python基础</p>
                            <p>Python进阶</p>
                            <p>Python web</p>
                            <p>框架(Django Tornado)</p>
                            <p>项目实战</p>
                            <hr>
                        </div>
                         <div class="about" style="background: url(2.png)no-repeat 200px 10px/120px 150px">
                            <h4>关注我</h4>
                             <ul>
                                 <li><i class="iconfont icon-ai-weixin" style="color: blue"></i>gdwz922</li>
                                 <li><i class="iconfont icon-QQ"style="color: blue"></i>i649975652</li>
                                 <li><i class="iconfont icon-weibo"style="color: blue">....</i></li>
                             </ul>
                         </div>
                    </div>
                </div>
            </div>
        </div>
    
        <!--footer star-->
        <div class="footer">
            <div class="footer-box">
                <div class="footer-content">
                   <p>
                       <span><a href="#">关于 python</a> </span>
                        <span><a href="#">python 开发</a> </span>
                        <span><a href="#">python 数据分析</a> </span>
                        <span><a href="#">python 关于我:<i class="iconfont icon-ai-weixin" ></i></a> </span>
                   </p>
                    <p>
                         <span><a href="#">地址:福建.........</a> </span>
                         <span><a href="#">联系电话:12345678911</a> </span>
                    </p>
                </div>
                <p  class="bottom-content">Copyright © 2015 - 2018 潭州python学院. All Rights Reserved</p>
            </div>
        </div>
    
        <script src="js/index.js"></script>
    </body>
    </html>
    

      

    index.css

    .main{
         100%;
        /*background: red;*/
        padding: 30px 0;
    }
    .main .main-box{
         1200px;
        /*height: 1000px;*/
        margin: auto;               /*居中*/
        /*background: yellowgreen;*/
    }
    .main .main-box .main-contain{
        float: left;               /*左浮动*/
         800px;
    }
    .main .main-box .main-contain .banner{
         800px;
        height: 200px;
        position: relative;
        /*background: blue;*/
    
    }
    .main .main-box .main-contain .banner .pic li img{
         800px;
        height: 200px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .main .main-box .main-contain .banner .pic li img{
            display: none;
    }
    .main .main-box .main-contain .banner .pic li .show{
        display: block;
    }
    .main .main-box .main-contain .banner .tab{
        position: absolute;
        left: 340px;
        bottom: 15px;
    }
    .main .main-box .main-contain .banner .tab li{
        height: 20px;
         20px;
        border: 1px solid white;
        float: left;
        margin: 10px;
        border-radius: 50%;                     /*方变圆*/
        cursor: pointer;     /*出现小手*/
    }
    .main .main-box .main-contain .banner .tab .on{
        background: red;
    }
    .main .main-box .main-contain .banner .btn{
        font-size: 50px;
        color: white;
        font-weight: bold;
        line-height: 200px;
        cursor: pointer;     /*出现小手*/
        display: none;
    }
    .main .main-box .main-contain .banner:hover .btn{
        display: block;
    }
    .main .main-box .main-contain .banner .btn .left{
        position: absolute;
        left: 5px;
    }
    .main .main-box .main-contain .banner .btn .right{
        position: absolute;
        right: 5px;
    }
    .main .main-box .main-contain .contain{
         800px;
        /*background: red;*/
        font-size: 14px;
    }
    .main .main-box .main-contain .contain .recommend-news li a img{
         250px;
        height: 180px;                               /*固定图片大小*/
        transition: all 1s;                         /**在放大图片时有时间过度 */
    }
    .main .main-box .main-contain .contain .recommend-news{
        display: flex;
        justify-content:space-between;      /*弹性盒模型,大小自动分配 (一步做完浮动)*/
        padding: 20px 10px;
    }
    .main .main-box .main-contain .contain .recommend-news li p{
        text-align: center;                 /*居中*/
        line-height: 25px;                  /**/
    }
    .main .main-box .main-contain .contain .recommend-news li a img:hover{
        transform: scale(1.2);          /*鼠标移入时放大多少倍*/
    }
    
    /*news-nav */
    .main .main-box .main-contain .news-nav .nav{
         800px;
        height: 65px;
        background: yellow;
        line-height: 60px;  /**行高与 height 一样时,文字垂直居中*/
    }
    .main .main-box .main-contain .news-nav .nav li{
        float: left;        /*浮动*/
        margin: 0 20px;
    }
    .main .main-box .main-contain .news-nav .nav li.active{
        border-bottom: 5px solid red;
        box-sizing: border-box;             /**让上行设置的底边往上移*/
    }
    .main .main-box .main-contain .news-nav .nav li:hover{
        cursor: pointer;                 //**加小手*/
    }
    .main .main-box .main-contain .news-nav .contain{
         800px;
        /*height: 800px;*/
        /*background:brown;*/
    }
    .main .main-box .main-contain .news-nav .contain .left img{
        float: left;
         260px;
        height: 200px;
        padding: 5px;
        border-radius: 20px;        /*小圆角*/
        overflow: hidden;           /*超出隐藏*/
        margin-right: 10px;
        transition: all 1s;         //*图片慢慢变大*/
    }
    .main .main-box .main-contain .news-nav .contain .left img:hover{
        transform: scale(1.2);
    }
    .main .main-box .main-contain .news-nav .contain .right{
        float: left;
        line-height: 35px;
        padding: 26px 0  0 0;
        font-size: 16px;
    }
    .main .main-box .main-contain .news-nav .contain li{
        display: none;
    }
    .main .main-box .main-contain .news-nav .contain li.show{
        display:block;
    }
    .main .main-box .main-contain .more{
         500px;
        height: 60px;
        margin: 10px auto;
        background: yellow;
        border-radius: 10px;
        line-height: 60px;      /*垂直居中*/
        text-align: center;     /*水平居中*/
        cursor: pointer;                 //**加小手*/
    }
    
    
    /*aside*/
    .main .main-box .aside{
         360px;
        float: right;
        /*height: 700px;*/
        background: yellow;
    }
    .main .main-box .aside .side-activities h2{
        padding: 0 30px;
        height: 35px;
        line-height: 35px;
    }
    .main .main-box .aside .side-activities span{
        float: right;
        color: skyblue;
        cursor: pointer;                 //**加小手*/
    }
    .main .main-box .aside .side-activities div img{
         320px;
        padding: 0 20px;
    }
    .main .main-box .aside .side-activities div p{
        padding: 0 30px;
        height: 30px;
        line-height: 30px;
    }
    .main .main-box .aside .side-activities .about{
        padding: 0 20px;
         320px;
        background: url('2.png') no-repeat 200px 10px/100px 100px;
    }
    .main .main-box .aside .side-activities .about ul li {
        font-size: 15px;
        line-height: 50px;
    }
    .main .main-box .aside .side-activities .about ul li{
        height: 50px;
        line-height: 50px;
        font-size: 18px;
    }
    .main .main-box .aside .side-activities .about ul li i{
        vertical-align: -8px;
        margin-left: 20px;
        font-size: 35px;
    }
    

      

  • 相关阅读:
    ANSI C
    如何判断机器的endianness
    union的常见用法
    主流浏览器引擎
    用宏来求数组元素个数
    inode
    分区时"磁盘上没有足够的空间完成此操作"的解决方法
    删除OEM分区
    jquery加table布局 模仿实现FaceBook Dialog
    Container.DataItem使用
  • 原文地址:https://www.cnblogs.com/gdwz922/p/9485092.html
Copyright © 2020-2023  润新知