潭州课堂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="https://at.alicdn.com/t/font_791183_yqg5z4kxenj.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="login.html">登录</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>
<div class="news-nav"></div>
<div class="more">加载更多</div>
</div>
<div class="aside"> </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); /*鼠标移入时放大多少倍*/
}
index.js
/**
* Created by Administrator on 2018/8/15 0015.
*/
$(function(){
var $picli = $('.banner .pic li img');
var $tabli = $('.banner .tab li');
var $btnli = $('.banner .btn li');
var len = $picli.length;
//var len1 = $btnli.length;
//console.log(len1);
var n = 0; // 记录上次变量
var timer; // 初始化
//..... //tab 区域
$tabli.click(function(){
var x = $(this).index() ; //获取点击该按键的下标，
if(x != n){
chan(x);
//console.log(x);
}
}); //btn区域
$btnli.click(function(){
var x = n;
if($(this).index()){
x++;
x %= len;
chan(x);
} else {
x--;
if(x<0) x = len-1;
chan(x);
}
}); // 自动 轮播
function auto(){
timer = setInterval(function(){
var x = n;
x++;
x %= len;
chan(x);
},3000)
}
auto();
$('.banner').hover(function () { //鼠标移入清除定时器
clearInterval(timer);
},auto); //鼠标移出重启轮播 function chan(i){
$tabli.eq(n).removeClass('on'); // 点哪个，给哪个按键删除 class
$picli.eq(n).fadeOut(2000);
n = i;
$tabli.eq(n).addClass('on'); // 点哪个，给哪个按键加 class
$picli.eq(n).fadeIn(2000); //
}
});
潭州课堂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 ...
随机推荐
- ubuntu16.04+caffe+python接口配置
在Windows上用了一个学期的caffe了.深感各种不便,于是乎这几天在ubuntu上配置了caffe和它的python接口,现在记录配置过程,亲测可用: 环境:ubuntu16.04 , caff ...
- C#使用RabbitMQ
1. 说明 在企业应用系统领域,会面对不同系统之间的通信.集成与整合,尤其当面临异构系统时,这种分布式的调用与通信变得越发重要.其次,系统中一般会有很多对实时性要求不高的但是执行起来比较较耗时的地方, ...
- WPF当中StaticResource调用方法
1.先在Converter命名空间当中,定义转换功能类: public sealed class BoolToValueConverter : System.Windows.Data.IValueCo ...
- 深入解析内存原理：SRAM的基本原理
1. SRAM芯片的引脚定义早期的SRAM 芯片采用了20 线双列直插(DIP:Dual Inline Package)封装技术,它们之所以具有这么多的针脚,是因为它们必须:• 每个地址信号都需要一根 ...
- igmp组播测试环境搭建
2.4G无线组播测试环境搭建: (1)组播源: VLC 或者 pixstream (2)无线: 2.4G AP (3)客户端PC: VLC播放器 有线直连 无线2.4G PC(组播源pixstream ...
- ajax模拟获取json
现在工作中我用到获取数据的方式,基本都是ajax.前台获取后端的数据后,需要进行处理,然后把他们放进页面中的相应标签里.下面举一个简单的例子,来模拟数据的获取和摆放. 这里用ng框架获取数据然后处理, ...
- webstrom里面的html页面设置
代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...
- hdu1540
怎么会T啊 /* 三种操作:D x:第x个位置1 Q x:查询第x位置所在的0连续块 R :将上次D的位置置0 */ #include<iostream> #include<algo ...
- cf276E 两棵线段树分别维护dfs序和bfs序，好题回头再做
搞了一晚上,错了,以后回头再来看 /* 对于每次更新,先处理其儿子方向,再处理其父亲方向 处理父亲方向时无法达到根,那么直接更新 如果能达到根,那么到兄弟链中去更新,使用bfs序 最后,查询结点v的结 ...
- android adb命令 抓取系统各种 log
getLog.bat: adb root adb remount adb wait-for-device adb logcat -v time > C:\log.txt 在Android中不同的 ...