模仿网站
http://www.hnzjj.com/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/login.css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="box">
<div class="orientedLeft">
<div class="dxbar">服务导向</div>
</div>
<div class="sidebar">
<div class="ddl">
<div class="oriented">服务导向</div>
<div class="oriented">咨询热线</div>
<div class="ddcont">
<ul class="hotline">
<li>旅游咨询:0744-5611109</li>
<li>交通处理:0559-5586570</li>
<li>旅游投诉:0744-5618331</li>
<li>医疗急救:0744-5610120</li>
</ul>
<div class="otherline">
<ul>
<li>电子商务热线:</li>
<li>0744-5611109</li>
</ul>
</div>
<div class="fwlink">
<a href="#">怎样到景区</a>
<a href="#">列车时刻</a>
<a href="#">旅游出租车</a>
<a href="#">夜生活</a>
<a href="#">购物指南</a>
<a href="#">怎样到景区</a>
<a href="#">怎样到景区</a>
<a href="#">怎样到景区</a>
<a href="#">怎样到景区</a>
</div>
<div class="QRcode">
<span><img src="image/ico10.png">张家界旅游微信</span>
<span><img src="image/ico11.png">张家界旅游微博</span>
</div>
</div>
</div>
<div class="ui_gradient1">
<div id="bg-img1">
<a>在线咨询</a>
</div>
</div>
<div class="ui_gradient1">
<div id="bg-img2">
<a>网上投诉</a>
</div>
</div>
<div class="ui_gradient1">
<div id="bg-img3">
<a>在线咨询</a>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".orientedLeft").click(function(){
$(".sidebar").animate({
right:'-243px',
});
$(".orientedLeft").animate({
right:'0px',
});
});
$(".orientedLeft").hover(
function(){
$(".sidebar").animate({
right:'-243px',
});
$(".orientedLeft").animate({
right:'0px',
});
},
function(){
$(".sidebar").animate({
right:'0px',
});
$(".orientedLeft").animate({
right:'243px',
});
}
);
});
</script>
</body>
</html>
css
*{margin: 0; padding: 0;}
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
div,a{
color: white;
}
form label,form .from-control{
margin-bottom: 19px;
}
form .from-control{
width: 90%;
}
form .from-control input{
width: 100%;
height: 15x;
padding: 10px;
outline-color: rgb(49, 49, 214);
}
form label{
font-size: 20px;
}
.btn{
width: 60px;
height: 30px;
}
.btn:hover{
cursor: pointer;
color: white;
background: rgb(63, 117, 233);
}
.btn-large{
width: 100px;
height: 40px;
}
.box{
position: flex;
height: 1000px;
font-size: 12px;
}
.ddl,.ui_gradient1,.orientedLeft{
border-radius: 8px 0 0 8px ;
background-image: linear-gradient(to bottom,#028882,#46a562);
}
.sidebar{
position: absolute;
top: 20%;
right: 0;
width: 223px;
height: 669px;
padding: 20px;
}
.sidebar .oriented:nth-of-type(1){
background: url(../image/ico22.png) no-repeat left center;
}
.sidebar .oriented:nth-of-type(2){
background: url(../image/ico23.png) no-repeat left center;
}
.ddl{
padding-left: 30px;
}
.orientedLeft{
position: absolute;
top: 42%;
right: 243px;
cursor: pointer;
}
.orientedLeft .dxbar{
background: url(../image/ico28.png) no-repeat ;
padding: 45px 10px 15px 0;
font-size: 18px;
writing-mode:tb-rl;
}
.oriented{
font-size: 18px;
line-height: 45px;
padding-left: 30px;
cursor: pointer;
}
.ddcont,.ui_gradient1{
margin-bottom: 1px;
}
.ddcont{
padding: 0 0 20px 0;
}
.ddcont .hotline{
margin-top: 0;
}
.ddcont >*{
margin-top: 10px;
}
.ddcont .otherline li:first-child{
font-size: 14px;
}
.ddcont .otherline li:last-child{
font-size: 22px;
}
.ddcont .fwlink,.ddcont .QRcode{
display: flex;
flex-wrap: wrap;
}
.ddcont .fwlink a{
width: 50%;
margin: 4px 0;
}
.ddcont .QRcode{
width: 190px;
height: 114px;
}
.ddcont .QRcode span{
width: 50%;
line-height: 24px;
cursor: pointer;
}
.ddcont .QRcode span img{
width: 85px;
height: 85px;
}
.ui_gradient1{
height: 45px;
line-height: 45px;
font-size: 14px;
cursor: pointer;
}
.sidebar #bg-img1{
background: url(../image/ico24.png) no-repeat left center ;
}
.sidebar #bg-img2{
background: url(../image/ico25.png) no-repeat left center ;
}
.sidebar #bg-img3{
background: url(../image/ico26.png) no-repeat left center ;
}
.sidebar #bg-img1,.sidebar #bg-img2,.sidebar #bg-img3{
padding-left: 30px;
}