潭州课堂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 ...
随机推荐
- Linux驱动技术(三) _DMA编程【转】
转自:https://www.cnblogs.com/xiaojiang1025/archive/2017/02/11/6389194.html DMA即Direct Memory Access,是一 ...
- Linux内核驱动--硬件访问I/O【原创】
寄存器与内存 寄存器与内存的区别在哪里呢? 寄存器和RAM的主要不同在于寄存器操作有副作用(side effect或边际效果): 读取某个地址时可能导致该地址内容发生变化,比如很多设备的中断状态寄存器 ...
- Hacker学习发展流程图
题记:梅花香自苦寒来.转载请注明版权:http://a1pass.blog.163.com/ A1Pass 今天看一位网友的日志上面有一篇名为“学黑的目标”的日志,里面有一个略显粗 ...
- 【转】C语言正确使用extern关键字
利用关键字extern,可以在一个文件中引用另一个文件中定义的变量或者函数,下面就结合具体的实例,分类说明一下. 一.引用同一个文件中的变量 #include<stdio.h> int f ...
- centos6.5环境搭建openvp服务器及windows客户端搭建及配置详解
1.环境搭建 说明: vpn client 192.168.8.16/24 openvpn server: eth0: 192.168.8.41 eth1: 172.16.1.10 app serve ...
- Ant+Jmeter自动化接口测试的部署 及 部署过程中的坑
一.环境准备: 1.Jdk1.6或以上:http://www.oracle.com/technetwork/java/javase/downloads/index.html 配置环境变量-系统变 ...
- Java+Jmeter接口测试
一.创建工程.引包 1.创建JAVA工程 2.引入Jmeter中lib\ext基础包:ApacheJMeter_java.jar.ApacheJMeter_core.jar 3.引入Jmeter日志包 ...
- Java 使用Jedis连接Redis数据库（-）
redis 安装: Linux 安装redis 1)下载jar包: 使用Jedis需要以下两个jar包: jedis-2.8.0.jar commons-pool2-2.4.2.jar 2)测试red ...
- JQuery中的事件（三）
一:页面载入 ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度.简单地说,这个方法纯粹是对向wind ...
- ubuntu ufw防火墙软件的配置入门
顺便,一条龙作完安全吧. ufw的使用,是比iptables简单.但只能作简单的事儿,更改简单的netfilter里的iptable里的记录.难点的,可能还是得iptables原生命令. 自打2.4版 ...