用HTML和css选择器写明信片

<! DOCTYPE html>
<html class="html">
<!--注释快捷键:Ctrl+ shift+/-->
<!--head 头部标记 控制性信息 控制body中的内容信息-->
<head>
    <!--设置字符集编码格式 为 UTF-8-->
    <meta charset="UTF-8">
    <style>
        /*
        选择器:
        三种基本选择器: id选择器 标签名选择器 class类选择器
        id选择器:#id值{}   //由于id值唯一,要慎重使用
        标签选择器:标签名{}  //由于可能会出现多个相同标签,所以慎用
        class选择器: .class值{}
        */

      /* #body {
           background-image: url(‘bg.jpg‘);
       }
        body{
            background-image: url(‘bg.jpg‘);

        }*/
        .html{
            height: 100%;
        }
        .body{
            background-image: url(‘bg.jpg‘);
            background-size:100% 100%;
            background-repeat:no-repeat;
            height: 100%;
            overflow: hidden;
        }
        .card{
            height: 350px;
            width: 500px;
            background-color: white;
            /*移动页面中的某一个标签,一般需要使用定位属性:position
            absolute (绝对的)
            relative (相对的)
            父标签使用相对定位,字标签使用绝对定位--->父相子绝
            位置移动的属性: left top

            */
            position: relative;
            /*百分比比例参考父标签相对,如果上层没有父标签,会找到根标签,*/
            left:25%;
            top:15%;
            /*设置标签的边角弧度border-radius*/
            border-radius: 4%;
        }
        .logo{
            background-image:url(‘./logo.png‘);
            height: 60px;
            width: 300px;
            background-size: 100% 100% ;
            position: absolute;
            left: 20px;
            top: 20px;
        }
        .header{
            background-image:url(‘./header.png‘);
            height: 150px;
            width: 150px;
            border-radius: 75px;
            background-size: 100% 100%;
            position: absolute;
            left: 300px;
            top: 100px;

        }

        .message{
            position: absolute;
            left: 20px;
            top: 120px;
        }
        /*标签选择器 设置span之间的距离
        设置下边距 margin-bottom
        根据标签的两大特征,(
                1,该标记是否可以独占一行
                2,该标记是否可以设置高度和宽度
        )来区分:行标签 块标签
        行标签:不能独占一行, 一般不能设置高度和宽度 如:span标签   inline (在一行上)
        块标签:独占一行,能够设置高度和宽度 如:div标签   block(块)

        */
        span{
            /*强制性改变标签特征 :用display*/
            margin-bottom:5px;
            display:block;
            /*设置字体
            font-family
            */
            font-family: 黑体;

        }
    </style>

</head>
<body  class="body" >

<!-- division 布局
设置高度和宽度 style属性(风格)
height(高)
width(宽)
-->
<!-- 通过id来区分是哪个div -->
<div class="card" >
<!-- 如果想引入图片,可以把图片资源放在web下,方便引用 ,一定要给图片设置大小,不然不显示 -->
<div class="logo" >
</div>

        <div class="header"></div>
        <div class="message">
            <!--font-size -->
             <span style="font-size:20px;font-weight: bold">姓名:张三</span><br>
            <span>职位:java讲师</span><br>
            <span>手机号:1883889488</span><br>
            <span>QQ:8886889488</span><br>
            <span>邮箱:888688@qq.com</span>
        </div>

    </div>
</body>

用HTML和css选择器写明信片

上一篇:Git配置https_proxy访问github失败


下一篇:Web 应用程序项目已配置为使用 IIS。 此计算机上未安装 IIS。