码迷,mamicode.com
首页 > Web开发 > 详细

HTML5列表、块和布局

时间:2017-07-11 23:10:59      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:1.0   自定义   htm   描述   mil   开始   margin   circle   html5   

-----------------siwuxie095

   

   

   

   

   

   

   

   

   

HTML5 列表

   

   

标签

描述

<ol>

有序列表

<ul>

无序列表

<li>

列表项

<dl>

列表

<dt>

列表项

<dd>

描述

   

   

   

1、无序列表

   

标签:<ul><li>

   

属性:disc、circle、square

   

   

   

2、有序列表

   

标签:<ol><li>

   

属性:A、a、I、i、start

   

   

   

3、嵌套列表

   

标签:<ul><ol><li>

   

   

   

4、自定义列表

   

标签:<dl><dt><dd>

   

   

   

   

   

HTML5 块

   

   

1、HTML 块元素

   

块元素在显示时,通常会以新行开始,如:<h1><p><ul>

   

   

   

2、HTML 内联元素

   

内联元素通常不会以新行开始,如:<b><a><img>

   

   

   

3、HTML <div> 元素

   

<div> 元素也被称为块元素,其主要是组合(承载) HTML 元素的容器

   

   

4、HTML <span> 元素

   

<span> 元素是内联元素,可作为文本的容器

   

   

   

   

   

HTML5 布局

   

   

1、使用 <div> 元素布局

   

2、使用 <table> 元素布局

   

   

   

如下:

   

1)DIV 布局

   

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>div 布局</title>

<style type="text/css">

body{

margin: 0px;

}

#container{

width: 100%;

height: 950px;

background-color: darkgray;

}

#heading{

width: 100%;

height: 10%;

background-color: aqua;

}

#content_menu{

width: 30%;

height: 80%;

background-color: aquamarine;

float: left;

}

#content_body{

width: 70%;

height: 80%;

background-color: blueviolet;

float: left;

}

#footing{

width: 100%;

height: 10%;

background-color: brown;

clear: both;

}

</style>

</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>

   

   

   

2)TABLE 布局

   

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>table 布局</title>

</head>

<body marginwidth="0px" marginheight="0px">

<table width="100%" height="950px" style="background-color: darkgray">

<tr>

<td colspan="2" width="100%" height="10%" style="background-color: aqua">头部</td>

</tr>

<tr>

<td width="30%" height="80%" style="background-color: aquamarine">内容菜单</td>

<td width="70%" height="80%" style="background-color: blueviolet">内容主体</td>

</tr>

<tr>

<td colspan="2" width="100%" height="10%" style="background-color: brown">底部</td>

</tr>

</table>

</body>

</html>

   

   

   

   

   

   

   

   

   

【made by siwuxie095】

HTML5列表、块和布局

标签:1.0   自定义   htm   描述   mil   开始   margin   circle   html5   

原文地址:http://www.cnblogs.com/siwuxie095/p/7152379.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!