无论何时何地,你都能自由享受QQ在各类
终端上带来的高清通话,与好友一起想聊多久就聊多久
通过QQ电脑和手机上的文件都能收发自如,
更有手机在线查询,轻松你的工作和生活
即使世界很大,你也不会孤单,在兴趣部落
有和你一样的人,期待着和你一起发现精彩
/* reset css */
*{
padding: 0;
margin: 0;
}
body{
font-size: 14px;
font-family: "Microsoft YaHei",sans-serif;
}
ul{
list-style: none;
}
a{
color: #333;
text-decoration: none;
}
/* model css */
/* .nav-class{
/* 语义化标签的作用 */
/* 1.1从开发角度考虑,是提高代码的可维护性,可读性 */
/* 1.2从用户的角度去看,层次感的界面,提高用户感受 */
/* 网站的发布者:seo 搜索引擎优化 */
/* 轻松分析我们网站遇到的问题 */
/* 语义化标签的兼容问题 */
/* 1.1 IE9以下,不支持h5标签 */
.qq-nav{
height: 150px;
background:url("../images/nav_bg.png");
background-repeat: repeat-x;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.qq-nav .wrapper{
width: 1080px;
height: 75px;
margin: 0 auto;
}
.qq-nav .wrapper .logo{
width: 100px;
height: 75px;
background: url("..//images/nav_brand.png") no-repeat center;
float: left;
}
.qq-nav .wrapper .nav{
float: left;
}
.qq-nav .wrapper .nav li{
float: left;
font-size: 15px;
line-height: 75px;
margin-left: 20px;
}
.qq-nav .wrapper .nav li a{
display: block;
padding:0 20px;
}
.qq-nav .wrapper .nav li a.actice,
.qq-nav .wrapper .nav li a:hover{
background: #12b7f5;
}
.qq-nav .wrapper .register{
float: right;
height: 36px;
width: 96px;
text-align: center;
line-height: 36px;
font-size: 16px;
background: #12b7f5;
color:white;
border-radius: 18px;
margin-top: 22px;
}
.qq-nav .wrapper .other{
float: right;
width: 150px;
height: 75px;
}
.qq-nav .wrapper .other ul{
width: 250px;
}
.qq-nav .wrapper .other ul li{
float: right;
margin-left: 40px;
margin-top: 14px;
}
.qq-nav .wrapper .other ul li a{
font-size: 15px;
text-shadow: 0 0 2px #333;
height: 50px;
line-height: 50px;
}
.qq-nav .wrapper .other span{
text-shadow: 0 0 2px red;
width: 200px;
float: right;
}
.qq-banner{
height: 880px;
background:url("../images/banner-bg.jpg");
padding-top: 150px;
}
.qq-banner img{
display: block;
margin:20px auto 0;
}
.qq-banner img:last-child{
width:100%;
/* 自适应,等比例缩放 图片有这个特殊效果 */
}
.qq-sound{
}
.qq-sound h1{
display: block;
margin-left: 150px;
height: 300px;
background-image: url("../images/sound-text.png");
font-size: 0;
}
.qq-sound .bg{
height: 500px;
background-image: url("../images/sound-bg.jpg");
}
.qq-sound .content{
height: 500px;
width: 980px;
margin:0 auto;
position: relative;
}
.qq-sound .content .iphone{
position: absolute;
width: 700px;
left:0px;
top:-200px;
height: 700px;
background-image: url("../images/sound-phone.png");
background-repeat: no-repeat;
}
.qq-sound .content h2{
float: right;
padding-top: 100px;
width: 500px;
text-align: right;
font-size:40px;
}
.qq-sound .content p{
float: right;
font-size: 20px;
width: 500px;
text-shadow: 0 1px 1px #333;
text-align: right;
}
.qq-file{}
.qq-file .bg{
height: 500px;
background-image: url("../images/file-bg.jpg");
background-repeat: no-repeat;
}
.qq-file .content{
height:500px;
width: 980px;
margin: 0 auto;
position: relative;
}
.qq-file .content .mac{
width: 600px;
height: 340px;
background-image: url("../images/file-mac.png");
background-repeat: no-repeat center/cover;
position: absolute;
right: -150px;
top: 100px;
}
.qq-file .content h2{
float: left;
padding-top: 100px;
width: 500px;
text-align: left;
font-size:40px;
}
.qq-file .content p{
float: left;
font-size: 20px;
width: 500px;
text-shadow: 0 1px 1px #333;
text-align: left;
}
}
.qq-interset{}
.qq-interset .bg{
height: 500px;
background-image: url("../images/interest-bg.jpg");
}
.qq-interset .content{
height: 300px;
width: 980px;
margin:0 auto;
position: relative;
}
.qq-interset .content .phone{
position: absolute;
width: 350px;
left:0px;
top:0px;
height: 500px;
background: url("../images/interest-phone.png");
background-repeat: no-repeat;
}
.qq-interset .content h2{
float: right;
padding-top: 100px;
width: 500px;
text-align: right;
font-size:40px;
}
.qq-interset .content p{
float: right;
font-size: 20px;
width: 500px;
text-shadow: 0 1px 1px #333;
text-align: right;
}
.qq-footer{
height: 300px;
position: relative;
left: 0;
top: 220px;
background-color: #666;
}
.qq-footer .content{
position: absolute;
left:450px;
top:80px;
width:1000px;
color:#666;
}
.plats{
position: absolute;
left:120px;
top:10px;
width: 900px;
height: 80px;
margin: 0 auto;
display: block;
background-image: url("../images/footer.png");
background-repeat: no-repeat;
background-size: auto;
}
.plats a{
float: left;
text-align: center;
font-size: 12px;
color:white;
padding-top: 100px;
width: 80px;
padding-left: 15px;
margin:0 20px 0px -10px;
/* margin:0 60px; */
}
.plats a:hover{
color:#12b7f5;
}
.plats .plmb{
background-position: -20px 0;
}
.qq-footer .content p{
position: relative;
left:150px;
top:180px;
color:white;
}
.qq-footer .content p:last-child{
position: absolute;
left:250px;
top:200px;
color:white;
}
demo地址http://www.lcycyos.cn/