側邊欄樣式
-
- 模仿網站
- HTML
- css
模仿網站
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://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> -->
<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="orientedLeft1">
<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',
// opacity:'0'
});
});
$(".orientedLeft").hover(
function(){
$(".sidebar").animate({
right:'-243px',
});
$(".orientedLeft").animate({
right:'0px',
// opacity:'0'
});
},
function(){
$(".sidebar").animate({
right:'0px',
});
$(".orientedLeft").animate({
right:'243px',
// opacity:'0'
});
}
);
});
</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;
}
/* 側邊欄——position：flex布局 */
.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{
border: 1px solid black;
} */
.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;
}
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)