zoukankan      html  css  js  c++  java
  • 潭州课堂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

     

    
    
  • 相关阅读:
    11. Container With Most Water
    9. Palindrome Number
    375. 猜数字大小 II leetcode java
    leetcode 72 编辑距离 JAVA
    73. 矩阵置零 leetcode JAVA
    快速排序 JAVA实现
    63. 不同路径 II leetcode JAVA
    重写(override)与重载(overload)
    62 不同路径 leetcode JAVA
    leetcode 56 合并区间 JAVA
  • 原文地址:https://www.cnblogs.com/gdwz922/p/9472292.html
Copyright © 2011-2022 走看看