随笔分类 -  CSS

在input内放置小图标的方法
摘要：在输入框内加入小图标，主要有两种方法 一、使用标签<i>存放图标，利用绝对定位调整位置，图标图层需要在input之上 二、在input内直接使用背景图片放在图标，利用background-position调整位置 阅读全文
posted @ 2018-10-16 16:35 凉の茶 阅读(26151) 评论(0) 推荐(1)
制作表单（第一期笔记）：美化表单常用的css样式
摘要：清除输入框样式 不管三七二十一，想要自己设计输入框样式，我们第一步需要清除input自带样式 利用padding减轻视觉负担 最好给输入框设置一下左右边距，不会显得输入文字过于拥挤 添加padding:0 8px;之后的样式，显得大气很多 锦上添花的阴影border-shadow和border-ra 阅读全文
posted @ 2018-10-16 14:14 凉の茶 阅读(6293) 评论(0) 推荐(0)
CSS：linear-gradient()背景颜色渐变--练习笔记
摘要：css语法 direction：用角度值指定渐变的方向（或角度）； color-stop1,color-stop2,...：用于指定渐变的起止颜色 ps：至少需要两种颜色 兼容性 练习 1、background: linear-gradient(to left,#d3959b,#bfe6ba); t 阅读全文
posted @ 2018-10-16 11:49 凉の茶 阅读(37082) 评论(1) 推荐(4)
css中的vertical-align在内联元素中的表现--垂直对齐（带图示）
摘要：基本认识 语法 vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> 默认值：baseline 适用于：内联及 table-ce 阅读全文
posted @ 2018-09-28 10:34 凉の茶 阅读(2152) 评论(0) 推荐(0)
利用border特性做的几个纯css小图标
摘要：border除了自己的本职工作外，我们还可以利用他的某些特性来制作一些简单实用的小图标 可以作为菜单图标的三道杠、添加东西的加号小图标、可以表示方向等多功能的三角形小图标、叉叉勾勾表示对错的小图标 <!doctype html> <html lang="en"> <head> <meta chars 阅读全文
posted @ 2018-09-25 17:07 凉の茶 阅读(826) 评论(0) 推荐(0)
CSS文本、字体个别属性效果对比
摘要：text-align:justify；文本两端对齐效果 text-decoration 下划线、上划线、中划线 text-index 首行缩进效果 text-shadow 文本阴影 text-transform 控制单词字母的大小写 font-variant 显示小型的大写字母的字体（对小写字母有效 阅读全文
posted @ 2018-09-20 16:26 凉の茶 阅读(425) 评论(0) 推荐(0)
CSS文本、字体属性（更新中）
摘要：ltr 从左到右（默认） rtl 从右到左 inherit 继承父元素属性 left 左边对齐 right 右边对齐 center 中间对齐 justify 两端对齐文本效果 none (默认) underline 下划线 overline 上划线 line-through 穿过文本下的一条线 bl 阅读全文
posted @ 2018-09-20 15:42 凉の茶 阅读(374) 评论(0) 推荐(0)
CSS3--clip-path练习
摘要：CSS 新属性 clip-path，意味裁剪路径的意思，让我们可以很便捷的生成各种几何图形。 clip-path 通过定义特殊的路径，实现我们想要的图形。而这个路径，正是 SVG 中的 path 。 1、 简介 初始值：none 适用元素：所有元素；在SVG中，不适用于defs（动画）元素和所有的g 阅读全文
posted @ 2018-09-12 17:30 凉の茶 阅读(7627) 评论(0) 推荐(0)
CSS3--box-sizing属性练习（border-box设置padding和border不会改变width和height的值）
摘要：语法 box-sizing: content-box / border-box (padding-box已被移除） 默认值：content-box 适用于：所有接受 width 和 height 的元素 继承性：无 动画性：无 计算值：指定值 取值 content-box:呈现标准模式下的盒模型，定 阅读全文
posted @ 2018-09-11 15:39 凉の茶 阅读(3660) 评论(0) 推荐(0)
CSS3--calc()函数练习（制作响应式布局）
摘要：语法 calc() = calc(四则运算) 说明 动态计算长度值 任何长度值都可以使用calc()函数进行计算，例如：width、height calc()函数支持 （ + 、- 、*、/ ） 运算 calc()函数使用标准的数学运算优先级规则 兼容性 （以上数据来自css参考手册）在特定的浏览器 阅读全文
posted @ 2018-09-11 11:31 凉の茶 阅读(581) 评论(0) 推荐(0)
SVG背景图笔记
摘要：url引用格式：url('data:image/svg+xml;base64') 实例： 准备好SVG文件 源码： 效果： SVG参考手册http://www.runoob.com/svg/svg-reference.html 阅读全文
posted @ 2018-09-05 17:11 凉の茶 阅读(1806) 评论(0) 推荐(0)
CSS:nth-child选择器用法练习
摘要：:nth-child()选择器，选择器选取父元素的第 N 个子元素，与类型无关。 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。 :nth-child (an + b) 描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏 阅读全文
posted @ 2018-08-31 16:14 凉の茶 阅读(6231) 评论(2) 推荐(0)
CSS控制表格隔行变色----:nth-child()选择器
摘要：css控制表格隔行变色 编号 作品 时间 1 回忆三部曲 1995 2 未麻的部屋 1997 3 千年女优 2001 4 妄想代理人 2004 ... 阅读全文
posted @ 2018-08-31 15:14 凉の茶 阅读(4586) 评论(0) 推荐(1)