随笔分类 -  css

img下面的留白解决
摘要：在做网页的时候经常会出现一个令人困惑的现象。那就是行内元素和块级元素之间会出现“留白”。就是块级元素中明明只有一个行内元素，但行内元素却不会铺满块级元素。像这个例子： “留白”出现的原因 行内元素默认是和父级元素的baseline对齐的，而不是父级元素的bottom。baseline有时候和父级元素 阅读全文
posted @ 2017-04-27 11:33 杨新权 阅读(1286) 评论(0) 推荐(1)
边界线与两端对齐
摘要：边界线： 方法一： 利用css3里面的属性:nth-child()，兼容高版本浏览器和ie9+ 方法二： 利用margin-left负值： 两端对齐： 阅读全文
posted @ 2017-04-27 08:11 杨新权 阅读(146) 评论(0) 推荐(0)
左边竖条的实现方法
摘要：一：border 二：伪类 三:box-shadow 四：filter:drop-shadow 五：渐变 阅读全文
posted @ 2017-04-27 07:47 杨新权 阅读(173) 评论(0) 推荐(0)
area热点区域
摘要：<area>标记：主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点），这样当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面。其基本语法结构如下： <area class="hot" href＝"url" alt＝"text" shape＝"shape" coor 阅读全文
posted @ 2017-04-26 16:52 杨新权 阅读(184) 评论(0) 推荐(0)
优先级
摘要：一.属性与通配符对比： 总结：通配符的优先级大于属性优先级 二。通配符与tag： 总结：tag优先级大于通配符的优先级 三.class与tag 总结：class优先级大于tag的优先级 四.id与class 总结：id优先级大于class的优先级 五.id与行内样式 总结：行内样式优先级大于id的优 阅读全文
posted @ 2017-04-25 15:47 杨新权 阅读(866) 评论(0) 推荐(0)
各种图形
摘要：半圆： 四分之一圆： 平行四边形： 上梯形： 五边形： 六边形： 心型： 弯尾箭头： 无限符号： 吃人豆： 放大镜： 购物车： 提示框： 阅读全文
posted @ 2017-04-25 12:08 杨新权 阅读(629) 评论(0) 推荐(0)
遮罩层
摘要：遮罩层： 又名弹出框，是一种页面在常用不过的效果之一了，今天就说一说这一效果的制作原理： 代码展示 html: css: js: 知识点总结： 1.shadowxx是黑色透明，底层的透明层；width,height是整个可视区，而且层级要提到最高，它的层级高了，它的子级的层级比它高； 2.promp 阅读全文
posted @ 2017-04-25 10:12 杨新权 阅读(353) 评论(0) 推荐(1)
marquee
摘要：marquee: 页面的自动滚动效果，可由javascript来实现，但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果，无需js控制。 使用marquee标记不仅可以移动文字，也可以移动图片，表格等. 语法：<marquee>...</marque 阅读全文
posted @ 2017-04-25 09:44 杨新权 阅读(514) 评论(0) 推荐(0)
省略号
摘要：单行省略号： 代码展示： 效果展示： 知识点总结： 1.　text-overflow语法： text-overflow : clip | ellipsis text-overflow参数值和解释： clip : 不显示省略标记（...），而是简单的裁切 ellipsis : 当对象内文本溢出时显示省 阅读全文
posted @ 2017-04-24 21:41 杨新权 阅读(459) 评论(0) 推荐(0)
锚点
摘要：前述： 锚点（anchor）： 是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。 适用于较长的单页面，添加锚点就是为了在同一个页面方便快捷地找到相应位置； 创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接； 阅读全文
posted @ 2017-04-24 21:16 杨新权 阅读(557) 评论(0) 推荐(0)
文字居中贯穿线
摘要：前述： 类似于京东的这种文字居中于贯穿线 代码展示： 效果展示： 知识点总结： 1.单行文字垂直居中：height=line-height,text-align:center(盒子内的文字或者图片水平居中)； 2.利用 线的height=文字line-height/2，来实现文字居中贯穿线； 扩展： 阅读全文
posted @ 2017-04-24 17:33 杨新权 阅读(390) 评论(0) 推荐(0)