网页背景色、边框颜色、边框填充、盒子阴影、文字字体、文字字号、文字对齐、盒子定位、盒子边距、盒子填充、盒子宽度、盒子高度。例：杭州相册练习

菜鸟一个昂

已于 2023-04-17 15:13:06 修改

阅读量149

点赞数 2

文章标签： html

于 2023-04-17 15:11:21 首次发布

本文链接：https://blog.csdn.net/xiaooxiangg/article/details/130200609

版权

<!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>

菜鸟一个昂

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
网页背景色、边框颜色、边框填充、盒子阴影、文字字体、文字字号、文字对齐、盒子定位、盒子边距、盒子填充、盒子宽度、盒子高度。例：杭州相册练习

网页背景色、边框颜色、边框填充、盒子阴影、文字字体、文字字号、文字对齐、盒子定位、盒子边距、盒子填充、盒子宽度、盒子高度。例：杭州相册练习
复制链接

扫一扫