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

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

在 index.html 文件中引入

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

其代码在浏览器中撕开时

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

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

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

潭州课堂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">&lt ...
潭州课堂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 ...

随机推荐

Ant 学习及常用任务
安装与配置下载地址:http://ant.apache.org/bindownload.cgi,解压. 添加系统环境变量: ANT_HOME,该变量指向Ant解压后的根目录. PATH,追加path ...
js函数的传参是按值传对递
根据js高级程序设计第三版编写,对于函数的参数只能按值传递是这样解释的: ECMAScript 中所有函数的参数都是按值传递的.也就是说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另 ...
内存映射+远线程调用游戏CALL
源码中用到的结构和未公开函数请到 http://www.cnblogs.com/IMyLife/p/4826286.html 获取 HANDLE ProcessHandle=NULL; DWORD ...
只需要一点点C++基础，新手也可以制作单机游戏内存修改器
声明:本文只是为了初学C++的,能够做出一些实用的东西,跳出管理系统的束缚,提升学习的兴趣,在这里选取了单机游戏,请不要尝试在线游戏,违发而已未必可行.序:首先我们需要一个Qt+VS环境Qt从http ...
swift 之 namespace
场景: 项目中类名过长,造成不能根据文件名区分出来,并且如果一个模块的类较多时,很难取一个比较优雅的名字.为了使模块名可读, 我们一般的做法就是添加模块前缀.但是如果模块中还有个子模块,如果还继续按 ...
[HNOI2008]Cards
题目描述小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给出了答案. 进一步,小春要求染出Sr张红色,Sb张蓝 ...
NET Core 指令启动
ASP.NET Core 是新一代的 ASP.NET,早期称为 ASP.NET vNext,并且在推出初期命名为ASP.NET 5,但随着 .NET Core 的成熟,以及 ASP.NET 5的命名会 ...
Eclipse git 冲突合并
Eclipse有一个git的插件叫EGit,用于实现本地代码和远程代码对比.合并以及提交.但是在本地代码和远程代码有冲突的时候,EGit的处理方案还是有点复杂.今天就彻底把这些步骤给理清楚,并公开让一 ...
error C2998：不能是模板定义的错误解决
作者:朱金灿来源:http://blog.csdn.net/clever101 在一个非模板类中定义了一个模板函数,如下: template<typename T> bool HDF5_ ...
python中使用eval() 和 ast&period;literal&lowbar;eval()的区别分类： Python 2015-05-11 15&colon;21 1216人阅读评论(0) 收藏
eval函数在python中做数据类型的转换还是很有用的.它的作用就是把数据还原成它本身或者是能够转化成的数据类型. 那么eval和ast.literal_val()的区别是什么呢? eval在做计算 ...

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

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

随机推荐

相关文章

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

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