<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.h1:hover{
border-width: 3px;
border-style: dotted;
border-color: blue;
border-left-width: 2px;
border-right-width: 2px;
border-top-style: solid;
border-left-style: dotted;
border-right-style: dotted;
border-bottom-style: solid;
padding: 10px 5px 3px 0px;
}
.p1:hover{
/* 上右下左的方向 */
border-width: 5px 2px 10px 0px;
border-style: dashed groove double;
border-color: blue;
/* 设置复合属性 */
border:2px double blue;
margin: 40px;
text-align: center;
}
img{
width: 100px;
height: 200px;
}
/* 超出div的范围自动加入滚动条 */
div{
width: 200px;
height: 100px;
overflow: auto;
background-color: yellow;
background-repeat: repeat;
}
body{
background-image: url("Hydrangeas.jpg");
/* 水平上平铺 */
background-repeat: repeat;
/* 背景图像是否滚动 */
background-attachment: fixed;
background-position: right bottom;
}
</style>
</head>
<body>
<h1 class="h1">四川大学锦江学院</h1>
<p class="p1">计算机学院</p>
<img src="Hydrangeas.jpg" alt="">
<div><p>
计算机计算机计算机
计算机计算机计算机
计算机计算机计算机
计算机计算机计算机
计算机计算机计算机
计算机计算机计算机
计算机计算机计算机
计算机计算机计算机
计算机计算机计算机
计算机计算机计算机
计算机计算机计算机
计算机计算机计算机
计算机计算机计算机
计算机计算机计算机
计算机计算机计算机
计算机计算机计算机
</p></div>
</body>
</html>
盒子和css背景
最新推荐文章于 2024-03-17 09:00:44 发布