h5制作简易名片

最新推荐文章于 2025-04-13 13:27:33 发布
guibar
最新推荐文章于 2025-04-13 13:27:33 发布
阅读量1.6k
点赞数 3
文章标签： html
本文链接：https://blog.csdn.net/guibar/article/details/109002709
版权
注意:里面的图片链接记得更改o

<!DOCTYPE html>
<html class="html" >
    <!--注释标记的快捷键ctrl+shift+/  -->
    <!--head 头部标记 控制性信息 控制body中的内容信息    -->
    <head>
    <!--  设置字符集编码格式为UTF-8 -->
        <meta charset="UTF-8">
        <style>
            /* 删除某一行的快捷键 ctrl+d
            <!--  --> 不可用
            选择器:
                三种基本选择器:id选择器  标记选择器  class选择器
                id选择器语法格式:   #id值{}
                标记选择器语法格式:  标记名称{}
                class选择器语法格式: .class值{} （使用频率最高）
                */
            .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;
               /*设置标志的倒角*/
               border-radius: 5%;
               /*移动页面中的某一个标记,一般需要使用定位属性 position
                   absolute 绝对的
                   relative 相对的
                   父标记使用相对定位 子标记使用绝对定位---->父相子绝
                   位置移动的属性:left  top
                   left 左边的,靠左的 实际上往右移动  距离左边有多远  水平方向上移动
                   top  上边的 靠上的 实际上往下移动  距离上边有多远  垂直方向上移动
                   */
               position: relative;
               /*百分比 比例是参照父标记  如果父标记没有position定位属性 会一直往上找 直到找到根部标记html结束*/
               left: 25%;
               top: 15%;
           }
           #logo{
               background-image:url('./logo.png') ;
               height: 60px;
               width: 300px;
               background-size:100% 100%;
               /*绝对定位属性*/
               position: absolute;
               /*往下移动20像素*/
               top: 20px;
               /*往右移动20像素*/
               left: 20px;
           }
            #header{
                background-image: url('./header.png');
                height: 150px;
                width: 150px;
                border-radius:75%;
                background-size:100% 100%;
                /*绝对定位属性*/
                position: absolute;
                /*往下移动20像素*/
                top: 120px;
                /*往右移动20像素*/
                left: 300px;
            }
            #message{
                /*绝对定位属性*/
                position: absolute;
                /*往下移动20像素*/
                top:100px;
                /*往右移动20像素*/
                left: 20px;

            }
           /* 标记选择器 标记名称从{}
           设置下边距 margin-bottom
           margin 外边距 外间距
           bottom 底部,下部,下边
           根据标记的两大特征来区分(
                1.该标记是否可以独占一行
                2.该标记是否课题设置高度和宽度
           )来区分:行标记 块标记
                 行标记:不独占一行,一般不能设置高度而和宽度 如span标记 inline在一行上
                 快标记:独占一行,能够设置高度和宽度 如div标记  block 块
           */
           span{
               /* 强制性改变标记的特征 display */
               display: block;
               margin-bottom: 5px;
               /*设置字体*/
               font-family: 宋体;
           }
        </style>

    </head>

    <body>
        <!--division 布局
            设置高度和宽度 style
             height高度
              width宽度-->
        <div id="card">
            <div id="logo"></div>
            <div id="header"></div>
            <div id="message">
            <!--换行标记 br-->
            <!--font-size 字体尺寸
                font-weight 设置字体粗细 border 加粗 lighter 变细   -->
                <span style="font-size: 30px;font-weight: bolder" >姓名:Ultraman</span><br>
                <span>职位:Java讲师</span><br>
                <span>手机号:155655455</span><br>
                <span>QQ:886888</span><br>
                <span>邮箱:886888@qq.com</span>
            </div>

        </div>
    </body>
</html>