这篇文章主要讲解了“CSS美化网页控件的代码怎么写”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS美化网页控件的代码怎么写”吧！
1.1标签的style属性实现标签装饰（装饰功能不能重复使用：极少用到）
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 字体加粗
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滚动页面的时候不管如何页面往下滚动会出现一个返回顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header01{ height: 48px; background-color: black; color: #dddddd; position: fixed; top:0; right: 0; left: 0; }/*position: fixed; 固定页面的位置，并且把该p从背景层（底层）变底层上层固定在 top right left:距离顶部、左、右 0px距离这样以后就不管你页面往下滚动，该p一直存在该浏览器页面的顶部*/ .pg-body01{ background-color: #dddddd; height: 5000px; margin-top: 50px; }/*背景层（底层）试验position写的装饰功能margin-top偏离顶部50px这样才不会被盖住（后期就不需要了，因为可以利用display隐藏固定p*/ </style></head><body> <p class="pg-header01">头部</p><!-- 调用pg-header01装饰，达到不管你如何在浏览器滚动页面，该p永远在页面顶部--> <p class="pg-body01">内容</p><!--背景层（底层）试验positionn该内部参数--></body></html>
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 ;上面两个综合简写
格式
<p > </p><!--background-image: url(icon_18_118.png) 背景图片；默认图片横竖平铺该p空间--> <p > </p><!--background-image: url(icon_18_118.png) 背景图片；background-repeat:repeat-y; 图片竖平铺，background-repeat:repeat-x; 图片横平铺，--> <p > </p><!--background-image: url(icon_18_118.png) 背景图片；background-repeat:no-repeat; 不平铺，--> <p > </p><!--background-image: url(icon_18_118.png) 背景图片；background-repeat:no-repeat; 不平铺，background-position-x:0px;横向移动背景图片background-position-y:-140px;竖向移动北京图片background-position:0 -140px ;上面两个综合简写-->
感谢各位的阅读，以上就是“CSS美化网页控件的代码怎么写”的内容了，经过本文的学习后，相信大家对CSS美化网页控件的代码怎么写这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
