本文摘自PHP中文网,作者不言,侵删。
这篇文章给大家介绍的内容是关于HTML5中div标签的实例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
< title >Document</ title >
< style >
/* 块元素的特点
1.默认宽度 父元素的百分百;一致
2.霸占一行
3.支持全部样式
*/
.box{
width: 100px;
height: 50px;
background-color: red;
}
span{
/* 1.行内元素排列一行,遇到边界 会自动换行 */
background-color: red;
/* 2.宽高有内容决定 不支持宽高 不支持margin上下 */
width: 200px;
height: 200px;
margin: 100px 20px;
/* 3.padding上下有问题 */
/* padding: 50px 20px; */
}
</ style >
</ head >
< body >
< p class = "box" ></ p >
< p >段落</ p >
< h1 >标题标签</ h1 >
< ol >
< li >有序1</ li >
< li >有序2</ li >
< li >有序3</ li >
< li >有序4</ li >
< li >有序5</ li >
</ ol >
< ul >
< li >无序1</ li >
< li >无序2</ li >
< li >无序3</ li >
</ ul >
< dl >
< dt >title</ dt >
< dd >定义列表</ dd >
< dd >定义列表</ dd >
< dd >定义列表</ dd >
</ dl >
< form action = "" >
< label for = "" >标注</ label >
< input type = "text" name = "" id = "" >
</ form >
< span >行内元素</ span >
< span >行内元素</ span >
</ body >
</ html >
|
运行效果如下:
相关推荐:
HTML5属性:form表单属性的用法实例
HTML5的option属性:如何使用option属性实现级联下拉列表
以上就是HTML5中div标签的实例代码的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5中div标签的实例代码
更多相关阅读请进入《HTML5中div标签》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5中div标签的实例代码