::-webkit-scrollbar {
width: 14px;
height: 14px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
border-radius: 999px;
border: 5px solid transparent;
}
::-webkit-scrollbar-track {
box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;
}
::-webkit-scrollbar-thumb {
min-height: 20px;
background-clip: content-box;
box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;
}
::-webkit-scrollbar-corner {
background: transparent;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯css实现轮播图效果</title>
<style>
@keyframes move{
0%{
transform:translateX(0%);
}
20%{
transform:translateX(0%);
}
25%{
transform:translateX(-500px);
}
45%{
transform:translateX(-500px);
}
50%{
transform:translateX(-1000px);
}
70%{
transform:translateX(-1000px);
}
75%{
transform:translateX(-1500px);
}
95%{
transform:translateX(-1500px);
}
100%{
transform:translateX(-2000px);
}
}
.wrap{width:500px; height:320px;
position:relative; margin:50px auto;
border:5px solid #f00;
overflow:hidden;
}
ul,li{margin:0; padding:0; list-style:none;}
img{vertical-align: top; border:none;}
.list{width:500%; animation: move 7s linear infinite}
.list li{float:left; width:500px; height:320px;}
.list img{width:100%; height:100%;}
</style>
</head>
<body>
<div class="wrap">
<ul class="list">
<li><img src="imgs/ad_1.jpg" alt=""/></li>
<li><img src="imgs/ad_2.jpg" alt=""/></li>
<li><img src="imgs/ad_3.jpg" alt=""/></li>
<li><img src="imgs/ad_4.jpg" alt=""/></li>
<li><img src="imgs/ad_1.jpg" alt=""/></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3过渡效果</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 变化的属性 花费时间 运动曲线 何时开始; */
/* transition: width .5s ease 0s, height .5s ease 1s; */
/* 如果想要写多个属性，利用逗号进行分割 */
/* transition: width .5s, height .5s; */
/* 如果想要多个属性都变化，属性写all就可以了 */
/* transition: height .5s ease 1s; */
/* 谁做过渡，给谁加 */
transition: all 0.5s;
}
div:hover {
width: 400px;
height: 200px;
background-color: skyblue;
}
<body>
<input type="checkbox">
<svg>
<circle class="circle" fill="none" stroke="#68E534" stroke-width="20" cx="200" cy="200" r="190"
stroke-linecap="round" transform="rotate(-90,200,200)" />
<polyline class="tick" fill="none" stroke="#68E534" stroke-width="24" points="88,214 173,284 304,138"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
<h2>Success</h2>
</body>
<div class="container">
<div class="flip">
<div class="front">
<img src="images/pic00.jpg" alt="">
</div>
<div class="back">
<img src="images/pic01.jpg" alt="">
</div>
</div>
</div><!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.demo {
list-style: none;
width: 100%;
height: 180px;
text-align: center;
}
.demo li {
position: relative;
width: 20%;
height: 100%;
margin-right: 3%;
background: #f60;
display: inline-block;
}
.demo li:before, .demo li:after {
content: "";
position: absolute;
top: -20px;
display: block;
width: 10px;
height: 100%;
margin-top: 20px;
background-size: 20px 10px;
}
.demo li:before {
left: -10px;
background-color: #fff;
background-position: 100% 35%;
background-image: linear-gradient(-45deg, #f60 25%, transparent 25%, transparent),
linear-gradient(-135deg, #f60 25%, transparent 25%, transparent),
linear-gradient(-45deg, transparent 75%, #f60 75%),
linear-gradient(-135deg, transparent 75%, #f60 75%);
}
.demo li:after {
right: -10px;
background-color: #f60;
background-position: 100% 15%;
background-image: linear-gradient(-45deg, #fff 25%, transparent 25%, transparent),
linear-gradient(-135deg, #fff 25%, transparent 25%, transparent),
linear-gradient(-45deg, transparent 75%, #fff 75%),
linear-gradient(-135deg, transparent 75%, #fff 75%);
}
</style>
</head>
<body>
<ul class="demo">
<li></li>
<li></li>
<li></li>
</ul>
</body>
</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>
<style>
div {
float: left;
overflow: hidden;
height: 200px;
width: 150px;
margin-right: 30px;
border: 1px solid #ccc;
cursor: pointer;
}
div::before {
content: " ";
display: block;
width: 100%;
height: 100%;
background-color: #00a4ff;
transform-origin: left bottom;
transform: rotate(180deg);
transition: all ease .5s;
}
div:hover::before {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .dotted { position: relative; background: linear-gradient(to right, #5d95e0, #697dde); width: 300px; height: 200px; } .dotted:before { content: ' '; width: 0; height: 100%; position: absolute; /* 小球形状 */ border-right: 6px dotted white; left: -3px; top: 0px; } .dotted::after { content: ' '; width: 0; height: 100%; position: absolute; /* 小球形状 */ border-right: 6px dotted white; right: -3px; top: 0px; } </style> <body> <div class="dotted"></div> </body> </html>
.info { width: 200px; height: 200px; ; background: #009A61; border-radius: 45%; color: white; text-align: center; line-height: 200px; animation: roateOne 2s linear infinite; } @keyframes roateOne { from { transform: rotate(0); } to { transform: rotate(180deg); } }
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Radar</title>
<style type="text/css">
html {height: 100%;}
body {width: 100%;height: 100%;position: relative;padding: 0;margin: 0;}
.m-wrapper {position: relative;left: 50%;top: 50%;width: 600px;height: 600px;transform: translate(-50%, -50%);transform: translate(-50%, -50%);border-radius: 50%;border: 1px solid #dddddd;overflow: hidden;text-align: center;}
.m-center{display: inline-block;position: absolute;margin: auto;top: 0; bottom: 0;left: 0;right: 0;}
.m-divison1{width: 400px;height: 400px;border: 1px solid #dddddd;border-radius: 50%;}
.m-divison2{width: 200px;height: 200px;border: 1px solid #dddddd;border-radius: 50%;background-color: #ffffff;z-index: 9;}
.m-circle {width: 180px; height: 180px;border-radius: 90px;overflow: hidden;}
.m-circle-loading {position: absolute;top: 0;left:0;width: 50%; height: 100%;
background: linear-gradient(bottom, rgba(255, 255, 255, 0), #6699ff);
background: linear-gradient(top, rgba(255, 255, 255, 0), #6699ff);
background: linear-gradient(to top, rgba(255, 255, 255, 0), #6699ff);
animation: radar-beam 5s infinite;
animation: radar-beam 5s infinite;
animation-timing-function: linear;
animation-timing-function: linear;
transform-origin: center right;
transform-origin: center right;border-top-left-radius: 90px;border-bottom-left-radius:90px;}
.m-circle-loading-radius{position: absolute;top: 0;right: 0;width: 10px;height: 10px;background: #6699ff;border-top-right-radius: 50%;border-bottom-right-radius: 50%;transform: translateX(5px);transform: translateX(5px);}
.m-center-text{width: 160px; height: 160px;line-height: 160px;font-size: 24px; border-radius: 50%;background: #ffffff;z-index: 99;}
.m-radar {display: block;position: absolute;top: 0;left: 0;width: 300px;height: 300px;
background-image: linear-gradient(44deg, rgba(255, 255, 255, 0) 50%, #cccccc 100%);
background-image: linear-gradient(44deg, rgba(255, 255, 255, 0) 50%, #cccccc 100%);
animation: radar-beam 5s infinite;
animation: radar-beam 5s infinite;
animation-timing-function: linear;
animation-timing-function: linear;
transform-origin: bottom right;
transform-origin: bottom right;border-radius: 100% 0 0 0;}
.m-breathe-btn {display: inline-block;position:absolute; width:10px; height:10px;border:1px solid transparent; border-radius:5px; color:#fff; font-size:20px; text-align:center;cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.3); overflow:hidden;background-image: gradient(linear, left top, left bottom, from(#6cc3fe), to(#21a1d0));animation-timing-function: ease-in-out;animation-name: breathe;animation-duration: 2700ms;animation-iteration-count: infinite;animation-direction: alternate;}
@-webkit-keyframes breathe {
0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}
100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}
}
@keyframes breathe {
0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}
100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}
}
@-webkit-keyframes radar-beam {
0% {transform: rotate(0deg);transform: rotate(0deg);}
100% {transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes radar-beam {
0% {transform: rotate(0deg);transform: rotate(0deg);}
100% {transform: rotate(360deg);transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="m-wrapper">
<div class="m-center m-divison1">
<div class="m-center m-divison2">
<div class="m-center m-circle">
<div class="m-center m-center-text" id="m-center-text">3.64k</div>
<div class="m-circle-loading">
<span class="m-circle-loading-radius"></span>
</div>
</div>
</div>
</div>
<div class="m-radar"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
var dom = {
centerText: $('#m-center-text')
};
var action = {
initPage: function () {
var height = $(document).height();
var width = $(document).width();
var count = 0;
var myVar = setInterval(function () {
var top = Math.floor(Math.random() * (height - 100) + 100);
var left = Math.floor(Math.random() * (width - 200) + 100);
var breatheBtn = $('<div class="m-breathe-btn js-breathe-btn"></div>');
breatheBtn.css({top: top, left: left});
$(document.body).append(breatheBtn);
var text = (Math.floor(Math.random() * 300) + 200) / 100 + 'k';
dom.centerText.text(text);
count++;
if (count >= 10) {
//clearInterval(myVar);
var totalBreatheBtn = $('.js-breathe-btn');
var length = totalBreatheBtn.length;
var index = Math.floor(Math.random() * length);
if (index < length) {
$(totalBreatheBtn[index]).remove();
}
}
}, 1000);
}
}
var init = function () {
action.initPage();
}();
});
</script>
</body>
</html>
animation: name duration delay timing-function iteration-count direction fill-mode play-state;
animation:boke 1s 2s linear infinite alternate backwards running;
/* 其中1s 为动画持续时间,2s 为动画延迟时间,持续时间属性必须写在延迟时间属性之前*/div {
/* 绝对定位 */
position: absolute;
/* 设置动画的主要作用元素 */
width: 200px;
height: 100px;
/* 设置背景图片 - 精灵图 */
background: url(images/bear.png) no-repeat;
animation: run 1s steps(8) infinite, move 4s infinite;
}<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>flip 翻转效果css3实现</title>
<style type="text/css">
.container {
perspective: 1000;
transform-style: preserve-3d;
}
.container,
.front,
.back {
width: 80px;
height: 80px;
}
.flip {
position: relative;
transition: 0.6s;
transform-style: preserve-3d;
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
.front {
z-index: 2;
}
.back {
transform: rotateY(-180deg)
}
.container:hover .flip {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="container">
<div class="flip">
<div class="front">
<img src="img/area.png" />
</div>
<div class="back">
<img src="img/go.png" />
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Radar</title>
<style type="text/css">
html {height: 100%;}
body {width: 100%;height: 100%;position: relative;padding: 0;margin: 0;}
.m-wrapper {position: relative;left: 50%;top: 50%;width: 600px;height: 600px;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);border-radius: 50%;border: 1px solid #dddddd;overflow: hidden;text-align: center;}
.m-center{display: inline-block;position: absolute;margin: auto;top: 0; bottom: 0;left: 0;right: 0;}
.m-divison1{width: 400px;height: 400px;border: 1px solid #dddddd;border-radius: 50%;}
.m-divison2{width: 200px;height: 200px;border: 1px solid #dddddd;border-radius: 50%;background-color: #ffffff;z-index: 9;}
.m-circle {width: 180px; height: 180px;border-radius: 90px;overflow: hidden;}
.m-circle-loading {position: absolute;top: 0;left:0;width: 50%; height: 100%;
background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0), #6699ff);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), #6699ff);
background: linear-gradient(to top, rgba(255, 255, 255, 0), #6699ff);
-webkit-animation: radar-beam 5s infinite;
animation: radar-beam 5s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-transform-origin: center right;
transform-origin: center right;border-top-left-radius: 90px;border-bottom-left-radius:90px;}
.m-circle-loading-radius{position: absolute;top: 0;right: 0;width: 10px;height: 10px;background: #6699ff;border-top-right-radius: 50%;border-bottom-right-radius: 50%;-webkit-transform: translateX(5px);transform: translateX(5px);}
.m-center-text{width: 160px; height: 160px;line-height: 160px;font-size: 24px; border-radius: 50%;background: #ffffff;z-index: 99;}
.m-radar {display: block;position: absolute;top: 0;left: 0;width: 300px;height: 300px;
background-image: -webkit-linear-gradient(44deg, rgba(255, 255, 255, 0) 50%, #cccccc 100%);
background-image: linear-gradient(44deg, rgba(255, 255, 255, 0) 50%, #cccccc 100%);
-webkit-animation: radar-beam 5s infinite;
animation: radar-beam 5s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;border-radius: 100% 0 0 0;}
.m-breathe-btn {display: inline-block;position:absolute; width:10px; height:10px;border:1px solid transparent; border-radius:5px; color:#fff; font-size:20px; text-align:center;cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.3); overflow:hidden;background-image: -webkit-gradient(linear, left top, left bottom, from(#6cc3fe), to(#21a1d0));-webkit-animation-timing-function: ease-in-out;-webkit-animation-name: breathe;-webkit-animation-duration: 2700ms;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;}
@-webkit-keyframes breathe {
0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}
100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}
}
@keyframes breathe {
0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}
100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}
}
@-webkit-keyframes radar-beam {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes radar-beam {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="m-wrapper">
<div class="m-center m-divison1">
<div class="m-center m-divison2">
<div class="m-center m-circle">
<div class="m-center m-center-text" id="m-center-text">3.64k</div>
<div class="m-circle-loading">
<span class="m-circle-loading-radius"></span>
</div>
</div>
</div>
</div>
<div class="m-radar"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
var dom = {
centerText: $('#m-center-text')
};
var action = {
initPage: function () {
var height = $(document).height();
var width = $(document).width();
var count = 0;
var myVar = setInterval(function () {
var top = Math.floor(Math.random() * (height - 100) + 100);
var left = Math.floor(Math.random() * (width - 200) + 100);
var breatheBtn = $('<div class="m-breathe-btn js-breathe-btn"></div>');
breatheBtn.css({top: top, left: left});
$(document.body).append(breatheBtn);
var text = (Math.floor(Math.random() * 300) + 200) / 100 + 'k';
dom.centerText.text(text);
count++;
if (count >= 10) {
//clearInterval(myVar);
var totalBreatheBtn = $('.js-breathe-btn');
var length = totalBreatheBtn.length;
var index = Math.floor(Math.random() * length);
if (index < length) {
$(totalBreatheBtn[index]).remove();
}
}
}, 1000);
}
}
var init = function () {
action.initPage();
}();
});
</script>
</body>
</html>
<view class='wraper'> <view class="header"> 头部 </view> <view class='section'> <scroll-view scroll-y="true" class='left' scroll-view="true"> <view wx:for="`30`" wx:key="`index`" class='row'>`index`</view> </scroll-view> <scroll-view class='right' scroll-y="true"> <view wx:for="`30`" wx:key="`index`" class='row'>`index`</view> </scroll-view> </view> <view class='footer'> 底部 </view> </view>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>css3实现光标悬浮滚动菜单 - 何问起</title><base target="_blank" />
<meta charset="utf-8" />
<style>
html{height:100%;font-family: 'Roboto Condensed';}
body{min-height:100%; background-image: -webkit-radial-gradient(top, circle cover, #252233 0%, #252233 80%);
background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);}
*{margin:0;padding:0;}
body{text-align:center;padding:20px 0;}
h1{font-size:1.8em;color:#fff;margin-bottom:50px;letter-spacing:-1px;text-transform:capitalize;text-shadow:0 2px 2px rgba(0,0,0,0.6);}
/* scroll-menu */
.scroll-menu{background-color:rgba(0,0,0,0.4);border-bottom:1px solid rgba(255,255,255,0.25);box-shadow:0 0 8px rgba(0,0,0,0.4) inset;border-radius:16px;margin:0;padding:0 30px;}
.scroll-menu{display:inline-block;text-align:center;height:50px;overflow:hidden;}
.scroll-menu li a{letter-spacing:-1px;text-decoration:none;text-transform:uppercase;color:#FFF;}
.scroll-menu li{float:left;height:100%;list-style:none;margin:0 30px;}
.scroll-menu li *{display:inline-block;font-size:1.3em;line-height:50px;}
.scroll-menu li a{margin-top:-50px;transition:0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4);}
.scroll-menu li a:before{content:attr(data-text);/*使用data-text属性的值*/
display:block;color:greenyellow;}
.scroll-menu li a:hover{margin-top:0;}
a{color:yellow}
</style>
</head>
<body>
<h1>css3实现光标悬浮滚动菜单</h1>
<ul class="scroll-menu">
<li><a data-text='CSS3' href="http://hovertree.com/h/bjaf/css3before.htm">CSS</a></li>
<li><a data-text="HTML5" href="http://hovertree.com/h/bjaf/transition.htm">HTML</a></li>
<li><a data-text="Javascript" href="http://hovertree.com/menu/javascript/">JavaScript</a></li>
<li><a data-text="何问起" href="http://hovertree.com/">何问起</a></li>
</ul>
<div>
<a href="http://hovertree.com/" id="hovertreebefore">何问起</a> <a href="http://hovertree.com/h/bjaf/rnqpxtsq.htm">原文</a> <a href="http://hovertree.com/texiao/">特效库</a>
</div>
</body>
</html>
/*文本阴影效果*/ div.textOne { width:250px; height:100px; text-align:center; font-size:30px; font-weight:bolder; font-family:KaiTi; text-shadow:5px 5px 5px #ff0000; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯css实现轮播图效果</title>
<style>
.wrap{width:500px; height:320px;
position:relative; margin:50px auto;
border:5px solid #f00;
overflow:hidden;
}
input{display:none;}
ul,li{margin:0; padding:0; list-style:none;}
.wrap .label{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
z-index:10;
}
.wrap .label label{
display:inline-block; width:10px; height:10px; border:1px solid #000;
background:#fff; border-radius:50%;
}
.list{width:400%; transition:1s;}
.list li{float:left; width:500px; height:320px;}
.list img{width:100%; height:100%;}
input:nth-of-type(1):checked~.list{
transform:translateX(0%);
}
input:nth-of-type(2):checked~.list{
transform:translateX(-25%);
}
input:nth-of-type(3):checked~.list{
transform:translateX(-50%);
}
input:nth-of-type(4):checked~.list{
transform:translateX(-75%);
}
input:nth-of-type(1):checked~span label:nth-of-type(1){
background:orange;
}
input:nth-of-type(2):checked~span label:nth-of-type(2){
background:orange;
}
input:nth-of-type(3):checked~span label:nth-of-type(3){
background:orange;
}
input:nth-of-type(4):checked~span label:nth-of-type(4){
background:orange;
}
</style>
</head>
<body>
<div class="wrap">
<input id="checked1" checked type="radio" name="siwper"/>
<input id="checked2" type="radio" name="siwper"/>
<input id="checked3" type="radio" name="siwper"/>
<input id="checked4" type="radio" name="siwper"/>
<span class="label">
<label for="checked1"></label>
<label for="checked2"></label>
<label for="checked3"></label>
<label for="checked4"></label>
</span>
<ul class="list">
<li><img src="imgs/ad_1.jpg" alt=""/></li>
<li><img src="imgs/ad_2.jpg" alt=""/></li>
<li><img src="imgs/ad_3.jpg" alt=""/></li>
<li><img src="imgs/ad_4.jpg" alt=""/></li>
</ul>
</div>
</body>
</html>
