千家信息网

CSS美化网页控件的代码怎么写

发表于:2024-10-06 作者:千家信息网编辑
千家信息网最后更新 2024年10月06日,这篇文章主要讲解了"CSS美化网页控件的代码怎么写",文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习"CSS美化网页控件的代码怎么写"吧!1)编写CSS几种
千家信息网最后更新 2024年10月06日CSS美化网页控件的代码怎么写

这篇文章主要讲解了"CSS美化网页控件的代码怎么写",文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习"CSS美化网页控件的代码怎么写"吧!

1)编写CSS几种方式:

1.1标签的style属性实现标签装饰(装饰功能不能重复使用:极少用到)

2)标签常用属性

2.1 height:48px 高度

2.2 border:边框(属性:宽,样式,颜色)

2.3 width:%80 宽度(写法:像素:百分比)

2.4 font-size:16px 字体大小

2.5 text-align:center 居中

2.6 line-height:48px 字符串放在像素大小的中间

2.7 font-weight:bold 字体加粗

3)float:让标签狼起来,块级标签页可以堆叠

1 如:p标签是块级白板标签 所以一个块级标签不管字符串多少就占据一行

如果想在一行里面使用2个块级标签以上的话:

必须使用float内部属性:这样就可以让块级标签变成行内标签了

folat:left让块级标签变成行内标签,往左靠

folat:right让块级标签变成行内标签,往右靠

(注:需大于2个并且紧挨着标签,同时使用folat)

超过100%宽度就另起一行-->

格式 :

6)position内部属性(固定页面标签 )fixed、absolute、relative

1.position: fixed; 固定在页面某个位置,,浏览器滚动,跟着滚动

2.position:absolute; 绝对固定在页面某个位置,浏览器滚动,不跟着滚动(应用场景不多,但是如果和absolute+relative那么可以应用很多场景)

3.position:relative;单独使用没有任何效果配合absolute使用(标签有position:relative;那么该标签下的标签有position:absolute;这个时候:absolute标签固定在relative标签的某个位置)

4.pisition多层:应用场景当点击一个按钮的时候,跳出一个框,值可以对该框进行操作

需要使用两个内部属性配合:

z-index:9;区别层级,谁的数字大,谁就在最上层

opacity: 0.5; 透明度,0到1,0完全透明 1完全遮住

position: fixed应用场景:

1.1滚动页面的时候不管如何页面往下滚动会出现一个返回顶部

Title

头部

内容

position:relative;配合position:absolute应用场景:

absolute标签依据relative标签进行固定位置

格式:

8) :hover 当样式后面加上:hover,那么鼠标移到装饰该样式的标签,该:hover样式生效

格式

9) background-image:背景图片

background-image: url(icon_18_118.png) 添加背景图片;(默认图片横竖平铺该p空间)

background-repeat:repeat-y; 图片竖平铺,

background-repeat:repeat-x; 图片横平铺,

background-repeat:no-repeat; 不平铺,

background-position-x:0px;横向移动框内背景图片

background-position-y:-140px;竖向移动框内背景图片

background-position:0 -140px ;上面两个综合简写

格式

感谢各位的阅读,以上就是"CSS美化网页控件的代码怎么写"的内容了,经过本文的学习后,相信大家对CSS美化网页控件的代码怎么写这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是,小编将为大家推送更多相关知识点的文章,欢迎关注!

0