随笔分类 -  CSS

css抠图之background-position-背景定位
摘要：相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象：网页中很多图片素材被合成在一张图片上。 其实，这是一个非常简单的技术。 要想实现CSS抠图，只需要用到一个属性：background-position。 按照字面理解，这个属性就是背景定位，先看看google网站的素材图，如下： 假如我们现在想做 阅读全文
posted @ 2017-10-11 23:05 缘琪梦 阅读(1084) 评论(0) 推荐(0)
css之导航菜单的制作
摘要：通过设置<a>的背景改变样式，通过a:hover改变交互效果，改变文字颜色color 纵向 横向 美化 阅读全文
posted @ 2017-03-03 18:04 缘琪梦 阅读(383) 评论(0) 推荐(0)
css之鼠标cursor
摘要：定义和用法 cursor 属性规定要显示的光标的类型（形状）。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。 默认值： auto 继承性： yes 版本： CSS2 JavaScript 语法： object.style.curs 阅读全文
posted @ 2017-03-02 10:17 缘琪梦 阅读(268) 评论(0) 推荐(0)
css的margin
摘要：1.适合于没有设定width/height的普通block水平元素 2.只适用于水平方向尺寸 例子：一侧定宽的自适应布局 margin与占据尺寸 1.block/inline-block均适用 2.与有没有设定width/height无关 3.适合于水平方向和垂直方向 例子：实现上下留白 3.百分比 阅读全文
posted @ 2016-11-27 21:24 缘琪梦 阅读(345) 评论(0) 推荐(0)
css的padding
摘要： 阅读全文
posted @ 2016-11-24 18:50 缘琪梦 阅读(173) 评论(0) 推荐(0)
border
摘要：1.border-width:不支持百分比值 支持下面属性值： thin:1px medium:3px thick:5px 2.border-style类型 solid:实线 dashed：虚线（方形） 兼容性问题 dotted：点线（圆点） double：双线（双线宽度一定相同，中间区域+-1 i 阅读全文
posted @ 2016-11-20 22:10 缘琪梦 阅读(207) 评论(0) 推荐(0)
css布局模型
摘要：CSS包含3种基本的布局模型，分别是Flow、Layer和Float. 在网页中，元素有三种布局模型：流动模型（Flow）、浮动模型（Float）和层模型（Layer） 流动模型 流动（Flow）是默认的网页布局模式。 也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。 典 阅读全文
posted @ 2016-09-29 10:43 缘琪梦 阅读(151) 评论(0) 推荐(0)
css盒模型
摘要：边框border： 盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。 如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框： div{ border:2px solid red; } 上面是 border 代码的缩写形式，可以分 阅读全文
posted @ 2016-09-29 09:53 缘琪梦 阅读(219) 评论(0) 推荐(0)
块状元素和内联元素
摘要：常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<c 阅读全文
posted @ 2016-09-29 09:40 缘琪梦 阅读(188) 评论(0) 推荐(0)
css 层叠样式表
摘要：css选择器 派生选择器 根据其元素在其上下文关系来定义样式 <html> <head> <meta charset="utf-8" /> <link href="10.css" type="text/css" rel="stylesheet" /> <meta name="generator" c 阅读全文
posted @ 2016-09-26 13:25 缘琪梦 阅读(246) 评论(0) 推荐(0)
css浮动
摘要：1）可以看出，即使div1 的宽度很小，页面中一行可以容下div1 和div2，div2 也不会排在div1 后边，因为div 元素是块级元素，独占一行的。2）如何在一行显示多个div 元素3）显然默认的标准流已经无法满足需求，这就要用到浮动。浮动可以理解为让某个div元素（或者其他块级元素）脱离标 阅读全文
posted @ 2016-09-13 14:55 缘琪梦 阅读(193) 评论(0) 推荐(0)
css盒模型
摘要：盒子 <!DOCTYPE html> <html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree 阅读全文
posted @ 2016-09-13 14:35 缘琪梦 阅读(188) 评论(0) 推荐(0)
css构造块级元素
摘要：css 1. 宽高width:数值;height:数值;也可用百分比！长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparentbackground-color 不会被后代继承。(2)背景图片使用background-imag 阅读全文
posted @ 2016-09-13 13:48 缘琪梦 阅读(433) 评论(0) 推荐(0)
css构造文本
摘要：1. 1. 文本缩进text-indent：值；值为数字，最常用的数值单位是px(像素)，也可以直接是百分比！text-indent:100px;text-indent:10%;2. 文本对齐text-align:对其方式;可以的值为：left、center、right3. 文本行高line-hei 阅读全文
posted @ 2016-09-12 23:21 缘琪梦 阅读(336) 评论(0) 推荐(0)
css的选择器
摘要：id 方法精确 #div1 { font-size:30px; } <!DOCTYPE html> <html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https:/ 阅读全文
posted @ 2016-09-12 20:49 缘琪梦 阅读(275) 评论(0) 推荐(0)