一、作业题大全
1.1、HTML5表单验证
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证</title>
<style>
.lu {
width: 350px;
}
</style>
</head>
<body> <form>
<fieldset class="lu">
<legend>HTML5新的表单</legend>
<p>
<label for="">国家：</label>
<input type="text" required="required" autocomplete="on">
</p>
<p>
<label for="">文件：</label>
<input type="file" multiple="multiple">
</p>
<p>
<label>正则：</label>
<input type="text" id="" required="required" pattern="^[0-9a-zA-Z]{6,16}$"
placeholder="请输入6-16位的数字字母下划线"> </p>
<p>
<label for="">邮箱：</label>
<input type="email" id="mail" name="mail" placeholder="请输入正确的邮箱" />
</p>
<p>
<label>网址：</label>
<input type="url">
</p>
<p>
<label for="">日期：</label>
<input type="date"> </p> <p>
<label for="">数字：</label>
<input type="number" max="226" min="0" step="2" value="165">
</p>
<p>
<label for="">滑块：</label>
<input type="range" max="100" min="0" step="1" value="25" onchange="showValue(this.value)" />
<!-- <input type="range" max="500" min="30" step="5" value="65" onchange="showValue(this.value)"/> -->
<span id="rangeValue"></span>
</p> <p><label>搜索：</label>
<input type="search" name="" id="">
</p>
<p>
<label for="">电话：</label>
<input type="tel" name="" id="">
</p>
<p><label for="">颜色：</label>
<input type="color" name="" id="">
</p>
<p>
<label>占位：</label>
<input placeholder="请输入用户名">
</p>
<button type="submit">提交</button>
<button>查找</button>
</p>
</fieldset>
</form>
<script type="text/javascript">
function showValue(val) {
document.getElementById("rangeValue").innerHTML = val;
} function showValue(val) {
document.getElementById("rangeValue").innerHTML = val;
}
</script> </body>
</html>
会自动校验
1.2、概要
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p> <details id="phone">
<summary>中国好手机在这里</summary>
<p>华为手机，你值得拥有</p>
<p>3309元</p>
<p>6000毫安</p>
</details>
</p>
<button id="btnSwitch">开</button>
<script>
var phone=document.getElementById("phone");
var btnSwitch=document.getElementById("btnSwitch"); btnSwitch.addEventListener('click',function(){
phone.open=!phone.open;
},false);
</script>
</body>
</html>
效果：
1.3、滑块的值和Color的值显示
效果：
1.4、动态进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>进度条</title>
</head>
<body>
<meter id="meter1" max="100" min="0" style="width: 300px; height: 30px;"></meter>
<h2 id="msg"></h2>
<script>
var meter1=document.getElementById("meter1");
var msg=document.getElementById("msg");
var v=meter1.value;
//每隔0.1秒设置meter的value值
setInterval(function(){
v++;
if(v>parseInt(meter1.max)){
v=0;
}
meter1.value=v;
msg.innerHTML="look this当前值为："+v;
},100); </script>
</body>
</html>
效果：
凑合看，没钱看会员
1.5、视频播放标签
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video id="videolce" src="../iceage.mp4" height="400" width="600" controls="controls" poster="./img/tv.png" ></video>
<p>
<button type="button" onclick="play()">播放</button>
<button type="button" onclick="pause()">暂停</button>
<button type="button" onclick="">继续</button>
<button type="button" onclick="">静音</button>
<button type="button" onclick="">快音</button>
<button type="button" onclick="">快退</button>
<button type="button" onclick="">音量+</button>
<button type="button" onclick="">音量-</button>
<button type="button" onclick="">全屏</button>
</p>
<!-- <span id="msg"></span> -->
<script>
var videolce=document.getElementById("videolce");
function play(){
videolce.play();
}
function pause(){
videolce.pause();
} </script>
</body> </html>
效果：
1.6、预处理Sass和Less
需求：制作一个页面，然后点击换色按钮，主题色颜色改变。
1、创建一个文件夹：test
2、在test文件下加入js.js文件，然后创建一个页面blue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面</title>
<link rel="stylesheet" href="css/dist/01.css" id="hs">
<style>
.container {
position: absolute;
width: 800px;
/* border: 1px solid blueviolet; */
/* height: 700px; */ } .p1 {
position: relative;
left: 200px;
top: 80px;
color: white;
} .left {
width: 350px;
/* border: 1px solid blue; */
/* height: 500px; */ } .p2 {
position: relative;
margin-top: 160px;
margin-left: 120px;
font-size: 14px;
} .p3 {
position: absolute;
left: 120px;
top: 460px;
font-size: 14px; } #right {
position: relative;
top: -450px;
left: 400px;
width: 400px; font-size: 14px;
/* background: rgb(216, 203, 203); */
} img {
width: 100px;
height: 90px;
} .div0 ul li {
list-style: none;
float: left; } .div0 ul li a {
width: 60px;
} .div0-1 {
position: relative;
left: 820px;
top: -1000px;
width: 200px;
height: 100px;
} #fk4-1 {
margin-top: -50px;
} #fk4-2 {
margin-top: -50px;
float: left;
left: 330px;
} #fk4-3 {
margin-top: -50px;
float: left;
left: 490px;
} #fk4-4 {
margin-top: -50px;
float: left;
left: 650px;
} #fk4-5 {
margin-top: -50px;
float: left;
left: 170px;
}
</style>
</head>
<body>
<div class="container">
<div class="header1"> <div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<span class="p1"> DUIS AUTE
<p>IRURE DOLOR</p>
</span>
</div>
<div>
<div class="div1-1"></div>
<div class="div1-2"></div>
<div class="div1-3"></div>
<div class="div1-4"></div>
<div class="div1-5"></div>
<div id="fk4-1" class="fk4"></div>
<div id="fk4-2" class="fk4"></div>
<div id="fk4-3" class="fk4"></div>
<div id="fk4-4" class="fk4"></div>
<div id="fk4-5" class="fk4"></div> </div>
<div class="left">
<span class="left1">Mollit Anim</span>
<span class="left2" style="width: 340px;font-size: 14px;">
Lorem ipsum dolor sit amet,consectetur
adipisicing elit, sed do eiusmod tempor <a href="" class="left3">incididunt</a> ut labore
et dolore aliqu Ut enim ad laboris nisi ut aliquip
ex ea <a href="" class="left3">xommodo</a>.magna aliqu Ut enim ad laboris nisi ut aliquip
</span>
<span class="left1-1">Lorem</span><span class="left1-2">Ipsum</span>
<div class="fk1"></div>
<div class="p2">Duis aute irure dolor in pehenderit
in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
<p> Duis aute irure dolor in pehenderit
in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.</p>
<p>
<span style="font-weight: 800;font-size: 16px;">Duis aute irure dolor</span>
<ul class="left3">
<li><a class="left3" href="">Lorem ipsum</a></li>
<li><a class="left3" href="">Lorem ipsum</a></li>
<li><a class="left3" href="">Lorem ipsum</a></li>
</ul>
</p>
</div> </div>
<!-- 右边 -->
<div id="right">
<div>
<p>
<div class="fk2"></div>
<div style="position: absolute; left: 30px;top: -4px;" class="left3">Lorem ipsum dolor sit amet
</div>
</p>
<p><img src="../f(9).jpg" alt="">
<div style="font-weight: 800; position: absolute; top: 20px;left: 120px;">Duis aute</div>
</p>
<div style=" position: absolute; top: 43px;left: 120px;"> Lorem ipsum dolor sit amet,elit,sed do
eiusmod tempor
Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
</div>
<div style=" position: absolute; top:100px;left: 296px;"><a class="left3" href="">Ut Labore...》</a>
</div>
<div>
<p>
<div class="fk2"></div>
<div style="position: absolute;top:130px;left: 30px;" class="left3">Lorem ipsum dolor sit amet
</div>
</p>
<div>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt
</div>
</div>
<p>
<div class="fk3">
<div class="fk4"></div><span class="ys"
style=" position: relative; left: 30px;top: 5px;">Excepteur sint occaecat cupidatr amet
xomsequat ea exsint occa
<button class="fk5"
style="height: 30px;width: 120px;position: relative;left: 250px;top: -30px;">Deserunt
>></button>
</span>
</div>
</p>
<p><img src="../f(9).jpg" alt="">
<div style="font-weight: 800; position: absolute; top: 280px;left: 120px;">Duis aute</div>
</p>
<div style=" position: absolute; top: 303px;left: 120px;"> Lorem ipsum dolor sit amet,elit,sed do
eiusmod tempor
Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
<div style=" position: absolute; top:70px;left: 170px;"><a class="left3" href="">Ut
Labore...》</a></div>
</div>
</div>
</div>
<div class="div0">
<div class="fk6">
<!-- <ul class="left3" style="position: absolute;margin-top: 10px;left: 200px;">
<li><a class="left3" href="">Lorem |</a></li>
<li><a class="left3" href="">Ipsum |</a></li>
<li><a class="left3" href="">Dolor </a></li>
<li><a class="left3" href="">Sit amet| </a></li>
<li><a class="left3" href="">Aliquip</a></li> </ul> -->
<div class="left3" style="position: absolute;margin-top: 10px;left: 200px;">
Lorem | Ipsum | Dolor | Sit amet | Aliquip
</div>
</div>
</div>
<div class="div0-1">
<button id="btn1">蓝色</button>
<button id="btn2">橙色</button>
<button id="btn3">绿色</button>
</div>
</div> <script>
var hs = document.getElementById("hs"); // 获取link文件 var btn1 = document.getElementById("btn1") //获取按钮节点
var btn2 = document.getElementById("btn2") //获取按钮节点
var btn3 = document.getElementById("btn3") //获取按钮节点 //绑定单击事件
btn1.onclick = function() {
//给link赋值
document.getElementById("hs").setAttribute("href", "css/dist/01.css");
} btn2.onclick = function() {
document.getElementById("hs").setAttribute("href", "css/dist/02.css");
}
btn3.onclick = function() {
document.getElementById("hs").setAttribute("href", "css/dist/03.css");
}
</script>
</body>
</html>
3、第一个样式写好之后可以复制两份，然后只需要改一下
green.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面</title>
<link rel="stylesheet" href="css/dist/03.css">
<style> .container{
position: absolute;
width: 800px;
/* border: 1px solid blueviolet; */
/* height: 700px; */ }
.p1{
position: relative;
left: 200px;
top: 80px;
color: white;
}
.left{
width: 350px;
/* border: 1px solid blue; */
/* height: 500px; */ }
.p2{
position: relative;
margin-top: 160px;
margin-left: 120px;
font-size: 14px;
}
.p3{
position: absolute;
left: 120px;
top: 460px;
font-size: 14px; }
#right{
position: relative;
top: -450px;
left: 400px;
width: 400px; font-size: 14px;
/* background: rgb(216, 203, 203); */
}
img{
width: 100px;
height: 90px;
} .div0 ul li{
list-style: none;
float: left; }
.div0 ul li a{
width: 60px;
}
.div0-1{
position: relative;
left: 820px;
top:-1000px;
width: 200px;
height: 100px;
}
#fk4-1{
margin-top: -50px;
}
#fk4-2{
margin-top: -50px;
float: left;
left:330px;
}
#fk4-3{
margin-top: -50px;
float: left;
left:490px;
}
#fk4-4{
margin-top: -50px;
float: left;
left:650px;
}
#fk4-5{
margin-top: -50px;
float: left;
left:170px;
}
</style>
</head>
<body>
<div class="container">
<div class="header1"> <div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<span class="p1"> DUIS AUTE
<p>IRURE DOLOR</p>
</span>
</div>
<div>
<div class="div1-1"></div>
<div class="div1-2"></div>
<div class="div1-3"></div>
<div class="div1-4"></div>
<div class="div1-5"></div>
<div id="fk4-1" class="fk4"></div>
<div id="fk4-2" class="fk4"></div>
<div id="fk4-3" class="fk4"></div>
<div id="fk4-4" class="fk4"></div>
<div id="fk4-5" class="fk4"></div>
</div>
<div class="left">
<span class="left1">Mollit Anim</span>
<span class="left2" style="width: 340px;font-size: 14px;">
Lorem ipsum dolor sit amet,consectetur
adipisicing elit, sed do eiusmod tempor <a href="" class="left3">incididunt</a> ut labore
et dolore aliqu Ut enim ad laboris nisi ut aliquip
ex ea <a href="" class="left3">xommodo</a>.magna aliqu Ut enim ad laboris nisi ut aliquip
</span>
<span class="left1-1">Lorem</span><span class="left1-2">Ipsum</span><div class="fk1"></div>
<div class="p2">Duis aute irure dolor in pehenderit
in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
<p> Duis aute irure dolor in pehenderit
in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.</p>
<p>
<span style="font-weight: 800;font-size: 16px;">Duis aute irure dolor</span>
<ul class="left3">
<li><a class="left3" href="">Lorem ipsum</a></li>
<li><a class="left3" href="">Lorem ipsum</a></li>
<li><a class="left3" href="">Lorem ipsum</a></li>
</ul>
</p>
</div> </div>
<!-- 右边 -->
<div id="right">
<div >
<p><div class="fk2"></div> <div style="position: absolute; left: 30px;top: -4px;" class="left3">Lorem ipsum dolor sit amet</div></p>
<p><img src="../f(9).jpg" alt=""><div style="font-weight: 800; position: absolute; top: 20px;left: 120px;">Duis aute</div></p>
<div style=" position: absolute; top: 43px;left: 120px;"> Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
</div>
<div style=" position: absolute; top:100px;left: 296px;"><a class="left3" href="">Ut Labore...》</a></div>
<div><p><div class="fk2"></div><div style="position: absolute;top:130px;left: 30px;" class="left3">Lorem ipsum dolor sit amet</div> </p>
<div>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt</div>
</div>
<p><div class="fk3">
<div class="fk4"></div><span class="ys" style=" position: relative; left: 30px;top: 5px;">Excepteur sint occaecat cupidatr amet xomsequat ea exsint occa
<button class="fk5" style="height: 30px;width: 120px;position: relative;left: 250px;top: -30px;">Deserunt >></button>
</span>
</div></p>
<p><img src="../f(9).jpg" alt=""><div style="font-weight: 800; position: absolute; top: 280px;left: 120px;">Duis aute</div></p>
<div style=" position: absolute; top: 303px;left: 120px;"> Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
<div style=" position: absolute; top:70px;left: 170px;"><a class="left3" href="">Ut Labore...》</a></div>
</div>
</div>
</div>
<div class="div0">
<div class="fk6">
<!-- <ul class="left3" style="position: absolute;margin-top: 10px;left: 200px;">
<li><a class="left3" href="">Lorem |</a></li>
<li><a class="left3" href="">Ipsum |</a></li>
<li><a class="left3" href="">Dolor </a></li>
<li><a class="left3" href="">Sit amet| </a></li>
<li><a class="left3" href="">Aliquip</a></li> </ul> --><div class="left3" style="position: absolute;margin-top: 10px;left: 200px;">
Lorem | Ipsum | Dolor | Sit amet | Aliquip
</div>
</div>
</div>
<div class="div0-1">
<button><a href="yellow.html" style="text-decoration: none;">橙色</a></button>
<button><a href="green.html" style="text-decoration: none;">绿色</a></button>
<button><a href="blue.html" style="text-decoration: none;">蓝色</a></button>
</div>
</div> <link rel="stylesheet" type="text/css" href="#" id="css1"/>
<script src="js.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(".color").click(function() {
var file = $(this).data("color");
$("#css1").attr("href", file);
});
</script>
</body>
</html>
yellow.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面</title>
<link rel="stylesheet" href="css/dist/02.css">
<style> .container{
position: absolute;
width: 800px;
/* border: 1px solid blueviolet; */
/* height: 700px; */ }
.p1{
position: relative;
left: 200px;
top: 80px;
color: white;
}
.left{
width: 350px;
/* border: 1px solid blue; */
/* height: 500px; */ }
.p2{
position: relative;
margin-top: 160px;
margin-left: 120px;
font-size: 14px;
}
.p3{
position: absolute;
left: 120px;
top: 460px;
font-size: 14px; }
#right{
position: relative;
top: -450px;
left: 400px;
width: 400px; font-size: 14px;
/* background: rgb(216, 203, 203); */
}
img{
width: 100px;
height: 90px;
} .div0 ul li{
list-style: none;
float: left; }
.div0 ul li a{
width: 60px;
}
.div0-1{
position: relative;
left: 820px;
top:-1000px;
width: 200px;
height: 100px;
}
#fk4-1{
margin-top: -50px;
}
#fk4-2{
margin-top: -50px;
float: left;
left:330px;
}
#fk4-3{
margin-top: -50px;
float: left;
left:490px;
}
#fk4-4{
margin-top: -50px;
float: left;
left:650px;
}
#fk4-5{
margin-top: -50px;
float: left;
left:170px;
}
</style>
</head>
<body>
<div class="container">
<div class="header1"> <div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<span class="p1"> DUIS AUTE
<p>IRURE DOLOR</p>
</span>
</div>
<div>
<div class="div1-1"></div>
<div class="div1-2"></div>
<div class="div1-3"></div>
<div class="div1-4"></div>
<div class="div1-5"></div>
<div id="fk4-1" class="fk4"></div>
<div id="fk4-2" class="fk4"></div>
<div id="fk4-3" class="fk4"></div>
<div id="fk4-4" class="fk4"></div>
<div id="fk4-5" class="fk4"></div>
</div>
<div class="left">
<span class="left1">Mollit Anim</span>
<span class="left2" style="width: 340px;font-size: 14px;">
Lorem ipsum dolor sit amet,consectetur
adipisicing elit, sed do eiusmod tempor <a href="" class="left3">incididunt</a> ut labore
et dolore aliqu Ut enim ad laboris nisi ut aliquip
ex ea <a href="" class="left3">xommodo</a>.magna aliqu Ut enim ad laboris nisi ut aliquip
</span>
<span class="left1-1">Lorem</span><span class="left1-2">Ipsum</span><div class="fk1"></div>
<div class="p2">Duis aute irure dolor in pehenderit
in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
<p> Duis aute irure dolor in pehenderit
in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.</p>
<p>
<span style="font-weight: 800;font-size: 16px;">Duis aute irure dolor</span>
<ul class="left3">
<li><a class="left3" href="">Lorem ipsum</a></li>
<li><a class="left3" href="">Lorem ipsum</a></li>
<li><a class="left3" href="">Lorem ipsum</a></li>
</ul>
</p>
</div> </div>
<!-- 右边 -->
<div id="right">
<div >
<p><div class="fk2"></div> <div style="position: absolute; left: 30px;top: -4px;" class="left3">Lorem ipsum dolor sit amet</div></p>
<p><img src="../f(9).jpg" alt=""><div style="font-weight: 800; position: absolute; top: 20px;left: 120px;">Duis aute</div></p>
<div style=" position: absolute; top: 43px;left: 120px;"> Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
</div>
<div style=" position: absolute; top:100px;left: 296px;"><a class="left3" href="">Ut Labore...》</a></div>
<div><p><div class="fk2"></div><div style="position: absolute;top:130px;left: 30px;" class="left3">Lorem ipsum dolor sit amet</div> </p>
<div>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt</div>
</div>
<p><div class="fk3">
<div class="fk4"></div><span class="ys" style=" position: relative; left: 30px;top: 5px;">Excepteur sint occaecat cupidatr amet xomsequat ea exsint occa
<button class="fk5" style="height: 30px;width: 120px;position: relative;left: 250px;top: -30px;">Deserunt >></button>
</span>
</div></p>
<p><img src="../f(9).jpg" alt=""><div style="font-weight: 800; position: absolute; top: 280px;left: 120px;">Duis aute</div></p>
<div style=" position: absolute; top: 303px;left: 120px;"> Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
Lorem ipsum dolor sit amet,elit,sed do eiusmod tempor
<div style=" position: absolute; top:70px;left: 170px;"><a class="left3" href="">Ut Labore...》</a></div>
</div>
</div>
</div>
<div class="div0">
<div class="fk6">
<!-- <ul class="left3" style="position: absolute;margin-top: 10px;left: 200px;">
<li><a class="left3" href="">Lorem |</a></li>
<li><a class="left3" href="">Ipsum |</a></li>
<li><a class="left3" href="">Dolor </a></li>
<li><a class="left3" href="">Sit amet| </a></li>
<li><a class="left3" href="">Aliquip</a></li> </ul> --><div class="left3" style="position: absolute;margin-top: 10px;left: 200px;">
Lorem | Ipsum | Dolor | Sit amet | Aliquip
</div>
</div>
</div>
<div class="div0-1">
<button><a href="yellow.html" style="text-decoration: none;">橙色</a></button>
<button><a href="green.html" style="text-decoration: none;">绿色</a></button>
<button><a href="blue.html" style="text-decoration: none;">蓝色</a></button>
</div>
</div> <link rel="stylesheet" type="text/css" href="#" id="css1"/>
<script src="js.js"></script>
<!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
<script type="text/javascript">
$(".color").click(function() {
var file = $(this).data("color");
$("#css1").attr("href", file);
});
</script>
</body>
</html>
4、在test再创建一个css文件夹，然后创建一个01.less文件
@color:blue;
.header(@width:800px,@height:150px,@color:lightblue){
width:@width;
height: @height;
background: @color;
}
.div(@width:80px,@height:30px,@color:rgb(86, 154, 177)){
width:@width;
height: @height;
background: @color;
float: left;
margin-left: 10px;
margin-top: 10px;
}
.header1{
.header();
}
.div1{
.div();
}
.div2{
.div(@color:rgb(45, 88, 102));
}
.div3{
.div(@color:rgb(6, 106, 139));
}
.div4{
.div(@color:rgb(134, 173, 185));
}
.div1-1{
.div(@width: 155px;@height:30px);
margin-top: 5px;
margin-left: 0px;
}
.div1-2{
.div(@width: 155px;@height:30px;@color:rgb(45, 88, 102));
margin-top: 5px;
margin-left: 5px;
}
.div1-3{
.div(@width: 156px;@height:30px;@color:rgb(45, 88, 102));
margin-top: 5px;
margin-left: 5px;
}
.div1-4{
.div(@width: 156px;@height:30px;@color:rgb(45, 88, 102));
margin-top: 5px;
margin-left: 5px;
}
.div1-5{
.div(@width: 156px;@height:30px;@color:rgb(45, 88, 102));
margin-top: 5px;
margin-left: 5px;
}
// 天蓝色
.left(@color:lightblue){
color: @color;
}
.left2(@a:absolute){
position: @a;
margin-top: 80px;
margin-left: -90px;
}
.left1{
.left();
position: relative;
top: 20px;
left: 20px;
margin-top: 20px;
font-size: 20px;
}
.left1-1{
.left();
position: relative;
top: 180px;
left: -90px;
margin-top: 220px;
font-size: 20px;
}
.left1-2{
.left();
position: absolute;
margin-top: 270px;
left: 30px;
font-size: 20px;
}
.left2{
.left2();
top: 180px;
margin-left: -90px;
}
.left3{
.left();
}
// 边框
.fk(@color:lightblue){
background: @color;
}
.fk1{
.fk();
width: 60px;
height: 60px;
position: absolute;
margin-top: 350px;
left: 30px;
font-size: 20px;
}
.fk3{
.font1();
width: 250px;
height: 55px;
}
.fk-1(@color:rgb(134, 173, 185)){
background: @color;
}
.fk4{
.fk-1();
width: 12px;
height: 12px;
position: absolute;
top: 215px;
left: 10px;
}
// 第二个颜色
.font(@color:rgb(45, 88, 102)){
color: @color;
}
.font1(@color:rgb(45, 88, 102)){
background: @color;
}
// 第三个颜色
.font2(@color:rgb(6, 106, 139)){
color: @color;
}
.ys{
.font2();
}
.fk2{
.font1();
width: 12px;
height: 12px;
}
.fk-2(@color:rgb(134, 173, 185)){
background: @color;
}
.fk5{
.fk-2();
}
.fk-3(@color:rgb(45, 88, 102);@w:800px;@h:40px){
background: @color;
width: @w;
height: @h;
}
.fk6{
.fk-3();
position: relative;
top:-370px;
}
同样操作复制两份
02.less
@color:yellow;
.header(@width:800px,@height:150px,@color:#ff9840){
width:@width;
height: @height;
background: @color; }
.div(@width:80px,@height:30px,@color:#bf7230){
width:@width;
height: @height;
background: @color;
float: left;
margin-left: 10px;
margin-top: 10px; } .header1{
.header();
}
.div1{
.div(); }
.div2{
.div(@color:#a64d00);
} .div3{
.div(@color:#ff7600);
}
.div4{
.div(@color:#ffa456 );
}
.div1-1{
.div(@width: 155px;@height:30px);
margin-top: 5px;
margin-left: 0px;
}
.div1-2{
.div(@width: 155px;@height:30px;@color:#a64d00);
margin-top: 5px;
margin-left: 5px;
}
.div1-3{
.div(@width: 156px;@height:30px;@color:#a64d00);
margin-top: 5px;
margin-left: 5px;
}
.div1-4{
.div(@width: 156px;@height:30px;@color:#a64d00);
margin-top: 5px;
margin-left: 5px;
}
.div1-5{
.div(@width: 156px;@height:30px;@color:#a64d00);
margin-top: 5px;
margin-left: 5px;
}
// 天蓝色
.left(@color:#ff9840){
color: @color; }
.left2(@a:absolute){
position: @a;
margin-top: 80px;
margin-left: -90px;
}
.left1{
.left();
position: relative;
top: 20px;
left: 20px;
margin-top: 20px;
font-size: 20px;
}
.left1-1{
.left();
position: relative;
top: 180px;
left: -90px;
margin-top: 220px;
font-size: 20px;
}
.left1-2{
.left();
position: absolute;
margin-top: 270px;
left: 30px;
font-size: 20px;
}
.left2{
.left2();
top: 180px;
margin-left: -90px;
} .left3{
.left();
}
// 方框
.fk(@color:#ff9840){
background: @color;
}
.fk1{
.fk();
width: 60px;
height: 60px;
position: absolute;
margin-top: 350px;
left: 30px;
font-size: 20px;
} .fk3{
.font1();
width: 250px;
height: 55px;
}
.fk-1(@color:#ffa456 ){
background: @color;
}
.fk4{
.fk-1();
width: 12px;
height: 12px;
position: absolute;
top: 215px;
left: 10px;
}
// 第二个颜色
.font(@color:#bf7230){
color: @color;
}
.font1(@color:#bf7230){
background: @color;
}
// 第三个颜色
.font2(@color:#ffa456){
color: @color;
} .ys{
.font2();
}
.fk2{
.font1();
width: 12px;
height: 12px;
}
.fk-2(@color:#ffa456){
background: @color;
}
.fk5{
.fk-2();
}
.fk-3(@color:#ff7600;@w:800px;@h:40px){
background: @color;
width: @w;
height: @h;
}
.fk6{
.fk-3();
position: relative;
top:-370px; }
03.less
.header(@width:800px,@height:150px,@color:#aff53d){
width:@width;
height: @height;
background: @color;
}
.div(@width:80px,@height:30px,@color:#7eb12c){
width:@width;
height: @height;
background: @color;
float: left;
margin-left: 10px;
margin-top: 10px;
}
.header1{
.header();
}
.div1{
.div(@color:#92ec00 );
}
.div2{
.div(@color:#5f9900 );
}
.div3{
.div(@color:#92ec00 );
}
.div4{
.div(@color:#c2f56e );
}
.div1-1{
.div(@width: 155px;@height:30px);
margin-top: 5px;
margin-left: 0px;
}
.div1-2{
.div(@width: 155px;@height:30px;@color:#5f9900 );
margin-top: 5px;
margin-left: 5px;
}
.div1-3{
.div(@width: 156px;@height:30px;@color:#5f9900 );
margin-top: 5px;
margin-left: 5px;
}
.div1-4{
.div(@width: 156px;@height:30px;@color:#5f9900 );
margin-top: 5px;
margin-left: 5px;
}
.div1-5{
.div(@width: 156px;@height:30px;@color:#5f9900 );
margin-top: 5px;
margin-left: 5px;
}
// 全局字体颜色
.left(@color:#aff53d){
color: @color;
}
.left2(@a:absolute){
position: @a;
margin-top: 80px;
margin-left: -90px;
}
.left1{
.left();
position: relative;
top: 20px;
left: 20px;
margin-top: 20px;
font-size: 20px;
}
.left1-1{
.left();
position: relative;
top: 180px;
left: -90px;
margin-top: 220px;
font-size: 20px;
}
.left1-2{
.left();
position: absolute;
margin-top: 270px;
left: 30px;
font-size: 20px;
}
.left2{
.left2();
top: 180px;
margin-left: -90px;
}
.left3{
.left();
}
// 方框
.fk(@color:#92ec00 ){
background: @color;
}
.fk1{
.fk();
width: 60px;
height: 60px;
position: absolute;
margin-top: 350px;
left: 30px;
font-size: 20px;
}
.fk3{
.font1();
width: 250px;
height: 55px;
}
.fk-1(@color:#c2f56e ){
background: @color;
}
.fk4{
.fk-1();
width: 12px;
height: 12px;
position: absolute;
top: 215px;
left: 10px;
}
// 第二个颜色
.font(@color:#5f9900 ){
color: @color;
}
.font1(@color:#5f9900 ){
background: @color;
}
// 第三个颜色
.font2(@color:#92ec00){
color: @color;
}
.ys{
.font2();
}
.fk2{
.font1();
width: 12px;
height: 12px;
}
.fk-2(@color:#c2f56e){
background: @color;
}
.fk5{
.fk-2();
}
.fk-3(@color:#7eb12c;@w:800px;@h:40px){
background: @color;
width: @w;
height: @h;
}
.fk6{
.fk-3();
position: relative;
top:-370px;
}
保存运行会自动生成css目录下的dist文件夹，会把less转换成css
效果：
1.7、翻页效果
代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>翻页效果</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} html,
body {
height: 100%; } /* #div0 {
width: 600px;
height: 300px; background: rgb(68, 83, 128);
margin: 0 auto;
position: absolute;
margin: 100px;
z-index: -5; }
*/ .box{
width: 500px;
height: 200px;
position: relative; background: #ccc;
margin:100px auto; text-shadow: 0 1px 1px #fff;
}
.box::before{
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
left: 10px;width: 10%;
width: 50%;
max-width: 150px;
height: 20%;
/* 天极爱阴影效果 */
box-shadow: 0 15px 10px rgba(125,125,125,0.8);
/* 转换 旋转 */ transform: rotate(-3deg);
}
.box::after{
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 10px;
width: 50%;
max-width: 150px;
height: 20%;
box-shadow: 0 15px 10px rgba(125, 125, 125,0.8);
transform: rotate(3deg); }
h3{
text-align: center;
position: absolute;
top: 30px;
left: 100px;
}
p{
position: absolute; font-size: 12px;
top: 70px;
text-align: center; }
/* #div1-1{
background: #000;
margin-top: 0px;
} */
</style>
</head> <body>
<div id="div0"> <div class="box">
<div id="div1-1">
<h3 style="color: rgb(83, 83, 83); ">CSS3 Wrapping Drop Shadows</h3>
<p>Walking from Nicolson street past Pollock hall, we found ourselves on a road beside the
hills. The nameless small yellow flowers are noisily blooming all the way on the hills.
gasping while walking.gasping while walking.gasping while walking.
gasping while walking.
</p>
</div>
</div> </div>
</body> </html>
1.8、小风车动画
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<link rel="stylesheet" type="text/css" href="css/animate1.css"/>
<style>
*{
margin: 0;
padding: 0;
} #s{
float: left;
} #one:hover{
animation:run 2s linear infinite;
} @keyframes run{
from{
transform: rotate(360deg);
}
to{
transform: rotate(0deg);
}
}
.sj{
margin-top: 5px;
transform: rotate(-46deg);
position: absolute;
top:14px;
left: -49px;
float: left;
width: 0;
height: 0;
z-index: 2;
border: 50px solid lightcoral;
border-color:lightcoral transparent transparent transparent ;
}
.ye{
transform: rotate(0deg);
position: absolute;
left: 0px;
top:0px;
float:left;
width: 0;
height: 0;
border: 80px solid #D9B300;
z-index: 2;
border-color: transparent transparent transparent #D9B300;
} .ye1{
transform: rotate(0deg);
position: absolute;
left: -80px;
top:78px;
float: left;
width: 0;
height: 0;
z-index: 2;
border: 80px solid orange;
border-color: transparent orange transparent transparent ;
} .re{
transform: rotate(-46deg);
position: absolute;
left: 21px;
top: -61px;
float: left;
z-index: 2;
width: 0;
height: 0;
border: 59px solid brown;
border-color: transparent transparent transparent brown;
} .blue{
transform: rotate(0deg);
position: absolute;
left: 80px;
top:-79px;
float: left;
width: 0;
height: 0;
z-index: 2;
border: 80px solid cornflowerblue;
border-color: transparent transparent transparent cornflowerblue;
} .blue1{
transform: rotate(-44deg);
position: absolute;
left: 102px;
top: 23px;
float: left;
width: 0;
height: 0;
z-index: 2;
border: 58px solid lightblue;
border-color: lightblue transparent transparent transparent ;
animation:gg 1s linear infinite;
} .green{
transform: rotate(0deg);
position: absolute;
left: 80px;
top: 80px;
z-index: 2;
float: left;
width: 0;
height: 0;
border: 81px solid #01814A;
border-color: #01814A transparent transparent transparent ;
z-index: 2; } .green1{
transform: rotate(-45deg);
position: absolute;
top:103px;
left: 23px;
float: left;
width: 0;
height: 0;
border: 57px solid seagreen;
border-color: transparent seagreen transparent transparent ;
z-index: 2;
} #mg{
/* background: salmon; */
background: rgb(224, 137, 137);
width: 15px;
height: 300px;
border-radius: 8px;
position: absolute;
top:300px;
left:640px;
z-index: 0;
}
#one{
margin: 150px auto auto auto;
width: 162px;
transform: rotate(-45deg);
height: 162px;
line-height: 168px;
text-align: center;
position: relative;
z-index: 3;
animation:run 3s linear infinite;
} #img{
position: relative;
top:-50px;
left: 522px;
z-index: -1;
}
p{
text-align: center;
margin-top: 50px;
font-size: 50px;
color: #7cbea2;
/* color: white; */
/* position: relative; left: 450px; */
text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}
</style>
</head>
<body> <div>
<p>小 风 车, 10 块 两 个 ！!</p>
</div>
<div id="one"> <div class="sj"> </div> <div class="ye"> </div>
<div class="ye1"> </div>
<div class="re"> </div>
<div class="blue"> </div>
<div class="blue1"> </div>
<div class="green"> </div> <div class="green1"> </div> </div> <div id="mg"> </div> <div>
<!--<img src="img/1.jpg" id="img"/>-->
</div>
</body>
</html>
1.9、手机充电效果动画
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机充电效果</title>
<style>
html,body{
width: 100%;
height: 100%;
display: flex;
background: #e4e4e4;
}
.container{
position: relative;
width: 140px;
margin: auto;
/* border: 1px solid blue; */
}
.header{
position: absolute;
width: 26px;
height: 10px;
left: 50%;
top: 0;
background: rgba(82, 82, 153, 0.8);
border-radius: 5px 5px 0 0;
transform: translate(-50%,-10px);
} .battery{
position: relative;
height: 220px;
box-sizing: border-box;
border-radius: 15px 15px 5px 5px;
background: rgb(202, 190, 190);
box-shadow: 0 0 5px 2px rgba(225,223,225,0.34);
z-index: 1;
}
.battery-copy{
position: absolute;
top: 0;
left: 0;
height: 220px;
width: 140px;
border-radius: 15px 15px 5px 5px;
overflow: hidden; }
.battery::after{
content: "";
position: absolute;
top: 80%;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to bottom,#43944d 0%,
#5ebb7a 44%,
#41886b 100%
);
border-radius: 0 0 5px 5px;
box-shadow: 0 14px 28px rgba(146, 69, 146, 0.1);
animation: charging 10s linear infinite;
filter: hue-rotate(90deg); }
.g-wave{
position: absolute;
width: 300px;
height: 300px;
background: rgba(255,255,255, 0.8);
border-radius: 45% 47% 44% 42%;
bottom: 25px;
left: 50%;
transform: translate(-50%,0);
z-index: 1;
animation: move 10s linear infinite; }
.g-wave:nth-child(2){
border-radius: 38% 46% 43% 47%;
transform: translate(-50%,0) rotate(-135deg); }
.g-wave:nth-child(3){
border-radius: 42% 46% 37% 40%;
transform: translate(-50%,0) rotate(135deg); }
@keyframes charging{
50%{
box-shadow: 0 14px 28px rgba(188,213,213,0),
0 10px 10px rgba(9, 188, 1215, 0.4); }
65% {
top: 5%;
filter: hue-rotate(0deg);
border-radius: 0 0 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, 0.2),
0 10px 10px rgba(9, 188, 215, 0.08);
}
100% {
top: 0%;
filter: hue-rotate(0deg);
border-radius: 15px 15px 5px 5px;
box-shadow: 0 14px 28px rgba(4, 188, 213, 0),
0 10px 10px rgba(9, 188, 215, 0.4);
}
}
@keyframes move {
100% {
transform: translate(-50%, -160px) rotate(720deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="battery"></div>
<div class="battery-copy">
<div class="g-wave"></div>
<div class="g-wave"></div>
<div class="g-wave"></div>
</div> </div>
</body>
</html>
效果：
1.10、图片墙各种翻转
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3图片墙</title>
<style>
body {
/* background: rgb(233, 231, 231); */
background: url(./img/星空20.jpg);
} .container {
margin: auto;
width: 900px; } .container img {
/* padding:5px 5px 5px; */ /* background:white; */ border: 3px solid rgb(255, 255, 255); box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.4); -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; transition: all 0.5s ease-in; position: absolute; z-index: 1; } .pic1 {
left: 450px; top: 70px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); transform: rotate(-5deg); } .pic2 {
top: 40px; left: 600px; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); transform: rotate(-20deg); } .pic3 {
bottom: 160px; right: 500px; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); transform: rotate(5deg); } .pic4 {
bottom: 210px; left: 450px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); } .pic5 {
bottom: 120px; left: 330px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-160deg); } .pic6 {
top: 320px; left: 250px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); transform: rotate(200deg); } .pic7 {
top: 80px; left: 790px; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); transform: rotate(20deg); } .pic8 {
bottom: 280px; right: 330px; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); transform: rotate(20deg); } .pic9 {
top: 190px; left: 570px; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(-15deg); } .pic10 {
left: 280px; top: 150px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-15deg); } /* 鼠标移动到某一张照片上时，照片由倾斜缓慢转变成端正，并且放大显示在上层 */ .container img:hover {
/* box-shadow: 15px 15px 10px rgba(50, 50, 50, 0.4); */ -webkit-transform: rotate(0deg) scale(1.20); -moz-transform: rotate(0deg) scale(1.20); transform: rotate(0deg) scale(1.20); z-index: 2; } img {
width: 120px;
height: 120px;
}
</style>
</head>
<body> <div class="container"> <img src="./img/1.jpg" class="pic pic1">
<img src="./img/1000 (1).jpg" class="pic pic2">
<img src="./img/1000 (2).jpg" class="pic pic3 "> <!-- <img style="width: 200px;height: 140px;" src="./img/星空50.jpg" class="pic pic5"> -->
<img style="width: 200px;height: 140px;" src="./img/星空20.jpg" class="pic pic6">
<img src="./img/f(1).jpg" class="pic pic7">
<img src="./img/1000.jpg" class="pic pic4">
<img src="./img/f(2).jpg" class="pic pic8">
<img style="width: 200px;height: 140px;" src="./img/星空59.jpg" class="pic pic9">
<img style="width: 200px;height: 150px;" src="./img/f(3).jpg" class="pic pic10"> </div>
</body>
</html>
二、CSS
2.1、隔行换色及鼠标悬停
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隔行换色</title> <style type="text/css">
/* td:first-child{
background-color: aqua;
} */
tr:nth-child(2n+1){
background:lightblue;
}
tr:hover{
background: yellow;
}
tr:active{
background: orangered;
}
td:active{
background-color: blueviolet; }
</style> </head>
<body>
<table border="1" width="800">
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
</body>
</html>
2.2、三角形
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三角形</title> <style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
content: "";
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
#circle{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50px;
}
#triangle-up{
width: 0;
height: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid red; }
#triangle{
margin-top: 50px;
width:0;
height:0;
border-top:50px solid blue;
border-right:50px solid blue;
border-bottom:50px solid green;
border-left:50px solid transparent;
}
#box{
width: 0;
height: 0;
border: 50px solid plum;
border-color: transparent transparent plum transparent;
}
</style> </head>
<body>
<div id="box"></div>
<div class = "heart"></div>
<div id="circle"></div>
<div id="triangle"></div>
</body>
</html>
2.3、心型
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小桃心</title>
.<style>
.heart{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: purple;
height: 100px;
width: 100px;
transform: rotate(-45deg);
}
.heart::before{
content: "";
background-color: purple;
border-radius: 50%;
position:absolute;
width: 100px;
height: 100px;
top: -50px;
left: 0px;
}
.heart::after{
background-color: purple;
content: "";
border-radius: 50%;
position: absolute;
width: 100px;
height: 100px;
top:0px;
left:50px; }
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
2.4、面试题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#demo{
border: 2px solid #000;
background-color: #fff;
width: 100px;
height: 100px;
margin: 0 auto;
position: relative;
}
#demo::before{
content: "";
top: 20px;
position: absolute;
left:100px;
width:0;
height:0;
border-left: 10px solid #000;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
#demo::after{
content: "";
top: 23px;
position: absolute;
left:100px;
width:0;
height:0;
border-left: 7px solid#fff;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
}
</style>
</head>
<body>
<div id="demo"> </div>
</body>
</html>
