1.使一個(gè)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.實(shí)現(xiàn)三角形
示例1：（利用canvas實(shí)現(xiàn)）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>繪制三角形</title>
</head>
<body >
<!--當(dāng)不指定canvas的大小時(shí)，它默認(rèn)是300*150-->
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto">
當(dāng)前瀏覽器不支持canvas辩越，請(qǐng)更換瀏覽器后再試
</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是基于狀態(tài)的繪制環(huán)境)
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"http://設(shè)置線條兩端相接時(shí)的形狀
context.stroke();
}
</script>
</body>
</html>
示例2：（利用html+css實(shí)現(xiàn)）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>三角形實(shí)現(xiàn)</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.實(shí)現(xiàn)三列（平分）
<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.實(shí)現(xiàn)三列布局（兩邊寬度固定，中間欄寬度隨瀏覽器大小改變）
示例1：position定位實(shí)現(xiàn)
<!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>
<!-- 實(shí)現(xiàn)三列布局：左右兩欄固定寬度拷肌，中間一欄寬度自定義 -->
<div id="left">left</div>
<div id="mid">mid</div>
<div id="right">right</div>
</body>
</html>
示例2：浮動(dòng)實(shí)現(xiàn)
<!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>
<!-- 實(shí)現(xiàn)三列布局：左右兩欄固定寬度，中間一欄寬度自定義 -->
<!-- 三個(gè) div 的順序很重要旨巷，一定要先寫(xiě)左右兩邊的巨缘，再寫(xiě)中間的 -->
<div id="wrap">
<div class="left">left</div>
<div class="right">right</div>
<div class="mid">mid</div>
</div>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
