潭州课堂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="css/index.css">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_791183_z2ywx2u4woc.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</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="css/login.css">登录</a> </span>
</div>
</div>
</div>
<!--header end--> <!--main star-->
<div class="main">
<div class="main-box clearfix">
<div class="main-contain"> <!--banner-->
<div class="banner">
<ul class="pic">
<li><img class="show" src="https://res.shiguangkey.com//file/201806/19/20180619142252602590185.jpg"></li>
<li><img src="https://res.shiguangkey.com//file/201806/19/20180619141337485823895.jpg"></li>
<li><img src="https://res.shiguangkey.com//file/201806/21/20180621150342030454625.jpg"></li>
<li><img src="https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg"></li>
</ul>
<ul class="tab">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="btn">
<li class="left"><</li>
<li class="right">></li>
</ul>
</div>
<div class="contain">
<ul class="recommend-news">
<li>
<a href="#"><img src="https://res.shiguangkey.com//file/201806/04/20180604235838752491899.png!mall_course_a" alt="test"></a>
<p>
<a href="#">SEO优化，最新快速排名技巧解答分享</a>
</p>
</li>
<li>
<a href="#"><img src="https://res.shiguangkey.com//file/201805/26/20180526105323340886406.png!" alt="test"></a>
<p>
<a href="#">web前端零基础入门</a>
</p>
</li>
<li>
<a href="#"><img src="https://res.shiguangkey.com//file/201805/03/20180503165311843004082.png!" alt="test"></a>
<p>
<a href="#">韩语小白变大神</a>
</p>
</li>
</ul>
</div> <!--news nav-->
<div class="news-nav">
<ul class="nav">
<li class="active">python</li>
<li>前端</li>
<li>爬虫</li>
<li>网络安防</li>
</ul>
<ul class="contain">
<li class="show">
<div class="clearfix">
<div class="left">
<img src="https://res.shiguangkey.com//file/201805/03/20180503165311843004082.png!mall_course_a" alt="">
</div>
<div class="right">
<p><span>可里:</span>大学韩国语专业 亚篮锦标赛韩语随同翻译 3年线上韩语教育经验</p>
<p><span>小美:</span>大学韩语专业 韩语TOPIK6级 三年线上教学经验</p>
<p><span>鸭梨:</span>大学韩国语专业 2年线上韩语教学经验 多年韩国漫画翻译经验</p>
<p><span>可可:</span>韩语随同翻译 牙科医疗反映 丰富口译经验 多年爱豆站姐翻译经验</p>
</div>
</div>
<div class="clearfix">
<div class="left">
<img src="https://res.shiguangkey.com//file/201807/23/20180723165649433839624.png!mall_course_a">
</div>
<div class="right">
<p><span>Kayee:</span>口语水平优秀 语言表达能力强 教学经验丰富 对学员有耐心</p>
<p><span>Celin:</span>课堂活泼有趣 注重和学员互动 轻轻松松帮大家理解英语知识</p>
<p><span>Molly:</span>商务英语专业 对学员耐心 喜欢发掘不同类型的英语应用</p>
<p><span>Zoey:</span>口语水平优秀 语言表达能力强 注重培养学员的口语能力和书写能力</p>
</div>
</div>
</li>
<li>
<div class="clearfix">
<div class="left">
<img src="https://res.shiguangkey.com//file/201805/26/20180526105323340886406.png!mall_course_a" alt="">
</div>
<div class="right">
<p><span>PC+移动开发班</span></p>
<p>html + css</p>
<p><span>移动网站开发内容</span></p>
<p>html5 + css3</p>
</div>
</div>
<div class="clearfix">
<div class="left">
<img src="https://res.shiguangkey.com//file/201804/11/20180411113302019932295.jpg!mall_course_a">
</div>
<div class="right">
<p><span>javascript</span></p>
<p>操作DOM 面向对象 Jquery ECMAScript6</p>
<p><span>前端框架</span></p>
<p>vue Angular React</p>
</div>
</div>
</li>
<li>
<div class="clearfix">
<div class="left">
<img src="https://res.shiguangkey.com//file/201807/02/20180702141502580115367.png!mall_course_a" alt="">
</div>
<div class="right">
<p><span>基础阶段</span></p>
<p>python基础 python进阶 web前端</p>
<p><span>实战阶段</span></p>
<p>框架 项目</p>
</div>
</div>
<div class="clearfix">
<div class="left">
<img src="https://res.shiguangkey.com//file/201807/02/20180702153723740596415.png!mall_course_a">
</div>
<div class="right">
<p><span>Python数据分析与机器学习</span></p>
<p>numpy pandas matplotlib seaborn</p>
<p>K邻近算法 线性回归与逻辑回归算法</p>
<p>决策树算法 集成算法与随机森林 贝叶斯算法 支持向量机</p>
</div>
</div>
</li>
<li>
<div class="clearfix">
<div class="left">
<img src="https://res.shiguangkey.com//file/201804/19/20180419103002769224662.jpg!mall_course_a" alt="">
</div>
<div class="right">
<p><span>c++课程体系</span></p>
<p>C语言核心 C++语言核心</p>
<p>Windows核心编程 Linux核心编程</p>
<p>QT核心编程 服务器核心编程</p>
</div>
</div>
<div class="clearfix">
<div class="left">
<img src="https://res.shiguangkey.com//file/201807/02/20180702153645933550456.png!mall_course_a">
</div>
<div class="right">
<p><span>罗伯特:</span>十年项目开发经验 精通C/C++、Windows游戏编程</p>
<p><span>九夏老师:</span>七年企业级项目实战经验，擅长Windows/Linux平台</p>
<p><span>Danny:</span>八年大型项目开发经验，精通C/C++编程语言，擅长WindowsAPI</p>
<p><span>强森老师:</span>五年企业级IT项目开发经验，三年线下教学经验</p>
</div>
</div>
</li>
</ul>
</div>
<div class="more">加载更多</div>
</div>
<div class="aside">
<div class="side-activities">
<h2>公开课<span>更多</span></h2>
<div>
<img src="https://res.shiguangkey.com/file/201804/19/20180419161303876645368.png!mall_course_b">
<p>python零基础入门到项目实战</p>
<hr> </div>
<div>
<h2>VIP课<span>更多</span></h2>
<div>
<img src="https://res.shiguangkey.com//file/201804/19/20180419103636100353500.jpg!mall_course_a" alt="">
<p>Python基础</p>
<p>Python进阶</p>
<p>Python web</p>
<p>框架(Django Tornado)</p>
<p>项目实战</p>
<hr>
</div>
<div class="about" style="background: url(2.png)no-repeat 200px 10px/120px 150px">
<h4>关注我</h4>
<ul>
<li><i class="iconfont icon-ai-weixin" style="color: blue"></i>gdwz922</li>
<li><i class="iconfont icon-QQ"style="color: blue"></i>i649975652</li>
<li><i class="iconfont icon-weibo"style="color: blue">....</i></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!--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> <script src="js/index.js"></script>
</body>
</html>
index.css
.main{
width: 100%;
/*background: red;*/
padding: 30px 0;
}
.main .main-box{
width: 1200px;
/*height: 1000px;*/
margin: auto; /*居中*/
/*background: yellowgreen;*/
}
.main .main-box .main-contain{
float: left; /*左浮动*/
width: 800px;
}
.main .main-box .main-contain .banner{
width: 800px;
height: 200px;
position: relative;
/*background: blue;*/
}
.main .main-box .main-contain .banner .pic li img{
width: 800px;
height: 200px;
position: absolute;
left: 0;
top: 0;
}
.main .main-box .main-contain .banner .pic li img{
display: none;
}
.main .main-box .main-contain .banner .pic li .show{
display: block;
}
.main .main-box .main-contain .banner .tab{
position: absolute;
left: 340px;
bottom: 15px;
}
.main .main-box .main-contain .banner .tab li{
height: 20px;
width: 20px;
border: 1px solid white;
float: left;
margin: 10px;
border-radius: 50%; /*方变圆*/
cursor: pointer; /*出现小手*/
}
.main .main-box .main-contain .banner .tab .on{
background: red;
}
.main .main-box .main-contain .banner .btn{
font-size: 50px;
color: white;
font-weight: bold;
line-height: 200px;
cursor: pointer; /*出现小手*/
display: none;
}
.main .main-box .main-contain .banner:hover .btn{
display: block;
}
.main .main-box .main-contain .banner .btn .left{
position: absolute;
left: 5px;
}
.main .main-box .main-contain .banner .btn .right{
position: absolute;
right: 5px;
}
.main .main-box .main-contain .contain{
width: 800px;
/*background: red;*/
font-size: 14px;
}
.main .main-box .main-contain .contain .recommend-news li a img{
width: 250px;
height: 180px; /*固定图片大小*/
transition: all 1s; /**在放大图片时有时间过度 */
}
.main .main-box .main-contain .contain .recommend-news{
display: flex;
justify-content:space-between; /*弹性盒模型，大小自动分配 （一步做完浮动）*/
padding: 20px 10px;
}
.main .main-box .main-contain .contain .recommend-news li p{
text-align: center; /*居中*/
line-height: 25px; /**/
}
.main .main-box .main-contain .contain .recommend-news li a img:hover{
transform: scale(1.2); /*鼠标移入时放大多少倍*/
}
/*news-nav */
.main .main-box .main-contain .news-nav .nav{
width: 800px;
height: 65px;
background: yellow;
line-height: 60px; /**行高与 height 一样时，文字垂直居中*/
}
.main .main-box .main-contain .news-nav .nav li{
float: left; /*浮动*/
margin: 0 20px;
}
.main .main-box .main-contain .news-nav .nav li.active{
border-bottom: 5px solid red;
box-sizing: border-box; /**让上行设置的底边往上移*/
}
.main .main-box .main-contain .news-nav .nav li:hover{
cursor: pointer; //**加小手*/
}
.main .main-box .main-contain .news-nav .contain{
width: 800px;
/*height: 800px;*/
/*background:brown;*/
}
.main .main-box .main-contain .news-nav .contain .left img{
float: left;
width: 260px;
height: 200px;
padding: 5px;
border-radius: 20px; /*小圆角*/
overflow: hidden; /*超出隐藏*/
margin-right: 10px;
transition: all 1s; //*图片慢慢变大*/
}
.main .main-box .main-contain .news-nav .contain .left img:hover{
transform: scale(1.2);
}
.main .main-box .main-contain .news-nav .contain .right{
float: left;
line-height: 35px;
padding: 26px 0 0 0;
font-size: 16px;
}
.main .main-box .main-contain .news-nav .contain li{
display: none;
}
.main .main-box .main-contain .news-nav .contain li.show{
display:block;
}
.main .main-box .main-contain .more{
width: 500px;
height: 60px;
margin: 10px auto;
background: yellow;
border-radius: 10px;
line-height: 60px; /*垂直居中*/
text-align: center; /*水平居中*/
cursor: pointer; //**加小手*/
}
/*aside*/
.main .main-box .aside{
width: 360px;
float: right;
/*height: 700px;*/
background: yellow;
}
.main .main-box .aside .side-activities h2{
padding: 0 30px;
height: 35px;
line-height: 35px;
}
.main .main-box .aside .side-activities span{
float: right;
color: skyblue;
cursor: pointer; //**加小手*/
}
.main .main-box .aside .side-activities div img{
width: 320px;
padding: 0 20px;
}
.main .main-box .aside .side-activities div p{
padding: 0 30px;
height: 30px;
line-height: 30px;
}
.main .main-box .aside .side-activities .about{
padding: 0 20px;
width: 320px;
background: url('2.png') no-repeat 200px 10px/100px 100px;
}
.main .main-box .aside .side-activities .about ul li {
font-size: 15px;
line-height: 50px;
}
.main .main-box .aside .side-activities .about ul li{
height: 50px;
line-height: 50px;
font-size: 18px;
}
.main .main-box .aside .side-activities .about ul li i{
vertical-align: -8px;
margin-left: 20px;
font-size: 35px;
}
潭州课堂25班：Ph201805201 WEB 之 页面编写 第三课 (课堂笔记)的更多相关文章
- 潭州课堂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 之 页面编写 第一课 (课堂笔记)
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 手把手和你一起实现一个Web框架实战——EzWeb框架(三)[Go语言笔记]Go项目实战
手把手和你一起实现一个Web框架实战--EzWeb框架(三)[Go语言笔记]Go项目实战 代码仓库: github gitee 中文注释,非常详尽,可以配合食用 本篇代码,请选择demo3 这一篇文章 ...
- 潭州课堂25班：Ph201805201 第十课 类的定义，属性和方法 (课堂笔记)
类的定义 共同属性,特征,方法者,可分为一类,并以名命之 class Abc: # class 定义类, 后面接类名 ( 规则 首字母大写 ) cls_name = '这个类的名字是Abc' # 在类 ...
- 潭州课堂25班：Ph201805201 WEB 之 Ajax第八课 (课堂笔记)
js <——>jq <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 潭州课堂25班：Ph201805201 WEB 之 HTML 第一课 (课堂笔记)
什么是HTML 超文本标记语言(HyperText Markup Language,简称 HTML) HTML 是一门标记语言,标记语言由一套标记标签组成, 学习 HTML,其实就是学习标签 HTML ...
- 潭州课堂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 ...
随机推荐
- haar特征（转）
转载链接:http://blog.csdn.net/lanxuecc/article/details/52222369 Haar特征 Haar特征原理综述 Haar特征是一种反映图像的灰度变化的,像素 ...
- 001_vagrant利器
一. 这是一个关于Vagrant的学习系列,包含如下文章: Vagrant入门 http://www.cnblogs.com/davenkin/p/vagrant-virtualbox.html 创建 ...
- centos6.5下java和tomcat环境部署
软件包: tomcat安装包 apache-tomcat-7.0.67.zip jdk安装包 jdk-6u10-linux-x64.bin 下载地址:http://www.oracle.com/tec ...
- 转载：2.2.1 块配置项《深入理解Nginx》（陶辉）
原文:https://book.2cto.com/201304/19626.html 块配置项由一个块配置项名和一对大括号组成.具体示例如下:events {-} http { upstream ba ...
- selenium捕捉视频
捕捉视频 有时候我们未必能够分析故障只需用日志文件或截图的帮助.有时捕获完整的执行视频帮助.让我们了解如何捕捉视频. 我们将利用Monte媒体库的执行相同. 配置 第1步:导航到URL - http: ...
- Oracle 数据库、实例、用户、表空间、表之间的关系
数据库: Oracle数据库是数据的物理存储.这就包括(数据文件ORA或者DBF.控制文件.联机日志.参数文件).其实oracle数据库的概念和其它数据库不一样,这里的数据库是一个操作系统只有一个库. ...
- WAP、触屏版网站及APP的区别
1.电脑版网站: 电脑版网站是指用户通过台式或者笔记本电脑浏览器打开的网站,也就是我们平时上网所访问的网站.其支持和兼容IE6.IE7.IE8.IE9.IE10.Firefox.Chrome等各种主 ...
- php 爬取数据
简单. 灵活.强大的PHP采集工具,让采集更简单一点. 简介: QueryList使用jQuery选择器来做采集,让你告别复杂的正则表达式:QueryList具有jQuery一样的DOM操作能力.Ht ...
- 《剑指offer》-数组中只出现一次的数字
/* 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 思路: 如果是只有一个数字出现一次,那么所有数字做异或就得到结果: 现在有两个数字x,y分别出现一次 ...
- PHP服务端支付宝支付及回调
支付宝支付 (由app端自行调起支付宝/微信) 1.下载PHP版SDK 1 <?php 2 3 define('IN_ECS', true); 4 5 /*App支付 PHP服务端*/ 6 /* ...