极客学院----H5的相关笔记----H5基础（4）

最新推荐文章于 2017-03-07 20:56:52 发布

wypgany

最新推荐文章于 2017-03-07 20:56:52 发布

阅读量247

点赞数

分类专栏： h5

本文链接：https://blog.csdn.net/wypgany/article/details/53607689

版权

h5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一.HTML列表

列表常用标签

ol：有序列表 ul：无序列表

li：列表项 dl：列表

dt：列表项 dd：描述

1.无序列表

使用标签：ul，li

属性：disc（实体圆），circle（空心圆），square（方块）在ul中，type="disc"是默认值

2.有序列表

使用标签：ol，li

属性：A，a，I，i，start 在ol中，type不指定，默认是数字而start指定几，就从几开始

3.嵌套列表

使用标签：ul，ol，li 在li中再次书写ol/ul，然后继续写，等等

4.自定义列表

使用标签：dl，dt，dd 用法同ol/ul

二.HTML块

1.HTML块元素

块元素在显示时，通常会以新行开始 eg.<p>，<h1>，<ul>

2.HTML内联元素

通常不会另起一行开始 eg.<d>，<a>，<img>

3.HTML<div>元素

<div>元素通常也被称为块元素，主要是组合HTML元素的容器，主要配合样式使用，需定义其id

4.HTML<span>元素

<span>元素是内联元素，可作为文本的容器，一般会承载到div里来使用，通常会与css样式一起使用

三.HTML布局

1.使用<div>元素布局

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div_layout_learn</title>
    <style type="text/css">
        body{
            margin: 0px;// 作用是使四边的白边消失
        }
        #container{
            width: 100%;
            height: 950px;
        }
        #header{
            width: 100%;
            height:10%;
            background-color: greenyellow;
        }
        #content_menu{
            width: 30%;
            height: 75%;
            background-color: antiquewhite;
            float: left;// 添加浮动，使其左右排列
        }
        #content_body{
            width: 70%;
            height: 75%;
            background-color: lightblue;
            float: left;// 添加浮动，使其左右排列
        }
        #footer{
            width: 100%;
            height: 15%;
            background-color: dimgrey;
            clear: both;// 清除浮动，否则会一直左右排列
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header">头部</div>
        <div id="content_menu">菜单</div>
        <div id="content_body">内容</div>
        <div id="footer">底部</div>
    </div>
</body>
</html>

2.使用<table>元素布局

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table_layout_learn</title>
</head>
<body marginheight="0px" marginwidth="0px">// margin...是为了消除四周的白边
    <table width="100%" height="950px">
        <tr>
            <td width="100%" height="10%" style="background-color: aqua" colspan="2">头部</td>// colspan:合并两个单元格
        </tr>
        <tr>
            <td width="30%" height="75%" style="background-color: chartreuse">菜单</td>
            <td width="70%" height="75%" style="background-color: blueviolet">主体</td>
        </tr>
        <tr>
            <td width="100%" height="15%" style="background-color: cadetblue" colspan="2">底部</td>
        </tr>
    </table>
</body>
</html>

wypgany

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
极客学院----H5的相关笔记----H5基础（4）

一.HTML列表列表常用标签ol：有序列表 ul：无序列表li：列表项 dl：列表dt：列表项 dd：描述1.无序列表使用标签：ul，li属性：disc（实体圆），circle（空心圆），square（方块）在ul中，type="disc"是默认值2.有序列表使用标
复制链接

扫一扫

专栏目录