一、实现一个超链接,鼠标点上去变色。
要点:通过伪类来切换什么状态:总共有初始状态 被访问 鼠标移动 点击 四个状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="#1">这是第一个链接</a>
<br>
<br>
<a href="#12">这是第二个链接</a>
</body>
</html>
a {
color:yellow;
}
a.link{
color:blue;
}
a.visited {
color: red;
}
a.hover{
background-color: tomato;
font-size: 30px;
}
a.active{
color:green;
}
file:///E:/google%E4%B8%8B%E8%BD%BD/demo2.html#12
以上为实验结果
none 不实现项目符号 disc:实心圆 circle:空心圆 square:实心方块
ol-> demical :阿拉伯数字
盒子:
所有的元素 类比鞋盒装了鞋子 堆在一起
内容:鞋子
内边距:报纸 空间
盒子框:鞋盒 纸盒子
外边距:鞋盒 鞋盒之间的距离
.box1{
/*盒子框*/
border:5px solid red;
/*内边距*/
/*上下左右 10px*/
padding:10px;
/*上下20px,左右50px*/
padding:20px 50px;
background: hotpink;
/*上20px,左右50px,下40px,左50px,顺时针 上 右下 左
或者设置 padding-top: padding-bottom: padding-right: padding-left
背景不包含边框以及外边距,背景包含了盒子里面装的东西,包含内边距padding和本身自己的内容*/
/*外边距,可以设置盒子与盒子之间的留白*/
margin:30px;
}
.box2{
border:5px solid greenyellow;
}
效果如上图
问题思考:
上下margin重叠的问题:
1.平级的元素 最大值 60px
1.float 方法
2.inline-block
2.嵌套关系
当两个盒子嵌套的时候,默认是没有封口的,通过加上封口来实现嵌套
1.给父元素加border或者padding
2.给父元素加上overflow:hidden