南通市网站,阿克苏市建设银行网站,怎么做代刷网站长,网站搜索优化找哪家文章目录: 1. 显示模式 1.1 块级元素,行内元素,行内块元素 1.2 转换显示模式 综合案例 综合案例一 热词综合案例二 banner效果 1. 显示模式 什么是显示模式 标签(元素)的显示方式 标签的作用是什么? 布局网页的时候#xff0c;根据标签的显示模式选择合适的标签摆放内容。…文章目录: 1. 显示模式 1.1 块级元素,行内元素,行内块元素 1.2 转换显示模式 综合案例 综合案例一 热词综合案例二 banner效果 1. 显示模式 什么是显示模式 标签(元素)的显示方式 标签的作用是什么? 布局网页的时候根据标签的显示模式选择合适的标签摆放内容。 显示模式分为几种,分别是什么? 3种,块级元素,行内元素,行内块元素 1.1 块级元素,行内元素,行内块元素
块级元素 独占一行宽度默认是父级的100%添加宽高属性生效
如:div标签行内元素 一行共存多个,尺寸由内容撑开加宽高不生效
如:span标签行内块元素 一行共存多个,尺寸由内容撑开宽高属性生效
如:img标签1.2 转换显示模式
属性名: display
属性值效果block块级inline-block行内块inline行内
注意:
一般不转换为行内元素 综合案例 综合案例一 热词
设计稿如下: 代码如下:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title热词/titlestylea{width: 200px;height: 80px;display:block;background-color: #3064bb;color:#fff;text-align: center;text-decoration: none;line-height: 80px;font-size: 18px;}a:hover{background-color:#608dd9 ;}/style
/head
body
a href#HTML/a
a href#CSS/a
a href#JavaScript/a
a href#Vue/a
a href#React/a
/body
/html效果如下: 综合案例二 banner效果
代码如下:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.banner{height: 500px;background-color: #f3f3f4;background-image: url(./images/bk.png);background-repeat: no-repeat;background-position: left bottom;text-align:right;color: #333333;}.banner h2{font-size: 36px;font-weight: 400; /*去掉加粗 */line-height: 100px;}.banner p{font-size: 20px;}.banner a{width: 125px;height: 40px;background-color: #f06b1f;text-decoration: none;color: #fff;display: inline-block;line-height: 40px;text-align: center;font-size: 20px;}.banner a:hover{color: black;}/style
/head
bodydiv classbannerh2让创造产生价值/h2p我们希望小游戏平台可以提供无限的可能性让每一个创作者都可以将他们的才华和创意传递给用户。/pa href#我要报名/a/div
/body
/html效果如下:
注意:
CSS尽量不要直接美化标签,应指明具体 行内需要转换为行内块
