这篇博客详细介绍了支付宝网页头部、中间内容和底部的样式设计，包括背景图、浮动元素、按钮样式以及鼠标悬停效果。内容涵盖HTML、CSS的使用，如背景填充、元素浮动、链接样式和响应式设计等，展示了前端页面布局和交互实现的技术细节。
*{
padding: 0;
margin: 0;
}
/*给body html元素继承可视化窗口的宽高*/
body,html{
width: 100%;
height: 100%;
}
/*给li标签自带的点去除*/
li{
list-style: none;
}
/*a的样式，去除a的下划线*/
a{
text-decoration: none;
font-size: 12px;
}
/*浮动*/
.clearfloat:after{
content: "";
display: block;
clear: both;
}
/*-----------背景图样式-----------*/
.bg{
width: 100%;
height: 90%;
background-image: url(imgs/banner.jpg);
/*设置背景图放大到背景容器的尺寸*/
background-size: cover;
background-position: center;
}
/*-------头部-------*/
.head{
width: 100%;
height: 30px;
position: absolute;
top: 20px;
}
/*hc这个div*/
.hc{
width: 80%;
margin: 0 auto;
}
/*hc下的左右div分别左右浮动*/
.hc-left{
float: left;
}
.hc-right{
float: right;
}
/*hc下的左侧两个图片样式*/
.hc-left img:first-child{
width: 70px;
height: 25px;
}
.hc-left img:last-child{
width: 31px;
height: 25px;
margin-left: 20px;
}
/*hc下的右侧两个元素样式*/
.hc-right span{
color: #BFBFBF;
font-size: 12px;
}
.hc-right a{
color: #FFF;
}
/*中间部分*/
.content{
width: 100%;
position: absolute;
top: 20%;
left: 0;
}
/*你是中心图片样式*/
.center{
width: 600px;
height: 200px;
margin: 0 auto;
}
.center img{
width: 100%;
}
/*btn的div样式*/
.btn{
width: 780px;
height: 50px;
margin: 0 auto;
margin-top: 15px;
}
/*设置a元素的样式*/
.btn a{
display: inline-block;
width:170px;
height:50px;
background-color: #12A4E9;
border-radius: 9px;
color: #FFF;
font-size: 14px;
text-align: center;
line-height: 50px;
margin-left: 18px;
float: left;
}
.icon{
display: inline-block;
width: 24px;
height: 24px;
background-image: url(imgs/aa.png);
background-size: 24px 24px;
position: relative;
top: 8px;
left:-10px;
}
.btn a:hover{
background-color: rgb(3,152,225,0.8);
}
/*设置第三个a元素的hover效果*/
.none{
display: none;
}
.slipper:hover{
height: 100px;
position: relative;
top: -25px;
}
/*鼠标滑过隐藏原来的内容*/
.slipper:hover i,.slipper:hover span{
display: none;
}
.slipper:hover .none{
display: block;
}
hr{
width: 130px;
margin: 0 auto;
border: 1px solid rgba(255,255,255,0.2);
}
.footer{
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 65px;
background-color: white;
overflow: hidden;
}
.wz{
width: 99%;
height: 20px;
margin: 0 auto;
text-align: center;
}
li{
display: inline-block;
}
.footer2{
text-align: center;
}
.footer3{
width: 250px;
height: 30px;
margin: 0 auto;
text-align: center;
}
.footer3 a{
float: left;
background: url(imgs/footer.png) no-repeat 0 0;
/*设置背景图放大到背景容器的尺寸*/
margin-right: 5px;
height: 28px;
}
a.pic1 {
background-position: 0px -5px;
width: 18px;
}
a.pic1:hover{
background-position: 1px -28px;
width: 18px;
}
a.pic2 {
background-position: -33px -5px;
width: 40px;
}
a.pic2:hover {
background-position: -32px -28px;
width: 40px;
}
a.pic3 {
background-position: -74px -5px;
width: 33px;
}
a.pic3:hover {
background-position: -73px -28px;
width: 33px;
}
a.pic4 {
background-position: -115px -5px;
width: 18px;
}
a.pic4:hover {
background-position: -114px -28px;
width: 18px;
}
a.pic5 {
background-position: -157px -5px;
width: 18px;
}
a.pic5:hover {
background-position: -156px -28px;
width: 18px;
}
a.pic7 {
background-position: -200px -5px;
width: 20px;
}
a.pic7:hover {
background-position: -200px -26px;
width: 20px;
}
//body部分
我已有支付宝账户
扫一扫
1421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
