作者：都百美丽人生 | 来源：互联网 | 2023-06-03 20:26
一、HTML5列表
1、无序列表
使用标签 ：<ul>、<li>
属性：
disc：默认黑色园
circle：空心园
square:黑色方块
2、有序列表
使用标签 :
、
属性：A、a、I、i、start
//如下图
3、嵌套列表
使用标签：<ul>、<ol>、<;i>
如下图：05
4、自定义列表
使用标签<dl>、<dt>、<dd>
如下图：06
<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 id="divid">
<p>你好啊，你好啊，你好啊p>
<a>你不好，你不好，你不好a>
div>
<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布局
<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布局
<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">
<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>
- 效果图
京公网安备 11010802041100号