CSS的样式小计（1）

1、给div添加点击效果：

.item {background: #FFF;
}
.item:active {background: #F0F0F0;
}

2、鼠标滑过，出现高亮

div:hover{background: chartreuse;}

3、设置圆或者圆角

1.border-radius可以同时设置1到4个值。简洁法如果设置1个值，表示4个圆角都使用这个值。border-radius:40px;如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。border-radius: 10px 50px;如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。border-radius: 10px 50px 40px;如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。border-radius: 10px 20px 30px 40px;2.单独设置一个角的写法
border-top-left-radius: 20px; //设置左上角
border-top-right-radius: 20px; //设置右上角
border-bottom-left-radius: 20px; //设置左下角
border-bottom-right-radius: 20px; //设置左下角

设置圆：

.circle{width: 150px;/*宽高保持一致*/height: 150px;line-height: 150px; /*当高度与行高保持一致时为垂直居中*/border-radius: 50%;background: orange;margin: 50px;text-align: center;color: #fff;}<div class="circle">圆形</div>

4、div动态加载html，使用jquery的load()方法

$("#content").load("user_info.html")

5、fixed的css属性

.pub{height: 80px;width: 80px;position: fixed;right: 80px;top: 20px;border-radius: 50%;background: orange;text-align: center;}right=0，top=0（表示右上角）right=0，bottom=0（表示右下角）left=0，top=0（表示左上角）left=0，bottom=0（表示左下角）

6、块内元素居中（text-align），行内元素居中（margin：auto 0）

7、jquery 获取data-* 属性值

<li id="getId" data-id="122" data-vice-id="11">获取id</li>
1、getAttribute()方法
const getId = document.getElementById('getId');
// //getAttribute()取值属性
console.log(getId.getAttribute("data-id"));//122
console.log(getId.getAttribute("data-vice-id"));//11
// //setAttribute()赋值属性
getId.setAttribute("data-id","48");2、dataset()方法
//data-前缀属性可以在JS中通过dataset取值，更加方便
console.log(getId.dataset.id);//112
//data-vice-id连接取值使用驼峰命名法取值
console.log(getId.dataset.viceId);//11//赋值
getId.dataset.id = "113";//113
getId.dataset.viceId--;//10//新增data属性
getId.dataset.id2 = "100";//100//删除，设置成null，或者delete
getId.dataset.id2 = null;//null
delete getId.dataset.id2;//undefind3、jquery data()方法
var id = $("#getId").data("id"); //122
var viceId = $("#getId").data("vice-id"); //11
//赋值
$("#getId").data("id","100");//1004、jquery attr()方法
var id = $("#getId").attr("data-id"); //122
var viceId = $("#getId").attr("data-vice-id"); //11
//赋值
$("#getId").attr("data-id","100");//100

8、以下总结了一些常用的前端刷新页面的方法<a>

<a href="javascript:" onclick="history.go(-2); ">返回前两页</a><a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a><a href="javascript:" onclick="history.back(); ">返回上一页</a><a href="javascript:history.go(-1)">返回上一页</a><a href="javascript:location.reload()">重载页面，本地刷新</a><a href="javascript:history.go(-1);location.reload()">返回上一页重载页面，本地刷新</a><a href="javascript:window.stop()">停止跳转</a>停止跳转：IE浏览器用document.execCommand("Stop")，Chrome和Firefox用window.stop()  返回上一页：window.history.go(-1);本地刷新： window.location.reload();局部刷新（“#table_table”是需要刷新的框架id）：$("#content_table").load(location.href+" #content_table");

9、兼容性问题

    <style>#test{width: 100px;height: 100px;background: red;}</style>
</head>
<body><div id="test"></div><script>var bg;//  兼容性问题 try{//  谷歌bg=getComputedStyle(test).backgroundColor;}catch(err){//  IEbg=test.currentStyle.backgroundColor;}alert(bg);</script>
</body>

10、获取控件外部样式

<style>#test {width: 100px;height: 100px;background: red;}</style></head><body><div id="test"></div><script>var test = document.getElementById("test");// Element.style.cssart --->获取的是内联样式// 获取样式表的样式  getComputedStyle(element).cssartvar bg = getComputedStyle(test).backgroundColor;console.log(bg)//    console.log(bg.)</script></body>

11、https://www.kancloud.cn/tjs5945111/javascrip/755801

12、div的滚动条设置

1. overflow-x: scroll;     水平滚动条
2. overflow-y: scroll;      垂直滚动条

CSS的样式小计（1）相关推荐

element plus之el-table行融合+列融合+小计行+自定义控件+样式自定义方案
期望通过每一次分享,让技术的门槛变低,落地更容易. -- around 目录 1.行&列融合 2.小计行 3.自定义控件 4.样式自定义前言旨在解决项目过程中遇到基于el-table实现项 ...
CSS -- CSS字体样式、文本样式、去掉列表的小圆点、背景、背景渐变
1. CSS字体样式.文本样式.去掉列表的小圆点.背景.背景渐变 1.1字体样式字体样式 font-family 字体(可以添加2种字体,一种针对中文,一种针对英文) font-size 字体大小( ...
css指针光标样式小手图标
css指针光标样式小手图标: 适用于各浏览器使用的标准大小:32px*32px,右键保存图片可用 PS:找了好一会儿,才找到这样的指针光标小手图片,分享下
微信小程序css卡片样式（带阴影效果）
微信小程序css卡片样式(带阴影) 效果图 wxml代码 <view class="card"></view> css样式 .card{width: 90% ...
前端(js/css/html)那些小的知识点，持续更新......
前端(js/css/html)那些小的知识点,持续更新...... 1.行内元素与块级元素有哪些及区别? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示.通过样式控制, ...
JSTL和Ajax小计
JSTL和Ajax小计 JSTL ajax样例查询账号是否存在的ajax案例和密码两次输入是否一致的校验 JSTL <%@taglib uri="http://java.sun.co ...
React Native小计
React Native 小计布局手机端布局通常采用 flex 弹性盒子, View 容器组件默认就是弹性盒子. 主轴的布局方向: flex-direction row: 横向 row-rever ...
html.action 访问分部视图,MVC+EF 随笔小计——分部视图（Partial View）及Html.Partial和Html.Action差异...
Partial View指可以应用于View中以作为其中一部分的View的片段(类似于之前的user control), 可以像类一样,编写一次, 然后在其他View中被反复使用. 一般放在" ...
前端笔记（9）元素的隐藏与显示，css用户界面样式，vertical-align垂直对齐，溢出文字省略号显示，css精灵技术，过渡，焦点，滑动门，margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式鼠标样式cursor 轮廓线outline ...

CSS的样式小计（1）

CSS的样式小计（1）相关推荐

最新文章

热门文章