html部分常用内容

整理了个人常用的html css效果

1. img标签禁止拖动：ondragstart="return false"

<img src="{% static 'main_app/carousel/carousel3.jpg' %}" class="d-block w-100" alt="..."
                         ondragstart="return false">

如果外层用a标签包裹，则a标签内也需要ondragstart="return false"

2. 标签中内容不换行，超出部分隐藏，鼠标划入显示

<style>
    .card-body>h5{
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
    }
    .card-body>p{
        text-align: center;
    }
</style>

    <div class="card">
        <img src="{{ MEDIA_URL }}{{ product.main_img }}" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title" title="{{ product.name }}">{{ product.name }}</h5>   //一定要有title,否则鼠标划入不会显示
            <p><a href="#" class="btn btn-primary">了解详情</a></p>
        </div>
    </div>

3. 背景色隐藏

background-color: transparent;

4. 背景图及其相关设置

h1{
    text-align: center;
    background: url({% static 'main_app/img/about/bgc.jpg' %});
    background-repeat:no-repeat;   //关键代码，直接拉伸背景图
    background-size: 100% 100%;   //不重复拉伸
    height: 100px;
    }

5.右下角内容定位

.gongzhonghao div{
            background-color: #7f7f7f;
            border-radius: 10px;
            padding: 5px;
            position: fixed;
            top: 75%;
            right: 5%;
        }
        .gongzhonghao img{
            width: 100px;
        }
<div class="d-flex flex-column">
    <span style="color: #ffffff;text-align: center">关注我们</span>
    <img src="{% static 'base/erweima.jpg' %}" alt="xxx">
</div>

6.css选择器

/* 表示class="content"下的所有div,不管多少层 */
.content div{
}
/* 表示class="content"下的第一层div */
.content>div{
}

7.setInterval与clearInterval

//setInterval设定任务
//clearInterval清除请示任务
function task(){
    console.log("xxx")
}
var task_id = setInterval(task,1000)   //function,time:单位毫秒
clearInterval(task_id)

8.查看js对象的长度（类似python中的字典）

var obj = {  
key1:1,  
key2:2,  
key3:3  
};  
  
Object.getOwnPropertyNames(obj).length  
Object.keys(obj).length

9.bootsrtap4瀑布流

<div class="row row-cols-2 row-cols-md-2">
	<div class="col-5"></div>
	...
</div>