css
关注
分享
扫一扫
文章平均质量分 55
黄宝康
这个作者很懒，什么都没留下…
展开
-
前端不定宽高的水平垂直居中方案
.myoff-wrapper{ position:absolute; top:50%; left:50%; z-index:3; -webkit-transform:translate(-50%,-50%); border-radius:6px; background:#fff;}flexbox版.parent{ justify-content:center; //子元素水平居中 align-items:center; // 子元素垂直居中 display:-webkit-fl原创 2020-07-22 14:54:28 · 334 阅读 · 0 评论 -
css定位p标签的第一个字符
.summary p:first-child:first-letter{ }原创 2020-07-22 10:57:10 · 1282 阅读 · 0 评论 -
css中媒体查询@media
我们都知道，bootstrap是一个优秀的前端响应式框架，栅格布局，为各种终端设备提供了一个响应式的显示。其主要原理是利用css中的媒体查询@media@media示例样式中增加@media screen标记<style> .test{ width: 500px; height: 400px; background-color: red; } @m...原创 2020-04-23 17:10:02 · 1729 阅读 · 0 评论 -
sass学习总结
安装官网有好多种方式，而且针对不同操作系统平台进行了介绍。由于是练习，我在本地windows平台来学习sass.npm install -g sass然后就可以学习sass了，安装了node环境自带了npm包管理工具。常用的用法还有一个常用的参数，就是--watch，监视文件变化，自动编译。可以通过sass --help进一步了解更多参数的使用。不过使用HBuilder等IDE，直...原创 2020-04-17 11:41:08 · 424 阅读 · 0 评论 -
css清除浮动
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati...原创 2020-04-16 11:05:28 · 308 阅读 · 0 评论 -
inline-block并排影响布局
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .my{ display: inline-block; border: 1px solid b...原创 2020-04-14 11:39:45 · 574 阅读 · 0 评论 -
less编译成css
推荐使用HBuilder编辑器，国人开发的，代码提示很好。npm install -g less安装less之后，可以使用lessc进行less文件的编译，命令格式：lessc less文件名 css文件名...原创 2020-04-14 10:29:55 · 546 阅读 · 0 评论 -
css3实现三角形
原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了.arrow{ width:100px; height:100px; border:90px solid #000; border-left-color:orange;}<body><div class="arrow"><...原创 2020-04-10 11:51:17 · 371 阅读 · 0 评论 -
scss入门
可以使用koala工具进行编译scss文件使用sublime text不支持scss语法高亮，可以下载一个插件https://codeload.github.com/MarioRicalde/SCSS.tmbundle/legacy.zip/SublimeText2解压完之后放到sublime Text的安装目录的Data\Packages目录下，然后重启sublime text语法介绍...原创 2020-03-31 16:44:19 · 329 阅读 · 0 评论 -
CSS3照片墙效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>照片墙制作</title> <style> body{ background: #e8ecf1; } h2{ text-align: center; ...原创 2020-03-19 20:46:35 · 396 阅读 · 0 评论 -
CSS3中的resize,outline
主要值有如下： 这个属性可以用于overflow属性的任何容器元素。原创 2018-09-05 15:59:52 · 409 阅读 · 0 评论 -
CSS3中的媒体类型
W3C总共列出了10钟媒体类型，如下： 媒体类型的引用一、link方法通过link标签中的media属性来指定不同的媒体类型，如：<link rel="stylesheet" type="text/css" href="style.css" media="screen" /><link rel="stylesheet" type="原创 2018-09-05 11:35:04 · 885 阅读 · 0 评论 -
CSS3伸缩布局
1、创建一个flex容器任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex2、通过flex-direction来改变主轴方向默认值是row，可以修改成column3、移动到顶部移动到顶部，取决于主轴的方向，如果它是垂直的方向，通过align-items设置，如果它是水平方向，通过justify-content设置...原创 2018-09-05 10:27:22 · 848 阅读 · 0 评论 -
display：table的几个用法
内容转载至https://www.cnblogs.com/stephen666/p/6995388.htmlDIV+CSS的布局已经让表格布局几乎很少用到，除非表格语义性很强的情况。display：table解决了一部分需要使用表格特性但又不需要表格语义的情况，尤其是DIV+CSS很不方便解决的问题，比如以下两种情况：一、父元素宽度固定，想让若干个子元素平分宽度通常的做法是...转载 2018-08-29 14:46:48 · 2449 阅读 · 0 评论 -
CSS浮动中遇到一些不可预知的情况
在学习页面布局的时候，特别是浮动，遇到了一些不可预知的情况。<body> <div id="header"><h1>Header Content</h1></div> <div id="page"> <div class="main"原创 2018-08-29 14:36:52 · 266 阅读 · 0 评论 -
CSS3中columns属性
新版CSS3中增加了一个columns属性，为分栏模块。 用法：columns:宽度 所占的列数&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;columns&a原创 2018-08-29 10:23:21 · 1469 阅读 · 0 评论 -
CSS3中动画animation的几个属性
animation-iteration-count:infinite|<number> 默认一次infinite:表示不限次数，循环迭代。animation-direction:normal alternatealternate:表示反向来回的方式动画。animation-play-state属性主要用来控制元素动画的播放状态。其主要有两个值：running(默认值...原创 2018-08-29 10:18:26 · 3322 阅读 · 0 评论 -
transform中的matrix函数
在CSS3中的变形，如rotate(),skew(),scale(),translate()，都可以使用矩阵matrix()函数来代替。Matrix()与translate()关系：translate(x,y)对应Matrix(1,0,0,1,x,y);Matrix()与scale()关系：scale(x,y)对应Matrix(x,0,0,y,0,0);Matrix()与rotate(...原创 2018-08-24 17:17:49 · 1203 阅读 · 0 评论 -
CSS3中text-shadow,动画animation和transform-style以及@keyframes的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试text-shadow</title> <style type="text/css">原创 2018-08-14 09:12:51 · 674 阅读 · 0 评论 -
CSS3中border-image的使用
border-image语法border-image:url(border.png) 70 70 70 70 repeat第一个是图片路径，接下来的四个是切割图片的宽度，单位为像素，可以可以使用百分比，遵循顺时针的规律来分别设置，也可以简写为70，最后一个为图片延伸方式，可选参数分别为：round(平滑)，repeat(重复) ，stretch(拉伸)专业墙纸贴纸厨房用具装饰出...原创 2018-08-14 16:03:58 · 518 阅读 · 0 评论 -
CSS3中颜色渐变色彩
CSS3 Gradient分为线性渐变（linear）和径向渐变（radial）。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。线性渐变语法：linear-gradient(to bott...原创 2018-08-15 13:54:22 · 857 阅读 · 0 评论 -
CSS3属性选择器及伪类选择器
CSS3相比CSS2在选择器中增加了通配符的概念，赋予其强大功能。E[attr^=&amp;amp;amp;quot;val&amp;amp;amp;quot;] 定义了属性attr，并且以val开头的任意字符串E[attr$=&amp;amp;amp;quot;val&amp;amp;amp;quot;] 定义了属性attr，并且以val结尾的任意字符串E[attr*=&amp;amp;amp;quot;val原创 2018-08-22 10:11:57 · 3934 阅读 · 0 评论 -
CSS3中text-shadow用法
text-shadow可以用来设置文本的阴影效果。语法：text-shadow: X-Offset Y-Offset blur color; X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移； Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，...原创 2018-08-20 08:34:11 · 588 阅读 · 0 评论 -
CSS3中background-orgin用法
设置元素背景图片的原始起始位置。语法：background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。效果如下：需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。实例代码：<!DOCTYPE html&...原创 2018-08-20 08:53:45 · 389 阅读 · 0 评论 -
CSS3背景 background-clip用法
用来将背景图片做适当的裁剪以适应实际需要。语法：background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。效果图如下：...原创 2018-08-20 09:07:41 · 834 阅读 · 0 评论 -
transform 中的transform-origin
任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>transform-origin</title>原创 2018-08-27 11:30:49 · 905 阅读 · 0 评论 -
CSS3中的transition
在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。 它是一个复合属性，主要包括以下几个子属性。transition-property:指定过渡或动态模拟的CSS属性transition-duration:指定完成过渡所需的时间transition-timing-function:指定过渡函数transition...原创 2018-08-27 12:03:12 · 609 阅读 · 0 评论 -
CSS3中的动画--过渡函数 transition-timing-function
transition-timing-function 属性规定过渡效果的速度曲线。 JavaScript语法：object.style.transitionTimingFunction="linear"transition-timing-function语法：transition-timing-function: linear|ease|ease-in|ease-out|ease...原创 2018-08-27 14:17:50 · 3154 阅读 · 0 评论 -
CSS使用定位居中元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用position使元素居中显示</title> <style type="text/css"&原创 2018-08-27 14:49:42 · 387 阅读 · 0 评论 -
CSS3 Keyframes
用法：以@keyframes开头，后面跟上动画名加上一对花括号“{}”，括号中定义一些不同时间段的样式规则。如：@keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }}可以建立多个百分比的样式，其中0%和100%可以用from和to代替。这个经常跟anim...原创 2018-08-27 15:04:17 · 546 阅读 · 0 评论 -
CSS3综合练习，导航菜单的制作
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>导航菜单</title><style type="text/css"> body{ background: #ebebeb;原创 2018-08-21 09:03:40 · 1892 阅读 · 0 评论 -
使用Before和After伪元素制作文本阴影
需要理解:before和:after的使用，如下代码收藏于慕课网。 代码如下：<!DOCTYPE html><html><head><meta charset=utf-8 /><title>before、after</title><style>.box h3{ text-align:cen原创 2018-08-24 14:22:37 · 999 阅读 · 0 评论 -
CSS3中的变形处理
CSS3中的变形处理主要是旋转，缩放，移动，倾斜。一、旋转<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3变形处理</title> <style type="text/css"> /*旋转rotate 缩放scale 移动translate 倾斜sk原创 2017-09-18 17:21:58 · 832 阅读 · 0 评论