潭州课堂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 ...
随机推荐
- 解析如何在C语言中调用shell命令的实现方法【转】
本文转自:http://www.jb51.net/article/37404.htm 1.system(执行shell 命令)相关函数 fork,execve,waitpid,popen表头文件 #i ...
- Project Euler Problem8
Largest product in a series Problem 8 Find the greatest product of five consecutive digits in the 10 ...
- 在window是下安装hadoop过程
详细见http://www.cnblogs.com/kinglau/archive/2013/08/20/3270160.html
- Weex学习资料整合
1.weex weex文档:http://weex.apache.org/cn/guide/index.html Weex Ui awesome-weex WEEX免费视频教程-从入门到放肆 (共17 ...
- mysql语句判断是否存在记录，没有则插入新纪录否则不执行
1 前言 由于项目需要,当某个表如果有记录,就不执行加入语句,否则加入新纪录(测试数据).思路是:判断表的记录是否为空,然后再决定是否插入 2 代码 DROP PROCEDURE IF EXISTS ...
- Node.js随手笔记
参考文章:https://blog.csdn.net/IronKee/article/details/83780857 安装nvm的方法: 如果已经单独安装了node,建议卸载,然后继续向下看. 直接 ...
- LeetCode（49）： 字母异位词分组
Medium! 题目描述: 给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", ...
- 【python】xsspider零碎知识点
1.提取url信息 urlparse() from urlparse import urlparse url = "http://scrapy-chs.readthedocs.io/zh_C ...
- laravel 同数据表字段比较查询和状态不正规排序
今天写群组推荐接口,要求未满的群 ( 群最大人数字段maxusers, 群人数字段affiliations_count 都在群组表中),官方,热门(普通群0 ,官方1,热门2 ) 排序的群 同表字段比 ...
- PHP常见错误提示含义解释
1.Notice: Undefined variable: 变量名 in 注:使用了一个没有被定义的变量 2.Parse error: syntax error, unexpected T_ELSE ...