day59
轮播图作业
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
.wrap{
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
ul{
width: 1200px;
height: 200px;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
left: 0;
}
ul>li{
/*display: inline-block;*/
float: left;
width: 300px;
height: 200px;
}
.l1{
background-color: red;
}
.l2{
background-color: green;
}
.l3{
background-color: blue;
}
.l4{
background-color: cyan;
}
.d1{
margin-left: 100px;
}
.d1,.d2,.d3,.d4{
text-align: center;
margin-top: 20px;
margin-right: 10px;
line-height: 30px;
float: left;
border: 3px solid black;
border-radius: 5px;
width: 5px;
height: 5px;
background-color: white;
/*position: absolute;*/
}
div:hover{
background-color: #d3d3d3;
cursor: pointer;
user-select: none;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li class="l1"></li>
<li class="l2"></li>
<li class="l3"></li>
<li class="l4"></li>
</ul>
</div>
<div class="d1 d"></div>
<div class="d2 d"></div>
<div class="d3 d"></div>
<div class="d4 d"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$('.d').click(function () {
console.log('123');
$('ul').animate({
left : - ($(this).index()-1) * $('li').width()
},300)
})
</script>
</html>
day59的更多相关文章
- day59——orm单表操作
day59 orm单表操作 对象关系映射(object relational mapping) orm语句 -- sql -- 调用pymysql客户端发送sql -- mysql服务端接收到指令并执 ...
- python 全栈开发，Day59(小米商城)
一.小米商城 准备工作: 访问iconfont,官网链接: http://www.iconfont.cn/ 登录之后,找到需要的图标 将图标下载到本地,解压,重命名为font创建几个空文件夹:css, ...
- js动态创建表格------Day59
刚刚不知道怎么回事,CSDN博客一直打不开,就在博客园完毕了今天的记录,结果临关机,登录了下.发现又好了,就再多花个几分钟转下吧,也无论到底在意的是什么了,权当强迫症了... 前几天记录了动态的加入一 ...
- Pyhton学习——Day59
参考博客: http://www.cnblogs.com/wupeiqi/articles/6144178.html Form 1. 验证 2. 生成HTML(保留上次输入内容) 3. 初始化默认是 ...
- （day59）十一、CSRF、Auth模块、impotlib模块、settings源码
目录 一.模拟实现中间件的编程思想 (一)impotlib模块 (二)实现功能的配置使用 二.跨站请求伪造CSRF (一)由来 (二)form表单的CSRF (三)ajax中的CSRF (1)通过da ...
- day59 django初识
目录 一.借助wsgiref模块实现简易版web框架 二.动静态页面 三.python三大主流web框架 四.启动一个django项目 1 启动前的注意事项 1.1 计算机的问题 1.2 django ...
- day59 pip安装django出错解决方案
在虚拟环境下,输入 pipinstall django ==2.2,安装django,可能会出现超时问题 这里的报错是网络问题,解决方案有如下三种 (1)多试几次,网络好就装上了 (2)Cmd输入 ...
- day59:Linux:编辑工具vim&文件类型&文件属性
目录 1.Linux编辑工具vim 2.Linux文件类型 3.Linux文件属性 4.今日份Linux练习题 Linux编辑工具vim 1.什么是vim 文本文件的编辑工具, 和windows的n ...
- Python之返回函数
高阶函数可以把函数作为一个结果值返回 举例说明 普通的求积函数是 vim day5-6.py #!/usr/bin/python # -*- coding:utf-8 -*- def product( ...
随机推荐
- 对象属性键值[key]属性问题
1,obj[key]此时key代表是循环中的一个变量. var obj = {key:3,key1:1,key2:2,key3:3,toSting:4}; for (key in obj) { con ...
- linux下将本地文件上传到github中？
今天编写一份Python基础代码,经过Linux上传到github上,遇到点问题,已经解决 1.首先sudo su 进入root 用户 2.ls 检查出当前文件下有什么文件 3. cd 进入你将要上传 ...
- angular.js 教程 -- 实例讲解
angular.js AngularJS [1] 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Ang ...
- 分布式Session一致性解决方案有哪些？
1.使用cookie代替session(不安全,不推荐使用) 2.使用数据库存储session(效率低,不推荐使用) 3.使用nginx反向代理ip绑定方法,同一个ip只能在同一台服务器上进行访问(不 ...
- 前后端分离(手) -- mock.js
前言: 本篇博文昨天七夕写的,一天下来被虐得体无完肤,苦逼的单身狗只能学习,对!我爱学习,关掉朋友圈,并写了一篇博文发泄发泄.这次写mock.js的使用,能使前后端分离,分离,分离,重要的是说三遍. ...
- profile,bashrc,.bash_profile,.bash_login,.profile,.bashrc,.bash_logout浅析 Part 2
profile,bashrc,.bash_profile,.bash_login,.profile,.bashrc,.bash_logout浅析 Part 2 by:授客 QQ:103355312 ...
- JavaScript语法详解：运算符和表达式
本文首发于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 我们在上一篇文章里讲到了JS中变量的概念,本篇文章讲一下运算符和表达式. 比 ...
- 用例设计之APP用例覆盖准则
基本原则 本文主要讨论APP功能用例的覆盖,基本原则: 用户场景闭环(从哪来到哪去) 遍历所有的实现逻辑路径 需求点覆盖 覆盖维度 APP功能用例设计主要使用传统的黑盒用例设计方法.同时,作为移动AP ...
- unittest 常用的断言方法
1.assertEqual(self, first, second, msg=None) --判断两个参数相等:first == second 2.assertNotEqual(self, first ...
- NodeJS链接MySql数据库
//1.用npm命令安装mysql模块 npm install mysql //2.js文件中引入mysql模块 const mysqlModule = require('mysql'); //3.创 ...