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

来源：互联网发布：淘宝网衬衫连衣裙女编辑：程序博客网时间：2024/06/11 00:17

一、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>

效果图

阅读全文

0 0