HTML_列表-块-布局_2

时间：2015-07-31 08:58:36 阅读：118 评论：0 收藏：0 [点我收藏+]

标签：

列表：有序列表，无序列表和自定义列表

无序列表：ul

type：disc-实心圆，circle-空心圆，square-矩形

<ul type="disc">
 <li>Apple</li>
 <li>Orange</li>
 <li>Banana</li>
</ul>
<ul type="circle">
 <li>Apple</li>
 <li>Orange</li>
 <li>Banana</li>
</ul>
<ul type="square">
 <li>Apple</li>
 <li>Orange</li>
 <li>Banana</li>
</ul>

有序列表：ol

type：前面标记的类型

start：从第几个开始进行计数

<ol start="8">
 <li>Apple</li>
 <li>Orange</li>
 <li>Banana</li>
</ol>
<ol type="a">
 <li>Apple</li>
 <li>Orange</li>
 <li>Banana</li>
</ol>
<ol type="A" start="5">
 <li>Apple</li>
 <li>Orange</li>
 <li>Banana</li>
</ol>
<ol type="i">
 <li>Apple</li>
 <li>Orange</li>
 <li>Banana</li>
</ol>
<ol type="I">
 <li>Apple</li>
 <li>Orange</li>
 <li>Banana</li>
</ol>

自定义列表：dl

dt：头部主题

dd：内容描述

<dl>
<dt>Hello World</dt>
<dd>Every new language will print this sentence!</dd>
<dt>GoodBye!</dt>
<dd>Sometimes we have to say this </dd>
</dl>

块

div：可以形成一个块

p：段落

span：形成一种标记（可以进行外部设计）

<div>
 <p><span>What</span>Test---span</p>
</div>

布局

div：形成块元素

<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style type="text/css">
 body
 {
 margin:0;
 }
 #container
 {
 width:100%;
 height:950px;
 background-color:blue;
 }
 #head
 {
 width:100%;
 height: 10%;
 background-color:red;
 }
 #content_menu
 {
 width:10%;
 height:80%;
 background-color:yellow;
 float:left; <!--必须都进行添加-->
 }
 #content_body
 {
 width:90%;
 height:80%;
 background-color:pink;
 float:left;
 }
 #footing
 {
 width:100%;
 height:10%;
 background-color:purple;
 clear:both;
 }
</style>
</head>
<body>
<div id="container">
<div id="head">Head</div>
<div id="content_menu">Menu</div>
<div id="content_body">Body</div>
<div id="footing">Footing</div>
</div>
</body>
</html>

table:表数据

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table_Layout</title>
</head>
<body marginheight="0px" marginwidth="0px">
 <table width="100%" height="950px" style="background-color:grey">
 <tr>
 <td width="100%" height="10%" colspan="3" style="background-color:blue">Head</td>
 </tr>
 <tr>
 <td width="20%" height="80%" style="background-color:pink">
 <ul>
 <li>Orange</li>
 <li>Apple</li>
 <li>Banana</li>
 </ul>
 </td>
 <td width="60%" height="80%" style="background-color:red">Body</td>
 <td width="20%" height="80%" style="background-color:#9FC">Right Menu</td>
 </tr>
 <tr>
 <td colspan="3" width="100%" height="10%" style="background-color:yellow">Footing</td>
 </tr>
 </table>
</body>
</html>

HTML_列表-块-布局_2

标签：

原文地址：http://www.cnblogs.com/GoFly/p/4691133.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行