74 lines
2.1 KiB
HTML
74 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>css属性练习</title>
|
|
<style>
|
|
.dddd {
|
|
font-size: 80px;
|
|
font-weight: bolder;
|
|
font-family: fantasy;
|
|
font-style: oblique;
|
|
text-align: center;
|
|
letter-spacing: 35px; /* 设置字符间距 */
|
|
line-height: 60px;
|
|
}
|
|
div {
|
|
height: 60px;
|
|
}
|
|
span {
|
|
vertical-align: middle;
|
|
}
|
|
.box {
|
|
width: 100px;
|
|
height: 100px;
|
|
text-align: center;
|
|
line-height: 100px;
|
|
}
|
|
.box p {
|
|
font-size: 15px;
|
|
}
|
|
.tm {
|
|
opacity: 0.5; /* 0 ~ 1*/
|
|
}
|
|
.box-2 {
|
|
width: 400px;
|
|
height: 400px;
|
|
/* background: #c65050; */
|
|
background-image: url('https://upload-images.jianshu.io/upload_images/538-efa040828af14c4e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp');
|
|
background-size: 134px 98px;
|
|
background-repeat: no-repeat;
|
|
background-position: 19px 21px;
|
|
border: 30px solid #747474;
|
|
box-shadow: 10px 38px 1px #e33c3c;
|
|
border-radius: 300px 50px 60px 10px;
|
|
/* border-width: 30px;
|
|
border-style: solid;
|
|
border-color: #747474; */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div>
|
|
<span>测试</span>
|
|
<a href="">dedede</a>
|
|
</div>
|
|
|
|
<p class="dddd">
|
|
这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体这是font字体
|
|
</p>
|
|
|
|
<div class="box">
|
|
<p>居中文字</p>
|
|
</div>
|
|
|
|
<img class="tm" src="https://upload-images.jianshu.io/upload_images/538-efa040828af14c4e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp" alt="">
|
|
|
|
<div class="box-2">
|
|
背景测试
|
|
</div>
|
|
|
|
</body>
|
|
</html> |