任务一:使用富文本编辑器
观察各种标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Onine</title>
<style>
.table1{
width: 500px;
}
.tr1,
.tr3{
background-color: gray;
}
.tr2,
.tr4{
background-color: white;
}
</style>
</head>
<body>
<div>
<table class="table1" border="1" cellpadding="0" cellspacing="0" >
<tr class="tr1">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr class="tr2">
<td>zerone</td>
<td>女</td>
<td>21</td>
</tr>
<tr class="tr3">
<td>zerone1</td>
<td>女</td>
<td>24</td>
</tr>
<tr class="tr4">
<td>zerone2</td>
<td>男</td>
<td>25</td>
</tr>
</table>
</div>
</body>
点击按钮实现消息弹窗
<input type="button" value="登录" onclick="alertTips()">
<script>
function alertTips(){
alert("登录成功");
}
</script>
拓展:CSS盒子模型
-
深入理解css盒子模型
-
边框边距:
-
border边框会影响盒子大小
-
边框的复合写法
border:1px solid red;//没有顺序 border-top:1px solid red;
-
-
context内容
-
padding内边距
-
会影响盒子大小
-
如果盒子本身没有指定width/height属性则不会撑开盒子大小
-
padding的复合写法
-
-
margin外边距
-
不会影响盒子大小
-
margin的复合写法与padding是一致的
-
可以让块级元素水平居中
第一步先设置盒子宽度 第二部,令margin:0 auto;
-
行内块和行元素的水平居中是给其父级增加text-algin:center;
-
-
相邻块元素垂直外边距合并问题:不是两个margin相加,而是取大的值做边距, 解决方案:尽量只给一个盒子 添加margin值
![在这里插入图片描述](https://img-blog.csdnimg.cn/8100fbed7a3546b48a6c1696412fff2d.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N5bHd0YmFlcA==,size_16,color_FFFFFF,t_70#pic_center)
-
- 嵌套元素垂直外边距塌陷问题
解决方案:
1.给父元素加上边框
2.给父元素加上内边距
3.给父元素加overflow:hidden;
- 浮动:
float属性用于创建浮动框,将其移动到一边,直到左边缘或者右边缘触及包含块或者另一个浮动框的边缘
浮动特性
- 会脱离标准流
- 浮动的盒子不再保留原先的位置
- 不管原先是什么模式的元素,添加浮动后具有行内块元素相似的特性(因此若行内元素设置了浮动,则无需转换为别的模式来设置宽高)
浮动缺点
当子元素全部设置浮动后,父元素的高度就会变为0,因为浮动不占位置,因此会导致下边的盒子向上移动
清除浮动
清除浮动带来的排版错乱影响
-
-
额外标签法(w3c推荐做法),缺点:添加许多无意义标签,结构化差
在浮动的最后一个盒子后再加一个块级元素,相当于加了一堵墙 css中写clear:both;
-
子不教父之过,css给父级添加overflow:hidden;
缺点:无法显示溢出的部分
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xM0oFTo6-1629440360092)(随手写.assets/image-20210818153001997.png)]
-
:after 伪元素法,结构最清晰,只要写上如下代码,哪一个父盒子需要,则在class上添加空格clearfix,缺点:需要照顾低版本的浏览器
.clearfix:after{ content:""; display:block; height:0; vlear:both; visibiity:hidden; } .clearfix{ *zoom:1;//为了兼容ie6,7 }
-
双伪元素,使用方法与单伪元素一致
.clearfix:before, .clearfix:after{ content:""; display:table; } .clearfix:after{ clear:both; } .clearfix{ *zoom:1; }
-
定位
可以让盒子自由自在的在某个盒子内移动位置,或者固定在屏幕中哪个位置,并且压着某个盒子定位=定位模式+边偏移
定位模式:
-
静态定位:即默认定位方式,无定位的意思
position:static;
-
相对定位:
-
以自己原来的位置为参考系
-
原来在标准流的位置继续占有,后面的盒子不会浮上来
position:relative;
-
-
绝对定位:
- 如果没有祖先元素或者祖先元素无定位,则以浏览器为参考系
- 如果祖先元素有定位(相对、绝对、固定都算),则以最近一级元素为参考系
- 绝对定位不再占有原先的位置
position:absolute;
-
固定定位
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素无关
- 不随滚动条滚动
- 固定位置不再占有原先位置
position:fixed;
固定在版心右侧位置的算法:
- 让固定位置的盒子left:50%,此时移动到版心的一半位置
- 让固定盒子的margin-left:版心宽度的一半
-
粘性定位:可以看成固定定位和相对定位的混合
- 以浏览器的可视窗口为参照物
- 粘性定位占有原先的位置
- 必须添加top,left、right,bottom其中一个才有效
- 兼容性差,ie不支持
position:sticky;
定位叠放次序z-index
z-index:整数;
- 数值是整数,默认是auto,数值越大越在上
- 如果数值相同,则按书写顺序,后来居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index属性
绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:0 auto实现水平居中
方法:
1. left:50% 2. margin-方位:-盒子的一般大小
定位特殊性
- 行内元素添加绝对或者固定定位,可以直接设置高度或宽度
- 块级元素添加绝对或固定定位,如果不给宽高,默认就是内容的大小
- 浮动元素。绝对定位(固定定位)元素的都不会触发外边距合并的问题
- 浮动元素只会压住下面标准流的盒子,但不会压住文字(因为浮动一开始就是用来做文字环绕的)
- 绝对定位(固定定位)会压住下面标准流的所有内容
- 布局模式
- 普通流(标准流)
- 浮动
- 定位
-
-
完成的css盒子模型布局
html部分
<body>
<div class="main">
<div class="left">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
<div class="right">
<div class="box3">3
<div class="box7">
7
</div>
<div class="box8">
8
</div>
</div>
<div class="box4">4
<div class="box9">
9
</div>
</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>
</div>
</body>
css部分
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color:#fcdd9c ;
text-align: center;
}
.main{
width: 755px;
height: 482px;
margin: 20px auto;
}
.box1,
.box2,
.box3,
.box4,
.box5,
.box6 {
border: 1px #aaaaaa solid ;
background-color: #c5d08e;
}
.left{
float: left;
width: 233px;
height: 482px;
}
.box1{
float: left;
width: 230px;
height: 109px;
line-height: 109px;
}
.box2{
float: left;
margin-top: 20px;
width: 230px;
height: 349px;
line-height: 349px;
}
.right{
float: right;
width: 507px;
height: 482px;
}
.box3{
position: relative;
float: left;
width: 505px;
height: 187px;
line-height: 187px;
}
.box4{
position: relative;
float: left;
width: 255px;
height: 271px;
margin-top: 20px;
line-height: 271px;
}
.box5{
float: right;
width: 232px;
height: 124px;
margin-top: 20px;
line-height: 124px;
}
.box6{
float: right;
width: 232px;
height: 125px;
margin-top: 20px;
line-height: 125px;
}
.box7,
.box8{
background-color: #f3a464;
}
.box7{
position: absolute;
top: 28px;
left: 20px;
width: 167px;
height: 129px;
line-height: 129px;
}
.box8{
position: absolute;
right: 0px;
bottom: 150px;
margin-right: 20px;
width: 167px;
height: 129px;
line-height: 129px;
}
.box9{
position: absolute;
z-index: -1;
left: 20px;
top: 237px;
margin-right: 20px;
width: 167px;
height: 129px;
line-height: 129px;
background-color: #e4bc91;
}
自测
1.HTML5为了使img元素可拖放,需要增加什么属性
draggable="true";
2.HTML.5哪一个input类型可以选择一个无时区的日期选择器?
<input type="time"> 允许用户选择时间(无时区)
3.CSS全子模型中的Margin、Border、Pading都是什么意思?
margin:外边距
border:边框
padding:内边距
4.说出至少五种常见HTML事件
window事件
form事件
keyboard事件
mouse事件
media事件
5.НTML的onblur和onfocus是哪种类型的属性?
form事件
6.怎么设置display属性的值使容器成为弹性容器?
display:flex;
7.JavaScript中有多少种不同类型的循环?
3种循环
for,do...while,while
8.用户搜索某个单词后, JavaScrip高亮显示搜索到的单词,使用哪个语义化标签最合适?
mark