作业总结：
1、inline-block; 3px宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.inp{
border: 0;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
height: 25px;
margin: 0;
padding: 0;
float: left;
}
.sp{
display: inline-block;
height: 25px;
width: 25px;
text-align: center;
line-height: 25px;
float: left;
}
</style>
</head>
<body>
<div style="border: 1px solid #dddddd;display: inline-block;">
<div class="sp">-</div>
<input class="inp" type="text" />
<div class="sp">+</div>
</div>
</body>
</html>
h1
2、改造标签
例如：
3、补充：
img标签边框，IE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
border: 0;
}
</style>
</head>
<body>
<div>
<div class="item">
<a href="http://www.etiantian.org">
<img src="2.jp" alt="图片">
</a>
</div>
</div>
</body>
</html>
img标签
上节回顾：
HTML
头部：编码，title，style，link
身体：
内联
块级
---> inlie-block
a标签：
target，href（url，#i1）
img标签：
src alt
iframe(伪Ajax,上传文件)
src
form标签：
action提交url；method，提交方式；enctype:....
input系列
text
password
checkbox
name = favor, value = 1
name = favor, value = 2
name = favor, value = 3
favor： 1，2
radio,互斥，
name =
file
button，无效果
submit，提交当前form表单
reset，重置当前form表单
<select></select>
textarea
=====> 默认值
<input value='123' />
<textarea>123</textarea>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input value='123' />
<textarea>123</textarea>
<select>
<option>上海</option>
<option selected="selected">广州</option>
<option>背景</option>
</select>
男：<input type="radio" name="g1" />
女：<input type="radio" name="g1" checked="checked"/>
<input type="checkbox" name="c1" checked="checked" />
<input type="checkbox" name="c1" />
<input type="checkbox" name="c1" checked="checked"/>
<input type="checkbox" name="c1" />
</body>
</html>
各种默认值
CSS
存在形式
标签属性
style块
文件
最牛的：color:red !important;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none !important;
}
.c1{
color: red !important;
}
.c2{
color: green;
}
</style>
</head>
<body>
<div class="c1 c2">asdfasdfasdfasdf</div>
</body>
</html>
不能被替换
寻找：
标签选择器
class选择器
ID选择器
层级选择器
组合选择器
属性选择器
.c1[alex='a']{
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1[alex='a']{
color: red;
}
</style>
</head>
<body>
<div>
<div class="c1" alex="a">1</div>
<div class="c1" alex="b">2</div>
<div class="c1">3</div>
<div class="c1" alex="a">4</div>
</div>
</body>
</html>
属性选择器
样式：
color，width,height
width:百分比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="pg-body" style="width: 980px;margin: 0 auto;">
<div style="width: 20%;float: left;background-color: red">asasdfasdfasdfasdfasdfasdfdf</div>
<div style="width: 80%;float: left;background-color: #2459a2">
sdfsdfasdfasdfsdfasdfsdfasdfasdfsdfasdfasdfsdfasdfasdf
</div>
</div>
</body>
</html>
百分比
background:
透明度：
opcity:0.6
background:rgba(0,0,0,.6)
position:
fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.pg-header{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 48px;
background-color: #2459a2;
}
.pg-body{
height: 2000px;
margin-top: 48px;
}
</style>
</head>
<body>
<div class="pg-header">asdf</div>
<div class="pg-body">老男孩</div>
</body>
</html>
fixed
absolute
定义位置：
滚动：
relative
relative && absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.icon-name{
background-image: url('i_name.jpg');
height: 16px;
width: 16px;
display: inline-block;
}
.icon-pwd{
background-image: url('i_pwd.jpg');
height: 16px;
width: 16px;
display: inline-block;
}
</style>
</head>
<body>
<div style="width: 200px;position: relative">
<input style="width: 180px;padding-right: 20px;" />
<span class="icon-name" style="position: absolute;top:2px;right: 0;"></span>
</div>
</body>
</html>
relative&absolute
===> z-index:
===> 页面布局：fixed
边距补充
input
图标（补充 font awesome）
===================
font awesome
float: 好方式
:hover
:after
:before
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1:hover{
background-color: #2459a2;
}
.c2:before{
content: '666';
}
.c2:after {
content: '777';
}
.left{
float: left;
}
.item{
background-color: red;
}
.clearfix:after{
content: '.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="c1">ddd</div>
<div class="c2">888</div>
<div style="background-color: red" class="clearfix">
<div class="left" style="height: 100px;background-color: green">1</div>
<div class="left">2</div>
</div>
</body>
</html>
class属性
网站：
css:
.clearfix:after{
content: '.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
HTML:
<div class='clearfix'>
<div style='float'>
<div style='float'>
</div>
over-flow:hide/auto
布局：
主站（w,剧中）
后台管理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
.pg-header{
height: 48px;
background-color: #2459a2;
}
.pg-body .body-menu{
position: absolute;
top: 48px;
left: 0;
bottom: 0;
width: 200px;
background-color: red;
}
.pg-body .body-content{
position: absolute;
top: 48px;
left: 210px;
right: 0;
background-color: green;
bottom: 0;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-body">
<div class="body-menu"></div>
<div class="body-content">
asdfasdf <br/>
asdfasdf<br/>asdfasdf<br/>asdfasdf<br/>asdfasdf<br/>asdfasdf<br/>asdfasdf<br/>asdfasdf<br/>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
后台管理
JavaScript
编程语言，由浏览器编译并运行
1、存在形式：
2、放置位置
body内部最下面
3、变量
var a = 123; 局部变量
a = 123; 全部变量 *****
===》
var a = 123;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>asdfasdf</h1>
<script>
var ab = 123;
alert(ab);
// function f1(){
// // var i = 123;
// /* i = 123;
// asdfasdf
// */
// i = 123;
// }
// function f2(){
//
// }
// f1();
// alert(i);
</script>
</body>
</html>
test1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="i1" style="display: inline-block;background-color: green;color: white">欢迎宝强莅临指导</div>
<div id="i2" style="display: inline-block;background-color: green;color: white">欢迎宝强莅临指导</div>
<script>
setInterval("f1()", 1000);
function f1(){
// js获取某一个标签 id=i1
var tag = document.getElementById('i1');
// 获取标签的内容
var text = tag.innerText;
var a = text.charAt(0);
var sub = text.substring(1,text.length);
var new_str = sub + a;
tag.innerText = new_str;
}
</script>
</body>
</html>
test2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var url = "http://www.etiantian.org?n=王宝强";
var ret = encodeURI(url);
//alert(ret);
console.log(ret);
var u = decodeURI(ret);
//alert(u);
console.log(u);
var r2 = encodeURIComponent(url);
console.log(r2);
</script>
</body>
</html>
test3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var li = [11,22,33,44];
var dic = {'k1': 11,'k2': 22};
//第一种for
// for(var i = 0;i<li.length;i++){}
/*
for(var i = 0;i<li.length;i=i+2){
console.log(i,li[i]);
}
*/
/*第二种for循环
for(var item in li){
console.log(item,li[item]);
}
*/
for(var key in dic){
console.log(key,dic[key]);
}
</script>
</body>
</html>
test4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// setInterval(function(){
// alert(123);
// }, 1000);
// function f1(arg){
// alert(arg);
// }
// f1(123);
// 做封装
// (function(arg){
// alert(arg);
// })(123)
</script>
</body>
</html>
test5
小练习：
打开关闭对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide {
display: none;
/*color: transparent*/
}
.modal{
width: 400px;
height: 300px;
background-color: #dddddd;
position: fixed;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -150px;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*background-color: black;*/
/*opacity: 0.4;*/
background-color: rgba(0,0,0,.6);
z-index: 9;
}
</style>
</head>
<body>
<div class="shadow" >
<input type="button" onclick="open_id_1();" value="打开" />
</div>
<div id="id_1">
欢迎参加本节目
<input type="button" onclick="close_id_1();" value="关闭" />
</div>
<div style="height: 2000px;">
</div>
<script type="text/javascript">
function open_id_1() {
var i = document.getElementById('id_1');
i.className = 'modal';
}
function close_id_1() {
var i = document.getElementById('id_1');
i.className = 'hide';
}
</script>
</body>
</html>
Dom
jQuery
