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

HTML5 1.7 div元素与布局

2016-03-09 20:51 399 查看
1.元素的分类

a.块元素，会产生换行效果，自动与其他元素分离成两行；通常可以作为容器在内部添加其他元素。

如：h1~h6，hr，ul，ol，p，table

b.内部元素，不会产生换行效果

如：b，i，br，img

2.div元素与布局

a.div是通用的块元素，内部可以包含其他元素包括其他div元素。并且可以通过css设置样式

[b]A[/b]

<!DOCTYPE html>

< html lang="zh-cn">

<head>

<meta charset="UTF-8">

<title>例7</title>

</head>

<body>

<div style=“width：100%；height:708px;”>

<div style=”background：green；width：100%；height：10%“>我是标题</div>

<div style=”background：blue；width：20%；height：80%； float=left；>我是导航栏</div>

<div style=”background：red；width：80%；height：80%； float=left；>我是内联框架</div>

<div style=”background：yellow；width：100%；height：10%； float=left；>我是尾部</div>

</div>

</body>

</html>

[b]B
[/b]

<!DOCTYPE html>

< html lang="zh-cn">

<head>

<meta charset="UTF-8">

<title>例7</title>

<style type=”text/css“>

#div1{style=“width：100%；height:708px;”}

#div1{style=”background：green；width：100%；height：10%“}

#div1{style=”background：blue；width：20%；height：80%； float=left；“}

#div1{style=”background：red；width：80%；height：80%； float=left；“}

#div1{style=”background：yellow；width：100%；height：10%； float=left；}

</style>

</head>

<body>

<div id=”div1”>

<div id=”div2“>我是标题</div>

<div id=”div3“>我是导航栏</div>

<div id=”div4“>我是内联框架</div>

<div id=”“div5“>我是尾部</div>

</div>

</body>

</html>

[b]c
[/b]

<!DOCTYPE html>

< html lang="zh-cn">

<head>

<meta charset="UTF-8">

<title>例7</title>

<style type=”text/css“>

.class1{background:red}

#div1{style=“width：100%；height:708px;”}

#div1{style=”background：green；width：100%；height：10%“}

#div1{style=”background：blue；width：20%；height：80%； float=left；“}

#div1{style=”background：red；width：80%；height：80%； float=left；“}

#div1{style=”background：yellow；width：100%；height：10%； float=left；}

</style>

</head>

<body>

<div id=”div1”>

<div id=”div2“>我是标题</div>

<div id=”div3“>我是导航栏</div>

<div id=”div4“>我是内联框架</div>

<div id=”“div5“>我是尾部</div>

</div>

<b title="我可以加粗文字">我是b标签</b>

<bdo dir="rtl">文字走向</bdo>

<p dir="rtl">我是段落1234567889</p>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航