网站设计存在的问题,wordpress模板安装教程,wordpress移动端底部导航,更改网站伪静态目录
CSS显示模式简介
CSS显示模式的分类
块元素
行元素
行内块元素
元素显示模式的转换
使块内文字垂直居中的方法
设计简单小米侧边栏#xff08;实践#xff09; CSS显示模式简介
元素显示模式就是元素#xff08;标签#xff09;以什么方式进行显示#xff0…目录
CSS显示模式简介
CSS显示模式的分类
块元素
行元素
行内块元素
元素显示模式的转换
使块内文字垂直居中的方法
设计简单小米侧边栏实践 CSS显示模式简介
元素显示模式就是元素标签以什么方式进行显示比如div/div自己占一行比如一行可以放多个span/span。当网页的标签非常多在不同地方会用到不同类型的标签了解他们的特点可以更好的布局网页
CSS显示模式的分类
块元素
常见的块元素有以下标签
标题标签
h1/h1~h6/h6段落标签
p/pdiv/div无序列表标签
ulli/lili/li
/ul
有序列表标签
olli/lili/li
/ol
其中div/div是典型的块元素标签
块元素标签的特点
每一个标签独占一行。高度宽度、外边距以及内边距都可以控制。宽度默认是容器父级宽度的100%。一个容器及盒子里面可以放行内或者块级元素 文字类的元素内不能放块级元素例如p/p中不可以放块级元素特别是不能放div /div同理 h1/h1~h6/h6等都是文字类块级标签里面也不能放其他块级元素
示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title块元素/titlestylediv{width: 200px;height: 200px;background-color: red;}h1 {background-color: blue;}/style
/head
bodyh1这是一段内容/h1div这是一段内容/div
/body
/html
效果如下 如果在文字类标签中放入可以放置任何内容的块元素则会出现问题
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title块元素/titlestylediv{width: 200px;height: 200px;background-color: red;}h1 {background-color: blue;}/style
/head
bodyh1这是一段内容/h1pdiv这是一段内容/div/pdiv这是一段内容/div
/body
/html
问题如下 行元素
常见的行元素标签
链接标签
a/a粗体标签
strong/strong
b/b斜体标签
em/em删除线标签
del/del
s/s下划线标签
ins/ins
u/uspan/span
span/span标签是最典型的行内元素。有的地方也将行内元素称为内联元素
行内元素的特点
相邻行内元素在一行上一行可以显示多个高、宽直接设置是无效的默认宽度就是它本身内容的宽度行内元素只能容纳文本或其他行内元素 链接里面不能再放链接特殊情况链接 a/a里面可以放块级元素但是给 a/a 转换一下块级模式最安全
示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title行元素/titlestylespan {width: 200px;height: 200px;background-color: red;}/style
/head
bodyspan这是一段内容/span
/body
/html
效果如下 行内块元素
常见的行内块标签
img /
input /
td/td
行内块元素同时具有块元素和行内元素的特点
和相邻行内元素或者行内块元素在一行上但是他们之间会有空白缝隙。一行可以显示多个行内块元素行内元素特点。默认宽度就是它本身内容的宽度行内元素特点。高度行高、外边距以及内边距都可以控制块级元素特点。
元素显示模式的转换
即一个模式的元素需要另外一种模式的特性比如想要增加链接 a/a的触发范围
转换方式
转换为块元素display: block;转换为行内元素display: inline;转换为行内块display: inline-block;
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title行内块元素/titlestyle/* 将a标签转换为行内块元素 */a {display: inline-block;width: 200px;height: 200px;background-color: red;}/style
/head
bodya href#链接/aa href#链接/a
/body
/html
效果如下 使块内文字垂直居中的方法
在CSS中没有直接对文字设置垂直居中的属性但是可以采用行高的设置来解决这个问题
当行高与当前块高度相同时文字会被上下两个间隙挤在块的中间
同理当行高大于当前块高度时则此时因为上下间隙均等分布所以上面的间隙会占据大部分的块空间从而使文字向下移动反之当行高小于当前块高度时使文字向上移动
设计简单小米侧边栏实践
参考图如下 参考小米商城链接小米商城
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title简单小米侧边栏/titlestylea {/* 设置每一个链接的大小前提是为块元素 */display: block;width: 237px;height: 50px;/* 设置每一个链接的背景颜色 */background-color: rgb(80, 85, 92);/* 设置每一个链接的文字缩进 */text-indent: 2em;/* 设置每一个链接文字的行高使内容文本垂直居中 */line-height: 50px;}/* 设置链接默认显示效果 */a:link {color: whitesmoke;text-decoration: none;}/* 设置当鼠标悬停时链接的效果 */a:hover {background-color: rgb(205, 103, 0);}/style
/head
bodya href#手机/aa href#电视/aa href#家电/aa href#笔记本 平板/aa href#出行 穿戴/aa href#耳机 音箱/aa href#健康 儿童/aa href#生活 箱包/aa href#智能 路由器/aa href#电源 配件/a
/body
/html
