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块元素
块元素在显示时,通常以新行开始
<h2>,<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>
<h2>hello world</h2>
<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" >
<tr>
<td colspan="2" width="100%" height="10%" >头部</td>
</tr>
<tr>
<td width="20%" height="80" >
<ul>
<li>ios</li>
<li>ios</li>
<li>ios</li>
</ul>
</td>
<td width="60%" height="80%" >实体</td>
<td width="20%" height="80" >左菜单</td>
</tr>
<tr>
<td colspan="2" width="100%" height="10%" >底部</td>
</tr>
</table>
</body>
</html>
极客学院:http://www.jikexueyuan.com/course/135.html
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。