css
前端岚枫
技术翻译,技术人生,前端知识,生活感悟
展开
-
小程序入门到精通(三):学小程序必备技术基础-flex布局
学小程序我们需要有点html、css、js基础,而flex布局是我们小程序常用的css布局,学习小程序之前,我们需要了解一些css方面的布局知识-Flex布局,Flex 布局将成为未来布局的首选方案1. flex 布局是什么Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。2. flex布局体验2.1 传统布局与flex布局传统布局兼容性好布局繁琐局限性,不能再移动端很好的布局flex布局操作方便,布局极为简单,移动端应用很.原创 2020-05-24 23:59:45 · 646 阅读 · 5 评论 -
用纯css3和html制作一些泡沫对话框
现在,泡沫对话框是一种比较流行的趋势,一般都是用html和javascript,和或者图片来实现,今天用纯css3和html来实现一些基本的简单的泡沫对话框 html代码如下: The basic bubble variants This only needs one HTML element. For example, <p>[tex原创 2012-07-28 11:10:26 · 3163 阅读 · 0 评论 -
用纯css实现的html5 logo标志
一个用css实现的html5 Logo,主要用html和css技术实现,例子如下:源代码下载地址:css部分代码如下:html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cit原创 2012-10-18 16:10:24 · 8239 阅读 · 0 评论 -
解决ie6中fixed不起作用的问题
有时需要把一个元素固定在页面的某个部位,一般的解决方法是:.box{position:fixed;bottom:0;right:10px;}让元素固定在浏览器的底部和距离右边的10个像素。一般的浏览器都支持这种方法,但是ie6不支持fixed解决办法:.box{osition:fixed;_position:absolute;bottom:0;right:10p原创 2012-10-30 08:51:54 · 1307 阅读 · 1 评论 -
从事前端开发必须要了解的CSS原理
从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢?当这个成为我们提高CSS水平的一个瓶颈时,是否应该多了解一下呢? 一、浏览器的发展与CSS 网页浏览器主要通过 HTTP 协议连接网页服务器而取得网页, HTTP 容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1,这个协议转载 2012-11-05 10:14:36 · 649 阅读 · 0 评论 -
css3实现的the Sexy Buttons
今天做一些用css3实现的the Sexy Buttons 源代码下载地址:http://download.csdn.net/my/uploads/1html代码如下:Sexy CSS Buttons Normal Hover Active css代码如下:body, html原创 2012-11-06 17:10:00 · 1135 阅读 · 0 评论 -
三种方法实现弹出框边框半透明和圆角的效果
发现支付宝的一个充值抽红包的系统里面有个弹出对话框,边框半透明效果,就想着自己做一个弹出对话框效果,用三种方法实现弹出框边框半透明和圆角的效果1.用rgba来实现背景半透明,设置内边距2.设置border颜色半透明,利用background-clip设置;3.利用滤镜效果,实现空元素背景半透明border-radius实现圆角效果源码下载地址:http://downlo原创 2012-11-09 13:11:22 · 2757 阅读 · 0 评论 -
用jquery模仿的a的title属性
用jQuery实现的模仿a的title属性的例子,在测试的时候ie6,7上出现了层次混乱,不过最终解决了。源代码下载地址:http://download.csdn.net/myhtml代码如下: UI设计师 所属部门:技术部 工作地点:郑州原创 2012-11-26 12:24:35 · 1261 阅读 · 0 评论 -
几种简单的社交网站的标志按钮
几种简单的社交网站的标志按钮。主要运用boder,border-radius,box-shadow等css技术源代码下载地址:http://download.csdn.net/myhtml代码如下: Twitter Facebook Hacker News Forrst RSS css代码如原创 2012-11-12 10:35:28 · 1539 阅读 · 0 评论 -
css3实现带有简单动画按钮导航
用css3实现的带有简单动画的按钮导航,主要运用了transition技术源代码下载地址:http://download.csdn.net/my点击打开链接transition语法:transition-property:all | none | [ , ]*默认值:all取值:all:所有可以进行过渡的css属性 none:不指定过渡的css属原创 2012-11-15 09:44:13 · 1179 阅读 · 0 评论 -
css3实现的一些灰色的导航条按钮
以前做网页时候一般一些渐变的导航条和菜单效果都是用背景图片来实现想要的效果,今天用css3实现了一些灰色的漂亮的导航按钮效果,主要分为两种,源代码下载地址:http://download.csdn.net/my主要运用的css3中的渐变技术和border-radius,box-shadow技术;主要实现三种效果,当默认状态:hover及:active时效果。html代码如下:原创 2012-11-14 15:35:39 · 2508 阅读 · 0 评论 -
css3实现的精美菜单
下拉菜单是我们做前端经常遇到的一些案例,今天学习了一下一个博客做的案例,例子如下:源代码下载地址 css部分代码ul { font-family:Arial, Helvetica, sans-serif; background:#ccc; background:-webkit-gradient(linear, left top, l原创 2012-10-18 13:55:00 · 1284 阅读 · 0 评论 -
用 CSS实现Bubble提示框的两种方法
第一种方法:主要是通过css border属性来实现,两个小三角形叠加,实现小箭头; 代码如下: 无标题文档*{ margin:0; padding:0;}body{ padding:20px; }.tips{ background:#FFF8E8; border:1px solid #FFBA00; padding:10px; position:abso原创 2012-09-19 11:09:56 · 2358 阅读 · 0 评论 -
用纯css3和html实现一些复杂的泡沫对话框
前几天用css3实现了一些基本的泡沫对话框,今天在原来的原理的基础上做了一些复杂的。 html代码如下This only needs one HTML element. For example, <p>[text]</p>. But it could be any element you want.原创 2012-07-30 17:23:30 · 1580 阅读 · 4 评论 -
用jQuery实现页面遮罩弹出框
页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: 点击这里查看效果 关闭 正在加载,请稍后.... css代码如下: body { font-family:Ari原创 2012-08-01 14:18:01 · 3753 阅读 · 1 评论 -
jQuery bind事件练习及tab标签切换的实现
1.bind事件 jQuery部分代码:$(document).ready(function(){ $("input[type=button]").bind({ click:function(){$("p").slideToggle();}, mouseover:function(){$("body").css("background-原创 2012-08-31 14:41:27 · 2319 阅读 · 0 评论 -
jQuery实现一个图片左右滚动
jQuery实现的一个图片左右循环滚动的例子,html代码如下: 我是第1张图片 我是第2张图片 我是第3张图片 我是第4张图片 我是第5张图片 我是第6张图片 我是第7张图片 我是第N张图片 当前显示的是第 1 张图片css代码如下:原创 2012-09-03 11:23:00 · 2355 阅读 · 0 评论 -
利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果
主要运用css的border属性来实现三角形,jQuery实现切换和选中的效果:html代码如下:上一页 12 345 678 下一页css代码如下:* { margin:0; padding:0; font-size:12px;}.page { ma原创 2012-09-03 16:37:39 · 2994 阅读 · 0 评论 -
一般用css设置中文字体的Unicode编码
最近常用到关于用css设置字体方面的问题,比如一般网页默认的宋体,但是我们要是直接用font-family:"宋体";虽然浏览器可以识别,但是在一些特殊的浏览器里面容易出现乱码或者致使别的样式出现问题,今天特意总结了一下关于一些字体的unicode编码字体英文unicode微软雅黑Microsoft YaHei\5FAE\8F6F\9原创 2012-08-24 16:08:20 · 1774 阅读 · 0 评论 -
一般左边后台点击收缩展开的效果
html代码: 秋秋淘衣坊 秋秋 酒吧\夜店论坛 福州电影院 秋秋淘衣坊2 房屋出租 招聘求职 福州拼车 二手交易市场 秋秋淘衣坊3 福清论坛 长乐论坛 平潭论坛原创 2012-09-04 16:19:47 · 2728 阅读 · 0 评论 -
JavaScript解决e6不支持不支持max-width,max-height的问题的方法
今天遇到一个关于用js解决ie6不支持支持max-width,max-height的问题,刚开始用jQuery方法来实现,不过一直获取不到css里面的值,如 if($.browser.msie && $.browser.version == 6.0) { var maxWidth = parseInt($('.viewBigPic img').css('max-width')原创 2012-09-10 13:58:26 · 1126 阅读 · 0 评论 -
用css3和ico图片实现火狐社区的分享图标
今天看火狐社区的页面,看到关于分享功能的几个图标实现的css3样式,模仿着做一个,可以支持chrome,firefox,ie9,opera等浏览器,不过不支持ie9以下的浏览器;源码下载地址:代码如下: 无标题文档html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p原创 2012-10-08 14:53:06 · 1336 阅读 · 0 评论 -
用css实现模仿火狐社区的一个提示框
今天研究了一下firefox社区的一个提示框,模仿写了一个 源代码下载代码如下:无标题文档html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote,原创 2012-10-08 16:23:58 · 1336 阅读 · 0 评论 -
用css及jQuery实现的精美拉下菜单导航条
用css及jQuery实现的下拉精美菜单导航,源代码下载地址:http://download.csdn.net/myhtml代码: Home Services Portfolio Freebies原创 2012-11-16 10:07:22 · 1320 阅读 · 0 评论 -
用css和html实现的一个forest logo
用css和html实现的一个forest logo,里面运用了css3中的transform中的rotate技术,源代码下载地址:http://download.csdn.net/my html代码如下: css代码如下:* { marg原创 2012-11-19 09:34:44 · 1315 阅读 · 0 评论 -
如果用float实现居中
今天发现自己做的一个项目中有个图片切换的下面的按钮不是固定个数,程序那边根据循环实现放几个切换的按钮,但是按钮相对于整体的要居中,刚开始想着用display:inline-block;实现,但是ie6和ie7对块元素使用这个属性不是特理想,只能用hack解决,于是去请教同事,发现还有一种更好的解决办法。html代码如下:原创 2013-09-05 14:58:57 · 3014 阅读 · 0 评论 -
用jQuery实现返回页面顶部的功能
页面中有返回顶部的图标用起来使我们预览页面更方便,这个功能也是在网站中常见的功能,今天研究了一个简单的例子,用jQuery实现返回顶部的功能:css代码如下:*{ margin:0; padding:0;}#backToTop{ position:fixed; bottom:10px; left:80px; _position: absolute;_left:80px; _b原创 2012-07-31 15:06:59 · 1086 阅读 · 0 评论 -
2014年忙碌
从进入2014年以来一直在忙碌着工作事情,很少静下来心来去学习技术方面的知识,也没时间去逛那些技术博客、论坛,博客也荒废了半年多,现在所有的项目终于上线,也可以静下心来充电了。 年初一直准备工厂店移动站的项目,忙碌一两个月后准时上线,紧接着工厂店采购会员后台升级改版工作,一直到五月底,进入了工厂店几个后台系统和前台的所有的改版工作,目前所有项目在9月28完成了工厂店单店前台、工厂店供原创 2014-10-16 08:30:15 · 1176 阅读 · 1 评论 -
EDM邮件营销之如何制作模板
在进行EDM邮件营销时,设计和制作模板也是一项很重要的工作,虽然可能不比EDM数据收集来的重要,但是也是不可忽视的。下面来讲解下在EDM邮件营销时如何制作模板。1,模板编码语言选择模板编码设定与使用的发送软件有关,一般来说,utf-8为较常用的选择,错误的编码会造成用户浏览的时候出现乱码;2,不要使用div,使用最简单的嵌套table定位Div+css是近几年新兴的web2.0定位转载 2014-10-17 14:13:54 · 2887 阅读 · 0 评论 -
css常用单位px、em、 rem 区别与各自的用法解析
我们在布局页面中,总要用到一些有关字体,元素宽度,高度等长度单位,一般pc端常用到像素单位,移动端用em,rem 单位,它们都有各自的特点,今天总结一下它们的特点、区别px是Pixel的缩写,也就是说像素是指基本原色素及其灰度的基本编码,由 Picture(图像) 和 Element(元素)这两个单词的字母所组成的,如同摄影的相片一样,数码影像也具有连续性的浓淡阶调。px是固定大小的单位,像素...原创 2019-03-21 09:49:11 · 1565 阅读 · 0 评论 -
了解css中伪元素 before和after的用法
层叠样式表(CSS)主要用于将样式应用于HTML标签,但是在某些情况下,向文档添加额外标签元素是多余的或不可能的,CSS中实际上有一个特性允许我们在不中断实际文档的情况下添加额外标签,即伪元素。你听说过这个术语,尤其是当你一直在学习我们的一些教程时。实际上,有一些CSS族成员被归类为伪元素,例如::first-line, :first-letter, ::selection, :before ...翻译 2019-03-22 11:00:15 · 2328 阅读 · 1 评论 -
浅谈CSS3 响应式布局--Media Queries
CSS3 Media Queries , CSS3媒体查询。使用 @media 查询,你可以针对不同的媒体类型定义不同的样式;也可以针对不同的屏幕尺寸设置不同的样式;当重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。用法如下@media 媒体类型 and|not|only (媒体特性) { ...... }媒体类型值 描述all :用于所有设备pr...原创 2019-03-23 09:30:48 · 416 阅读 · 0 评论 -
6个很棒的PostCSS插件,让您成为一个CSS向导
PostCSS是一个非常通用的工具,它可以通过javascript插件转换CSS样式。它的灵活性在于它的建造方式。PostCSS的核心部分是一个node.js模块,您可以使用NPM进行安装,它有一个由200多个插件组成的生态系统,您可以在项目中选择使用这些插件。PostCSS既不是预处理器,也不是后处理器,因为不同的PostCSS插件可能属于这两类中的任何一类,或者同时属于这两类;它完全取决于...翻译 2019-03-27 17:00:43 · 1761 阅读 · 2 评论 -
如何将CSS3 transforms应用于背景图像
CSS transformations虽然很酷,但还没有应用于背景图像。这篇文章提供了一个很好的解决方法,当您确实想要旋转背景图像时,或者在容器元素旋转时保持背景图像不变。使用css3转换属性可以缩放、倾斜和旋转任何元素。它在所有没有厂商前缀的现代浏览器中都得到支持。(我已经添加了-webkit-以防您希望支持一些较旧的浏览器。)#myelement {-webkit-transform: ...翻译 2019-04-09 09:38:18 · 574 阅读 · 0 评论 -
最近做项目的一些关于重构方面的总结
这半年做专题和项目的过程中,遇到一些有时很难想到问题,今天在这总结以下:1. 关于width:100%缩小窗口时背景图片出现空白bug ,刚开始找了半天方法都没解决,最后在里面加了最小宽度给解决了, 例如: .top{ width:100%; height:原创 2013-07-04 10:59:12 · 1831 阅读 · 3 评论 -
用js实现改变随意改变div属性style的名称和值的结果
一些简单的例子,用原生js和jQuery实现随意改变div属性,和重置。代码如下: 函数传参,改变Div任意属性的值 body,p{margin:0;padding:0;} body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;} #ou原创 2013-05-27 16:18:25 · 3970 阅读 · 0 评论 -
简单的选项卡功能实现
第一种方法是用原生的js 代码如下: 简单选项卡 body,ul,li{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} #outer{width:450px;margin:10px auto;} #tab{overflow:hidden;zoom:1;backgr原创 2013-05-24 16:31:03 · 1686 阅读 · 0 评论 -
浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer
浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet ExplorerCSS Hack 是在标准 CSS 没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析 CSS 没有达成一致前,我们只能用这样的方法来完成这样的任务。网上你可能能搜索到一大堆的 CSS Hack,但是我今天发布的你可能并不都很了解,因为这些都是只针对单转载 2012-11-21 08:52:40 · 804 阅读 · 0 评论 -
一些css3简单的练习
html代码如下:源代码下载地址:http://download.csdn.net/my css代码如下* { margin:0; padding:0;}#wrapper { width:255px; height:255px; position:re原创 2012-11-22 09:15:37 · 1146 阅读 · 0 评论 -
用css3实现的Android Logo
用纯css3无js实现的Android Logo,带有简单的动画,主要运用css3的transform,transition源代码下载地址:http://download.csdn.net/myhtml代码如下: css代码如下:*原创 2012-11-23 10:53:30 · 1257 阅读 · 0 评论