第六章网页

day06
HTML
• 基本概念
常用标签：
。块级元素：p、h1-h6、div
。 行级元素：a、span、em/i、strong/b等
。 行块级元素：img
列表标签
。 无序列表
。 有序列表
。 自定义列表
表格
o table、caption、 tr、th/td等
。 复杂表格：thead、tbody、 tfoot
o 加在table标签身上的属性： width、height、border、cellpadding、cellspacing。单元格属性： rowspan、 colspan
o cSS属性：边框是否独立
表单
o 表单的作用
。 表单域 form
。 表单元素：input、button、下拉列表、多行文本域
。 表单相关属性
CSS
• 基本概念和用法
• 文本属性：文字的水平对齐方式、首行缩进、文本装饰线
• 文字属性：文字的大小、文字的加粗、文字风格、字体设置；行高
盒模型：
o 盒模型是什么
o 盒模型的相关属性
。 标签的转化
• 三大特性：层叠性、继承性、css优先级
• 外边距塌陷问题：父子元素、兄弟元素
•浮动
定位
css布局技巧
一、浮动与定位的对比
脱离正常文档流的属性：
• 浮动：左浮动和右浮动
• 定位：固定定位和绝对定位
不同的地方：
•浮动会脱离正常文档流，但是不脱离文本流
• 定位既脱离正常文档流，也脱离文本流
注意：
设置了定位和浮动的元素不再区分块级元素、行级元素，都可以设置宽高和所有盒模型属性
•所有元素都可以设置浮动和定位
2/10 单页阅读√ PDF转Word 图片转文字 水印 合并拆分~
一、verticial-align属性
设置垂直对齐方式，用在行级元素或者行块级元素身上，对于块级元素不生效
常用属性值：
• baseline 基线对齐（默认值）
• top 顶端对齐
• bottom 底端对齐
middle 居中对齐
• sub 下标对齐
• super 上标对齐
<style> I
.box1{
border: 1px solid red;
margin-bottom: 20px;
img {
width: 100px；
height: 100px；
.box2 img {
vertical-align: baseline;
.box3 img 
vertical-align: top;
.box4 img {
vertical-align: bottom;
.box5 img {
vertical-align: middle;
</style>
<div class="box6">
<p>
x²
</p>
<p> o₂
</p> I
</div>
<div class="box7">
<p>
<!-- vertical-align:super 设置上标对齐 -->
x<span style="vertical-align: super;">2</span>
</p>
<p>
<!-- vertical-align:sub 设置下标对齐-->
o<span style="vertical-align: sub;">2</span>
</p>
</div>
解决的问题
1、图片的下间隙问题
盒子中装有一张图片时，图片与盒子之间有小间隙
解决方案：
(1)给图片设置vertical-align属性，值为middle、bottom、top都可以解决这个问题
PAPRJ以胖伏这个问题
.box1 {
border: 1px solid red;
margin-bottom: 20px;
img {
width：100px;
height: 100px；
/* vertical-align: top；*/
/* vertical-align: bottom; */
vertical-align: middle;
(2)给img转块
img {
width:100px；
height: 100px；
display: block;
(3)给图片的父盒设置font-size:0
.box1 {
border: 1px solid red;
margin-bottom: 20px;
font-size:0;
img (
width: 100px；
height：100px;
2、文本框与按钮的对齐
文本框与按钮不对齐的问题
解决方案：
(1)给input添加vertical-align:middle
.for1 input [
height: 20px；
border: 1px solid red;
vertical-Nign: middle;
/* 属性选择器 element[属性=属性值][]★
.forl input[type="submit"] [
height: 24px；
(2)给input浮动
.for2 input {
height: 20px；
border: 1px solid red;
float: left;
/* 属性选择器 element[属性=属性值]
.for2 input[type="submit"] [
height:24px；
ieTester 官网：http://www.ietester.cn/
三、透明度属性及兼容
1、 rgba()颜色模式
• alpha参数取值0-1，0代表透明，1代表不透明，0-1代表的是半透明
• 用于背景颜色、color、border-color时使用
• 兼容：ie9+及标准浏览器是支持的，ie6，7，8不支持
2、opacity属性
工
opacity:x
• x的取值是在0-1之间，0代表透明，1代表不透明，0-1代表的是半透明
• 设置opacity的元素，不仅自己会有透明度的效果(整体透明)，连子孙后代也会有透明度的效果• 兼容：ie9+及标准浏览器是支持的，ie6，7，8不支持
• 用途：设置整个模块的透明度
3、IE专属滤镜
filter:Alpha(opacity=x);
x的取值是0-100之间
·兼容：ie6，7，8，9下支持，ie10被废除
ie浏览器专属的属性，使用时需要注意：
o ie6、7中，如果设置filter不识别，需要加上以下代码：
*zoom:1;
。 如果想要实现元素的背景透明，子元素没有透明的效果时，需要给父元素添加静态定位
(position:static)，给子元素添加相对定位(position:relative)；
.box3 {
width: 300px；
height：200px;
background-color: red;
opacity:0.5；
filter: Alpha(opacity=50)；
position: static;
.box3>p {
position: relative;
四、显示与隐藏
1、display属性
display:block 元素的显示
display:none 元素隐藏（原来的占位也不存在了）
2、visibility属性
visibility :visible 元素显示
visibility:hidden 元素隐藏（占位依然存在）3、opacity属性
opacity:1 元素的显示
opacity:0 元素的隐藏（元素透明）
五、圆角属性
border-radius属性，可以是长度值，也可以是百分比单边圆角的设置：
border-top-left-radius 设置左上角的圆角
.box1 {
/* 设置左上角的圆角*/
/* 设置右上角的圆角
border-top-right-radius: 50px;
/*右下角的圆角★/
border-bottom-right-radius:50px;
/* 左下角的圆角★/
border-bottom-left-radius： 50px;
.box2 {
/* 设置左上角的圆角
border-top-left-radius：100%;
/* 设置右上角的圆角“/
border-top-right-radius5100%;
圆角的复合写法：
.box3 {
/★ 一个值：四个角的圆角都是50像素★/
/ border-radius: 50px；*/
/*两个值：左上角和右下角的圆角是100像素，左下角和右上角的圆角是50像素
/* border-radius：100px 50px；*/
/* 三个值：左上角的圆角是100像素，左下角和右上角的圆角是50像素，右下角的圆角是10像素*//★ border-radius:100px 50px 10px；/
/* 四个值：左上角的圆角是100像素，右上角的圆角是60像素，右下角的圆角是40像素，左下角的國角是10像素*/
border-radius：100px 60px 40px 10px;
六、多栏布局
宽度自适应布局
1、两栏自适应布局
左侧宽度固定，右侧宽度自适应为例：
实现原理：
• 需要有左右两个盒子，左侧盒子需要设置固定的宽度，右侧盒子设置width:100%;• 左侧盒子设置绝对定位(position:absolute)
•给右侧的盒子添加一个子盒，给子盒设置padding-left：左侧盒子的宽度
<div class="wrap">
<div class="left">左侧盒子</div>
<div class="right">
<div class="son">r ht</div>
</div>
</div>
<style>
.wrap>div {
min-height: 200px；
.left {
position: absolute;
width：300px;
background-color: aqua;
.right {
width：100%；
background-color:pink;
.right>.son {
padding-left: 300px;
word-break:break-al1;
}
</style>
2、三栏自适应布局
圣杯布局和双飞翼布局都是实现左右两侧宽度固定，中间宽度自适应的三栏布局，只是实现原理不同(1)圣杯布局
实现原理：
•结构中需要先放置中间盒子，再放置左右
•左右两个盒子设置固定的宽度，中间盒子的宽度设置100%
给左右、中间盒子设置左浮动(注意给父元素清除浮动)
•将左侧盒子拉到最左边(margin-left:-100%)，将右侧盒子拉到最右边(margin-left:-右侧盒子的宽度)
将中间盒子露出来(给外侧包裹盒设置padding：0右侧盒子的宽度0左侧盒子的宽度)• 将左侧盒子还原(左侧盒子相对定位，设置left：-左侧盒子的宽度)，将右侧盒子还原(右侧盒子
相对定位，设置right：-右侧盒子的宽度)
<div class="wrap clearfix">
<div class="center">中间盒子</div>
<div class="left">左侧盒子</div>
<div class="right">右侧盒子</div>
</div>
<style>
/* 清除浮动*/
.clearfix::after [
content:""；
display：block;
clear: both;
.clearfix {
★zoom: 1；
.wrap>div {
min-height：200px;
float：left;
.left (
width:200px；
background-color: aqua;
margin-left:-100%;
position: relative;
left:-200px；
}
.right (
width：200px;
background-color: pink;
margin-left：-200px;
position: relative;
right:-200px；
.center [
width：100%;
background-color: red;
.wrap 
padding:0 200px 0 200px;
</style>
(2)双飞翼布局
来自淘宝UED，设想：比作一只鸟，先把身体摆好，再确定翅膀
实现原理：
•结构：先放中间盒子，中间盒子有子盒，再放左右两侧的盒子
• 左右两侧的盒子固定宽度，中间盒子的宽度为100%
•给中间、左右三个盒子设置左浮动(注意给父元素清除浮动)
•将左侧盒子拉到最左边(margin-left:-100%)，将右侧盒子拉到最右边(margin-left:-右侧盒子的宽度)
将中间盒子露出来(给中间盒子的子盒设置margin:0右侧盒子的宽度0左侧盒子的宽度)
<div class="wrap clearfix">
<div class="center">
<div class="son">中间盒子</div>
</div>
<div class="left">左侧盒子</div>
<div class="right">右侧盒子</div>
</div>
<style>
/ 清除浮动
.clearfix::after (
content:""
display:block；
clear: both;
.clearfix 
·left 
width: 200px；
background-color:aqua;
margin-left:-100%；
.right {
width：300px;
background-color:blueviolet;
margin-left: -300px；
.center [
width：100%;
background-color: chocolate;
}
.son {
margin:0 300px 0 200px;
}
</style>
3、等高布局
一列的高度变化，其他列的高度也会跟着变化
(1)方法一：
实现原理：
内外间距相抵消实现等高，同时注意给父元素溢出隐藏
<div class="wrap clearfix">
<div class="left">左侧盒子</div>
<div class="center">中间盒子</div>
<div class="right">右侧盒子</div>
</div>
<style>
/* 清除浮动 */
.clearfix::after
content:""；
display: block;
clear: both;
.clearfix [
*zoom：1;
.wrap {
width：1000px;
margin: 0 auto;
overflow:hidden;
.wrap>div {
min-height: 200px；
float:left;
.left {
width: 200px；
background-color: chocolate;
padding-bottom：9999px;
margin-bottom：-9999px;
margin-bottom:-9999px;
.right {
width: 300px；
background-color: cornflowerblue;
padding-bottom:9999px;
margin-bottom: -9999px;
</style>
优缺点：
• 代码比较简单易懂
• 缺点实现的是伪等高，合理的控制padding和margin的值；扩展性较差