潭州课堂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驱动笔记(十八)------浅析V4L2框架之ioctl【转】
转自:https://blog.csdn.net/Guet_Kite/article/details/78574781 权声明:本文为 风筝 博主原创文章,未经博主允许不得转载!!!!!!谢谢合作 h ...
- MIPI协议学习总结(一)
一.MIPI 简介: MIPI(移动行业处理器接口)是Mobile Industry Processor Interface的缩写.MIPI是MIPI联盟发起的为移动应用处理器制定的开放标准. 已经完 ...
- C# 使用Win32 API将1个EXE程序嵌入另1个程序中
已经干到天快亮了,就不废话直接贴点儿代码吧 ; ; /// <summary> /// 查找窗口 ///第一个参数是窗口的标题,第二个参数可直接用 null ///通过窗口的标题查找对应的 ...
- SharePoint 2013 文档库“样式”变了
有朋友反馈说文档库的样式变了. 经查证,原来有人修改了视图的"样式":库设置—视图—样式,改为默认即可. 另外,如果编辑页面,编辑web部件的属性,在"杂项"勾 ...
- 目标检测--Spatial pyramid pooling in deep convolutional networks for visual recognition(PAMI, 2015)
Spatial pyramid pooling in deep convolutional networks for visual recognition 作者: Kaiming He, Xiangy ...
- Android 自定义View二（深入了解自定义属性attrs.xml）
1.为什么要自定义属性 要使用属性,首先这个属性应该存在,所以如果我们要使用自己的属性,必须要先把他定义出来才能使用.但我们平时在写布局文件的时候好像没有自己定义属性,但我们照样可以用很多属性,这是为 ...
- Android设计模式-观察者模式
原文地址 http://blog.csdn.net/qq_25806863/article/details/69218968 观察者模式是一种使用频率非常高的设计模式,最常用的地方就是订阅-发布系统. ...
- confusion_matrix（混淆矩阵）
作者:十岁的小男孩 凡心所向,素履可往 目录 监督学习—混淆矩阵 是什么?有什么用?怎么用? 非监督学习—匹配矩阵 混淆矩阵 矩阵每一列代表预测值,每一行代表的是实际的类别.这个名字来源于它可以非常容 ...
- ubuntu 语言设置
1.ubuntu ibus 输入法无法切换拼音 原因未安装中文输入法 sudo apt install ibus-pinyin //安装pinyinwin + space(空格) 切换中文输入法 再用 ...
- hdu5289 ST表+二分
用裸的St表+暴力枚举查询时稳TLE的,可以枚举每个区间的起点+二分满足条件的区间右端,这样复杂度是O(nlogn) #include<iostream> #include<cstr ...