伪类选择器
与链接相关
：link 还未访问过的状态
：visited 访问过的状态
：hover 鼠标悬停的状态
：active 鼠标按下还未弹起的状态
注意：
添加链接伪类选择器注意顺序
为了保证有效按顺序进行：:link :visited :hover :active
<style>
a:link {
/*超链接从未被访问过的状态 为访问过显示粉色 */
color: pink
}
a:visited {
/*超链接访问过的状态 访问过显示紫色*/
color: purple
}
p:active {
width: 100px;
/*鼠标按下时的操作*/
background: black;
color: #fff;
}
.box {
width: 100px;
height: 100px;
background: skyblue;
color: red
}
/*鼠标悬停状态*/
.box:hover {
width: 200px;
height: 200px;
background: yellow;
color: black
}
效果前：
效果后：
</style>
</head>
<body>
<!--用来描述一个元素的特殊状态，鼠标点击过，被访问过的链接，是否被鼠标悬停...-->
<a href="超链接">点击</a>
<p>12312313</p>
<div class="box">12312312313</div>
弹性布局
flex属性 子元素分配父元素剩余空间 使用flex表示占用的大小
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 80%;
height: 80px; //宽高自己设定即可
margin: 0 auto;
background-color: skyblue;
display: flex; //fle属性
text-align: center;
}
.box1 div:nth-child(odd) {
width: 100px;
height: 80px;
background-color: hotpink;
}
.box1 div:nth-child(2) {
flex: 1;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="box1">
<div>
内容自定义
</div>
<div>
内容自定义
</div>
<div>
内容自定义
</div>
</div>
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
