07.改变显示方式

最新推荐文章于 2021-07-12 22:35:19 发布

AlbertLiangzt

最新推荐文章于 2021-07-12 22:35:19 发布

阅读量416

点赞数

分类专栏：学习笔记-Javaweb 文章标签： html css

本文链接：https://blog.csdn.net/AlbertLiangzt/article/details/62057024

版权

学习笔记-Javaweb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

元素的显示方式

1.有哪些方式?

1)块元素

有宽高,垂直排列
h,p,ol,ul,div,table,form

2)行内元素

无宽高,水平排列
span(i,em,b,strong,u,del),a,label

3)行内块元素

有宽高,水平排列
img,input,select,textarea

2.如何修改显示方式?

块: display:block;
行内: display:inline;
行内块: display:inline-block;

隐藏(*): display:none;

<style>
    p { display: inline; }
    span { display: block; }
    img { display: block; }
    div { display: none; }      /*所有div隐藏*/
    div { display: block; }     /*所有div显示*/
</style>
<body>
    <div>
        <p>paragraph</p>
        <p>paragraph</p>
        <p>paragraph</p>
    </div>
    <div>
        <span>span</span>
        <span>span</span>
        <span>span</span>
    </div>
    <div>
        <img src=”1.jpg”/>
        <img src=”2.jpg”/>
        <img src=”3.jpg”/>
    </div>
</body>

改变鼠标形状

默认情况下：

鼠标悬停在链接上，从指针变为手形

鼠标悬停在文本区域，显示Ⅰ形状

鼠标悬停在按钮，会显示为箭头

可以使用cursor属性指定光标类型，提示可以进行的操作

可取值:

default “mouse”
pointer “hand”
crosshair: ╂
text Ⅰ
wait ◎
help等？

img:hover{
    cursor: pointer;
}

AlbertLiangzt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
07.改变显示方式

元素的显示方式1.有哪些方式?1)块元素有宽高,垂直排列h,p,ol,ul,div,table,form2)行内元素无宽高,水平排列span(i,em,b,strong,u,del),a,label3)行内块元素有宽高,水平排列img,input,select,textarea2.如何修改显示方式?块: display:block;行内: display:inline;行内块
复制链接

扫一扫