代码小功能实现
2017-08-30 本文已影响60人
开心糖果的夏天
1.使一个div垂直居中：
示例1：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div居中</title>
<style type="text/css">
.one{
width:200px;
height:100px;
padding: 10px;
margin:25px;
background:red;
/*margin:0 auto;*/
position: absolute;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -110px;
}
</style>
</head>
<body >
<div class="one"><div>
</body>
</html>
示例2：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div居中</title>
<style type="text/css">
.one{
width:200px;
height:100px;
padding: 10px;
margin:25px;
border:100px solid green;
background:url(截图00.jpg) repeat center top;
/*margin:0 auto;*/
position: absolute;
top: 50%;
left: 50%;
margin-top: -160px;
margin-left: -210px;
}
</style>
</head>
<body >
<div class="one"><div>
</body>
</html>
2.实现三角形
示例1：（利用canvas实现）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>绘制三角形</title>
</head>
<body >
<!--当不指定canvas的大小时，它默认是300*150-->
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto">
当前浏览器不支持canvas，请更换浏览器后再试
</canvas>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=500;
canvas.height=500;
var context=canvas.getContext('2d');
//绘制箭头(canvas是基于状态的绘制环境)
context.moveTo(250,250)
context.lineTo(350,400)
context.lineTo(150,400)
context.lineTo(250,250)
context.lineWidth=10
context.strokeStyle="#058"
context.lineCap="round"//设置线条两端相接时的形状
context.stroke();
}
</script>
</body>
</html>
示例2：（利用html+css实现）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>三角形实现</title>
<style type="text/css">
/*向上*/
.triangle_border_up{
width:0;
height:0;
border-width:0px 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}
</style>
</head>
<body>
<!-- 向上的三角形 -->
<div class="triangle_border_up">
<span></span>
</div>
</body>
</html>
3.实现三列（平分）
<html>
<head>
<title>test</title>
<style type="text/css">
.container{
width:312px;
height:50px;
border: solid 1px #ccc;
}
.box{
width:102px;
height:50px;
border: solid 1px #ccc;
float:left;
text-align:center;
}
</style>
</head>
<body>
<div class='container'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
</div>
</body>
</html>
4.实现三列布局（两边宽度固定，中间栏宽度随浏览器大小改变）
示例1：position定位实现
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>三列布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#left{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 200px;
background: red;
}
#right{
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 200px;
background: green;
}
#mid{
margin: 0 100px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<!-- 实现三列布局：左右两栏固定宽度，中间一栏宽度自定义 -->
<div id="left">left</div>
<div id="mid">mid</div>
<div id="right">right</div>
</body>
</html>
示例2：浮动实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>三列布局——</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.left{
float: left;
width: 100px;
height: 200px;
background: red;
}
.mid{
margin: 0 100px;
height: 200px;
background: blue;
}
.right{
float: right;
width: 100px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<!-- 实现三列布局：左右两栏固定宽度，中间一栏宽度自定义 -->
<!-- 三个 div 的顺序很重要，一定要先写左右两边的，再写中间的 -->
<div id="wrap">
<div class="left">left</div>
<div class="right">right</div>
<div class="mid">mid</div>
</div>
</body>
</html>
