css
关注
分享
扫一扫
HOLD ON!
莫见长安行乐处，空令岁月易蹉跎。
展开
-
CSS3 元素转圈动画 （元素旋转动画）
CSS3 元素转圈动画 （元素旋转动画）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">转载 2020-08-07 16:16:29 · 2154 阅读 · 0 评论 -
CSS table-layout 属性
CSS table-layout 属性CSS 参考手册实例设置表格布局算法：table { table-layout:fixed; }亲自试一试浏览器支持IE Firefox Chrome Safari Opera 所有浏览器都支持 table-layout 属性。注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。定义和用法...转载 2020-07-02 13:20:16 · 374 阅读 · 0 评论 -
css3-variables
css3中的变量，css3为我们提供了变量的功能，并且比预处理更强大，更简单..qq_37417446在css中一提到变量大家都会想到css预处理LESS、SCSS、Stylus等语言中提供的变量使用，能够很方便的把我们经常需要更改的值统一归类管理，在我们需要更改色系样式的时候直接更改我们事先定义好的变量值，然后编辑成css就可以了。css预处理虽然让我们在写css变得更方便，但是毕竟还需要编译，需要去学习他们的语法。CSS3新功能之变量：variablescss3为我们提供了一个强大的功能自定转载 2020-06-06 08:35:30 · 280 阅读 · 0 评论 -
把select的小图标替换成 自己想要的图片
把select的小图标替换成 自己想要的图片不同的浏览器默认的select的选项图标是不同的，例如：在chrome中，是这样的：未点击时 点击时在Firefox中是这样的：未点击时点击时 在IE9中是这样的：未点击时点击时其它浏览器大家可以自己尝试看看select的默认样式下面开始正式介绍怎么替换：这是我的html代码：<div> <select id="mySelect"> <option value=...转载 2020-06-05 17:57:20 · 1614 阅读 · 0 评论 -
CSS：谈谈栅格布局
CSS：谈谈栅格布局 检验前端的一个基本功就是考查他的布局。很久之前圣杯布局风靡一时，这里就由圣杯布局开始，到最流行的bootstrap栅格布局。 圣杯布局 圣杯布局是一种三列布局，两边定宽，中间自适应： 1 * { 2 box-sizing: border-box; 3 } 4 html, body{ 5 width: 100%; 6 height: 100%; 7 margin:转载 2020-05-18 16:40:20 · 349 阅读 · 0 评论 -
JS设置CSS样式的几种方式（js设置!important）
JS设置CSS样式的几种方式（js设置!important）x619y用JS来动态设置CSS样式，常见的有以下几种1. 直接设置style的属性 某些情况用这个设置 !important值无效如果属性有'-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style['text-align'] = '100px';element.style.height = '100px';2. 直接设置属性（只能用于某些属性，相关样...转载 2020-05-12 13:38:37 · 8218 阅读 · 0 评论 -
sass/scss 和 less的区别
sass/scss 和 less的区别一. Sass/Scss、Less是什么?Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。Sass与Scss是什么关系?Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了.转载 2020-05-16 16:50:04 · 141 阅读 · 0 评论 -
HTML-Flex 布局
HTML学习之Flex 布局一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex转载 2020-05-16 16:44:34 · 576 阅读 · 0 评论 -
HTML table的td内容过长时，自动隐藏效果
HTML table的td内容过长时，自动隐藏效果qq_34749453table {table-layout: fixed;}td {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}给td给默认宽度，在页面当中加入以上样式 。转载 2020-05-16 16:34:58 · 839 阅读 · 0 评论 -
CSS3 transition 属性
CSS3 transition 属性CSS 参考手册实例把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：div{width:100px;transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari ...转载 2020-03-27 15:34:23 · 184 阅读 · 0 评论 -
css3动画特效：上下晃动的div
css3动画特效：上下晃动的div<div id="square" class="container animated">上下晃动</div> /** * transform-origin 设置旋转元素的基点位置 * animation-name 设置动画名称 * animation-duration 设置动画时间 * animation-fi...转载 2020-03-27 15:19:48 · 1764 阅读 · 0 评论 -
纯CSS鼠标hover实现背景动画效果
纯CSS鼠标hover实现背景动画效果原创Mr.王征 最后发布于2019-03-04 10:15:19 阅读数 916 收藏展开效果展示：源码展示：<!doctype html><html><head> <meta charset="utf-8"> <title>纯CSS鼠标hover实现背景扇动效果&...转载 2020-03-27 15:09:28 · 1780 阅读 · 0 评论 -
css-字体垂直、水平居中
css样式—字体垂直、水平居中<div class="tt">啦啦啦</div>.tt{ padding: 0px; width:500px; height:200px; text-align:center; background-color:...转载 2020-06-09 16:44:39 · 804 阅读 · 0 评论 -
css如何让文字更清晰更平滑
css如何让文字更清晰更平滑昨天面试，面试官问了我这样一个问题：如何让文字更清晰更平滑？一下子没想出来，最后答了个直接导入自己的字体吧，回来我了解了下，原来css3还有这样的特性。-webkit-font-smoothingCSS3里面加入了一个“-webkit-font-smoothing”属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。加上之后就顿时感觉...转载 2020-03-27 15:06:24 · 4085 阅读 · 0 评论 -
css-text-decoration-skip 下划线
text-decoration-skipWeb 开发技术 CSS（层叠样式表） text-decoration-skip中文 (简体)▼在此页面语法 示例 Specifications Browser CompatibilityCSStext-decoration-skip属性定义了元素哪些部分的内容需要被文本修饰所跳过。它可以控制所有该元素或该元素的祖先所绘制的...转载 2019-12-30 12:29:26 · 580 阅读 · 0 评论 -
CSS outline-属性-input-选中-边框
CSS outline 属性实例设置 4 个边框的样式：p { outline:#00FF00 dotted thick;}浏览器支持所有浏览器都支持 outline 属性。注释：如果规定了 !DOCTYPE，则 IE8 支持 outline 属性。定义和用法outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。...转载 2019-12-25 18:06:51 · 2637 阅读 · 0 评论 -
CSS cursor 属性
CSS cursor 属性CSS 参考手册实例一些不同的光标：span.crosshair {cursor:crosshair;}span.help {cursor:help;}span.wait {cursor:wait;}亲自试一试浏览器支持所有主流浏览器都支持 cursor 属性。注释：Opera 9.3 和 Safari 3 不支持url值。...转载 2019-12-05 17:09:39 · 125 阅读 · 0 评论 -
CSS 加粗(css font-weight)
CSS 加粗(css font-weight)CSS 加粗知识与CSS加粗实例DIV+CSS基础知识CSS 加粗这里指的是通过DIV CSS控制对象的加粗。使用CSS属性单词font-weight对象值：从100到900，最常用font-weight的值为boldfont-weight参数：normal : 正常的字体。相当于number为400。声明此值将取消之前任...转载 2019-08-21 20:43:48 · 10980 阅读 · 0 评论 -
CSS3 transform 属性
CSS3 transform 属性实例旋转 div 元素：div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */-webkit-transform:rotate(7deg); /* Safari 和 Chrome...转载 2019-08-07 20:08:25 · 156 阅读 · 0 评论 -
css中“~”（波浪号）、“，”（逗号）、 “ + ”（加号）和 “ > ”（大于号）是什么意思？
css中“~”（波浪号）、“，”（逗号）、 “ + ”（加号）和 “ > ”（大于号）是什么意思？2018年05月31日 18:08:54suoyasong阅读数 14104 为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景： p~ul{ background:#ff0000; } <p>快乐...转载 2019-08-08 21:52:53 · 466 阅读 · 0 评论