作业总结： 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; Dom jQuery
时间： 2024-08-27 20:00:20