HTML5表格和布局
1.雪碧图，精灵图
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
.div1,.div2{
border: 1px solid cornflowerblue;
background: url(img/camera_new_5606e8f.png) no-repeat right;
height: 25px;
width: 700px;
margin: 20px;
}
.div1{
background-position-y: 5px;
}
.div2{
background-position-y:-17px ;
}
.div1:hover{
background-position-y: -17px;
}
style>
head>
<body>
<div class="div1">div>
<div class="div2">div>
body>
html>
2.表格
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
table{
font-family: "微软雅黑";
border: 1px solid cornflowerblue;
border-collapse: collapse;
/*去掉间隙*/
}
th,td{
border: 1px solid cornflowerblue;
}
/*table分为thead tbody tfoot
行 tr
表头 th
单元格 td
th td最好设置宽度
rowspan 列合并
colspan 行合并*/
style>
head>
<body>
<table>
<thead>
<tr>
<th>星期一th>
<th>星期二th>
<th>星期三th>
<th>星期四th>
<th>星期五th>
tr>
thead>
<tbody>
<tr>
<td>语文td>
<td>语文td>
<td>语文td>
<td>语文td>
<td>语文td>
tr>
<tr>
<td rowspan="2">数学td>
<td>数学td>
<td>数学td>
<td>数学td>
<td>数学td>
tr>
<tr>
<td>自然td>
<td>自然td>
<td>自然td>
<td>自然td>
tr>
<tr>
<td>体育td>
<td>体育td>
<td>体育td>
<td>体育td>
<td>体育td>
tr>
tbody>
<tfoot>
<tr>
<td colspan="5">自动td>
tr>
tfoot>
table>
body>
html>
3.表单
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<form action="http://www.baidu.com" method="post">
用户名：<input type="text" name="wd" id="wd" value="" />br>
密码：<input type="password" name="ps" id="ps" value="123456" />br>
男：<input type="radio" name="X3" id="X3" value="" />br>
女：<input type="radio" name="X3" id="X3" value="" />br>
兴趣爱好：LOL <input type="checkbox" name="a4"/>
DOTA <input type="checkbox" name="a4"/>
HTML <input type="checkbox" name="a4"/>
SHOPPING <input type="checkbox" name="a4"/><br />
<input type="button" name="" id="" value="别点我" /><br />
<select name="">
<option value="武汉">武汉option>
<option value="河北">河北option>
<option selected="selected" value="湖南">湖南option>
select><br />
<textarea name="" rows="20" cols="40" style="resize: vertical;">
resizi:none 用户无法调整元素尺寸
both：用户可以调整宽高
horizontal：调整宽度
vertical:调整高度
textarea><br />
<input type="file" name="" id="" value="" /><br />
<input type="submit" name="" id="" value="提交" />
form>
body>
html>
4.多媒体标签
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<audio controls="controls" src="video/bgm.mp3">audio>
<audio src="video/haha.ogg" controls="controls">audio>
<video controls="controls" width="600px" height="500px" src="video/video.mp4">
video>
body>
html>
5.自适应布局
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
.all{
border: 1px solid cornflowerblue;
width: 800px;
margin: 0 auto;
}
.div1,.div5{
height: 200px;
width: 800px;
background: greenyellow;
}
.div2,.div3,.div4{
display: inline-block;
/*几行放到一行上*/
}
.div2,.div4{
width: 200px;
height: 400px;
background: cyan;
}
.div3{
height: 400px;
width: 380px;
background: orangered;
}
@media only screen and (max-width:800px ) {
.div4{display: none;}
.div1,.div5{
width: 600px;
}
.all{
width: 600px;
}
}
style>
head>
<body>
<div class="all">
<div class="div1">div1div>
<div class="div2">div2div>
<div class="div3">div3div>
<div class="div4">div4div>
<div class="div5">div5div>
div>
body>
html>
6.响应式布局
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
div{
height: 100px;
margin-top: 20px;
border: 1px solid;
}
@media (min-width: 900px),(max-width:700px){
.div1{
background-color: green;
}
.div2{
background-color: red;
display: none;
}
}
/*@media (min-width: 100px) and (max-width:400px){
.div1{
background-color: red;
}
.div2{
background-color: yellow;
}
}
@media only screen and (min-width: 601px ) {
.div1{
background-color: yellow;
}
.div2{
background-color: red;
}
}*/
style>
head>
<body>
<div class="div1">div1div>
<div class="div2">div2div>
<div class="div3">div3div>
<div class="div4">div4div>
<div class="div5">div5div>
body>
html>
7.css3边框设置
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
div{
width: 225px;
padding: 20px 0;
background: pink;
border: 5px dashed;
text-align: center;
background-image: url(img/72S58PICuyH_1024.jpg);
}
.border-box{
/*background-clip: border-box;*/
background-origin: border-box;
}
.padding-box{
/*background-clip: padding-box;*/
background-origin: padding-box;
}
.content-box{
/*background-clip: content-box;*/
background-origin: content-box;
}
style>
head>
<body>
<h2>background-clip:border-boxh2>
<div class="border-box">
实例1
div>
<h2>background-clip:padding-boxh2>
<div class="padding-box">
实例2
div>
<h2>background-clip:content-boxh2>
<div class="content-box">
实例3
div>
body>
html>具体代码实现的现象，请用火狐浏览器打开查看。