1.盒子模型
1.1 什么是盒子模型
margin 外填充（外边距）：决定了盒子与盒子之间的距离
border 边框
padding 内填充（内边距）：决定了内容与边框之间的距离
content 内容
1.2 margin外边距(外填充)
<style type="text/css">
div{
border:1px solid red;
/* 盒子的宽高就是 盒子的内容部分 */
width:200px;
height:200px;
/* 外填充 *//* 主要改变盒子的位置，对盒子内部 没有影响 */
/* margin:30px; *//* 四个边都是30 */
/* margin:30px 60px; *//* 上下 左右 */
/* margin:30px 60px 90px; *//* 上 左右 下 */
margin:30px 60px 90px 120px;/* 上右下左 顺时针 */
/* 内填充：内容与边框之间的距离 设置后会改变盒子的大小 */
/* padding:20px; */
/* padding:20px 40px; */
/* padding:20px 40px 60px; */
padding:20px 40px 60px 80px;
}
</style>
</head>
<body>
<div id="" class="">
</div>
</body>1.2.1 margin居中
margin:auto;/* 居中效果 */
text-align:center;
< center>
1.2.2 盒子距离
水平盒子：
两者margin之和 （左侧盒子的右侧margin ，右侧盒子的左侧margin）不管是display还是float都一样。
垂直盒子：
普通块状元素：取两者较大值（上边盒子的下侧margin,下边盒子的上侧margin）
浮动元素：两者margin之和 （上边盒子的下侧margin ，下边盒子的上侧margin）
行内元素的margin：a span input img
a和span标签在垂直方向的Margin和padding没有起作用。水平可以
img和input标签在垂直方向和水平方向都可以使用。
推荐： 包含盒子之间的位置关系（垂直方向）推荐使用padding调整！
1.3 padding内边距(内填充)
1.3.1 padding的应用
案例：
1.4 W3C盒子和IE盒子
盒子模型：
w3c盒子(标准)：
margin 外填充/外边距（两个盒子之间的距离）
border 边框
padding 内填充/内边距（内容与边框之间的距离）
content 内容
四部分相互独立。
IE 盒子：margin border padding content(包含border和padding)
box-sizing:border-box/content-box;切换盒子(IE和w3c)
例如：
盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px，高为 50px
<style type="text/css">
div{
border:1px solid red;
width:500px;
height:500px;
padding:30px;
/* 将w3c盒子以Ie盒子的形式显示 */
box-sizing:border-box;
}
</style>
</head>
<body>
<div id="" class=""></div>1.5 案例：页面结构搭建
查看元素的盒子属性
页面居中效果
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
/*bootstrap:自适应框架*/
#con{
width:80%;
height:500px;
border:5px solid red;
/*页面居中*/
margin:50px auto; /*上下50px 左右auto(自适应)*/
}
</style>
</head>
<body>
<div id="con"></div>
</body>
</html><!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
#con{
width:800px;
height:500px;
border:2px solid red;
/*页面居中*/
margin:0px auto;
}
#top{
height:100px;
background-color:#66ccff;
}
#main{
height:300px;
background-color:#99ff99;
}
#main .left{
width:200px;
height:300px;
background-color:red;
float:left;
}
#main .middle{
width:300px;
height:300px;
background-color:green;
float:left;
}
#main .right{
width:300px;
height:300px;
background-color:blue;
float:right;
}
#foot{
height:100px;
background-color:#ff0099;
}
</style>
</head>
<body>
<div id="con">
<div id="top"></div>
<div id="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div id="foot"></div>
</div>
</body>
</html>2.浮动框架
iframe: 就是页面中嵌套的一个子浏览器窗口
< a href="" target="aaa" >< /a>
< iframe name="aaa" src="默认显示的页面">< /iframe> 此标签就表示浮动框架
超链接的target指明页面在哪个窗口显示
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
iframe{
width:100%;
height:500px;
border:none;
}
</style>
</head>
<body>
<a href="page1.html" target="mywin">页面1</a>
<a href="page2.html" target="mywin">页面2</a>
<a href="page3.html" target="mywin">页面3</a>
<!-- <a href="page1.html" >页面1</a>
<a href="page2.html" >页面2</a>
<a href="page3.html" >页面3</a> -->
<hr/>
<!--浮动框架/浮动窗口/内联框架
name:定义窗口名，用于超链接的target属性
src: 定义窗口初始显示的页面
-->
<iframe name="mywin" src="page3.html"></iframe>
</body>
</html>
浮动框架的应用：
3.定位
3.1 什么是定位
将元素放到页面中的指定位置上。任意放置。脱离文档流。
重叠盒子的基础就是定位！
3.2 position 定位
3.2.1 静态定位static
默认值，标准文档流的方式，流式布局，块状元素从上往下，行内元素从左到右。
3.2.2 相对定位 relative
相对定位：相对于自己本身原有的位置，发生偏移。 没有脱离文档流
偏移：设置 top(距离顶部),left(距离左边) ,right(距离右边),bottom(距离底部)
3.3.3 绝对定位absolute
绝对定位：先判断父(不仅仅是直接父亲还包含以上元素)元素有没有进行定位？
1.如果没有：以浏览器窗口左上角原点为基准，偏移。
2.如果定位：以已经定位的父(不仅仅是直接父亲还包含以上元素)元素为基准，偏移。
包含快: 设置postion属性为relative,absolute,fixed任意一种，那么该容器就变为了包含块。
那么此时，包含块中的子元素，进行定位偏移的时候,会以包含块为基准进行偏移。
一般推荐用relative属性作为包含块设置。absolute,fixed会脱离文档流，没法自动居中
偏移：设置 top(距离顶部),left(距离左边) ,right(距离右边),bottom(距离底部)
3.3.4 固定定位fixed
固定定位：将元素固定在页面中的某个位置上，不随页面的滚动而滚动。
案例：见课堂案例
2.3 案例
祝福墙
变形旋转:按指定角度旋转
transform:rotate(-30deg);
改变div的z轴层次
z-index:9;
/* 渐变色 */
/* radial-gradient径向渐变 */
background-image: radial-gradient(circle, red, yellow, green);
/* linear-gradient 线性渐变 */
background-image:linear-gradient(15deg,blue,green,white,yellow,pink,black,purple);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
#wall{
width:800px;
height:500px;
border:5px solid gray;
margin:0px auto;
background-color:green;
position:relative;
}
#wall h2{
text-align:center;
}
#wall div{
width:150px;
height:200px;
padding:5px;
position:absolute;
transition:transform 2s,width 2s,height 3s;
}
#wall div.card1{
border:2px dashed red;
background-color:blue;
left:50px;
top:60px;
transform:rotate(-30deg);
}
#wall div.card2{
border:2px dashed red;
background-color:yellow;
left:80px;
top:100px;
transform:rotate(0deg);
}
#wall div.card3{
border:2px dashed red;
background-color:pink;
left:120px;
top:160px;
transform:rotate(30deg);
}
#wall div.card4{
border:2px dashed pink;
background-color:gray;
right:80px;
top:100px;
transform:rotate(-50deg);
}
#wall div.card5{
border:2px dashed blue;
background-color:purple;
right:120px;
top:200px;
transform:rotate(60deg);
}
#wall div:hover{
z-index:9;
transform:rotate(0deg);
width:200px;
height:250px;
}
</style>
</head>
<body>
<div id="wall">
<h2>祝福墙</h2>
<div class="card1">
<h3>祝：小强</h3>
<p>好好学习，天天向上好好学习，天天向上好好学习，天天向上好好学习，天天向上好好学天天向上好好学习，天天向上</p>
</div>
<div class="card2">
<h3>祝：小强</h3>
<p>好好学习，天天向上好好学习，天天向上好好学习，天天向上好好学习，天天向上好好学天天向上好好学习，天天向上</p>
</div>
<div class="card3">
<h3>祝：小强</h3>
<p>好好学习，天天向上好好学习，天天向上好好学习，天天向上好好学习，天天向上好好学天天向上好好学习，天天向上</p>
</div>
<div class="card4">
<h3>祝：小强</h3>
<p>好好学习，天天向上好好学习，天天向上好好学习，天天向上好好学习，天天向上好好学天天向上好好学习，天天向上</p>
</div>
<div class="card5">
<h3>祝：小强</h3>
<p>好好学习，天天向上好好学习，天天向上好好学习，天天向上好好学习，天天向上好好学天天向上好好学习，天天向上</p>
</div>
</div>
</body>
</html>
小结：
掌握盒子模型的组成，各个部分的使用
相对定位/绝对定位/固定定位。
页面布局不是由单一的定位方式完成的，是由几种定位方式共同完成。
浮动用来布局整体页面模块的划分。
定位：写其中的某一部分特殊位置的模块
4.表单
表单:收集用户数据，提交给服务器。注册，登陆，添加商品
1.表单概述
概念：收集用户信息并且将信息发送给指定的服务器程序处理。
2.表单的创建/使用
<form action="" method=“get/post"> 表单元素 </form>
在页面中没有具体的显示效果。
表单中的属性：
action 行动/行为 action="url"
url 统一资源占位符。
表示 表单提交的地址。指定处理该表单的服务器程序。
百度一下，你就知道=
www.baidu.com 域名 ---》对应一个ip地址 作用：在网络环境中定位主机。
端口号：定位主机服务。
method 方法：表单提交的方法
method = "get/post"; 默认为get
此属性告诉浏览器如何将数据发送给服务器，它指定向服务器发送数据的方法(用post方法还是用get方法)。
如果值为get，浏览器将创建一个请求，该请求包含页面URL、一个问号和表单的值。浏览器会将该请求返回给URL中指定的处理程序，以进行处理。值与值之间是通过&符号连接：
？ 分割链接与数据。值与值之间是通过&符号连接。不安全的
如果将值指定为post，表单上的数据会作为一个数据块发送到处理程序，而不使用请求字符串。语法为：method = (get | post)；相对安全!
multiple 多个 当有文件上传时，用于允许上传多个文件。
3.表单常用标签和属性
3.1 input 标签
<input />
属性：
name：表单元素的名称 区分表单元素。
value: 表单元素的初始值 一般指 text/password
checked: 单选或者多选中的默认选中项 checked="checked/true"
selected: 下拉框中的默认选中项
placeholder 输入提示语
readonly 只读属性
disabled 失效 可以用于按钮和选项
required 必填验证
html中：
type: 确定输入的类型
text 任意文本
password 密码
radio 单选
checkbox 多选/复选
image 图片类型
button 按钮
file 文件
hidden 隐藏
reset 清空/重置
submit 提交
html5中新增了一些类型：
表单元素的作用域：起作用的区域。
3.2 select&option标签
<select>
<option></option>
</select>
3.3 textarea标签
<textarea cols="" rows=""></textarea>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 表单使用：form标签在页面上没有任何效果展示
form表单属性：
action="URL" URL表示请求发送的路径
URL:统一资源定位符
http://www.baidu.com?username=张三&password=12345&file=123.txt
http:// 网络协议
www.baidu.com 域名====》对应IP地址
? 分隔符 分割 域名与数据
username=张三 请求携带的数据
& 分隔多个数据。
method 方式方法 ：表示表单提交的方法
method="get/post" get默认值
get:如果是get方式 会将数据追加到 浏览器的地址栏中 不好，
1.不安全
2.可以提交的数据有限制 大小
post: 相对安全
是以数据块的形式向服务器发送数据。
作用域：起作用的区域/范围。
表单元素：
<input />输入框
属性：
type: 类型 通过给type不同的属性值，来控制input的输入类型。默认text
h5之前的值：
text :任意文本类型
password :密码类型 非明文
radio :单选类型
checkbox :复选 /多选
button :普通按钮
image :图片
hidden :隐藏 有一些属性，我们需要把它发送到后台，但是又不想让用户看到，就可以隐藏
file :文件
reset :清空/重置
submit :提交
h5之后新增：
time
date
datetime
datetime-local
color
range
week
month
number
name 名字：用来区分表单元素的值。
value 值 ：表单元素的值 也可以用来设置表单元素的初始值
readonly : 只读
disabled : 失效
placeholder:输入提示
maxlength: 输入的最大长度
required : 必填项验证
checked : 默认被选中 (单选框/复选框中使用)
selected : 下拉框中的默认选中项
readonly="readonly/true"
disabled="disabled/true"
true真 /false假
<select></select>下拉框
<option></option>下拉框中的选项
<select>创建可供选择的下拉框
<option>--请选择--</option>下拉框中的选项
<option>郑州</option>
<option>广州</option>
<option disabled>兰州</option>
<option selected>惠州</option>
<option>杭州</option>
</select>
<textarea></textarea>多行文本框
-->
<form action="http://www.baidu.com" method="get">
用户：<input type="text" name="username" value="12345" maxlength="6"/><br/>
密码：<input type="password" required placeholder="请输入密码" name="password"/><br/>
性别：<input type="radio" name="sex"/>男 <input type="radio" checked name="sex"/>女<br/>
爱好：<input type="checkbox">听歌
<input type="checkbox" checked>跳舞
<input type="checkbox">rap <br/>
上传文件：<input type="file" name="file"><br/>
<input type="button" disabled value="普通按钮"/><br/>
<input type="image" src="../../images/4.gif"/><br/>
<input type="hidden" name="hid" value="你好哈哈哈">
<input type="reset" value="清空"/>
<input type="submit" value="提交"/>
<h1>=======================================</h1>
time:<input type="time"><br/>
date:<input type="date"><br/>
datetime-local:<input type="datetime-local"><br/>
month:<input type="month"><br/>
week:<input type="week"><br/>
color:<input type="color"><br/>
range:<input type="range"><br/>
<!-- min:最小 max:最大 step:间隔 -->
number:<input type="number" min="5" max="10" step="2"><br/>
<select><!-- 创建可供选择的下拉框 -->
<option>--请选择--</option><!-- 下拉框中的选项 -->
<option>郑州</option>
<option>广州</option>
<option disabled>兰州</option>
<option selected>惠州</option>
<option>杭州</option>
</select>
<textarea cols="5" rows="5"> </textarea>
</form>
</body>
</html>
扫一扫
494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
