潭州课堂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;

    width: 100%;

    background: black;

    color: white;

}

.header .header-contain{

    width: 1200px;

    height: 69px;

    line-height: 69px;

    margin: auto;

    background: blue;

}

/*logo star*/

.header .header-contain .log{

    width: 230px;

    height: 64px;

    float: left;        /*左浮动*/

}

.header .header-contain .log .logo-title{

    display: block;     /*块级*/

    width: 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{

    width: 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;

    width: 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

潭州课堂25班：Ph201805201 WEB 之页面编写第一课 (课堂笔记)的更多相关文章

潭州课堂25班：Ph201805201 WEB 之页面编写第二课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
潭州课堂25班：Ph201805201 WEB 之页面编写第四课登录注册 (课堂笔记)
index.html 首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
潭州课堂25班：Ph201805201 WEB 之页面编写第三课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)
js <——>jq <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
潭州课堂25班：Ph201805201 WEB 之 jQuery 第七课 (课堂笔记)
jq 的导入 <body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">< ...
潭州课堂25班：Ph201805201 WEB 之 JS 第六课 (课堂笔记)
上节补充方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
潭州课堂25班：Ph201805201 WEB 之 JS 第五课 (课堂笔记)
算数运算符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
潭州课堂25班：Ph201805201 WEB 之 JS 第四课 (课堂笔记)
JS 引入方式在 HTML 中写入写在的标签里 <script> </script>推荐放在 </body> 结束之前 <!DOCTYPE html& ...
潭州课堂25班：Ph201805201 WEB 之 CSS 第三课 (课堂笔记)
在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层边框 border border-top: 5px solid black; /*上边框实线*/ border-right: 3px do ...

随机推荐

AT91RM9200---SMC简介
1.前言 SMC(Static Memory Controller)Atmel 9200静态存储控制器的简称,它可以产生信号来控制外部静态存储和外设.SMC可通过编程寄存器来进行配置. 它有8路片选和 ...
Linux内存管理--物理内存分配【转】
转自:http://blog.csdn.net/myarrow/article/details/8682819 1. First Fit分配器 First Fit分配器是最基本的内存分配器,它使用bi ...
java中集合的组成及特点
1:集合 Collection(单列集合) List(有序,可重复) ArrayList 底层数据结构是数组,查询快,增删慢线程不安全,效率高 Vector 底层数据结构是数组,查询快,增删慢线程 ...
https协议的接口测试
用jmeter测试https接口: 和传统的http协议套路不太一样. 注意细节: 1.取样器正常选择http请求,端口号:为443(具体根据接口文档我刚开始用的80端口所以错了) 2.请求方法,一定 ...
Oracle 网络配置与管理
[学习目标] Oracle 监听器是一个服务器端程序,用于监听所有来自客户端的请求,并为其提供数据库服务.因此对监听器的管理与维护相当重要. 本章主要内容是描述对Oracle 监听器 ...
java 语言的主要特点
java 语言主要特点如下: 1:简单 2:面向对象 3:分布性 4:可移植性 5:安全性 6:健壮性二:java 主要术语三:java 核心是面向对象程序设计OOP 四:封装五:多态六:继承 ...
mac安装navicat mysql破解版
下载破解中文版http://m6.pc6.com/xuh6/navicat12027pre.zip 完成下载后无法正常进行安装,此时应该打开命令行执行 sudo spctl --master-disa ...
【gearman】学习笔记
学习资料:http://gearman.org/manual/ 1.Gearman是跨语言的,client和worker可以用不同的语言来实现 2.client与job server之间的交互称为ta ...
mace
作者:十岁的小男孩 QQ:929994365 心之安处即是吾乡. 本文主要的方向是终端移植.其主要又分两个小方向,理论和实践,即模型优化和模型移植.下文为前期写的,较为潦草,现在基本框架思路已经搭起来 ...
python 全栈开发，Day117(popup,Model类的继承,crm业务开发)
昨日内容回顾第一部分:权限相关 1. 权限基本流程用户登录成功后获取权限信息,将[权限和菜单]信息写入到session. 以后用户在来访问,在中间件中进行权限校验. 为了提升用户体验友好度,在后台 ...

潭州课堂25班：Ph201805201 WEB 之 页面编写 第一课 (课堂笔记)

潭州课堂25班：Ph201805201 WEB 之 页面编写 第一课 (课堂笔记)的更多相关文章

随机推荐

热门专题

潭州课堂25班：Ph201805201 WEB 之页面编写第一课 (课堂笔记)

潭州课堂25班：Ph201805201 WEB 之页面编写第一课 (课堂笔记)的更多相关文章