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

HTML5学习04-HTML5列表、快和布局

2017-07-03 17:19 375 查看

一、HTML5列表

1、无序列表
使用标签 ：<ul>、<li>

属性：

disc：默认黑色园

circle：空心园

square:黑色方块

如图

2、有序列表

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

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

//如下图

3、嵌套列表

使用标签：<ul>、<ol>、<;i>

如下图：05

4、自定义列表

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

如下图：06

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>

//一、注意，这里面有三个属性，disc：默认黑色园， circle：空心园 ，square:黑色方块

<ul type="disc">

<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
<li>第四列</li>
<li>第玩列</li>
</ul>

<ul type="circle">

<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
<li>第四列</li>
<li>第玩列</li>
</ul>

<ul type="square">

<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
<li>第四列</li>
<li>第玩列</li>
</ul>

//二、有序列表，注意，这里面有几个属性：A、a、I、i、start

<ol type="A">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>

<ol type="a">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>

<ol type="I">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>

<ol type="i">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>

<ol start="10">
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
</ol>

//三、嵌套列表

<ol >
<li>动物</li>
<ul >
<li>猫</li>
<li>马蓉</li>
<li>狗</li>
</ul>
</ol>

<ul >
<li>动物</li>
<ol>
<li>猫</li>
<li>马蓉</li>
<li>狗</li>
</ol>
</ul>

//四、自定义列表
<dl>
<dt>第一列</dt>
<dd>第一类介绍</dd>
<dt>第二列</dt>
<dd>第二类介绍</dd>

</dl>
</body>
</html>

二、HTML5块元素标签的使用

案例一（重新会换行）

<p>这是个例子</p>
<h1>这是个啥子</h1>

案例二：内联元素（不会重新换行）

<!--内联元素-->

<b>f我这个是内联元素</b>
<a>--------我这个是内联元素</a>

案例三：div和span元素

代码

<!--div元素-->

<div id="divid">

<p>你好啊，你好啊，你好啊</p>

<a>你不好，你不好，你不好</a>

</div>

<!--span元素-->

<div>
<p> <span id="spanid">我这个怎么了，我怎么变色了</span>我也不知道为什么 </p>

</div>

样式：myyangshiss.css样式，使用外部样式引用，如有不懂，请看上一篇博客

#divid p{

color: red;
}

#divid a{

color: yellow;
}

#spanid{
color: red;
}

效果图

三、HTML5布局的使用，主要使用两种div和table

使用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:600px;
color:white;
background-color: black;
}

/*头部颜色*/
div#headid{
width: 100%;
height: 10%;
color:white;
background-color: green;
}

/*菜单颜色*/
div#content_menu{
width: 30%;
height: 80%;
color:white;
float: left;
background-color: blueviolet;
}

/*内容颜色*/
div#content{
width: 70%;
height: 80%;
color:white;
float: left;
background-color: darkgoldenrod;
}

/*底部颜色*/
div#footing{
width: 100%;
height: 10%;
color:white;
float: left;
clear: none;
background-color: black;
}
</style>
</head>
<body>

<div id="container">

<div id="headid" >标题</div>
<div id="content_menu">菜单</div>
<div id="content">内容</div>
<div id="footing">底部</div>

</div>

</body>
</html>

效果图

使用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="600px" style="background-color: burlywood">
<!--td里面的colspan，代表的是跨几行-->
<tr>
<td  colspan="2" width="100%" height="10%" style="background-color: green" >这是个神</td>
</tr>

<tr  >
<td   width="30%" height="80%" style="background-color: yellow">这是个神</td>
<td   width="70%" height="80%" style="background-color: brown">鬼</td>
</tr>

<tr  >
<td  colspan="2"  width="100%" height="10%" style="background-color: hotpink">这是个神</td>
</tr>
</table>

</body>
</html>

效果图

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

标签：

相关文章推荐

新的分享

章节导航