实现vivo X9s手机的宣传页面

    
    
    
    
    



    
vivo X9s
    

        更强大的分屏多任务3.0
新增对QQ浏览器、天猫等应用的
        分屏功能，大幅增加了可以一屏二用的场景，不但可以边看视频边回复，更可以一
        边聊天一边购物、写文档、回邮件、看新闻
    

@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{/*通过标记选择器，选择
标题标记*/
    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;/*取消正在被单击的超接的下划线*/
}