CSS3
小平果118
我是一匹奔腾的野马,需要你来征服。。。。。
展开
-
CSS选择器详细总结
一、基本选择器序号选择器含义1.*通用元素选择器,匹配任何元素2.E标签选择器,匹配所有使用E标签的元素3..infoclass选择器,匹配所有class属性中包含info的元素4.#footerid选择器,匹配所有id属性等于footer的元素实例:* { margin:0; padding:0; }p { font-size:2em; }.info { background:#ff原创 2015-06-29 20:36:49 · 1018 阅读 · 0 评论 -
css3布局的若干笔记总结
自己在写一些样式的时候,遇到的一些问题,顺手就记下了,多总结。1. css 图片间隙问题:解决方案:法宝一:定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top。 img{vertical-align:bottom;}法宝二:定义容器里的字体大小为0。div {font-size:0}据说原因: 图片文原创 2017-05-13 19:05:38 · 963 阅读 · 0 评论 -
CSS3 实现3D特效
CSS3 中的动画效果transitionanimatetransition主要是从一个属性平滑过渡到另一个属性,而animate则是结合关键帧技术,实现更加复杂的动画效果;transion:过渡属性名称 过渡时间谷歌、opera、火狐、苹果浏览器不支持,注意兼容性-webkit-transition: color 1s;实例:我们在让背景颜色做一个改变 <style> #原创 2017-01-03 15:24:51 · 3214 阅读 · 0 评论 -
css3实现绚丽照片墙
css3实现绚丽照片墙这里主要给大家介绍几个css3比较绚这里写代码片丽和实用的动画属性,其中包括旋转、缩放等。课程实现的照片墙特效内容为:照片随意的摆放在页面的不同位置,并且都有不同角度的倾斜和相互遮挡,当鼠标移动到某一张照片上时,此照片缓慢的由倾斜状态转变为端正状态,并且放大一定比例显示在最上面,鼠标移走后,又恢复为原状态。此特效不使用任何javascript,而是用纯css实现。效果如下需求分原创 2016-12-15 14:08:53 · 7227 阅读 · 6 评论 -
CSS3扁平化博客网页布局
这里主要是讲解思路,具体的可以参见代码:具体效果图如下: 1. 导航栏的设计左边的logo与右边的导航栏分两个容器(左div,右ul),左边的左浮动,右边的右浮动,当然这里要清除父容器的浮动。可以父元素的伪元素after清除;.article-prew:after{ content: ""; display: block; clear: both;}关于导航栏的浮动,要注原创 2016-12-14 16:00:32 · 1588 阅读 · 2 评论 -
深入理解css3的border边框
深入理解css之border本博客深入讲解CSS3中的border属性,深入介绍border-color之间的关系,以及border与background定位、border与透明边框,并教你如果使用border进行图形构建,以及如何借助border使用有限标签完成我们的布局。1.border-width不支持百分比值本来width,padding和margin都支持百分比,为何就是border-wi原创 2016-12-12 21:01:06 · 1673 阅读 · 1 评论 -
CSS3学习笔记---响应式布局初略
响应式布局1、媒体查询,根据不同的终端来调用对应的样式。其中Screen、All和Print为最常见的三种媒体类型。Handheld虽然是手持设备,但是iphone,平板这些都是screen设备。用法: <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style>2、原创 2016-07-19 00:44:37 · 3519 阅读 · 0 评论 -
CSS弹性盒子Flexbox布局详解
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。以下内容主要参考了:Flex 布局教程:语法篇一、Flex布局是什原创 2016-04-13 17:41:55 · 10818 阅读 · 5 评论 -
CSS+DIV定位分析(relative,absolute,static,fixed)
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果。今天研究了一下,总算有所了解。在此总结一下:1、官方定义先看下各个属性值的定义:1、static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。2原创 2015-11-08 14:47:23 · 1066 阅读 · 0 评论 -
【经验】在CSS中定义a:link、a:visited、a:hover、a:active顺序
以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面。出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确。 给出我试的顺序,可能会对大家有一些帮助:代码A:link { color: #000000; TEXT-DECORATION: none}A:visited {原创 2015-07-04 09:19:50 · 1229 阅读 · 0 评论 -
MAC显示屏的网页图片兼容方案
背景图片不同分辨率下的兼容方案调研PC首页改版中遇到的mac下使用一倍图时,很模糊,一方面,MAC带来了高清屏幕的革命,另一方面,页存在严重的分辨率适配问题,但毕竟我们的用户大部分是在wins平台的机器上,我们为了在满足大部分用户的一般分辨率的同时,一些MAC用户的所要拥有的极致体验,也不容忽视,在网上查阅了一些资料,发现还是由一些解决方案:网页上的图片一般是两种,一种为背景图,一种是image标签原创 2017-09-01 02:02:24 · 1305 阅读 · 0 评论