您的位置：首页 > Web前端 > HTML

HTML列表、块和布局

2016-09-09 20:00 197 查看

HTML列表

<ol> 有序列表

<ul> 无序列表

<li> 列表项

<dl> 列表

<dt> 列表项

<dd> 描述

1、无序列表

使用标签：<ul>、<li>

属性：disc、circle、square

2、有序列表

使用标签：<ol>、<li>

属性：A、a、l、i、start

3、嵌套列表

使用标签：<ul>、<ol>、<li>

4、自定义列表

使用标签：<dl>、<dt>、<dd>

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</
4000
title>
</head>
<body>
<ul type="square">
<li>苹果</li>
<li>橘子</li>
<li>西瓜</li>
</ul>
<ol type="i" start="10" >
<li>苹果</li>
<li>橘子</li>
<li>西瓜</li>
</ol>
<ol>
<li>
<ul>
<li>ios</li>
<li>swift</li>
</ul>
</li>
<li>
<ul>
<li>ios</li>
<li>swift</li>
</ul>
</li>
</ol>

<ul>
<li>
<ol>
<li>ios</li>
<li>swift</li>
</ol>
</li>
<li>
<ol>
<li>ios</li>
<li>swift</li>
</ol>
</li>
</ul>

<dl>
<dt>first</dt>
<dd>hello1</dd>//备注
<dt>second</dt>
<dd>hello2</dd>
<dt>third</dt>
<dd>hello3</dd>
</dl>
</body>
</html>

HTML块

1、html块元素

块元素在显示时，通常会以新行开始

2、html内联元素

内联元素通常不会以新行开始

3、html<div>元素

<div>元素也被成为块元素，其主要是组合html元素的容器

4、html<span>元素

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

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素</title>
<link rel="stylesheet" type="text/css" href="mycss.css">
<style type="text/css">
span{
color: bisque;
}
</style>
</head>
<body>
<p>大家好</p>
<h1>hello</h1>

<b>这是一个加重标签</b>
<a>这是一个超链接标签</a>

<div id="mycss">
<p>hello world</p>
<a>dianwoa</a>
</div>

<div>
<p><span>明天是周末</span>有一块玩的嘛</p>
</div>
</body>
</html>

HTML布局

1、使用<div>元素布局

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div布局</title>
<style type="text/css">
body{
margin: 0px;
}
div#container{
width: 100%;
height: 950px;
background-color: bisque;
}
div#heading{
width: 100%;
height: 10%;
background-color: aquamarine;
}
div#content_menu
{
width: 70%;
height: 60%;
background-color: blue;
float: left;
}
div#content_body{
width: 30%;
height: 60%;
background-color: chartreuse;
float: left;
}
div#footing{
width: 100%;
height: 30%;
background-color:red;
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>
<style type="text/css">
body{
margin: 0px;
}
</style>
</head>
<body>
<table width="100%" height="950px" style="background-color: chartreuse">
<tr>
<td colspan="3" width="100%" height="10%" style="background-color: red">这是头部</td>//colspan设置合并列数
</tr>
<tr>
<td width="40%" height="80%" style="background-color: aqua">
<ul>
<li>ios</li>
<li>android</li>
<li>swift</li>
</ul>
</td>
<td width="30%" height="80%" style="background-color: blue">中菜单</td>
<td width="30%" height="80%" style="background-color: brown">右菜单</td>
</tr>
<tr>
<td width="100%" height="10" style="background-color: blueviolet" colspan="3">foot</td>
</tr>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航