<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color: lightgray;
}
.fu{
width: 500px;
height: 300px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
border: 4px solid white;
border-radius: 10px;
box-shadow: inset 0 0 10px 10px black;
}
.zi{
writing-mode: vertical-lr;
width: 190px;
height: 240px;
background-color: white;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 10px 10px black;
}
p{
font-family: '幼圆';
text-align: center;
direction: rtl;
}
span{
font-weight: bold;
font-size: 30px;
font-family: '幼圆';
}
img{
width: 150px;
height: 200px;
}
span span{
opacity: 0.2;
}
div img{
border:5px solid white;
}
</style>
</head>
<body>
<div class="fu">
<div class="zi" >
<p><span>杭州相<span>册</span></span><br>曲院风荷<br>苏提春晓<br>花港观鱼<br>雷峰夕照</p>
</div>
<div class="zi">
<img src="../Desktop/7.jpg">
</div>
</div>
</body>
网页背景色、边框颜色、边框填充、盒子阴影、文字字体、文字字号、文字对齐、盒子定位、盒子边距、盒子填充、盒子宽度、盒子高度。例:杭州相册练习
于 2023-04-17 15:11:21 首次发布