<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <title>实现vivo X9s手机的宣传面面</title>
    <!-- 引用CSS样多文件，路径、类型、与当前文件关系 -->
    <!-- 使用类选择器，伪类选择器，伪元素选择器 -->
    <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;/*取消正在被单击的超接的下划线*/
}

实现vivo X9s手机的宣传页面_选择器

实现vivo X9s手机的宣传页面_选择器_02