首页
Python
Java
IOS
Andorid
NodeJS
JavaScript
HTML5
【
css的几个小技巧
】的更多相关文章
css选择器顺序的小技巧
在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个国外优秀单页,我在recode的时候做的,看源码他应该是用的js,我这里改成了css做,正好可以演示一下css选择器的顺序技巧. 首先是li标签的样式,这里就不说了,主要说一下hover的操作. 显示ul的hover,让所有的li标签缩短宽度. ....... 原文来自:css选择器顺序的小技巧…
CSS中的一下小技巧2之CSS3动画勾选运用
使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以决定记录起来~ 首先给标签加宽高加背景色: <style> .check{ width: 40px; height: 40px; background: palevioletred; position: relative; margin: 50px auto; border-radius: 5px…
css的几个小技巧
本文收录css设置样式的一些小技巧 1. 设置文字在块级标签居中(包括水平居中和垂直居中) 水平居中 方法一:使用text-align text-align:center 方法二:目标标签的父级标签设置position:relative,目标标签设置margin:auto .parent { position: relative } .target { margin:auto } 垂直居中 设置line-height与父级元素height相同 div { width:200px; height:…
CSS中的一下小技巧1之CSS3三角形运用
使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过一次后很容易忘记,所以想把这个小技巧记录起来~ CSS3是如何实现三角形的呢?——答案是通过边框,也就是border属性. 边框 <style> .triangle{ width: 100px; height: 100px; border: 30px solid palegreen; margin…
25条div+CSS编程提醒及小技巧整理
1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 2.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次:对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为ID的权值要比CLASS大. 3.一个兼容性调整(IE和Mozilla)的笨办法: 初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来. 临时解决…
HTML+CSS - 前端设计的小技巧(持续更新......)
2015年7月6日20:28:20 1.设置文字的居中,非控件内的. :text-alain:center 2.图片在ASP.NET中,可以直接拖放到界面,自动形成img控件. 3.CSS直接在全局样式 * 内,设置UL标签无样式,图片无边框,margin和padding都为0. 4.取消浮动Clear. :clear:left 取消左浮动 5.图片按钮 ImageButton控件 SRC属性,设置图片的路径. 6.服务器空间,在网页中也是input控件,所以,直接设置input属性…
CSS绘制三角的小技巧
网页中常见一些三角形,使用css直接画出来就可以,不必做成图片或者字体图标当把一个盒子的高和宽的长度都设置为0,并且分别指定边框样式时,就会得到以下图形: 受此启发,可以知道三角是如何制作的(想要保留哪个三角只需把其他三个边框设置为透明即可)例如:div { width:0; height:0; line-height:0; font-size:0; border:50px solid transparent; border-left-color:pink;} 其中 line-heiight:0…
整理一些css在使用中的小技巧(进行中)
1. 消除li排列display:inline-block的间隙 ul{ font-size:; } ul li{ display:inline-block; }…
css隐藏文字的小技巧
前段时间,在做项目的时候,遇到一个问题.背景图片上有一个“立即注册”的按钮,需要点击.但是问题是:现在的图片是背景图片,如果图片是在html页面内的话,我们可以使用锚点来对图片添加链接.这个时候,我们就可以使用隐藏文字的方法来对图片进行添加链接. 定义一个a的标签,使用绝对定位,覆盖到"立即注册"上面,像这样: <a href="#">立即注册</a> 然后我控制字体隐藏 div{ text-index:-9999px; background…
css和HTML布局小技巧
一:水平居中 1. 如下所示,让child在parent中水平居中 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .parent{ width:300px; height:200px; border:1px solid #000; text-align: c…