H5-元素类型笔记
2019-05-08 07:24:38来源:博客园 阅读 ()
注意点:
元素类型分为 块级元素 和 行内元素
块级元素:
在网页中以块的形式显示,默认情况都会占据一行,两个相邻的块级元素不会出现并列显示的元素,按照顺序自上而下排列。
块级元素可以定义自己的宽度和长度。
div:
dl:与dt、dd搭配使用
form:交互表单
h1-h6:标题
hr:水平线
ol:有序列表
ul:无序列表
p:段落
fieldset:表单字段级
colgroup-col:表单列分组元素
table-tr-td:表格及行,单元格
行内元素:
在网页中始终以行内逐个显示,没有自己的形状并且不能定义自己的宽和高,他显示的宽和高根据所包含内容的宽和高确定。
内联元素也会遵循盒模模型基本法则,如定义padding,border,margin,background等属性,但是个别属性不能正确显示。
a:锚点
b:粗体
strong:粗体
sub:下标
sup:上标
u:下划线
i:斜体
br:换行
em:强调
input:输入框
img:图片
label:表格标签
span:内联容器
textarea:富文本
可变元素:
需要根据上下文确定该元素是块元素还是内联元素。
applet:java applet
button:按钮
del:删除文本
iframe:inline iframe
ins:插入文本
map:图片区域
object:对象
script:客户端脚本
元素类型的转换
display属性:用于定义建立布局时元素生成的显示框类型
常见属性值:
none:此元素不会被显示,隐藏元素并脱离文本流
block:将元素设置为块级元素,独占一行。不设置宽度时宽度撑满一行。当元素设置了float属性后就相当于给元素加了display:block;属性
inline:在元素后面删除行符,多个元素可以在一行显示。非独占一行,不支持宽度,代码换行被解析成空格
list-item:将元素转换成列表,li 的默认类型。不设置宽度时宽度撑满一行,独占一行,支持高度设置
大部分块元素display属性值默认为block,其中列表的默认值为list-item
大部分内联元素的display属性值默认为inline,其中img,input默认值为inline-block
练习:
<!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 type="text/css"> * {margin: 0; padding: 0;} .nav {height: 60px; background: #2a063a;} .nav ul { width: 960px; margin: 0 auto; text-decoration: none; overflow: hidden;} .nav ul li {float: left; border-right: 1px #fff solid;} .nav ul li a {display: block; width: 119px; height: 60px; color: #fff; text-align: center; line-height: 60px; text-decoration: none; font-size: 18px;} .nav ul li a:hover {background: rgb(224, 28, 28);} .nav ul .last{border-right: none;} </style> </head> <body> <div class="nav"> <ul type="none"> <li><a href="#">博客首页</a></li> <li><a href="#">添加随笔</a></li> <li><a href="#">欢迎练习</a></li> <li><a href="#">订阅查看</a></li> <li class="last"><a href="#">后台管理</a></li> </ul> </div> </body> </html>
结果:
原文链接:https://www.cnblogs.com/tynam/p/10827800.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:纯 CSS 画 iphone
下一篇:怎样才能学好WEB前端
- 前端CSS五中元素定位类型 2020-06-01
- css设置overflow:hiden行内元素会发生偏移的现象 2020-05-09
- CSS的 行内元素 和 块类元素 2020-05-06
- 相邻元素margin的自动合并与float的坑 2020-04-30
- 如何配置Tomcat上web.xml让浏览器能直接下载txt,xml类型文 2020-04-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash