web前端之HTML中的div
生活随笔
收集整理的這篇文章主要介紹了
web前端之HTML中的div
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
HTML <div> 元素
HTML <div> 元素是塊級(jí)元素，它是可用于組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外，由于它屬于塊級(jí)元素，瀏覽器會(huì)在其前后顯示折行。
如果與 CSS 一同使用，<div> 元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。
<div> 元素的另一個(gè)常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。
?
程序演示：
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>?
轉(zhuǎn)載于:https://www.cnblogs.com/ztyy04126/p/4909118.html
總結(jié)
以上是生活随笔為你收集整理的web前端之HTML中的div的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【openCV学习笔记】在Mac上配置o
- 下一篇： 服务器导出服务器时间转换浏览器端时区