小白入门之HTML--第六章 流动，浮动模型，菜单和页面布局

最新推荐文章于 2024-09-08 15:45:05 发布
最新推荐文章于 2024-09-08 15:45:05 发布
阅读量1.5k 收藏 7
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshishq1210/article/details/95050493
版权

1.本章面试题

1.1 什么是流动模型

1.2 网页中基本的布局方式有哪些

2.知识点

2.1 上一章内容回顾

​ 上一章我们学习了网页元素的基本分类和盒子模型。

2.2 本章内容重点

​ 本章主要学习网页定位模型和基本布局。

3.具体内容

3.1 CSS定位属性

​ CSS的定位方式可以帮助设计者使文档更容易阅读，CSS主要通过position属性进行定位。

3.1.1 正向流向

​ 正常流向是预先设定的定位方式。默认情况下网页布局就是按文档流的正常流向，即按HTML的结构顺序。由上而下、由左至右这样的走向就是所谓的正常流向，浏览器也是依据这样的走向来解译我们的编码。

​ 换个角度来说，在大部分的情况下，正常流向指的是网页中元素标记的方式。另外，多数的HTML元素都是属于行内元素或块级元素。块级元素里可以包含行内元素和块级元素，而行内元素里不能包含有块级元素。

​ 在正常流向中，块级元素盒子会在其父对象盒子中自上而下排列，而行内元素盒子则会按照由左至右的顺序排列。

<!DOCTYPE html>
<html>
<head>
<title>正常流向</title>
<style type="text/css">
div{
    width:200px;
    height:80px;
    margin:10px;
    padding:10px;
    border:2px dashed #000;
    text-align:center;
}
#div1{
    background:#ba9578;
    color:#FFF;
}
#div2{
    background:#cef091;
    color:#000;
}
#div3{
    background:#70c17f;
    color:#FFF;
}
b{
    border:1px solid red;
}
</style>
</head>
<body>            
<div id="div1"><p>div1</p></div>
<div id="div2">
    <p>div2</p>
    <b>b元素1</b>
    <b>b元素2</b>
    <b>b元素3</b>
</div>
<div id="div3"><p>div3</p></div>        
</body>
</html>

3.1.2 定位偏移属性top、bottom、right、left

​ 基本语法：

top: auto | 长度 | 百分比;
bottom: auto | 长度 | 百分比;
right: auto | 长度 | 百分比;
left: auto | 长度 | 百分比;

​ 语法说明：

  • auto：无特殊定位，根据HTML定位规则在文档流中分配。

  • 长度：用长度值来定义偏移量，可以为负值。

  • 百分比：用百分比来定义偏移量，百分比参照包含块的高度，可以为负值。

3.1.3 定位方式position

​ 定位允许定义元素相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口的位置。CSS 使用position 属性控制定位类型，并配合4个定位偏移属性left、right、top和bottom控制偏移量。

​ 基本语法：

position : static | relative | absolute | fixed | center | page | sticky;

1.相对定位

​ 静态定位static，遵循正常文档流，是所有元素默认的定位方式，此时4个定位偏移属性不会被应用。一般不特别设定，除非要取消继承其它元素的特别定位。

​ 相对定位relative，遵循正常文档流，基准位置为其在正常文档流中的位置，并通常需要top、bottom、right、left属性配合完成，设定元素相对于原来位置的偏移量。设置为相对定位的元素会偏移某个距离，元素仍然保持其未偏移前的形状，它原来所占的空间仍保留，元素移动后可能会覆盖其它元素。

​ 相对定位一开始会按照“正常流向”来定位，所有的盒子会先定好位置。一旦一个盒子按照正常流向得到自己的位置，它还可以相对该位置而偏移，这就是相对定位。

<!DOCTYPE html>
<html>
<head>
<title>相对定位</title>
<style type="text/css">
div{
    width:200px;
    height:80px;
    margin:10px;
    padding:10px;
    border:2px dashed #000;
    text-align:center;
}
#div1{
    position:static;   /*静态定位*/
    background:#ba9578;
    color:#FFF;
}
#div2{
    position:relative;   /*相对定位*/
    top:60px;
    left:30px;
    background:#cef091;
    color:#000;
}
#div3{
    position:static;   /*静态定位*/
    background:#70c17f;
    color:#FFF;
}
b{
    border:1px solid red;
}
.b2{
    position:relative;   /*相对定位*/
    left:80px;
    top:60px;
}
</style>
</head>
<body>            
<div id="div1"><p>div1</p></div>
<div id="div2">
    <p>div2</p>
    <b>b元素1</b>
    <b class="b2">b元素2</b>
    <b>b元素3</b>
</div>
<div id="div3"><p>div3</p></div>        
</body>
</html>

2.绝对定位

​ 绝对定位absolute，设置为绝对定位的元素从文档流中删除，元素原先在文档流中所占的位置会取消，不再占用原有的空间。绝对定位“相对于”该元素最近的已经定位的祖先元素，若不存在已定位的祖先元素，则一直回溯到body元素。绝对定位的盒子偏移位置不影响常规文档流中的任何元素。

​ 绝对定位的盒子不存在正常流向问题，也不会影响到正常流向中的其它BOX。

<!DOCTYPE html>
<html>
<head>
<title>绝对定位</title>
<style type="text/css">
div{
    width:200px;
    height:80px;
    margin:10px;
    padding:10px;
    border:2px dashed #000;
    text-align:center;
}
#div1{
    position:absolute;   /*绝对定位*/
    top:100px;
    right:30px;
    background:#ba9578;
    color:#FFF;
}
#div2{
    position:relative;   /*相对定位*/
    top:60px;
    left:30px;
    background:#cef091;
    color:#000;
}
#div3{
    position:static;   /*静态定位*/
    background:#70c17f;
    color:#FFF;
}
b{
    border:1px solid red;
}
.b2{
    position:absolute;   /*绝对定位*/
    left:-20px;
    top:120px;
}
</style>
</head>
<body>            
<div id="div1"><p>div1</p></div>
<div id="div2">
    <p>div2</p>
    <b>b元素1</b>
    <b class="b2">b元素2</b>
    <b>b元素3</b>
</div>
<div id="div3"><p>div3</p></div>        
</body>
</html>

3.固定定位

​ 固定定位fixed，与absolute一致，偏移量定位一般以窗口为参考，当出现滚动条时，对象不会随着滚动。元素原有位置空间不保留，对象脱离常规流。

​ 固定定位是绝对定位的一个子类，唯一的区别是对于连续介质，固定BOX并不随着文档的滚动而移动，类似于固定的背景图像。对于分页介质，固定定位BOX在每页中重复，当需要在每一放置同一个内容时（例如在底部放置一个签名），这个方法非常有用。

<!DOCTYPE html>
<html>
<head>
<title>固定定位</title>
<style type="text/css">
body{
    height:700px;
}
header{
    position:fixed;
    width:100%;
    height:100px;
    top:0px;
    right:0px;
    bottom:auto;
    left:0px;
    border:1px dashed black;
    color:#FFF;
    background-color:#5f6062;
    text-align:center;
    line-height:3;  
}
aside{
    position:fixed;
    width:200px;
    height:auto;
    top:100px;
    right:auto;
    bottom:100px;
    left:0px;
    border:1px dashed black;
    background-color:#f6edc6;
    text-align:center;
    line-height:3;      
}
section{
    position:fixed;
    width:auto;
    height:auto;
    top:100px;
    right:0px;
    bottom:100px;
    left:200px;
    border:1px dashed black;
    background-color:#fde8ed;
    text-align:center;
    line-height:3;  
    overflow:auto;  
}
footer{
    position:fixed;
    width:100%;
    height:100px;
    top:auto;
    right:0;
    bottom:0;
    left:0px;
    border:1px dashed black;
    background-color:#f0ede4;
    text-align:center;
    line-height:3;      
}
</style>
</head>
<body>            
<header>页眉</header>
<aside>侧栏</aside>
<section>主体内容</section>
<footer>页脚</footer>     
</body>
</html>

4.吸附定位sticky

​ sticky是CSS3新增关键字，对象在常态时遵循常规流，也就是当对象在屏幕中正常显示时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现就是现实中我们见到的吸附效果。

​ sticky定位屏幕中正常显示时遵循文档流，而当随着滚动条移动可能卷到屏幕外边时，则会表现出fixed的吸附效果。

<!DOCTYPE html>
<html>
<head>
<title>吸附定位</title>
<style type="text/css">
div{
    width:200px;
    height:80px;
    margin:10px;
    padding:10px;
    border:2px dashed #000;
    text-align:center;
}
#div1{
    position:static;   /*静态定位*/
    background:#ba9578;
    color:#FFF;
}
#div2{
    position:sticky;   /*吸附定位*/
    top:60px;
    left:100px;
    background:#cef091;
    color:#000;
}
#div3{
    position:static;   /*静态定位*/
    background:#70c17f;
    color:#FFF;
}
</style>
</head>
<body>            
<div id="div1"><p>div1</p></div>
<div id="div2"><p>div2</p></div>
<div id="div3"><p>div3</p></div>        
</body>
</html>

3.1.4 分层呈现z-index

​ 基本语法：

z-index: auto | 数字;

​ 语法说明：

  • auto：元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。

  • 数字：用整数值来定义堆叠级别。z-index的值越小，表明该BOX层级越低，堆叠发生时处于下层，反之则处于上层。如果两个元素的z-index一样，则按照出现的先后顺序来决定，出现较晚的元素堆叠在上层。

<!DOCTYPE html>
<html>
<head>
<title>堆叠次序</title>
<style type="text/css">
div{
    position:staic;
    width:200px;
    height:80px;
    margin:10px;
    padding:10px;
    border:2px dashed #000;
    text-align:center;
}
#div1{
    position:absolute;   /*绝对定位*/
    z-index:2;          /*堆叠次序*/
    top:0px;
    left:50px;
    background:#ba9578;
    color:#FFF;
}
#div2{
    position:absolute;   /*绝对定位*/
    z-index:6;          /*堆叠次序*/
    top:50px;
    left:10px;
    background:#cef091;
    color:#000;
}
#div3{
    position:absolute;   /*绝对定位*/
    z-index:4;          /*堆叠次序*/
    top:60px;
    left:150px;
    background:#70c17f;
    color:#FFF;
}
</style>
</head>
<body>            
<div id="div1"><p>div1</p></div>
<div id="div2"><p>div2</p></div>
<div id="div3"><p>div3</p></div>        
</body>
</html>

3.1.5 裁切clip

​ 基本语法：

clip：auto | <shape>
<shape>：rect(<number>|auto <number>|auto <number>|auto <number>|auto)

​ 语法说明：

  • auto：默认，不裁剪。

  • rect(<number>|auto <number>|auto<number>|auto<number>|auto)：依据上-右-下-左的顺序提供以对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。

  • 上-左”方位的裁剪：从0开始剪裁直到设定值，即“上-左”方位的auto值等同于0；“右-下”方位的裁切：从设定值开始裁切直到最右边和最下边，即“右-下”方位的auto值为盒子的实际宽度和高度。

<!DOCTYPE html>
<html>
<head>
<title>裁切</title>
<style>
div{
    position:absolute;  /*绝对定位*/
    width:180px;
    height:60px;
    font-size:24px;
    line-height:2;
    background:#cef091;
    border:2px dashed #000;
    text-align:center;
}
#div1{
    left:20px;
    top:20px;
}
#div2{
    left:220px;
    top:20px;
    clip:rect(0px auto 50px 40px);    /*裁切*/
}
</style>
</head>
<body>
<div id="div1">未被裁剪的效果</div>
<div id="div2">被裁切后的效果</div>
</body>
</html>

3.2 CSS布局属性

​ CSS布局（Layout）属性控制已应用CSS样式规则的HTML元素与页面上的其它元素进行交互。例如，隐藏元素、设置元素的浮动效果、设置溢出属性确定滚动条能否出现等。

3.2.1 可见性visibility

​ 基本语法：

visibility: visible | hidden | collapse;

​ 语法说明：

  • visible：元素可见。

  • hidden：元素隐藏，但元素保留其占据的原有空间，影响页面的布局。

  • collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其它内容使用。对于表格外的其它对象，其作用等同于hidden。

<!DOCTYPE html>
<html>
<head>
<title>可见性</title>
<style type="text/css">
div{
    width:200px;
    height:80px;
    margin:10px;
    padding:10px;
    border:2px dashed #000;
    text-align:center;
}
#div1{
    visibility:visible;    /*可见*/
    background:#ba9578;
    color:#FFF;
}
#div2{
    visibility:hidden;    /*隐藏*/
    background:#cef091;
    color:#000;
}
#div3{
    background:#70c17f;
}
.vc{
    visibility:collapse;    /*隐藏表格行列*/
}
</style>
</head>
<body>            
<div id="div1"><p>显示</p></div>
<div id="div2"><p>隐藏</p></div>
<div id="div3">
<table border="1">
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    <td>单元格3</td>
    </tr>
        <tr class="vc">
        <td>单元格4</td>
        <td>单元格5</td>
    <td>单元格6</td>
    </tr>
        <tr>
        <td  class="vc">单元格7</td>
        <td>单元格8</td>
    <td>单元格9</td>
    </tr>
</table>
</div>      
</body>
</html>

3.2.2 溢出overflow

​ 基本语法：

overflow：visible | hidden | scroll | auto | paged-x| paged-y | paged-x-controls| paged-y-controls | fragments;
overflow-x：visible | hidden | scroll | auto | paged-x| paged-y | paged-x-controls| paged-y-controls | fragments;
overflow-y：visible | hidden | scroll | auto | paged-x| paged-y | paged-x-controls| paged-y-controls | fragments;

​ 语法说明：

  • visible：对溢出内容不做处理，内容可能会超出容器。

  • hidden：隐藏溢出容器的内容且不出现滚动条。

  • scroll：无论是否溢出都出现滚动条。

  • auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body元素和textarea的默认值。

  • page-x、page-y、page-x-controls、page-y-controls和fragments属性值都是CSS3新增，目前主流浏览器均不支持，不做详述。

<!DOCTYPE html>
<html>
<head>
<title>溢出</title>
<style type="text/css">
div{
    width:200px;
    height:100px;
    margin:30px 5px ;
    padding:5px;
    border:1px solid #000;
    text-align:center;
    float:left;
    background:#daf6f7;
}
#div1{
    overflow:visible;    /*溢出内容可见，不做处理*/
}
#div2{
    overflow:hidden;    /*隐藏溢出容器的内容且不出现滚动条*/
}
#div3{
    overflow:scroll;    /*无论溢出与否都有滚动条*/
}
#div4{
    overflow:auto;    /*按需出现滚动条*/
}
</style>
</head>
<body>            
<div id="div1">
守得莲开结伴游。<br />约开萍叶上兰舟。<br />来时浦口云随棹，<br />
采罢江边月满楼。<br />花不语，水空流。<br />年年拚得为花愁。<br />
明朝万一西风动，<br />争向朱颜不耐秋。
</div>  
<div id="div2">
守得莲开结伴游。<br />约开萍叶上兰舟。<br />来时浦口云随棹，<br />
采罢江边月满楼。<br />花不语，水空流。<br />年年拚得为花愁。<br />
明朝万一西风动，<br />争向朱颜不耐秋。
</div>
<div id="div3">
守得莲开结伴游。<br />约开萍叶上兰舟。<br />来时浦口云随棹，<br />
采罢江边月满楼。<br />花不语，水空流。<br />年年拚得为花愁。<br />
明朝万一西风动，<br />争向朱颜不耐秋。
</div>
<div id="div4">
守得莲开结伴游。<br />约开萍叶上兰舟。<br />来时浦口云随棹，<br />
采罢江边月满楼。<br />花不语，水空流。<br />年年拚得为花愁。<br />
明朝万一西风动，<br />争向朱颜不耐秋。
</div>              
</body>
</html>

3.2.3 显示display

​ 基本语法：

display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box| flexbox | inline-flexbox| flex| inline-flex;

​ 语法说明：

  • none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间。

  • inline：指定对象为内联元素。block：指定对象为块级元素。list-item：指定对象为列表项目。inline-block

  • 指定对象为内联块元素。table：指定对象作为块元素级的表格。类同于html标记<table>。

  • inline-table：定对象作为内联元素级的表格。类同于html标记<table>。

  • table-caption：指定对象作为表格标题。类同于html标记<caption>。

  • table-cell：指定对象作为表格单元格。类同于html标记<td>。

  • table-row：指定对象作为表格行。类同于html标记<tr>。

  • table-row-group：指定对象作为表格行组。类同于html标记<tbody>。

  • table-column：指定对象作为表格列。类同于html标记<col>。

  • table-column-group：指定对象作为表格列组显示。类同于html标记<colgroup>。

  • table-header-group：指定对象作为表格标题组。类同于html标记<thead>。

  • table-footer-group：指定对象作为表格脚注组。类同于html标记<tfoot>。

  • run-in：CSS3新增关键字，根据上下文决定对象是内联对象还是块级对象。

  • box：CSS3新增关键字，将对象作为弹性伸缩盒显示（伸缩盒最老版本）

  • inline-box：CSS3新增关键字，将对象作为内联块级弹性伸缩盒显示（伸缩盒最老版本）。

  • flexbox：CSS3新增关键字，将对象作为弹性伸缩盒显示（伸缩盒过渡版本）。

  • inline-flexbox：CSS3新增关键字，将对象作为内联块级弹性伸缩盒显示（伸缩盒过渡版本）。

  • flex：CSS3新增关键字，将对象作为弹性伸缩盒显示（伸缩盒最新版本）。

  • inline-flex：CSS3新增关键字，将对象作为内联块级弹性伸缩盒显示（伸缩盒最新版本）。

<!DOCTYPE html>
<html>
<head>
<title>display构造的table</title>
<!--
<style type="text/css">
body{
    font-size:13px;
    line-height:1.5;
    text-align:center;
}
.table{
    display:table;    /*显示为表格*/
    margin:0 auto;
    border-collapse:collapse;
    border:1px solid #ccc;
}
.table-caption{
    display:table-caption;    /*显示为表格标题*/
    font-size:16px;
    text-align:center;
}
.table-header-group{       /*显示为表格标题行*/
    display:table-header-group;
    background:#eee;
    font-weight:bold;
}
.table-row-group{                   /*显示为表格行组*/
    display:table-row-group;
}
.table-row{
    display:table-row;         /*显示为表格行*/
}
/*表格行组中的表格行鼠标经过时背景色为淡黄色#ffffcc*/
.table-row-group .table-row:hover{     
    background:#ffffcc; 
}
.table-cell{
    display:table-cell;    /*显示为表格单元格*/
    padding:0 5px;
    border:1px solid #ccc;
    width:100px;
}
</style>
-->
</head>
<body>
<div class="table">
    <h2 class="table-caption">学生信息表</h2>
    <div class="table-header-group">
        <ul class="table-row">
            <li class="table-cell">学号</li>
            <li class="table-cell">姓名</li>
            <li class="table-cell">年龄</li>
        </ul>
    </div>
    <div class="table-row-group">
        <ul class="table-row">
            <li class="table-cell">201677001</li>
            <li class="table-cell">袁天一</li>
            <li class="table-cell">19</li>
        </ul>
        <ul class="table-row">
            <li class="table-cell">201677002</li>
            <li class="table-cell">马丽娜</li>
            <li class="table-cell">18</li>
        </ul>
        <ul class="table-row">
            <li class="table-cell">201677003</li>
            <li class="table-cell">侯雨欣</li>
            <li class="table-cell">20</li>
        </ul>
    </div>
</div>
</body>
</html>

3.2.4 浮动float

​ 基本语法：

float: none | left | right

​ 语法说明：

  • none：设置元素不浮动；

  • left： 设置元素浮在左边；

  • right：设置元素浮在右边。

<!DOCTYPE html>
<html>
<head>
<title>浮动</title>
<style type="text/css">
section{
    width:500px;
    height:120px;
    border:1px solid #000;
    margin:10px;
    background:#f3de83;
}
h1,h2,h3{
    background:#daf6f7;
    margin:10px;
    padding:5px;
    border:1px solid #000;
    font-size:14px;
    text-align:center;
    height:auto;
}
h1{
    width:60px;
}
h2{
    width:100px;
}
h3{
    width:150px;
}
.float_none{
    float:none;          /*不浮动*/
}
.float_left{
    float:left;         /*浮动在左*/
}
.float_right{
    float:right;        /*浮动在右*/
}
</style>
</head>
<body>
<!--第一组的3个盒子浮动方式：不浮动-->            
<section>
<h1 class="float_none">H1</h1>
<h2 class="float_none">H2</h2>
<h3 class="float_none">H3</h3>
</section>
<!--第二组的3个盒子浮动方式：前两个浮动在左，第3个浮动在右-->     
<section>
<h1 class="float_left">H1</h1>
<h2 class="float_left">H2</h2>
<h3 class="float_right">H3</h3>
</section>
<!--第三组的3个盒子浮动方式：浮动在右-->     
<section>
<h1 class="float_right">H1</h1>
<h2 class="float_right">H2</h2>
<h3 class="float_right">H3</h3>
</section>
</body>
</html>

3.2.5 清除clear

​ 基本语法：

clear: none | left | right | both;

​ 语法说明：

  • none：允许两边都可以有浮动元素。

  • both：不允许有浮动元素。

  • left：不允许左边有浮动元素。

  • right：不允许右边有浮动元素。

<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<style type="text/css">
section{
    width:500px;
    height:120px;
    border:1px solid #000;
    margin:10px;
    background:#f3de83;
}
h1,h2,h3{
    background:#daf6f7;
    margin:10px;
    padding:5px;
    border:1px solid #000;
    font-size:14px;
    text-align:center;
    height:auto;
}
h1{
    width:60px;
}
h2{
    width:100px;
}
h3{
    width:150px;
}
h4{
    width:200px;
    padding:10px;
    background:#f9aa9d;
    border:2px dashed #000;
    font-size:14px;
    text-align:center;      
}
p{
    font:13px/1.5 宋体;
}
.float_none{
    float:none;          /*不浮动*/
}
.float_left{
    float:left;         /*浮动在左*/
}
.float_right{
    float:right;        /*浮动在右*/
}
.clear_both{               /*清除两侧浮动*/
    clear:both;
}
</style>
</head>
<body>
<!--第一组的4个盒子浮动方式：前两个浮动在左，第3个浮动在右，第4个不浮动-->     
<section>
<h1 class="float_left">H1左浮动</h1>
<h2 class="float_left">H2左浮动</h2>
<h3 class="float_right">H3右浮动</h3>
<h4 class="float_none">H4不浮动</h4>
</section>
<!--第二组的3个盒子浮动方式：前两个浮动在左，第3个浮动在右，段落不浮动-->     
<section>
<h1 class="float_left">H1左浮动</h1>
<h2 class="float_left">H2左浮动</h2>
<h3 class="float_right">H3右浮动</h3>
<p>段落文字，不浮动，不清除浮动时效果。段落文字，不浮动，不清除浮动时效果。段落文字，不浮动，不清除浮动时效果。段落文字，不浮动，不清除浮动时效果。</p>
</section>
<!--第三组的4个盒子浮动方式：前两个浮动在左，第3个浮动在右，第4个不浮动且不允许两侧浮动-->     
<section>
<h1 class="float_left">H1左浮动</h1>
<h2 class="float_left">H2左浮动</h2>
<h3 class="float_right">H3右浮动</h3>
<h4 class="float_none clear_both">H4不浮动，清除两侧浮动</h4>
</section>
<!--第四组的3个盒子浮动方式：前两个浮动在左，第3个浮动在右，段落清除浮动-->     
<section>
<h1 class="float_left">H1左浮动</h1>
<h2 class="float_left">H2左浮动</h2>
<h3 class="float_right">H3右浮动</h3>
<p class="clear_both">段落文字，不浮动，除浮左右两侧动时效果。段落文字，不浮动，除浮左右两侧动时效果。段落文字，不浮动，除浮左右两侧动时效果。段落文字，不浮动，除浮左右两侧动时效果。</p>
</section>
</body>
</html>

 

3.3 网页布局方法

​ 网页布局是网页设计制作的基础，按照一定的规律把网页中的图像、文字、视频等页面元素排列到最佳位置。

​ 分割、组织页面进行分块，并传达重要信息使网页容易阅读，使页面更具有亲和力和可用性是网页设计最重要的目标。可以把网页中的内容看成是一个个的“盒子(矩形块)”，把多个“盒子”按照行和列的方式组织起来，就构成了一个网页。

3.3.1 DIV+CSS布局

​ DIV是网页布局中最为常用的一种盒子，目前DIV+CSS是定位和布局是较为有效的方式，这种方法排版具有灵活性、容易操作和功能强大等特点，越来越多用于网页布局中。

​ DIV是HTML语言中的一个标记，是一种常用的分块容器元素；CSS是一种用来表现HTML元素样式的计算机语言。DIV元素用来对页面内容进行分块，而CSS对这些分块进行样式控制。

​ 当然这并不是说布局仅能使用DIV+CSS，广义的说应该是“BOX+CSS”，DIV只是布局中最常用的一种盒子而已，HTML5新增的结构标记<header>、<footer>、<nav>、<aside>、<section>等都是用于布局非常实用的BOX。

<!DOCTYPE html>
<html>
<head>
<title>div分块示例</title>
<style type="text/css">
/*设置所有元素的样式*/
*{ 
    margin:0 auto; 
    box-sizing:border-box;
    
}
/*设置body元素样式*/
body{
    padding:0px;
    margin:0px;
    text-align:center;
}
/*外层父div样式*/
#container{
    width:980px;
    border:1px solid black;
}
/*上中下三层样式 */
#top{
    width:100%;
    height:100px;
    padding:10px;
        background-color:#FFFFCC;
}
#main{
    width:100%;
    height:380px;
    padding:10px;
    background-color:#FFFFFF;
}
#foot{
    width:100%;
    height:auto;
    padding:30px;
    background-color:#BBE9E0;
    font-size:20px;
}
/*页眉左右分栏*/
#logo{
    width:200px;
    height:80px;
    float:left; 
    font-size:20px;
    background-color:#FF9391;
    padding-top:30px;
}
#search{
    width:750px;
    height:80px;
    float:right; 
    font-size:20px;
        background-color:#F4ECE8;
    padding-top:30px;
}
/*主体部分横向三列分栏*/  
#left{
    width:200px;
    height:360px;
    font-size:20px;
        background-color:#F4ECE8;
    float:left;
    padding-top:40px;
}
#center{
    width:540px;
    height:360px;
    float:left;
    margin-left:10px;   
    font-size:20px;
    background-color:#FF9391;
    padding-top:40px;
}
#right{
    width:200px;
    height:360px;
    float:right;
    color:#FFFEFF;
    font-size:20px;
    background-color:#63433F;
    padding-top:40px;
}
​
</style>
</head>
<body>
<!--全局父div-->
<div id="container">                 
    <!--页眉div-->
    <div id="top">               
        <div id="logo">logo</div>
        <div id="search">搜索</div>
    </div>
    <!--主内容区-->
    <div id="main">                  
        <div id="left">左侧栏：内容分类</div>
        <div id="center">中间栏：内容推介</div>
        <div id="right">右侧栏：站内公告</div>
    </div>
        <!--页脚div-->
    <div id="foot">页脚</div>
</div>
</body>
</html>

实现步骤：

1.将页面用div分块

​ 首先在整体上考虑如何用div对其分块，即考虑网页需要划分为几个部分，每个部分所显示的主要内容或功能。

​ 网页排版通常可以采用上中下结构、左右结构或者三列结构。例如采用上中下结构，可以先把页面分成三块，从上到下依次排列为页眉块、主体块和页脚块，将这三个块放在一个父div中，方便整体调整和后期排版维护，最后根据具体内容调整分块中所包含的子块数目和布局方式。

2.设计各分块位置

​ 通过使用CSS语法，可以对div块进行定位和样式设置。

3.设计各分块细节

​ 分块完成后，就需要设计各块的细节，当然每个div中的细节内容也是各种各样的盒子，对这些盒子分块进行排版设计即可完成整个设计。

3.4 设计超链接/菜单样式

​ 超链接是网页中使用比较频繁的HTML元素，因为网站的各种页面都是由超级链接串接而成。HTML部分学习的超链接主要是从它的作用和链接形式出发，本章在正式学习布局之前，我们有必要对超链接特别是导航部分超链接的样式进行了解。

3.4.1 超链接样式变换

3.4.2 按钮式超链接

​ 很多网页上都有各种按钮式超链接，这些效果一般是采用图片作为按钮，图片链接不易于搜索引擎检索关键字，本节通过CSS样式来制作按钮效果。

<!DOCTYPE html>
<html>
<head>
<title>按钮式链接</title>
<style type="text/css">
body{
    text-align:center;
}
/* 导航条的样式设置 */
#navi{
    font-size:14px;
    margin:0 auto;
    width:960px;
}
/*导航条部分链接样式的设置*/
#navi a{             /*链接通用样式*/
    display:block;      /*显示为块级元素*/                          
    float:left; /*浮动在左*/
    width:100px;       /*宽100像素*/ 
    color:white; 
    font-family:微软雅黑,黑体,宋体;
    text-decoration:none;        /*无下划线*/ 
    margin:2px;               /*按钮的外边距*/   
    padding:6px 15px;
    border-radius:2px;
}
#navi a:link,#navi a:visited{       /* 未访问和访问链接样式*/
    background:linear-gradient(#684621,#ddaf7c);    /*渐变背景*/
    /* 左上边框颜色相同，右下边框颜色相同*/
    border-top:#cccccc 1px solid;
    border-left:#cccccc 1px solid;
    border-right:#0d0503 1px solid;
    border-bottom:#0d0503 1px solid;    
}
#navi a:hover{      /* 鼠标经过时的超链接 */         
    background:#724b20;
    /* 左上边框和右下边框颜色调换*/
    border-bottom:#cccccc 1px solid;
    border-right:#cccccc 1px solid;
    border-left:#0d0503 1px solid;
    border-top:#0d0503 1px solid;
}
</style>
</head>
<body>
<div id="navi">
    <a href="#">回到首页</a>
    <a href="#">中心概况</a>
    <a href="#">组织机构</a>
    <a href="#">人才队伍</a>
    <a href="#">创新方向</a>
    <a href="#">人才培养</a>
    <a href="#">政策文件</a>
</div>
</body>
</html>

3.4.3 使用列表制作菜单

​ 当列表的项目符号通过list-style-type设置为none时，可以制作出各式各样的菜单和导航条，这也是列表最大的用处之一，结合CSS属性的变换可以达到意想不到的导航效果。

3.4.3.1 使用列表制作垂直菜单

<!DOCTYPE html>
<html>
<head>
<title>用列表制作垂直菜单</title>
<style type="text/css">
body{
    background-color:#6cc1ea;
    text-align:center;
}
/*导航菜单样式设置*/
#navi{                          /*导航盒子的样式*/
    width:160px;
    font:14px 微软雅黑,黑体,宋体;
    margin:0 auto;
}
#navi ul {                           /*导航条中列表的样式*/
    list-style-type:none;        /* 无项目符号 */
    padding:0px;
}
#navi li {           /*导航条中列表项的样式*/
    border-bottom:1px solid #6cc1ea;   /* 添加分隔线 */
    width:160px;
}
#navi li a{                     /*链接通用样式*/
    display:block;              /* 区块显示 */
    padding:10px;
    text-decoration:none;                 /* 无下划线 */   
    border-left:20px solid #0f155f;     /* 左边的粗边框 */
    border-right:1px solid #0f155f;     /* 右侧边框 */
    color:white;
}
#navi li a:link, #navi li a:visited{  
        background-color:#353eae;              /*已访问和未访问链接的背景色*/
}
#navi li a:hover{               
        background-color:#2d3494;       /* 鼠标经过链接时改变背景色 */
}
</style>
</head>
<body>
<div id="navi">
    <ul>
        <li><a href="#">百卡商城</a></li>
        <li><a href="#">最新活动</a></li>
        <li><a href="#">品牌故事</a></li>
        <li><a href="#">会员中心</a></li>
        <li><a href="#">门店信息</a></li>
        <li><a href="#">预约中心</a></li>
        <li><a href="#">官方微博</a></li>
    </ul>
</div>
</body>
</html>

3.4.3.2 使用列表制作水平菜单

​ 与垂直菜单相较，最主要的变化是垂直菜单变为水平菜单，这里需要使用浮动属性float，通过“float: left;”将各个列表项水平显示。

<!DOCTYPE html>
<html>
<head>
<title>用列表制作水平菜单</title>
<style type="text/css">
body{
    background-color:#6cc1ea;
    text-align:center;
}
/*导航菜单样式设置*/
#navi{                      /*导航盒子的样式*/
    width:960px;
    font:14px 微软雅黑,黑体,宋体;
    margin:0 auto;
}
#navi ul {                           /*导航条中列表的样式*/
    list-style-type:none;        /* 无项目符号 */
    padding:0px;
}
#navi li {           /*导航条中列表项的样式*/
    float:left;
    width:130px;
    margin:3px;
}
#navi li a{                     /*链接通用样式*/
    display:block;              /* 区块显示 */
    padding:10px;
    text-decoration:none;                 /* 无下划线 */   
    border-left:20px solid #0f155f;     /* 左边的粗边框 */
    border-right:1px solid #0f155f;     /* 右侧边框 */
    color:white;
}
#navi li a:link, #navi li a:visited{  
        background-color:#353eae;              /*已访问和未访问链接的背景色*/
}
#navi li a:hover{               
        background-color:#2d3494;       /* 鼠标经过链接时改变背景色 */
}
</style>
</head>
<body>
<div id="navi">
    <ul>
        <li><a href="#">百卡商城</a></li>
        <li><a href="#">最新活动</a></li>
        <li><a href="#">品牌故事</a></li>
        <li><a href="#">会员中心</a></li>
        <li><a href="#">门店信息</a></li>
        <li><a href="#">预约中心</a></li>
        <li><a href="#">官方微博</a></li>
    </ul>
</div>
</body>
</html>

3.5 板式布局

​ 网页的排版布局主要通过CSS实现，本节学习常用的布局版式，主要介绍基本的单列布局、两列布局、三列布局和通栏布局，其它复杂版式布局均可在此基础上扩展变化得来。

3.5.1 版心和布局流程

​ 说到布局就不得不提到“版心”，因为网页中的大部分布局都需要在“版心”内完成，这和纸媒中的“版心”是相似的。所谓“版心”是指网页中主体内容所在的区域。“版心”一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px和1000px等。

​ 布局时通常要遵守一定的布局流程：

  1. 确定页面的版心。

  2. 分析页面中的行模块，分析每个行模块中的列模块。

  3. 通过DIV+CSS布局来控制各个模块的样式。

3.5.2 单列布局

​ 单列布局是网页布局的基础，所有复杂的布局都可以在此基础上演变而来。

/*文件 3_5_2.css*/
/*设置body元素样式*/
body{
    margin:0px;
    text-align:center;
    font:20px/2 微软雅黑,黑体,宋体;
}
div{
    border:1px solid #000;
    margin:5px;
}
#container{          /*外层父div样式*/
    margin:0 auto;
    width:980px;
}
#top{ height:90px; }
#navi{ height:40px; }
#focus{ height:210px; }
#main{ height:200px; }
#foot{ height:80px; }

 

<!DOCTYPE html>
<html>
<head>
<title>单列布局版式示意</title>
<link href="3_5_2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="container">                 <!--全局父div-->              
    <div id="top">页眉#top</div>               
    <div id="navi">导航#navi</div>
    <div id="focus">焦点#focus</div>
    <div id="main">主内容#main</div>
    <div id="foot">页脚#foot</div>
</div>
</body>
</html>

3.5.3 两列布局

​ 单列布局简单清晰、统一有序，但有时不免有些呆板，并且在信息量大时会显得区域划分不够精细，此时可以考虑采用两列布局。两列布局和一列布局类似，只是网页内容被分为左右两部分。

/*文件:3_5_3.css*/
body{
    margin:0px;
    text-align:center;
    font:20px/2 微软雅黑,黑体,宋体;
}
div{  
    border:1px solid #000;
    margin:9px;
}
#container{                 
    margin:0 auto;
    width:960px;
}
#top{ height:180px;}
#navi{ height:30px; }
#main{ height:540px; }
#left{
    float:left;
    width:200px;
    height:360px;
}
#right{
    float:right;
    width:700px;
    height:520px;
}
#foot{ padding:20px;}

 

<!DOCTYPE html>
<html>
<head>
<title>两列布局</title>
<link href="3_5_3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
    <div id="top">页眉#top</div>
    <div id="navi">水平导航栏#navi</div>
    <div id="main">
        <div id="left">左侧导航栏#left</div>
        <div id="right">右侧内容#right</div>
    </div>
    <div id="foot">页脚#foot</div>
</div>
</body>
</html>

3.5.4 三列布局

​ 对于一些大型网站，由于内容分类较多，通常需要采用“三列布局”的页面排版方法。本质上三列布局和两列布局没有太大区别，只是在主体内容区分成了左、中、右三列。

/*文件:3_5_4.css*/
/*body的样式*/
body{
    margin:0px;
    text-align:center;
    font:28px/2 微软雅黑,黑体,宋体;
}
div{
    border:1px solid #000;
    margin:5px;
}
/*父容器#container的样式*/
#container{
    margin:0 auto;
    width:960px;
    height:1100px;
}
​
#top{ height:100px; }
#focus{ height:200px;}
#navi{ height:50px; }
#main{ height:540px; }
#left,#center,#right{     /*主内容区三个子div的样式*/
      float:left;
      width:290px;
      height:500px;
      margin:10px;
}
#foot{ height:150px;}

 

<!DOCTYPE html>
<html>
<head>
<title>三列布局</title>
<link href="3_5_4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
	<div id="top">页眉#top</div>  
	<div id="focus">焦点#focus</div>             
	<div id="navi">导航#navi</div>
	<div id="main">
    	<div id="left">主内容区左侧列#left</div>
		<div id="center">主内容区中间列#cener</div>
		<div id="right">主内容区右侧列#right</div>
    </div>
	<div id="foot">页脚#foot</div> 
</div>
</body>
</html>

3.5.5 通栏布局

​ 目前主流网站更流行的一种做法是：将一些水平模块，如页眉、导航、焦点图或页脚等用通栏显示。

​ 本节我们将前文单列布局和三列布局的案例改造成通栏布局。这里HTML文件几乎没有变化，我们把重点放在CSS文件，可以不再使用父层#container，分别对横向每个盒子设置margin和宽度属性，通栏的宽度设置为100%。当然有些情况也保留#container并将其设置为100%，这些细节在设计时读者可自行决定。

/*文件:3_5_5.css*/
/*设置body元素样式*/
body{
	margin:0px;
	text-align:center;
	font:20px/2 微软雅黑,黑体,宋体;
}
#top{
	width:100%;
	height:90px;
	background:#FF9; 
}
#navi{
	margin:0 auto;
	width:980px; 
	height:40px; 
	background:#F66;
}
#focus{
	margin:0 auto;
	width:980px; 
	height:210px;
	background:#FC9;
}
#main{ 
	margin:0 auto;
	width:980px; 
	height:200px;
	background:#FF3; 
}
#foot{
	width:100%; 
	height:80px; 
	background:#F96;	
}

 

<!DOCTYPE html>
<html>
<head>
<title>单列通栏布局版式示意</title>
<link href="3_5_5.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="top">页眉#top</div>               
<div id="navi">导航#navi</div>
<div id="focus">焦点#focus</div>
<div id="main">主内容#main</div>
<div id="foot">页脚#foot</div>
</body>
</html>

 

/*文件:3_5_5_2.css*/
/*body的样式*/
body{
	margin:0px;
	text-align:center;
	font:28px/2 微软雅黑,黑体,宋体;
}
/*父容器#container的样式*/
#container{
	margin:0;
	width:100%;
	height:1100px;
}

#top{ 
	height:100px;
	background:#cef091;
}
#focus{
	height:200px;
	background:#70c17f;
}
#navi{
	height:50px;
	background:#cef091; 
}
#main{
	margin:0 auto;
	width:960px; 
	height:540px; 
	background:#7c5e46;
}
#left,#center,#right{     /*主内容区三个子div的样式*/
	  float:left;
      width:290px;
      height:500px;
	  margin:15px;
	  background:#f3de47;
}
#foot{ 
	height:150px;
	background:#cef091;
}

 

<!DOCTYPE html>
<html>
<head>
<title>三列通栏布局结构</title>
<link href="3_5_5_2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
	<div id="top">页眉#top</div>  
	<div id="focus">焦点#focus</div>             
	<div id="navi">导航#navi</div>
	<div id="main">
    	<div id="left">主内容区左侧列#left</div>
		<div id="center">主内容区中间列#cener</div>
		<div id="right">主内容区右侧列#right</div>
    </div>
	<div id="foot">页脚#foot</div> 
</div>
</body>
</html>

 

 

4.本章总结

4.1 总结本章知识点

4.2 面试题答案

4.2.1 什么是流动模型

​ 正常流向(流动模型)是预先设定的定位方式。默认情况下网页布局就是按文档流的正常流向，即按HTML的结构顺序。由上而下、由左至右这样的走向就是所谓的正常流向，浏览器也是依据这样的走向来解译我们的编码。

4.2.2 网页中基本的布局方式有哪些

​ 网页中的基本布局方式:单列布局，两列布局，三列布局，通栏布局。

 

5.上机练习

5.1 任务一

5.2 任务二

5.3 任务三

5.4任务四

 

 

CiCi喜之郎
关注
HTML 第六章 CSS + DIV实现整体布局
03-22
NULL 博文链接：https://hotstrong.iteye.com/blog/1007472
vue-float-menu：V可自定义的Vue浮动菜单
02-15
:OK_hand: 菜单到屏幕上的任何位置。 :glasses: 智能菜单系统会检测屏幕边缘并自动翻转菜单。 :thumbs_up: 支持嵌套菜单。 :keyboard: 键盘可访问。 :rainbow: 支持自定义。 :flexed_biceps: 用。 :toolbox: ...
HTML第六章总结
weixin_30878361的博客
11-28 213
Something Serious of HTML 这一章节主要讲了 HTML 的历史，还有如何使得 HTML 更加规范。 HTML's Brief History 在 HTML4 之前，structure 和 presentation 没有分开，并且需要同时为 Internet Explorer 和 Netscape Browser 做两个网页，之后在 World Wide Corsort...
HTML第六章
最新发布
m0_70504301的博客
09-08 361
none(无边框) hidden(隐藏边框) dotted(点线边框) dashed(虚线边框) solid(实线边框) double(双线边框)groove(3D凹槽边框) ridge(3D凸起边框) inset(3D内嵌边框) outset(3D外嵌边框)盒子模型总尺寸=boder+margin+padding+内容宽度。四个属性值按顺时针排列。四个属性值按顺时针排列。
CSS 盒子模型【快速掌握知识点】
久绊A的博客
02-24 1351
CSS 盒子模型【快速掌握知识点】、什么是盒子模型边框border-color边框粗细border-width、边框样式border-style、外边距margin、内边距padding、圆角边框、圆形、盒子阴影
【Html】流动模型（一）
O(∩_∩)O
12-10 1169
先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 流动布局模型具有2个比较典型的特征： 第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度
Web入门初学者纯静态页面练习 HTML+CSS 布局、浮动练习
11-23
这个“Web入门初学者纯静态页面练习”是针对那些刚刚接触Web前端开发的学习者设计的，旨在帮助他们掌握HTML和CSS的基本概念以及布局与浮动的设计技巧。 HTML是网页内容的结构语言，它定义了网页的各个元素，如标题...
Web-前端html+css从入门到精通 164. column分栏布局.zip
05-23
首先，HTML5引入了一些新的标签，如`<article>`、`<section>`和`<aside>`等，这些可以帮助我们更好地结构化页面内容，但它们本身并不具备分栏布局的功能。要实现分栏布局，我们需要依赖CSS。 CSS中有多重方法可以...
十个静态页面展示-练习 HTML-CSS
12-12
这个压缩包文件包含了 01-HTML-CSS 这个子文件夹，里面很可能是多个 HTML 和 CSS 文件，用于演示和练习不同的页面布局和样式设计。 首先，我们从 HTML（HyperText Markup Language）开始。HTML 是构建网页的基础，...
Day06-CSS布局-浮动
07-10
在Web开发中，CSS布局是构建网页结构的关键技术之一，而“浮动”（Float）是CSS布局中一个重要的概念，它主要用于创建多列布局和实现图文混排效果。本篇文章将深入探讨CSS浮动的原理、用途以及如何在实践中应用。 ...
FlowMenuAnimation：流动菜单动效.zip
09-25
FlowMenuAnimation：流动菜单动效.zip,流动流菜单动效
HTML学习笔记之第六章：HTML框架
永不止步
02-10 443
前言：关于本章节的内容，并非全部是个人原创，只是在学习中的总结笔记。难免有与其他学习网站或者博客相同之处，如有类同，各位大神莫怪!!!此资料只是用来学习和工作的参考，并不作为商业用途。希望与大家一起分享，共同进步!!!第六章：HTML框架框架简介通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。框架将浏览器划分成不同的部分，每一...
【Html】流动模型（二）
O(∩_∩)O
12-10 501
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行） 右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。
html第六章上机全部分类,HTML第六章(示例代码)
weixin_42512483的博客
06-20 653
第六章 盒子模型1.什么是盒子模型：CSS中盒子模型的概念就是，CSS将网页中所有元素都看成一个个盒子。2.盒子模型的边框、内边距和外边距属性：盒子模型的属性图示边框border内边距Padding外边距margin高height宽width3.盒子模型层次关系：①首先是盒子的主要标识：边框(border)位于盒子的第一层②其次是元素内容(content)、内边距(padding)两者位于第二层③...
html流动模型,css布局模型全面了解
weixin_39900736的博客
06-09 95
css是网页的外衣，好不好看全凭css样式，而布局是css中比较重要的部分，下面来分析一下常见的几种布局。流动模型流动模型是网页布局的默认模式，也是最常见的布局模式，他有两个特点：1.块状元素都在所处包含元素内自上而下按顺序垂直延伸分布。常见的块状元素有：div,p,ul,ol,h1~h6,address等2.内联元素都会在所处包含元素内从左到右水平分布显示。常见的内联元素有：a,span,img...
HTML与CSS教学-第六章 HTML网页中的图片
flyuniverse_shell的专栏
03-12 2795
第六章 HTML网页中的图片 本章要点 img标记 网页中图片的属性 图文混排 使用CSS样式表设置图片属性 目录： 6.1 在网页中加入图片 6.2 图片与文字的排版 6.3 网页背景图片 6.4 利用CSS样式在网页中加入图片 6.1 img标记及其属性 src  图像的源文件 alt  提示文字 width,height  宽度、高度 b
【CSS布局模型】流动模型、浮动模型、层模型
08-06 147
流动模型 流动是默认的网页布局格式，默认情况下HTML元素都根据该模式来分布网页内容。 该模型下有两个特征元素 块状元素 顾名思义，他是一个方块， - 块状元素在默认情况下于包含元素中自上而下垂直排布。 - 默认情况下，宽度为100%，所以实际上块状元素都独占一行。 高度宽度、行高以及顶和底边距都可设置。 内联元素...
HTML5第六章 嵌入元素
weixin_39597587的博客
03-13 292
第六章嵌入元素元素名称 描述 img 图片 map 定义分区响应图 iframe 嵌入文档 embed 嵌入插件 progress 进度条 meter 范围值 img私有属性 属性名称 描述 src 图片的路径url alt 当图片加载不出来的时候,给用户的提示 width 图片宽度 height 图片高度 ismap 创建服务端分区响应图 usemap 关联&lt;m...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CiCi喜之郎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值