【HTML+CSS3】常用操作（自用）

最新推荐文章于 2023-05-20 19:12:38 发布

Tshaxz

最新推荐文章于 2023-05-20 19:12:38 发布

阅读量176

点赞数

本文链接：https://blog.csdn.net/Tshaxz/article/details/112169827

版权

1. 按钮美化

#IDname{
            width: 270px; /* 宽度 */
            height: 40px; /* 高度 */
            border-width: 0px; /* 边框宽度 */
            border-radius: 3px; /* 边框半径 */
            background: #1E90FF; /* 背景颜色 */
            cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
            outline: none; /* 不显示轮廓线 */
            font-family: Microsoft YaHei; /* 设置字体 */
            color: white; /* 字体颜色 */
            font-size: 17px; /* 字体大小 */
        }
        #IDname:hover{
            background: #5599FF;
        }

效果图：
在这里插入图片描述

2.文本框美化

input{
            outline-style: none ;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 13px 14px;
            width: 620px;
            font-size: 14px;
            font-weight: 700;
            font-family: "Microsoft soft";
        }

效果图：
在这里插入图片描述

3.在HTML文档中插入图片覆盖全部页面

如果需要多次使用的话可以在CSS文件里写，如果只用一次的话可以直接写在中用<style = “text/css”>内嵌式写法。
这里采用内嵌式写法：

<style type="text/css">
        body{
            background: url("图片地址");
            background-repeat: no-repeat;
            background-size:100% 100%;
            background-attachment: fixed;
        }  
</style>