HTML练习————DAY3

最新推荐文章于 2024-09-03 11:19:40 发布

好吃的都给你呀

最新推荐文章于 2024-09-03 11:19:40 发布

阅读量146

点赞数

分类专栏：前端杂文文章标签： HTML 练习

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/102553168

版权

前端杂文专栏收录该内容

34 篇文章 0 订阅

订阅专栏

网页效果为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>名片</title>
    <style>
        /* 设置网页背景颜色 */
        body{
            background-color: rgb(111, 214, 245);
        }
        /* h1,p标签的外边距都设置为0，因为有的时候很多标识都有默认的外边距，所以想要得到紧凑的效果时可以设置为0 */
        h1,p{
            margin:0;
        }
        /* 因为想制造一个双层相框的效果，所以用了两个div，一个用id=fu 另一个用zi来区分 */
        #fu{
            width: 620px;
            height: 390px;
            border: 10px solid white;
            background-color: blanchedalmond;
            position: relative;
            top:200px;
            left: 550px;
            /* 在这里进行角度倾斜，里面所有包含的字标签都会一起跟着倾斜 */
            transform: rotate(30deg);
            /* 阴影标签：横向偏移量  纵向偏移量 阴影宽度 阴影颜色*/
            box-shadow: 0 0 60px pink;
        }
        #zi{
            width: 610px;
            height: 380px;
            border: 1px solid pink;
            /* 当只有一个属性的时候，就是指这个模块与上层模块上下左右都是5px */
            margin: 5px;
        }
        /* 进行图片定位，这里nth-child(1)里面的1是指该模块里的第一个标签，而不仅仅代表第一个img标签 */
        #zi img:nth-child(1){
            
            margin-top: 20px;
            margin-left: 30px;
        }
        #zi img:nth-child(2){
            width: 150px;
            height: 150px;
            float:right;
            margin-right: 40px;
            margin-top: 20px;
            /* 将图像变圆 */
            border-radius: 50%;
        }
        #zi img:nth-child(6){
            float: right;
            width: 220px;
            height: 220px;
            margin-top: -160px;
            margin-right: 40px;
        }
        #zi h1{
            margin-left: 40px;
            font-size: 50px;
            
           
        }
        #zi p:nth-child(4){
          
            font-size: 25px;
            margin-left: 40px;
        }
        #zi p:nth-child(5){
            font-size: 20px;
            margin-left: 40px;
            margin-top: 50px;
        }
        /* #p1{
            font-size: 50px;
        } */
    </style>
</head>
<body>
    <div id="fu">
        <div id="zi">
                <img src="logo.png" alt="">
                <img src="photo.jpg" alt="jpg">
                <h1 id="p1">安以轩</h1>
                <p id="p2">演员，歌手</p>
                <p id="p3">地址：上海浦东 <br>tel:123456789&#x3000;&#x3000;qq:321456987
                    <br>电子邮箱：anyixuan@shanghai.com</p>
                <img src="pic.png" alt="">
        </div>
    </div>
</body>
</html>