旅游html界面

界面展示

结构

home.css
代码片
.seach-bar{
padding-top: 1vw;
height: 40vw;
background-color: #6e7eff;
}
.seach-bar .seach{
float: left;
width: 85vw;
height: 9vw;
background-color: #ffffff;
display: flex;
align-items: center;
border-radius: 3vw;
}
.seach-bar .meassage{
float: right;
width: 5vw;
height: 5vw;
margin-top: 2vw;
margin-right: 3vw;
}
.seach-bar .seach img{
width: 4vw;
height: 4vw;
margin-left: 2vw;

}
.seach-bar .seach input{
border: none;
font-size: 3vw;
color: #424242;
padding-left: 2vw;
}
.a{
margin-top: -26vw;
height: 41vw;
border-radius: 3vw;
background-image: url(…/images/banner.png);
background-size: 100%;
width: 97vw;
margin-left: 2vw;
margin-right: 2vw;
}
.b{
width: 91vw;
height: 40vw;
margin-left: 4vw;
}
.b img{
width: 9vw;
height: 6vw;
}
.jing1{
margin-top: 6vw;
margin-right: 10vw;
}
.jing2{
margin-right: 10vw;
}
.jing3{
margin-right: 10vw;
}
.jing4{
margin-right: 10vw;
}
.jing5{

}
.jing6{
margin-right: 10vw;
}
.jing7{
margin-right: 10vw;
}
.jing8{
margin-right: 10vw;
}
.jing9{
margin-top: 10vw;
margin-right: 11vw;
}
.jing10{

}
.wz{
color: #131313;
font-size: 3vw;
}
.wz1{
position: relative;
top: -15vw;
left: 1vw;
}
.wz2{
position: relative;
top: -15vw;
left: 12vw;
}
.wz3{
position: relative;
top: -15vw;
left: 23vw;
}
.wz4{
position: relative;
top: -15vw;
left: 36vw;
}
.wz5{
position: relative;
top: -15vw;
left:48vw;
}
.wz6{
position: relative;
top: 2vw;
left: -39vw;
}
.wz7{
position: relative;
top: 2vw;
left: -26vw;
}
.wz8{
position: relative;
top: 2vw;
left: -14vw;
}
.wz9{
position: relative;
top: 2vw;
left: -3vw;
}
.wz10{
position: relative;
top: 2vw;
left: 5vw;
}
.tubiao{
height: 22vw;
background-image: url(…/images/-h-组\ 15.png);
background-size: 100%;
margin-left: 2vw;
margin-right: 2vw;
}

.wz11{
font-size: 4vw;
color: #1c1c1c;
position: relative;
top: 27vw;
}
.wz12{
font-size: 3vw;
color: #565656;
position: relative;
top: 27vw;
left: 38vw;
}

.jing11{
width: 2vw;
height: 2vw;
position: relative;
top: -20vw;
left: 96vw;

}
.jing12{
width: 2vw;
height: 2vw;
position: relative;
top: -20vw;
left: 94vw;

}
.jing13{
position: relative;
top: 12vw;
right: 3vw;
width: 49vw;
height: 29vw;
}
.jing14{
position: relative;
left: 52vw;

top: -17vw;
width: 46vw;
height: 14vw;
}
.jing15{
position: relative;
width: 46vw;
height: 14vw;
top: -2vw;
left:5.2vw;
}
.jing16{
position: relative;
width: 99vw;
height: 11vw;
top: -11vw;
left:0px;
}

base.css
代码片
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: #333;
}
ul{
list-style:none ;
}
input{
outline: none;
}
.p12{
padding: 0 12px;
}
home.html

自己感受
写的时候发现有些许的不兼容，调大可以，缩小的话会慢慢的不兼容，可能是写的方法
太过于想得及简单了，但是由于懒得改就没有去管理，总的来说还得慢慢的来，不要急于
求成。