实现vivo X9s手机的宣传页面

Bertha 。 2022-02-04 14:09 469阅读 0赞

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="utf-8"/>
        <title>实现vivo X9s手机的宣传面面</title>
        
        
        <link href="css/style.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
    <div class="cont">
        <h1><a href="#">vivo X9s</a></h1>
        <div class="top">
            更强大的分屏多任务3.0<br/>新增对QQ浏览器、天猫等应用的
            分屏功能，大幅增加了可以一屏二用的场景，不但可以边看视频边回复，更可以一
            边聊天一边购物、写文档、回邮件、看新闻
        </div>
    </div>
    </body>
    </html>

@charset "utf-8";
    /*css document*/
    .cont{/*类选择器，设置页面整体大小以及背景图*/
        width: 1536px;/*设置整体页面宽度为1536像素*/
        height: 840px;/*设置整体页面高度840像素*/
        margin: 0 auto;/*设置页面外边距上下边距为0,左右自适应*/
        text-align: center;/*文字对齐方式为居中对齐*/
        background: url("../images/bg.jpg");/*为页面设置背景图片*/
    }
    h1{/*通过标记选择器，选择<h1>标题标记*/
        padding-top: 80px;/*设置向上的内边距*/
    }
    .top{/*使用类选择器，改变主体内容的样式*/
        line-height: 30px;/*类选择器，设置行高为30像素*/
        margin: 0 auto;/*设置主体部分的外边距*/
        text-align: center;/*设置文字的对齐方式为居中对齐*/
        width: 650px;/*设置主体部分的宽度为650像素*/
        font-size: 20px;/*设置文字的大小*/
    }
    /**设置页面的功能样式*/
    .top:after{/*在类名为top的div后面添加内容*/
        content: url("../images/phone.png");/*添加内容为1张图片,url为图片地址*/
        display: block;/*设置显示方式*/
        margin-top: 50px;/*设置所添加内容的向上的外边距*/
    }
    .top:first-line{/*类选择器中第一行文字的样式*/
        font-size: 30px;/*设置第一行字体大小*/
        line-height: 90px;/*设置第一行字体行高*/
    }
    a:link{/*设置未被访问的超链接的样式*/
        text-decoration: none;/*取消期默认的下划线*/
        color: #000;/*设置字体颜色为黑色*/
    }
    a:visited{/*设置访问后的超链接的样式*/
        color: purple;/*设置访问后的超接的字体颜色为紫色*/
    }
    a:hover{/*设置鼠标停留在超链接上的样式*/
        text-decoration: underline;/*类选择器设置鼠标滑过时在文字下方出现下划线*/
        color: #B49668;/*设置鼠标悬停在超链接上时的字体颜色*/
    }
    a:active{/*设置正在被单击的超连接样式*/
        color: red;/*设置下在被单击的超链接字体颜色*/
        text-decoration: none;/*取消正在被单击的超接的下划线*/
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0wxNTg1OTMxMTQz_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0wxNTg1OTMxMTQz_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0wxNTg1OTMxMTQz_size_16_color_FFFFFF_t_70]: /images/20220204/659906c638174b628024a03e1bd899c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0wxNTg1OTMxMTQz_size_16_color_FFFFFF_t_70 1]: /images/20220204/40616f102d3e47c9b3596d2e9a2434f3.png