web前端之HTML中的div

HTML <div> 元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

程序演示：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>div布局</title>
 6         <style type="text/css">
 7             .contain{ 8                 width: 500px;
 9
10             }
11             .title{12                 margin: 0;
13                 height: 50px;
14                 background: gray;
15                 font-size: 14px;
16             }
17             .menu{18                 margin: 0;
19                 width: 200px;
20                 height: 250px;
21                 background: yellow;
22                 float: left;
23             }
24             .content{25                 margin: 0;
26                 background-color: beige;
27                 width: 300px;
28                 height: 250px;
29                 float: left;
30             }
31             .foot{32                 margin: 0;
33                 background: gray;
34                 text-align: center;
35                 clear: both;
36             }
37         </style>
38     </head>
39     <body>
40         <div class="contain">
41             <div class="title">
42                 <h1>Main title of web page</h1>
43             </div>
44             <div class="menu">
45                 <h2>menu</h2>
46                 <ul >
47
48                     <li>HTML</li>
49                     <li>CSS</li>
50                     <li>JavaScript</li>
51                 </ul>
52             </div>
53             <div class="content">
54                 Content goes here
55             </div>
56             <div class="foot">
57                 Copyright W3School.com.cn
58             </div>
59         </div>
60     </body>
61 </html>

转载于:https://www.cnblogs.com/ztyy04126/p/4909118.html

web前端之HTML中的div相关推荐

JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...
Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
Web前端，CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...
props写法_好程序员web前端培训React中事件的写法总结
好程序员web前端培训React中事件的写法总结,React的事件处理和DOM元素很相似,但是语法上是有不同的: 1.react事件采用驼峰命名法,而不是纯小写. 驼峰命名法(camelCase):命 ...
【从0到1学Web前端】javascript中的ajax对象（一）
[从0到1学Web前端]javascript中的ajax对象(一) 如今最流行的获取后端的(浏览器从server)数据的方式就是通过Ajax了吧.今天就来具体的来学习下这个知识吧.假设使用ajax来訪 ...
Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 "盒子&qu ...
html去掉nav的圆点,web前端分享HTML5中的nav标签
web前端分享HTML5中的nav标签,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a page that l ...
web前端分享HTML5中的nav标签学习笔记
好程序员web前端分享HTML5中的nav标签学习笔记,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a pag ...

web前端之HTML中的div

HTML <div> 元素

web前端之HTML中的div相关推荐

最新文章

热门文章