• 潭州课堂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="https://at.alicdn.com/t/font_791183_yqg5z4kxenj.css">
    </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="login.html">登录</a> </span>
                </div>
            </div>
        </div>
        <!--header end-->
    
        <!--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>
    </body>
    </html>
    

      

    共同样式

    common.css

    .header{
        height: 69px;
         100%;
        background: black;
        color: white;
    }
    .header .header-contain{
         1200px;
        height: 69px;
        line-height: 69px;
        margin: auto;
        background: blue;
    }
    /*logo star*/
    .header .header-contain .log{
         230px;
        height: 64px;
        float: left;        /*左浮动*/
    }
    .header .header-contain .log .logo-title{
        display: block;     /*块级*/
         100%;
        height: 100%;
        background: url("https://www.python.org/static/img/python-logo.png ") no-repeat ;/*不平铺*/
    }
    /*logo end*/
    
    /*meau star*/
    .header .header-contain .meau{
        float: left;
        margin-left: 100px;
    }
    .header .header-contain .menu li{
        height: 69px;
        padding: 0 30px;
        float: left;
        /*border-bottom: 5px solid red;*/
        /*box-sizing:border-box;*/
    }
    .header .header-contain .menu li.active{
        border-bottom: 5px solid red;
        box-sizing: border-box;
    }
    .header .header-contain .menu li:hover{
        border-bottom: 5px solid red;
        box-sizing: border-box;
    }
    /*meau end*/
    
    .header .header-contain .log-box {
        float: right;
    }
    .header .header-contain .log-box i{     /*阿里云图标*/
        font-size: 30px;
        vertical-align: -4px;              /*对齐方式*/
    }
    
    /*footer star*/
    .footer{
         100%;
        background: blueviolet;
    }
    .footer .footer-box{
        margin: auto;
        text-align:center;      /*文字水平居中*/
        color: white;
    }
    .footer .footer-box .footer-content{
        line-height: 50px;
        padding: 20px 0;
        background: url("https://www.python.org/static/img/python-logo.png ") no-repeat 50px 20px;/*不平铺*/
    }
    .footer .footer-box .bottom-content{
        line-height: 50px;
         100%;
        background: black;
    }
    

      

    阿里图标库

    http://www.iconfont.cn/

    在 index.html 文件中引入

    <link rel="stylesheet" href="https://at.alicdn.com/t/font_791177_3pb603grst.css">


    其代码在浏览器中撕开时

    在 i 标签中天机类名  iconfont 要哪个图标复制哪个图标代码,  如 icon-user1

     

    
    
  • 相关阅读:
    ceph pool 管理
    python 创建一个实例:步骤二 添加行为方法,编写方法
    python 创建一个实例:步骤一 编写一个构造函数
    Ceph集群rbd-mirror A、B区域备份实施方案
    python 函数中的递归、lambda 、map reduce 等详解
    reduce python 的用法
    python 搜集参数的共有项和所有项
    argument python 参数 举例
    The Preliminary Contest for ICPC Asia Nanjing 2019 A The beautiful values of the palace(树状数组+思维)
    hdu 4614 Vases and Flowers(线段树+二分)
  • 原文地址:https://www.cnblogs.com/gdwz922/p/9472292.html
Copyright © 2020-2023  润新知