【CSS、JS】HTML使用小技巧

最新推荐文章于 2021-07-08 10:38:51 发布

qing_小诺

最新推荐文章于 2021-07-08 10:38:51 发布

阅读量616

点赞数

分类专栏： CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_33237207/article/details/71403936

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

现整理一下经常用到的一些属性啥的，以便后期直接copy，哈哈~

1、让html支持手机浏览器：

在网页<head></head>中加入以下代码，就可以正常显示了：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>

可以把上面的代码更改为以下代码，效果是一样的：

<meta content="width=device-width,user-scalable=no" name="viewport">

2、给body设置整屏幕背景：

<body>
<div style="position:absolute; left:0px; top:0px; width:100%; height:100%">
    <img src="pictures/background.jpg" width="100%" height="100%"/>
</div>  
</body>

注：如果想让图片不随浏览器右边滚动条滚动，就用position:fixed属性。

3、让图片在一行居中显示

在包裹img的父元素上添加text-align: center;属性。

<div style="background: #FFAC42;text-align: center;">
    <img src="images/icon_square.jpg" style="width: 7rem;height: 7rem;border: 1px solid #d3d3d3;border-radius: 3.5rem;"/>
</div>

4、想让提示性的文字placeholder变色：

        input {
            color: rgb(250, 219, 173);
        }
        input::-webkit-input-placeholder { /*Webkit browsers*/
            color: rgba(250, 219, 173, 0.5);
        }
        input:-moz-placeholder { /*Mozilla Firefox 4 to 18*/
            color: rgba(250, 219, 173, 0.5);
        }
        input::-moz-placeholder { /*Mozilla Firefox 19+*/
            color: rgba(250, 219, 173, 0.5);
        }
        input:-ms-input-placeholder { /*Internet Explorer 10+*/
            color: rgba(250, 219, 173, 0.5);
        }

5、使用rem：

        html{
            /*谷歌浏览器写62.5%会有一点兼容问题，为了谷歌.改一下倍率吧.*/
            /*100 ÷ 16 × 100% = 625%,大多数浏览器的默认字号是16px，因此原来的1rem=16px，设置之后0.16rem=16px*/
            font-size: 625%;
            font-family: "微软雅黑";
        }
        body{
            /*其实就当16px这么用了.因为设置了625%直接减去两位就可以按px方法做了*/
            font-size: 0.16rem;
        }

6、设置边框以及边框弧度：

border-radius: 10px;//圆角边框：参数表示圆角边框大小度数
border: 2px solid blue;//边框粗细为2px且边框颜色为蓝色

7、设置button能否可点击状态：

disabled=true表示不可点击。

<button id="getCode" >获取验证码</button>
<button disabled="disabled">此时按钮不可点击</button>
$("#getCode").attr("disabled",true);//不可点击状态
$("#getCode").attr("disabled",false);//可点击状态

8、在ios手机上点击后背景有颜色，解决办法：

在响应的元素上添加以下样式：

-webkit-tap-highlight-color:rgba(0,0,0,0);

9、让一个图片放在整屏幕的垂直水平居中位置：

<img class="imgCenter" src="images/3.jpg"/>

.imgCenter {
    width: 310px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

10、让一个div垂直水平居中：

让子元素设置为绝对布局，然后上下左右都设置为0，margin设置为auto即可实现居中。

html结构：

<div class="wrapper">
    <div class="content"></div>
</div>

css样式：

.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red;
}

.content {
    position: absolute;
    width: 200px;
    height: 200px;
    /*top、bottom、left和right 均设置为0*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin设置为auto*/
    margin: auto;
    border: 1px solid green;
}

效果如下：

11、去掉链接的下划线：

a{text-decoration :none}

12、去掉列表的小圆点：

ul{list-style-type:none;}

13、jquery获取时间戳（注意不要忘了引入jquery的类库）：

 var timestamp4 = $.now();
//获取的是当前时间精确到毫秒级的时间戳，实际用的时候要除以1000取整
 console.log(timestamp4);

14、js控制台输出：

console.log("test");
console.log("test-----",obj);

15、object对象转换成json字符串：

var param = new Object();
param.a = "aaa";
param.b = 520;
console.log(JSON.stringify(param));//控制台输出'{"a":"aaa","b":520}'

16、jQuery中获取单选框选中的值：

<div>
    <input type="radio" value="苹果aaa" name="like_fruit">苹果
    <input type="radio" value="香蕉bbb" name="like_fruit">香蕉
    <input type="radio" value="橙子ccc" name="like_fruit">橙子
    <input type="radio" value="芒果bbb" name="like_fruit">芒果
</div>
<btn id="btn">点击我查看单选的内容</btn>
<script src="common/js/jquery.js"></script>
<script>
    $("#btn").click(function () {
        var coupon_source = $("input[name='like_fruit']:checked").val();
        //点击苹果时，显示的是里面的value的值，即"苹果aaa"
        alert("coupon_source=" + coupon_source);
    });
</script>

17、验证手机号:

        var tel = $("#phone").val();
        var telReg = !!tel.match(/^(0|86|17951)?(13[0-9]|15[0-9]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/);
        if ($("#phone").val() == "") {
            alert("请输入您的手机号码");
        } else if (telReg == false) {
            alert("手机号码有误哦");
        } else {
            alert("手机号码输入正确");
            //执行下面的操作
        }

18、jquery更换背景图片：

方式一：
$(".img").css("background-image", "url('./images/img.png')");

方式二（可用逗号分隔添加多个样式）：
$(".img").css({"background-image": "url('./images/img.png')","xxx":"xxx"});

方式三：
在css中添加样式：
.style{
    background: url("./images/img.png") no-repeat center;
}
在js中：$(".img").addClass("style");
//移除样式：$(".img").removeClass("style");

19、html标签a如何跳出iframe：

<a onclick="window.top.location='目标页面' ">跳转</a>

20、css识别换行，添加属性：

white-space: pre-wrap;

21、轻量级的js编辑器：

https://github.com/wysiwygjs/wysiwyg.js

它还响应英文输入法下的@符号，不过中文下的@没反应，哎~写@功能还是不能用这个！

22、At.js(https://github.com/ichord/At.js)

他也可以实现富文本编辑器。

也可以用At.js来实现@功能，但是，亲测有bug，在输入的@符前面有文字的话，紧接着输入@，列表不会展示，前面有个空格再输入@才有响应。

qing_小诺

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS、JS】HTML使用小技巧

现整理一下经常用到的一些属性啥的，以便后期直接copy，哈哈~1、让html支持手机浏览器：在网页<head></head>中加入以下代码，就可以正常显示了：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-sca...
复制链接

扫一扫

专栏目录