1、中国结
(1)确定中国结的构成【一个正方形+十字架+四个拱形+两个尖角圆】
(2)建立对应的盒子并给予对应的class标签
(3)给对应的标签进行css样式
<body>
<div class="k1">
<div class="fang">
<div class="y1"></div>
<div class="y2"></div>
<div class="y3"></div>
<div class="y4"></div>
<div class="y5"></div>
<div class="y6"></div>
<div class="s1"></div>
<div class="s2"></div>
</div>
</div>
</body>
<style type="text/css">
body{
background-color: aquamarine;
}
.k1{
width: 200px;
height: 200px;
top: 200px;
left: 200px;
position: absolute;
background-color: aquamarine;
}
.fang{
width:80px;
height:80px;
top: 55px;
left: 55px;
border:5px solid red;
position: absolute;
transform:rotate(45deg);
}
.y1{
width: 37px;
height: 40px;
top: -50px;
left: -5px;
border: 5px solid red;
border-radius:50% 50% 0 0 ;
position: absolute;
}
.y2{
width: 38px;
height: 38px;
top: -5px;
left: -48px;
border: 5px solid red;
border-radius:50% 0 0 50% ;
position: absolute;
}
.y3{
width: 35px;
height: 37px;
top: 38px;
left: 80px;
border: 5px solid red;
border-radius:0 50% 50% 0 ;
position: absolute;
}
.y4{
width: 38px;
height: 35px;
top: 80px;
left: 37px;
border: 5px solid red;
border-radius:0 0 50% 50% ;
position: absolute;
}
.y5{
width: 38px;
height: 35px;
top: -45px;
left: 80px;
border: 5px solid red;
border-radius:50% 50% 50% 0;
position: absolute;
}
.y6{
width: 38px;
height: 35px;
top: 80px;
left: -48px;
border: 5px solid red;
border-radius:50% 0 50% 50% ;
position: absolute;
}
.s1{
width:90px;
height:90px;
top: -5px;
left: 37px;
border:5px solid red;
border-bottom: none;
border-top: none;
border-right: none;
position: absolute;
}
.s2{
width:90px;
height:90px;
top: 38px;
left: -5px;
border:5px solid red;
border-bottom: none;
border-left: none;
border-right: none;
position: absolute;
}
</style>
2、倒写的乘法口诀表
//设置样式,防止口诀表靠在一起,影响美观
<style type="text/css">
span{
font-size:20px ;
background-color: #ef05cf;
margin-top: 10px;
margin-left: 10px;
display: inline-block;
}
</style>
<script type="text/javascript">
//行
for(var i=9;i>0;i--){
//列
for(var j=1;j<=i;j++){
//利用sum来存储ixj的值
var sum=i*j;
document.write('<span>'+j+"*"+i+"="+sum+" "+'</span>');
}
document.write("<br />")
}
</script>
3、简易的计算器
(1)、外观
<div class="ke"><!--外壳-->
<!-- <h2>简易版计算器</h2> -->
<div class="ke2">
<input type="text" id="input"><!--显示屏-->
<div class="kuangqilai"><!--按键区-->
<div class="shang"><!--上层 / * - -->
<button class="button" onclick="qing()">清除</button>
<button class="button" onclick="shu('/')">/</button>
<button class="button" onclick="shu('*')">*</button>
<button class="button" onclick="shu('-')">-</button>
</div>
<div class="zhong"><!--中层 7 8 9 4 5 6 + -->
<div class="bao">
<button class="button shu" onclick="shu(7)">7</button>
<button class="button shu" onclick="shu(8)">8</button>
<button class="button shu" onclick="shu(9)">9</button>
<button class="button shu" onclick="shu(4)">4</button>
<button class="button shu" onclick="shu(5)">5</button>
<button class="button shu" onclick="shu(6)">6</button>
</div>
<button id="jia" onclick="shu('+')">+</button>
</div>
<div class="xia"><!--下层 1 2 3 0 . 确定-->
<div class="bao2">
<button class="button shu" onclick="shu(1)">1</button>
<button class="button shu" onclick="shu(2)">2</button>
<button class="button shu" onclick="shu(3)">3</button>
<button id="ling" class="shu" onclick="shu(0)">0</button>
<button id="dian" class="shu" onclick="shu('.')">.</button>
</div>
<button id="end" onclick="suan()">enter</button>
(2)、css样式
<style>
h2{
text-align: center;
padding-bottom: 200px;
}
.ke{
width: 400px;
height: 600px;
border-radius: 7%;
position: absolute;
top:50%;
left: 50%;
margin-top: -300px;
margin-left: -200px;
}
.ke2{
width: 300px;
height: 500px;
background: rgb(186, 181, 181);
border-radius: 7%;
position: absolute;
top:50%;
left: 50%;
margin-top: -230px;
margin-left: -150px;
}
input{
margin-top: 5%;
margin-left: 9%;
width: 80%;
height: 7%;
border-radius: 20%;
}
.kuangqilai{
width: 80%;
height: 79%;
margin-left: 9%;
margin-top: 20px;
}
.button{
width: 55px;
height: 76px;
margin-left: 1px;
margin-top: 3px;
}
.shang{
margin-top: -2px;
margin-left: 1px;
}
.zhong{
margin-left: 1px;
width: 100%;
height: 155px;
}
.bao{
margin-top: 5px;
width: 178px;
float: left;
}
#jia{
margin-top: 8px;
margin-left: 5px;
float: left;
width: 55px;
height: 153px;
}
.xia{
margin-left: 1px;
width: 100%;
height: 160px;
}
.bao2{
margin-left: -1px;
width: 178px;
float: left;
}
#ling{
margin-left: 1px;
margin-top: 8px;
margin-right: 5px;
float: left;
width: 115px;
height: 63px;
}
#dian{
width: 55px;
height: 63px;
margin-left: 1px;
margin-top: 8px;
}
#end{
margin-top: 5px;
margin-left: 5px;
width: 55px;
height: 148px;
}
</style>
(3)、js计算部分
<script>
function shu(s){
$("#input").val($("#input").val()+s);
}
function suan(){
$("#input").val(eval($("#input").val()))
}
function qing(){
$("#input").val(" ");
}
</script>