<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 常用标签 -->
<!-- 注释
换行
-->
<!-- 标题标签：6级别 h1：一个页面只能使用一次h1标签，这一次用来放网页的logo -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h6>六级标题</h6>
<!-- <h7>h7标题</h7> -->
<p>段落文字</p>
<div>divdiv前端做布局（划分区域）常用的标签：div里面可以放任何内容，任何标签</div>
<span>span</span><span>span</span>
<!-- span作用：存放特殊效果的文字，小图片 -->
<hr>
<!-- 关于图片的插入以及使用 -->
<!-- html属性 键值对 k=“v” 一个标签可以添加多个属性 各个属性之间用空格隔开 -->
<!-- alt:1、替换文本，当图片无法显示的时候显示alt里面的文字；2、支持盲人读屏软件 -->
<!-- title：提示文本：1、提示用户图片的作用；2、推广关键字常用 -->
<img src="icon4.jpg" alt="我是alt志玲姐姐" title="提示文本">
<hr>
<!-- 不换行的标签 -->
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
<strong>加粗</strong>
<em>em</em>
<ins>ins</ins>
<del>del</del>
<hr>
<!-- 超链接 -->
<a href="http://www.baidu.com">百度</a>
<a href="01-不换行的标签.html" target="_blank">跳转到本地</a>
<a href="#">假链接</a>
<a href="http://www.taobao.com"><img src="xx.jpg" alt="你看不见我"></a>
<hr>
<!-- css书写的位置 -->
<!-- 嵌入式 -->
<style type="text/css">
/* text/css 纯文本的css格式 这个属性可有可无 */
/* css注释 */
/* h1文字变红色 文字颜色是红色 == h1的文字颜色是红色 */
h1{
/* css键值对 k:v; */
color:red;
/* px 是像素 */
font-size: 100px;
/* 字体 */
font-family: "宋体";
}
</style>
<!-- html -->
<h1>我的理想</h1>
<hr>
<!-- 外链式 -->
<title>Document</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">
<!-- rel=“stylesheet” html和css关系是什么：样式单 -->
<!-- href -- 路径查找css文件 -->
</head>
<body>
<!-- html和css单独文件存放代码 -->
<p>段落文字</p>
</body>
<!-- 以上外链的css如下：
文件名为:mystyle.css
内容为:p{
color: green;
}
-->
<hr>
<!-- 常用文字控制属性css -->
<style>
p{
/* 文字颜色 */
color: blue;
/* 是否加粗 */
font-weight: bold;
/* 是否倾斜 */
font-style: italic;
/* 文字修饰线 */
text-decoration: underline;
/* 字号 */
font-size: 20px;
/* 行高 */
line-height: 100px;
/* em是一个字的大小 */
/* 首行缩进 */
text-indent: 2em;
/* 字体 */
font-family: "宋体";
}
/*基本布局属性*/
<style>
div{
width: 300px;
height: 100px;
background: green;
}
</style>
<hr>
<!-- 选择器 -->
<style>
/* 定义：以点开头，后面紧跟类选择器的名字(名字自定义 满足规则：标识符) 和 使用 */
.aa{
color: green;
}
/* 使用：标签身上添加class=“类选择器的名字” */
</style>
<!-- 选择器：控制的对象 -->
<!-- div{} div是标签名字 标签选择器（以标签名字命名的选择器） -->
<!-- 类选择器 -->
<div>div1</div>
<div class="aa">div2</div>
<div>div3</div>
<hr>
<!-- 相对路径和绝对路径 -->
<!-- 使用 ../ (上一级路径)和 / (当前路径下的) -->
<img src="icon3.jpg" alt="">
<img src="../icon2.jpg" alt="">
<img src="../img/icon4.jpg" alt="">
<img src="http://www.baidu.com/img/bd_logo1.png" alt="">
<hr>
<!-- 列表 -->
<style>
ul{
/* 去掉列表的列表样式/项目符号 */
list-style:none;
}
</style>
</head>
<body>
<!-- 经验：前端的人 网站的导航用ul标签写代码 -->
<!-- 列表：整体管理的大标签 嵌套 表示某一项的小标签 -->
<!-- 无序：ul嵌套li ul是无序列表整体 li某一项 -->
<ul>
<li>新闻</li>
<li>新闻</li>
<li>新闻</li>
<li>新闻</li>
<li>新闻</li>
</ul>
<!-- 有序：ol嵌套li，ol整体标签，li某一项 -->
<ol>
<li>新闻</li>
<li>新闻</li>
<li>新闻</li>
<li>新闻</li>
<li>新闻</li>
</ol>
<!-- 项目：dl嵌套dt和dd，dl是整体标签，dt是项目标题，dd项目的描述信息 -->
<dl>
<dt>标题</dt>
<dd>描述信息</dd>
</dl>
<dl>
<dt>股票系统</dt>
<dd>这是一个选股系统，添加关注，删除、修改</dd>
</dl>
</body>
<hr>
<!-- 表格 -->
<style>
table{
/* border:粗细 颜色 线条种类; border是一个key对应多个v，各个v之间用空格隔开，border的值不分先后顺序 */
border: 1px red solid; /* solid是 实线 */
/* 合并表格边框线 */
border-collapse: collapse;
}
td{
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 国内2005年互联网行业发生事：网站改版从表格布局改成div布局 -->
<!-- 表格：浏览器当整个表格读取完显示页面 -->
<!-- div：读取一行显示一行 -->
<!-- 结构：table嵌套tr，tr嵌套td；table是整个表格，tr是行，td是单元格 -->
<!-- th:表头 -->
<!-- cellspacing:拉开单元格之间的距离 -->
<!-- cellpadding :拉开内容和td边缘之间的距离 -->
<table cellspacing="50" cellpadding="20">
<tr>
<th>1</th>
<th colspan="2">2</th>
</tr>
<tr>
<td>1</td>
<td rowspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
</tr>
</table>
</body>
<hr>
<!-- 表单 -->
<style>
textarea{
resize: none;
/* 蓝色的框 焦点框 */
outline: none;
}
</style>
</head>
<body>
<!-- form：表单标签/表单域标签 -->
<form action="提交地址" method="post">
<!-- 功能性的标签：用户名、密码 -- 表单控件 -->
<!-- placeholder html5.0 -->
<!--</label> 点击文字也能选中 -->
文本框：<input type="text" value="默认值">
<br><br>
密码：<input type="password">
<br><br>
单选框：<input type="radio" name="sex" id="man"><label for="man">男</label> <input type="radio" name="sex" checked id="nv"><label for="nv">女</label>
<!--
1、单选功能：添加name=“”，取值相同
2、默认选中：checked=“checked” html5.0中如果k和v的值相等的那么只写一个单词 checked
3、扩大触发区域：文字添加label标签，保证label标签的for属性值和input标签的id属性值完全相等
-->
<br><br>
上传文件：<input type="file">
<br><br>
文本域：
<textarea></textarea>
<br><br>
下拉菜单：
<select>
<option>北京</option>
<option selected>上海</option>
<option>广州</option>
</select>
<br><br>
复选框/多选框: <input type="checkbox" checked>同意协议
<br><br>
<input type="submit" value="注册">
<input type="button" value="普通按钮">
<button>普通按钮</button>
<input type="reset">
</form>
</body>
<hr>
<!-- 选择器 -->
<!-- id 选择器 前面加一个#号-->
<style>
/* 注意：一个id选择器一个页面只能使用一次 */
/* 其实并不是用id选择器写css样式，id选择器查找标签做数据交互 */
#aa{
color: green;
}
</style>
</head>
<body>
<div id="aa">11111</div>
<div id="aa">2222</div>
</body>
<!-- 并集 用逗号隔开-->
<style>
div,h1,p,span{
color: red;
}
</style>
</head>
<body>
<div>div</div>
<h1>h1</h1>
<p>pp</p>
<span>span</span>
</body>
<!-- 层级 用空格隔开 父与子 -->
<style>
/* 空格 */
/* li{
color: red;
} */
/* ul li{
color: red;
} */
ul .aa{
color: blue;
}
</style>
</head>
<body>
<ul>
<li class="aa">ul li</li>
</ul>
<ol>
<li>ol li</li>
</ol>
</body>
<!-- 伪类 -->
<style>
/* a 共有4个 */
a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: blue;
}
a:active{
color: pink;
}
a{color: red;}
a:hover{ color: green;}
</style>
</head>
<body>
<!-- 伪类就是状态, 以冒号开头 -->
<a href="#">助教</a>
</body>
<hr>
<!-- 盒子模型 -->
<style>
div{
/* width: 240px;
height: 140px; */
width: 300px;
height: 200px;
background: #ccc;
border: 10px solid red;
/* padding：内边距，出现的位置：内容和盒子边缘的距离 */
padding: 20px;
/* 启动盒子内减模式 css3.0 */
box-sizing: border-box;
/* margin:外边距，出现的位置：盒子外面的距离，拉开两个盒子之间的距离 */
margin: 50px;
}
</style>
</head>
<body>
<div>女装</div>
</body>
<hr>
<!-- 盒子模型属性详解 -->
<style>
div{
width: 200px;
height: 200px;
background: #ccc;
}
.box1{
/* border-方向的英文单词： left right top bottom */
border-top: 1px solid red;
border-bottom: 5px green dashed;
border-right: 1px blue dotted;
}
.box2{
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;
}
.box3{
/* 含义：上 右 下 左 从上顺时针一圈 */
/* padding: 10px 20px 40px 80px; */
/* 含义：上 左右 下 */
/* padding: 10px 40px 80px; */
/* 含义：上下 左右 */
padding: 10px 80px;
}
/* margin和padding的设置方法完全相同 */
</style>
</head>
<body>
<div class="box1">box</div>
<br>
<div class="box2">box</div>
<br>
<div class="box3">box</div>
</body>
<hr>
<!-- 初始化一；很多标签在浏览器中都默认的加了边框 或者列表的<ul> <ol>默认的在前面带了符号， 需要做初始化去掉 -->
<!-- 一般去掉这些都是固定的所以直接复制拿来用就ok了 -->
<style>
h1,p,input{
margin: 0;
padding: 0;
}
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
padding: 0;
margin: 0;
}
body{
color: ;
font-size: ;
font-family: ;
}
</style>
</head>
<body>
<pre>
<h1>h1</h1>
<p>ppp</p>
<div>div</div>
<input type="text">
</pre>
</body>
<hr>
<!-- 文字居中 -->
<style>
div{
width: 300px;
height: 200px;
background:green;
text-align: center;
/* 文字垂直居中：设置行高属性的值等于自身高度属性的值 */
line-height: 200px;
}
p{
line-height: 100px;
}
</style>
</head>
<body>
<div>文字</div>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字垂直居中：设置行高属性的值等于自身高度属性的值文字垂直居中：设置行高属性的值等于自身高度属性的值文字垂直居中：设置行高属性的值等于自身高度属性的值文字垂直居中：设置行高属性的值等于自身高度属性的值文字垂直居中：设置行高属性的值等于自身高度属性的值文字垂直居中：设置行高属性的值等于自身高度属性的值文字垂直居中：设置行高属性的值等于自身高度属性的值</p>
</body>
<hr>
<!-- 版心居中 -->
<style>
div{
width: 1000px;
height: 200px;
background: #ccc;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 版心：网页有效内容的标签 -->
<div></div>
</body>
<hr>
<!-- 显示隐藏 -->
<style>
div{
width: 100px;
height: 100px;
background: green;
/* display: none; 不占位 */
/* display: block; */
/* 占位 */
visibility: hidden;
}
</style>
</head>
<body>
<div></div>
<h1>h1</h1>
</body>
<!-- 还有一种使用js控制显示隐藏的动态方法使用按钮功能 -->
<script>
window.onload = function(){
var mydiv = document.getElementById("parent");
var mybtn = document.getElementById("btn");
mybtn.onclick = function(){
mydiv.style.display = "none"
}
}
</script>
<hr>
<!-- 溢出 -->
<style>
div{
width: 200px;
height: 200px;
background: #ccc;
/* overflow: hidden; 隐藏 */
overflow: auto; /*只有超出的时候加滚动条*/
/* overflow: scroll; 直接加滚动条*/
}
</style>
</head>
<body>
<div>文字效字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效文字效</div>
</body>
<hr>
<!-- 浮动 -->
<style>
.box1{
width: 100px;
height: 100px;
background: red;
float: right;
}
.box2{
width: 200px;
height: 200px;
background: green;
float: right;
}
.box3{
width: 300px;
height: 300px;
background: blue;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
<hr>
<!-- 相对定位 -->
<style>
div{
border: 1px solid red;
position: relative;
left: 100px;
top: 200px;
}
/*
1、改变位置的参照物是他自己
2、占位 脱离 标准流/文档流（标签默认的显示方式）
3、还具备换行标签的特点
*/
</style>
</head>
<body>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<div><img src="icon3.jpg" alt=""></div>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
</body>
<hr>
<!-- 绝对定位 -->
<style>
div{
border: 1px solid red;
position: absolute;
top: 100px;
}
/*
1、不占位
2、参照物默认是浏览器，改：以最近的已经定位的父级为参照物 条件
3、不具备换行标签的特点
*/
</style>
</head>
<body>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<div><img src="icon3.jpg" alt=""></div>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
</body>
<hr>
<!-- 固定定位 -->
<style>
div{
border: 1px solid red;
position: fixed;
left: 0;
top: 0;
}
/*
1、不占位
2、参照物是浏览器
3、不具备换行标签的特点
*/
</style>
</head>
<body>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<div><img src="icon3.jpg" alt=""></div>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
<p>定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位定位</p>
</body>
<hr>
<!-- 定位的灵活应用 -->
<style>
div{
width: 800px;
height: 300px;
background: #ccc;
/* margin: 0 auto;? */
position: absolute;
left: 50%;
margin-left: -400px;
top: 50%;
margin-top: -150px;
/* 改变标签的显示级别 ：取值是整数，取值越大显示级别越靠上 */
z-index:10;
/* 内容和背景色一起透明 */
/* opacity: 0.5; */
/* alpha */
background: rgba(0,0,0,0.6);
}
p{
width: 300px;
height: 300px;
background: green;
position: absolute;
left: 500px;
top: 300px;
}
</style>
</head>
<body>
<div>透明</div>
<p></p>
</body>
<hr>
<!-- iframe -->
<style>
iframe{
width: 1200px;
height: 800px;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="myframe">百度</a>
<a href="http://www.taobao.com" target="myframe">淘宝</a>
<br>
<!-- src:默认显示的页面 -->
<!-- frameborder="0" 设置iframe的边框 -->
<iframe src="03-版心居中.html" name="myframe"></iframe>
</body>
<hr>
<!-- JavaScript -->
<!-- js的嵌入式 -->
<!-- <style></style> -->
<script>
// print()
alert('hello world');alert('hello world');alert('hello world');alert('hello world');
</script>
</head>
<body>
</body>
<hr>
<!-- 外链式的写法 -->
<script src="my.js"></script><!-- my.js 是外部创建的js文件 -->
<hr>
<!-- 行内式 -->
<body>
<!-- 行内式js要求：必须是事件的格式 事件：用户触发了才执行命令 k="v" -->
<div onclick="alert('ok')">测试行内式js</div>
</body>
<hr>
<!-- js查找html内容 按顺序执行的方法将js代码放到最后执行-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
1、js查找
2、控制html
3、控制css
-->
<!-- 标签 标记 元素 节点 -->
<div id="box">divdivdiv</div>
</body>
</html>
<script>
document.getElementById('box').innerHTML = 'javascript'
</script>
<hr>
<!-- js的入口函数/ 解决了上述将代码放到最后和外面执行的方式 -->
<script>
// 当浏览器窗口加载完成之后执行大括号里面的命令
window.onload = function(){
document.getElementById('box').innerHTML = 'javascript'
}
</script>
</head>
<body>
<!--
1、js查找
2、控制html
3、控制css
-->
<!-- 标签 标记 元素 节点 -->
<div id="box">divdivdiv</div>
</body>
<hr>
<!-- js查找和html内容 -->
<script>
window.onload = function(){
// document.getElementById('box').innerHTML = 'javascript'
// <p>javscript</p>
document.getElementById('box').innerHTML = '<p>javscript</p>'
document.getElementById('box').innerHTML = ''
}
</script>
</head>
<body>
<!--
1、js查找
2、控制html
3、控制css
-->
<!-- 标签 标记 元素 节点 -->
<div id="box">divdivdiv</div>
</body>
<hr>
<!-- 控制 css -->
<script>
window.onload = function(){
document.getElementById('box').style.color = 'red'
document.getElementById('box').style.background = '#ccc'
// font-size css xx-xx xxXx fontSize
document.getElementById('box').style.fontSize = '60px'
}
</script>
</head>
<body>
<div id="box">文字</div>
</body>
<hr>
<!-- 变量 -->
<script>
window.onload = function(){
// document.getElementById('box').style.color = 'red'
// document.getElementById('box').style.background = '#ccc'
// // font-size css xx-xx xxXx fontSize
// document.getElementById('box').style.fontSize = '60px'
// js控制css的很多键值对 -- 查找保存 控制
// ***** 变量 var 名字 = 值 --名字 :标识符规则 可以使用$,加入数据类型的体现
// iBox fBox bBox...
// js中变量存的是标签 标签都是数据类型为对象型 object
var oBox = document.getElementById('box')
alert(typeof(oBox))
// oBox.style.color = 'green'
oBox.innerHTML = '<p>js</p>'
}
</script>
</head>
<body>
<div id="box">文字</div>
</body>
<hr>
<!-- 数据类型 -->
<script>
var num1 = 1.1 // number 数值型
var num2 = '1' // string 字符串
var bool = true // boolean 布尔型
// undefined 未定义 ，出错的时候出现这个类型
var o = null //object 对象型：空对象和有数据的对象
alert(typeof(o))
</script>
</head>
<body>
<!--
5种
6种
-->
</body>
<hr>
<!-- 函数 -->
<script>
// 封装函数：实现弹窗功能 alert()
// 规律：{命令} (参数、条件)
alert(num) // 变量不支持预解析
var num = 1
fnAlert() // 函数预解析功能
function fnAlert(){
alert('自定义函数的弹窗')
}
</script>
</head>
<body>
</body>
<hr>
<!-- 条件判断 -->
<script>
// if(条件){条件成立执行的命令}
// var age = 10;
// if(age > 16)
// {
// alert('可以上网')
// }
// else
// {
// // 条件不成立执行的命令
// alert('回家写作业')
// }
// if(){} else if(){} else if(){}...else{}
var times = 10
if(times <=6 )
{
alert('干好多事')
}
else if(times <= 7)
{
alert('洗漱')
}
else{
alert('等着掀被子')
}
// 与&& 或|| 非!
</script>
</head>
<body>
</body>
<hr>
<!-- 事件 -->
<script>
window.onload = function(){
var oBtn1 = document.getElementById('btn1')
var oBtn2 = document.getElementById('btn2')
var oBtn3 = document.getElementById('btn3')
// 匿名函数：就是没有名字的函数 function (){}
// **** 事件语法： 事件发生在谁身上(变量).事件属性(事件类型) = 匿名函数
oBtn1.onclick = function(){
alert('单击成功')
}
oBtn2.onmouseover = function(){
alert('鼠标滑过')
}
oBtn3.onmouseout = function(){
alert('鼠标离开')
}
}
</script>
</head>
<body>
<button id="btn1">单击</button>
<button id="btn2">鼠标滑过</button>
<button id="btn3">鼠标离开</button>
</body>
<hr>
<!-- 等号的问题 -->
<script>
var num1 = 1
var str = '1'
// == 只判断数据 数值
// === 判断数值+数据类型
alert( num1 === str)
</script>
<hr>
<!-- 循环 -->
<script>
// while
// 1、变量设定初始值
// 2、while while (条件){命令}
// var i = 0;
// while(i<3)
// {
// alert('while')
// // 增量
// // i += 1 i-=1 i--
// i++
// }
// for(初始值;条件;增量){命令}
for(var i=0;i<3;i++)
{
alert('for')
}
</script>
</head>
<hr>
<!-- 数组 -->
<script>
// var xx = 值
// var arr1 = new Array(10, 20, 30, 'aaa')
var arr2 = [10, 20, 30, 40, 'abc', 20, 40, 10]
// alert(arr2)
// 下标 索引值
// alert(arr2[0])
// alert(arr2.length)
// 结尾添加数据push()
// arr2.push('jqk')
// 结尾删除数据
// arr2.pop()
// arr2.splice(位置下标, 删除的数据的个数, 添加的数据)
// arr2.splice(1, 2, 'xyz')
// arr2.splice(1, 2)
// arr2.splice(3) // 位置 删除这个位置后面的所有
// arr2.reverse()
// alert(arr2)
// arr2.join(‘分隔符号’)
// alert(arr2.join('...'))
// arr2.indexOf(数据) -- 返回下标(返回这个数据第一次出现的位置的下报表)
alert(arr2.indexOf(20))
</script>
<hr>
<!-- 数组数据写入页面 -->
<script>
window.onload = function(){
var oMyul = document.getElementById('myul')
var arr = ['侏罗纪世纪', '侏罗纪世纪2','侏罗纪世纪3', '侏罗纪世纪4']
var str = ''
for(var i=0;i<arr.length;i++)
{
str += '<li>'+ arr[i] +'</li>'
}
oMyul.innerHTML = str
}
</script>
</head>
<body>
<ul id="myul">
<!-- <li></li>
<li></li>
<li></li>
<li></li> -->
</ul>
</body>
<hr>
<!-- 数组去重 -->
<script>
var arr = [10, 20, 30, 20, 10, 50, 30, 40]
var newArr = []
// 看数组的所有数据for，如果是没有重复的if(没重复)， 放到newArr中（数组结尾添加）
for(var i=0;i<arr.length;i++)
{
// 什么数据是没有重复的？ arr.indexof的下标 == 遍历的下标 i
// indexOf(10) 0 0
// indexOf(20) 1 1
// indexOf(30) 2 2
// indexOf(20) 1 3
if( arr.indexOf(arr[i]) == i )
{
newArr.push( arr[i] )
}
}
alert(newArr)
</script>
</head>
<hr>
<!-- 字符串的操作方法 -->
<script>
var str1 = '1.9'
// alert(typeof(parseInt(str1)))
// alert( parseInt(str1) ) //去掉小数转换number
// alert(parseFloat(str1)) // 保留小数
var str2 = 'abcdedg'
// substring(开始下标,结束下标) 不包含结束位
// alert(str2.substring(1, 4)) // bcd
// alert(str2.substring(2))
// split('分隔符')
var str3 = '2018-6-28'
// alert(str3.split('-'))
alert( str2.split('').reverse().join('') )
</script>
</head>
<hr>
<!-- 调bug -->
<script>
window.onload = function(){
var oBtn = document.getElementById('btn')
oBtn.onclick = function(){
// alert('单击成功')
// alert(1)
console.log(1)
oBtn.innerHTML = 'aaaaaaa'
}
document.title = 'bbbbbbbbb'
}
</script>
</head>
<body>
<button id="btn">按钮</button>
</body>
<hr>
<!-- 定时器 -->
<script>
window.onload = function(){
var oBtn1 = document.getElementById('btn1')
var oBtn2 = document.getElementById('btn2')
var oBtn3 = document.getElementById('btn3')
var oTimer = null // 对象型 定时器就是对象型数据类型
// 单次 setTimeout()
// 多次 setInterval()
// 函数都有相同的两个参数
// 参数1：命令：1、匿名函数形式；2、函数名形式
// 参数2：延迟时间，以毫秒为单位 1000毫秒 = 1秒
oBtn1.onclick = function(){
setTimeout(function(){
alert('单次')
}, 2000)
}
oBtn2.onclick = function(){
oTimer = setInterval(aa, 2000)
}
oBtn3.onclick = function(){
// 关闭定时器
// clearInterval(定时器的名字)
clearInterval(oTimer)
oTimer = null
}
function aa(){
alert('多次')
}
}
</script>
</head>
<body>
<!-- 定时器：闹铃： -->
<!--
单次定时器：用时间控制命令只执行一次
多次循环定时器：用时间控制命令重复执行
-->
<!-- 定时器：命令 alert() -->
<button id="btn1">单次定时器</button>
<button id="btn2">多次循环定时器</button>
<button id="btn3">停止多次循环定时</button>
</body>
<hr>
<!-- 标签移动的原理 -->
<style>
div{
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById('box')
var num = 0; // num就是left的值
var speed = 5
setInterval(fnMove, 50)
function fnMove(){
// 改变left取值
num += speed
// 如果num增到600，大于600，左侧运动
if(num > 600)
{
// num-=5
// num += -5
speed = -5
}
if(num <0)
{
speed = 5
}
oBox.style.left = num + 'px'
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
<hr>
<!-- 无缝动画 -->
<style type="text/css">
body,ul{
margin:0;
padding:0;
}
.list_con{
width:1000px;
height:200px;
border:1px solid #000;
margin:10px auto 0;
background-color:#f0f0f0;
position:relative;
overflow:hidden;
}
.list_con ul{
list-style:none;
width:2000px;
height:200px;
position:absolute;
left:0;
top:0;
}
.list_con li{
width:180px;
height:180px;
float:left;
margin:10px;
}
.btns_con{
width:1000px;
height:30px;
margin:50px auto 0;
position:relative;
}
.left,.right{
width:30px;
height:30px;
background-color:gold;
position:absolute;
left:-40px;
top:124px;
font-size:30px;
line-height:30px;
color:#000;
font-family: 'Arial';
text-align:center;
cursor:pointer;
border-radius:15px;
opacity:0.5;
}
.right{
left:1010px;
top:124px;
}
</style>
<script src="js/move.js"></script>
</head>
<body>
<div class="btns_con">
<div class="left" id="btn01"><</div>
<div class="right" id="btn02">></div>
</div>
<div class="list_con" id="slide">
<ul id="list">
<li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
</ul>
</div>
</body>
window.onload = function(){
// 1、默认左侧移动 产品父级ul的left
var oList = document.getElementById('list')
var num = 0 // left值
var speed = 5
var oTimer = null
// 为了产品移动，后面显示区域不落空，复制一份5个产品
oList.innerHTML += oList.innerHTML
// oList.innerHTML = oList.innerHTML + oList.innerHTML
oTimer = setInterval(fnMove, 50)
function fnMove(){
num -= speed
if(num < -1000)
{
num = 0
}
if(num>0)
{
num=-1000
}
oList.style.left = num + 'px'
}
// 2、左右箭头单击，改变运动方向
var oBtn01 = document.getElementById('btn01')
var oBtn02 = document.getElementById('btn02')
oBtn02.onclick = function(){
speed = -5
}
oBtn01.onclick = function(){
speed = 5
}
// 3、鼠标滑过停止定时器，鼠标离开启动定时器
var oSlide = document.getElementById('slide')
oSlide.onmouseover = function(){
clearInterval(oTimer)
oTimer = null
}
oSlide.onmouseout = function(){
oTimer = setInterval(fnMove, 50)
// 定时器累加 setInterval(fnMove, 50)
}
}
<hr>
<!-- 数组 -->
<script>
window.onload = function(){
var oMyul = document.getElementById('myul')
var arr = ['侏罗纪世纪', '侏罗纪世纪2','侏罗纪世纪3', '侏罗纪世纪4']
var str = ""
for (var i=0;i<arr.length;i++){
str += "<i>" + arr[i] + "<i>"
}
oMyul.innerHTML = str
}
</script>
</head>
<body>
<ul id = "myul">
<!-- <li ></li>
<li></li>
<li></li>
<li></li>-->
</ul>
</body>
<hr>
<!-- 变量的作用域 -->
<script>
// var num = 1
// alert(num)
function fn (){
var str = 'aa'
// alert(str)
// alert(num)
num = 10
// alert(num)
}
fn()
// alert(str) 局部变量
alert(num)
// 1、函数内部使用全局变量 不需要global，直接变量赋值
// 2、js声明变量可以不加var，不加var是全局变量，要求如果是函数体里面定义变量（期望是局部）-- 一定加var
</script>
</head>
<body>
</body>
<hr>
<!-- 封闭的函数 -->
<script>
function fn1(){
alert(1)
}
fn1()
;;;;;;;;(function(){
function fn1(){
alert(2)
}
fn1()
})()
// 意识到问题
!function(){
alert(3)
}()
~function(){
alert(4)
}()
</script>
</head>
<body>
<!-- 封闭空间:当函数名冲突的时候怎么样保证命令都要执行 -->
</body>
<hr>
<!-- jq的用法 -->
<!-- 自己的页面找到函数库 .js -->
<script src="jQuery/jquery-1.12.4.min.js"></script>
<script>
// 自己的jq
// ? 入口函数 $(目标) -- jq的选择函数：查找功能
// 当网页文档准备好之后要执行...命令
$(document).ready(function(){ // 完整写法
alert(1)
}) // -- jq事件的语法: 目标.事件属性(匿名函数)
// 化简 工作中常用的写法 $(匿名函数)
$(function(){
alert(2)
})
</script>
</head>
<hr>
<!-- jq控制html和css -->
<script src="jQuery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 内容 html() -- 用法：如果写参数表示修改；不写参数表示访问
// alert($('div').html())
// $('div').html('<p>aaaaa</p>')
// $('div').html('')
// css css() -- 单属性操作 和 多属性操作
// 1、单属性：控制 和 访问
// $('div').css('color', 'red')
// alert($('div').css('color'))
// 2、多属性 -- 一次性控制多个css键值对 字典的形式
$('div').css({'color':'red', 'font-size':'60px'})
})
</script>
</head>
<body>
<div>测试jq</div>
</body>
<style>
div{
width: 200px;
height: 200px;
background: green;
/* display: none; */
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('#btn1').click(function(){
var temp = $('#box').html()
temp = parseInt(temp)
temp +=1
$('#box').html(temp)
})
$("#btn2").click(function(){
$('#box').css({'color':'red','font-size':'60px'})
})
})
</script>
</head>
<body>
<button id="btn1">累加</button>
<button id="btn2">改变样式</button>
<div id="box">10</div>
</body>
<hr>
<!-- jq选择器 -->
<script src="jQuery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('li[id=box]').css('background', 'green') // 属性=值
$('li').not('.box').css('background', 'green')
$('li:first').css('background', 'green')
$('li:last').css('background', 'green')
***** eq(下标) 选中下标等于某个数字的标签 equal等于
:eq() .eq()
$('li').eq(-2).css('background', 'green')
$('li:eq(0)').css('background', 'green')
选择器转移/选择集转移
$('.box').prev().css('background', 'green')
$('.box').prevAll().css('background', 'green')
$('.box').next().css('background', 'green')
$('.box').nextAll().css('background', 'green')
has() find()
$('.box1').has('p').css('background', 'green') // 选中父级
$('.box2').find('p').css('background', 'green') // 选中子级
})
</script>
</head>
<body>
<!-- ul>li{内容$}*8 -->
<ul>
<li>文字1</li>
<li>文字2</li>
<li class="box">文字3</li>
<li>文字4</li>
<li id="box">文字5</li>
<li>文字6</li>
<li>文字7</li>
<li>文字8</li>
</ul>
<div class="box1">
<p>box1 p</p>
</div>
<div class="box1"><span>span</span></div>
<div class="box2">
<p>box2 p</p>
</div>
</body>
<hr>
<!-- siblings -->
<script src="jQuery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('button').click(function(){
// 单击的这个标签（this）变css为绿色
// $(this).css('background', 'green')
// // 这个标签的兄弟标签为红色
// $(this).siblings().css('background', '')
// 链接编程/链式调用 -- 比喻：火车
$(this).css('background', 'green').siblings().css('background', '')
})
})
</script>
</head>
<body>
<!-- 兄弟选择器：排他思想：只许州官放火不许百姓点灯 -->
<!-- 很多按钮 点谁谁变绿 -->
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
<hr>
<!-- 子级选择器 -->
<style>
*{ margin: 0; padding: 0; list-style: none;}
.nav{
width: 300px;
margin: 100px auto;
}
.nav li{
width: 100px;
height: 40px;
line-height: 40px;
float: left;
text-align: center;
}
.nav li a{
display: block;
height: 40px;
text-decoration: none;
color: #333;
background: #ccc;
}
.nav li a:hover{
background: pink;
}
.nav li ul{
display: none;
}
</style>
<script src="jQuery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 清除动画排队机制：在形成动画函数之前加stop()
// 鼠标滑过（），二级菜单显示
$('.nav li').mouseover(function(){
// 这个li的子级ul显示
$(this).children('ul').stop().show(500)
})
$('.nav li').mouseout(function(){
$(this).children('ul').stop().hide(500)
})
})
</script>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="###">男星</a>
<ul>
<li><a href="###">王宝强</a></li>
<li><a href="###">陈羽凡</a></li>
<li><a href="###">.....</a></li>
</ul>
</li>
<li>
<a href="###">女星</a>
<ul>
<li><a href="###">杨幂</a></li>
<li><a href="###">柳岩</a></li>
<li><a href="###">赵丽颖</a></li>
</ul>
</li>
<li>
<a href="###">导演</a>
<ul>
<li><a href="###">冯小刚</a></li>
<li><a href="###">张艺谋</a></li>
<li><a href="###">丁黑</a></li>
</ul>
</li>
</ul>
</div>
</body>
<hr>
<!-- 获取元素的下标 -->
<!-- 单击li，弹出自己的下标 -->
<script src="jQuery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('li').click(function(){
alert( $(this).index() )
})
})
</script>
</head>
<body>
<ul>
<li>文字1</li>
<li>文字2</li>
<li>文字3</li>
<li>文字4</li>
<li>文字5</li>
<li>文字6</li>
<li>文字7</li>
<li>文字8</li>
</ul>
</body>
<hr>
<!-- 添加删除类 -->
<script src="jQuery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('button').click(function(){
// $('div').addClass('box')
// $('div').removeClass() // 如果不写参数表示全部删除
$('div').toggleClass('box') // 切换类
})
})
</script>
</head>
<body>
<button>按钮</button>
<div class="box">divdiv</div>
</body>
<hr>
<!--选项卡 -->
<style>
.tab_con{
width:500px;
height:350px;
margin:50px auto 0;
}
.tab_btns{
height:50px;
}
.tab_btns input{
width:100px;
height:50px;
background:#ddd;
border:0px;
outline:none;
}
.tab_btns .active{
background:gold;
}
.tab_cons{
height:300px;
background:gold;
}
.tab_cons div{
height:300px;
line-height:300px;
text-align:center;
display:none;
font-size:30px;
}
.tab_cons .current{
display:block;
}
</style>
<script src="jQuery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('input').mouseover(function(){
// $(this).addClass('active')
// $(this).siblings().removeClass()
$(this).addClass('active').siblings().removeClass()
// 得到按钮鼠标滑过的下标，从3个内容div中选中和这个下标相等的内容显示
var num = $(this).index()
// alert(num)
// $('.tab_cons div').eq(num).addClass('current')
// $('.tab_cons div').eq(num).siblings().removeClass()
$('.tab_cons div').eq(num).addClass('current').siblings().removeClass()
})
})
</script>
</head>
<body>
<div class="tab_con">
<div class="tab_btns">
<input type="button" value="按钮一" class="active">
<input type="button" value="按钮二">
<input type="button" value="按钮三">
</div>
<div class="tab_cons">
<div class="current">按钮一对应的内容</div>
<div>按钮二对应的内容</div>
<div>按钮三对应的内容</div>
</div>
</div>
</body>
<hr>
<!-- animate -->
<style>
div{
width: 100px;
height: 100px;
background: green;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 作用：自定义动画函数
// $('div').animate(字典的形式写css键值对, 时间, 运动曲线, 回调函数)
// ***** css键值对：{k:v,...}
// 以毫秒为单位， 默认值是600
// 运动曲线：swing linear -- 工作中不用, 必须是字符串
// 回调函数：匿名函数，表示动画完成之后要执行的命令
$('div').eq(0).animate({'width': '800px', 'height':'300px', 'background':'pink'}, 2000, 'linear', function(){
alert('动画完成了')
})
// $('div').eq(1).animate({'width': '800px'}, 2000, 'swing')
})
</script>
</head>
<body>
<div>linear</div>
<!-- <div>swing</div> -->
</body>
<style>
div{
width: 100px;
height: 100px;
background: red;
left: 0;
top: 0;
position: absolute;
}
</style>
<script src="jquery/jquery-1.12.4.min.js"></script>
<script>
// 让div框做从左向右再向下再向 左向上回到原点的矩形动画运动
$(function(){
$('#mydiv').animate({'left':'800px'},2000,'linear',function(){
$('#mydiv').animate({'top':'800px'},2000,'linear',function(){
$('#mydiv').animate({'left':'0px'},2000,'linear',function(){
$('#mydiv').animate({'top':'0px'},2000,'linear',function(){
})
})
})
})
})
</script>
</head>
<body>
<div id="mydiv">
</div>
</body>
<hr>
<!-- 选项卡 -->
<style>
.tab_con{
widows: 500px;
height: 350px;
margin: 50px;
}
.tab_btns{
height: 50px;
}
.tab_btns input{
width: 100px;
height: 50px;
background: #ddd;
border: 0px;
outline: none;
}
.tab_btns .active{
height: 50px;
background: gold;
}
.tab_cons{
height: 300px;
background: gold;
}
.tab_cons div{
height: 300px;
line-height: 300px;
text-align: center;
display: none;
font-size: 30px;
}
.tab_cons .current{
display: block;
}
</style>
<script src="jquery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('input').mouseover(function(){
$(this).addClass('active').siblings().removeClass()
var num = $(this).index()
$('.tab_cons div').eq(num).addClass('current').siblings().removeClass()
})
})
</script>
</head>
<body>
<div class="tab_con">
<div class="tab_btns">
<input type="button" value = '按钮一' class="active">
<input type="button" value = '按钮二'>
<input type="button" value = '按钮三'>
</div>
<div class="tab_cons">
<div class="current">按钮一对应的内容 </div>
<div>按钮二对应的内容</div>
<div>按钮三对应的内容</div>
</div>
</div>
</body>
<hr>
<!-- 内置动画函数 -->
<style>
div{
width: 200px;
height: 200px;
background: green;
/* display: none; */
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('button').click(function(){
// 滑动动画 透明度动画函数
// $('div').slideUp() // 向上卷起 隐藏
// $('div').slideDown() // 向下展开 显示
// $('div').stop().slideToggle()
// $('div').fadeIn() // 透明显示 淡入
// $('div').fadeOut() // 透明隐藏 淡出
// $('div').fadeToggle()
// 设置透明度
// $('div').fadeTo(时间, 透明度小数)
$('div').fadeTo(500, 0.6)
})
})
</script>
</head>
<body>
<button>按钮</button>
<div></div>
</body>
<hr>
<!-- 层级菜单 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级菜单</title>
<style type="text/css">
body{
font-family:'Microsoft Yahei';
}
body,ul{
margin:0px;
padding:0px;
}
ul{list-style:none;}
.menu{
width:200px;
margin:20px auto 0;
}
.menu .level1,.menu li ul a{
display:block;
width:200px;
height:30px;
line-height:30px;
text-decoration:none;
background-color:#3366cc;
color:#fff;
font-size:16px;
text-indent:10px;
}
.menu .level1{
border-bottom:1px solid #afc6f6;
}
.menu li ul a{
font-size:14px;
text-indent:20px;
background-color:#7aa1ef;
}
.menu li ul li{
border-bottom:1px solid #afc6f6;
}
.menu li ul{
display:none;
}
.menu li ul.current{
display:block;
}
.menu li ul li a:hover{
background-color:#f6b544;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// 单击一级菜单，显示隐藏 滑动 二级菜单
// $('.level1').click(function(){
// $(this).next().slideDown().parent().siblings().children('ul').slideUp()
$('.level1').click(function(){
$(this).next().slideDown().parent().siblings().children('ul').slideUp()
})
})
</script>
</head>
<body>
<ul class="menu">
<li>
<a href="#" class="level1">手机</a>
<ul class="current">
<li><a href="#">iPhone X 256G</a></li>
<li><a href="#">红米4A 全网通</a></li>
<li><a href="#">HUAWEI Mate10</a></li>
<li><a href="#">vivo X20A 4GB</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">笔记本</a>
<ul>
<li><a href="#">MacBook Pro</a></li>
<li><a href="#">ThinkPad</a></li>
<li><a href="#">外星人(Alienware)</a></li>
<li><a href="#">惠普(HP)薄锐ENVY</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">电视</a>
<ul>
<li><a href="#">海信(hisense)</a></li>
<li><a href="#">长虹(CHANGHONG)</a></li>
<li><a href="#">TCL彩电L65E5800A</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">鞋子</a>
<ul>
<li><a href="#">新百伦</a></li>
<li><a href="#">adidas</a></li>
<li><a href="#">特步</a></li>
<li><a href="#">安踏</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">玩具</a>
<ul>
<li><a href="#">乐高</a></li>
<li><a href="#">费雪</a></li>
<li><a href="#">铭塔</a></li>
<li><a href="#">贝恩斯</a></li>
</ul>
</li>
</ul>
</body>
</html>
<hr>
<!-- 聊天对话框 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.talk_con{
width:600px;
height:500px;
border:1px solid #666;
margin:50px auto 0;
background:#f9f9f9;
}
.talk_show{
width:580px;
height:420px;
border:1px solid #666;
background:#fff;
margin:10px auto 0;
overflow:auto;
}
.talk_input{
width:580px;
margin:10px auto 0;
}
.whotalk{
width:80px;
height:30px;
float:left;
outline:none;
}
.talk_word{
width:420px;
height:26px;
padding:0px;
float:left;
margin-left:10px;
outline:none;
text-indent:10px;
}
.talk_sub{
width:56px;
height:30px;
float:left;
margin-left:10px;
}
.atalk{
margin:10px;
}
.atalk span{
display:inline-block;
background:#0181cc;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
.btalk{
margin:10px;
text-align:right;
}
.btalk span{
display:inline-block;
background:#ef8201;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// 写出对应功能代码
$(function(){
// 发送单击 获取用户输入的数据value属性值， 显示（看a是b）
$('#talksub').click(function(){
var vals = $('#talkwords').val()
// alert(vals)
// 保留原有的div和类名 条件下拉菜单的value属性值是0还是1
var whoVal = $('#who').val()
var str = ''
if(vals == '')
{
alert('请输入内容')
return
}
if(whoVal == 0)
{
str = '<div class="atalk"><span>A说：'+ vals +'</span></div>'
}
else
{
str = '<div class="btalk"><span>B说：'+ vals +'</span></div>'
}
// 原有的内容 + str
$('#words').html( $('#words').html() + str )
$('#talkwords').val('')
})
})
</script>
</head>
<body>
<div class="talk_con">
<div class="talk_show" id="words">
<div class="atalk"><span>A说：吃饭了吗？</span></div>
<div class="btalk"><span>B说：还没呢，你呢？</span></div>
</div>
<div class="talk_input">
<select class="whotalk" id="who">
<option value="0">A说：</option>
<option value="1">B说：</option>
</select>
<input type="text" class="talk_word" id="talkwords">
<input type="button" value="发送" class="talk_sub" id="talksub">
</div>
</div>
</body>
</html>
<hr>
<!-- jq中的循环 -->
<!-- jq循环重复执行 alert功能 弹出li的下标 -->
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('li').each(function(event){
// 形参表示的就是标签的索引值
alert( event )
})
})
</script>
</head>
<body>
<ul>
<li>文字1</li>
<li>文字2</li>
<li>文字3</li>
<li>文字4</li>
<li>文字5</li>
<li>文字6</li>
<li>文字7</li>
<li>文字8</li>
</ul>
</body>
<hr>
<!-- 获取和失去焦点 -->
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('input').focus(function(){
// 清空也有条件：如果是默认值
if($(this).val() == '请输入用户名'){
$(this).val('')
}
})
$('input').blur(function(){
// 还回默认值条件：如果用户没有输入数据
if($(this).val() == ''){
$(this).val('请输入用户名')
}
})
})
</script>
</head>
<body>
<!-- <input type="text" placeholder="请输入用户名"> -->
<input type="text" value="请输入用户名">
</body>
<hr>
<!-- 鼠标的移入和离开 -->
<style>
div{
width: 300px;
height: 300px;
background: pink;
}
p{
width: 150px;
height: 150px;
background: green;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 需求：鼠标滑过div，做动画animate：从上移动到150的位置 margin-top
// $('div').mouseover(function(){
// $(this).animate({'margin-top': '150px'})
// })
// $('div').mouseout(function(){
// $(this).animate({'margin-top': 0})
// })
// $('div').mouseenter(function(){
// $(this).animate({'margin-top': '150px'})
// })
// $('div').mouseleave(function(){
// $(this).animate({'margin-top': 0})
// })
$('div').hover(function(){
// 鼠标移入的命令
$(this).animate({'margin-top': '150px'})
}, function(){
// 鼠标离开的命令
$(this).animate({'margin-top': 0})
})
})
</script>
</head>
<body>
<!-- 进入子元素或者触发 或者不触发命令 -->
<!-- 推到：标签父子级，命令绑定到父级 -->
<div>
<p></p>
</div>
</body>
<hr>
<!-- submit 提交 -->
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// submit
// $('form')
$('#myform').submit(function(event){
// alert(1)
// 工作中不是直接提交 ，条件判断：如果所有表单控件合法提交，否则报错不能提交数据
if(){
// 提交
}else{
// 报错 不能提交数据/阻止表单默认提交行为（某些操作系统的某些浏览器自动提交数据）
return false // 工作中常用
event.preventDefault()
}
})
})
</script>
</head>
<body>
<!-- 表单提交不会直接选择form标签选择器，html5中一个html页面可以有很多个form标签，为了保证唯一性都是id的形式选择器 -->
<form id="myform">
<input type="text">
<input type="submit">
</form>
</body>
<hr>
<!-- 正则使用方法 -->
<script>
// g：全文搜索
// i：忽略大小写
// var re01 = new RegExp(规则, 正则的参数)
// var re02 = /规则/参数
var re03 = /a/
var re04 = /a/i
var str1 = 'abbc'
var str2 = 'Abc'
// ****** 使用：正则变量.test(数据) -- 验证数据是否合法
// alert(re04.test(str2))
alert(re03.test(str2))
// true匹配合法能提交；false不匹配不合法则报错不能提交数据
</script>
</head>
<body>
</body>
</body>
</html>
HTML&CSS&Javascript基础
猜你喜欢
转载自blog.csdn.net/weixin_44090435/article/details/86098639
今日推荐
周排行