标签：列表 布局
html5
列表：
http://www.w3school.com.cn/tags/html_ref_byfunc.asp
列表：
无序列表：
使用标签<ul><li>
属性：disc, circle, square
有序列表：
使用标签<ol><li>
属性：A,a,I,i,start
嵌套列表：
使用标签：<ul>,<ol>,<li>
自定义列表：
使用标签：<dl>,<dt>,<dd>
<body> <ul type="circle"> <li>apple</li> <li>bnana</li> <li>orange</li> </ul> <ul type="square"> <li>apple</li> <li>bnana</li> <li>orange</li> </ul> <ol type="a"> <li>apple</li> <li>bnana</li> <li>orange</li> </ol> <ol type="A"> <li>apple</li> <li>bnana</li> <li>orange</li> </ol> <ol type="i"> <li>apple</li> <li>bnana</li> <li>orange</li> </ol> <ol type="I"> <li>apple</li> <li>bnana</li> <li>orange</li> </ol> <ol start="10"> <li>apple</li> <li>bnana</li> <li>orange</li> </ol> <ul type="square"> <li>fruit</li> <ol> <li>apple</li> <li>bnana</li> <li>orange</li> </ol> <li>vegetable</li> <ol> <li>potato</li> <li>tomato</li> <li>cabbage</li> </ol> </ul> <dl> <dt>helloworld</dt> <dd>print helloworld</dd> <dt>helloworld</dt> <dd>print helloworld</dd> </dl> </body>
html块
html块元素
块元素在显示时，通常以新行开始
<h1>,<p>.<ul>
html内联元素：
内联元素通常不会以新行开始
<b>,<a>,<img>
html <div>元素：
<div>元素也被称为块元素，其主要是组合html元素的容器
html<span>元素：
<span>元素是内联元素，可作为文本的容器
<div>和<span>通常一起使用
index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="divcss.css">
<style type="text/css">
span{
color: crimson;
}
</style>
<title></title>
</head>
<body>
<p>hello world</p>
<h1>hello world</h1>
<br/>
<b>helloworld</b>
<a href="hrefht.html">hrefht</a>
<br/>
<div id="divid">
<p>helloworld</p>
<a>click</a>
</div>
<div id="divspan">
<p><span>hello world</span>this is a text</p>
</div>
</body>
</html>divcss.css:
#divid p{
color : chartreuse;
}
html布局：
使用<div>布局
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
body{
margin: 0px;
}
div#container{
width: 100%;
height: 950px;
color : gainsboro;
}
div#heading{
width: 100%;
height: 10%;
background-color: cornflowerblue;
}
div#content_menu{
width: 30%;
height: 80%;
background-color: gainsboro;
float: left;
}
div#content_body{
width: 70%;
height: 80%;
background-color: burlywood;
float: right;
}
div#footing{
width: 100%;
height: 10%;
background-color: black;
clear: both;
}
</style>
<title></title>
</head>
<body>
<div id="container">
<div id="heading">头部</div>
<div id="content_menu">内容菜单</div>
<div id="content_body">内容主体</div>
<div id="footing">底部</div>
</div>
</body>
</html>
使用<table>布局
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body marginheight="0px" marginwidth="0px"> <table width="100%" height="950px" style="background-color: aliceblue"> <tr> <td colspan="2" width="100%" height="10%" style="background-color: cornflowerblue">头部</td> </tr> <tr> <td width="20%" height="80" style="background-color: darkgray"> <ul> <li>ios</li> <li>ios</li> <li>ios</li> </ul> </td> <td width="60%" height="80%" style="background-color: azure">实体</td> <td width="20%" height="80" style="background-color: darkgray">左菜单</td> </tr> <tr> <td colspan="2" width="100%" height="10%" style="background-color: blue">底部</td> </tr> </table> </body> </html>
极客学院：http://www.jikexueyuan.com/course/135.html
本文出自 “thystar” 博客，请务必保留此出处http://4440271.blog.51cto.com/4430271/1664261
标签：列表 布局
原文地址：http://4440271.blog.51cto.com/4430271/1664261
