随笔分类 -  Div+CSS

Ps画虚线
摘要：面对这种情况，李胖纸一般都很明智的让他去百度了，不过问的多了，我还是在这介绍下我是咋做的吧。度娘的结果中也提供了很多画虚线的办法，有激情的同学可以去搜搜看。但是对于精细的网页设计来讲，如果用到了虚线，那么它的精细度对效果影响很大，做的好了，就能带来意想不到的效果，废话不多说了，下面介绍几种网页设计中用得到的虚线画法。1、直线在网页building中，直线型的虚线用的很多，例如横向分割和竖向分割，大致分为点划线（dotted）和虚线（dashed），如下图：做这样的线非常简单，我们只用到PS中的文字工具即可模拟出来，设置如下：如果你的线是竖着的，只需要把图层旋转90度即可，我一直是这么做的。2、 阅读全文
posted @ 2012-11-12 20:28 小2010 阅读(908) 评论(0) 推荐(0)
用ps调渐变色 实用推荐
摘要：大家对某一图层做渐变叠加的时候，都习惯直接选取颜色吧……像这样这样做，看起来非常专业，不过据我所知，好多人做网页设计并没有专门学过设计学知识，直接这样取色很不好操作，特别容易就把渐变搞的不伦不类。其实有个非常简便的方法，能让你做出和谐美丽的渐变颜色，不够首先得先了解2个知识点。1、颜色库Photoshop除了拾色器之外，还为我们提供了已经配好颜色的颜色库颜色库分为很多种，多数是为印刷准备的，和比色卡匹配，不过这些颜色用在屏幕介质上也是ok的，做好看的渐变的第一步就是要选好一个基准色，从颜色库选取是个很好的方式。2、混合模式Photoshop为我们提供了不同的混合模式，例如正片叠底，滤色，强光， 阅读全文
posted @ 2012-11-12 20:06 小2010 阅读(2201) 评论(0) 推荐(0)
css 去除按钮、链接中的虚线框
摘要：如何去除虚线框对于如何去除虚线框，有很多人推荐这样写：1 a:focus, input[type=button] ,input[type=submit] {2 outline:none;3 }从这段代码来看，让我们小分析一下，有两点可能是需要我们注意的：去除不全面IE6/7 并不支持 outline 属性, firefox 下 input 的虚线并没有去除去除太多除 IE6/7 外的所有浏览器的按钮（firefox没去掉）和链接都被去掉虚线框这是看起来矛盾的两个问题。其实不然，因为是两个现同性质的问题。从技术上，这个方法并不全面。从体验上，我想你也知道，我们只是去掉部分不需要的... 阅读全文
posted @ 2012-08-21 09:42 小2010 阅读(957) 评论(0) 推荐(0)
一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
摘要：一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案 百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype...一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题百度源代码如下<!Doctype html><htmlxmlns=http://www.w3.org/19 阅读全文
posted @ 2012-05-31 18:35 小2010 阅读(378) 评论(0) 推荐(2)
CONTENT: ''在CSS样式中的作用
摘要：结合after或before伪类，在元素的开头或结尾附加上一定的内容，content：""的引号中即是添加的内容，比如说我们这么写：<div>学而时习之不亦说乎</div>div:before{content:"子曰："}那么在显示时就会显示子曰：学而时习之不亦说乎这其中“子曰：”并不会出现在DOM文档中ps：其实这个主要是用来解决兼容性问题参考：http://www.w3school.com.c... 阅读全文
posted @ 2011-11-21 16:40 小2010 阅读(251) 评论(0) 推荐(0)
DIV布局的网页中嵌入Flash的方法
摘要：Flash 嵌入的问题论坛中有人问了好多次，到底应该怎么用，为什么通不过验证，要通过验证怎么办等等等。讨论中也出现了不少的误解，所以我单开一个帖总结一下我所知道的东西，不想看我罗嗦的直接跳到最后看结论就可以了。 一、传统的方法: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpd... 阅读全文
posted @ 2011-11-21 14:27 小2010 阅读(220) 评论(0) 推荐(0)
css命名规则
摘要：头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点... 阅读全文
posted @ 2011-11-21 12:22 小2010 阅读(126) 评论(0) 推荐(0)
ps之网页设计企业站建设推荐
摘要：从事设计者可以参考，模仿。 阅读全文
posted @ 2011-11-14 11:42 小2010 阅读(188) 评论(0) 推荐(0)
网页常见卷页效果
摘要：网页常见卷页效果 最终效果 1) 利用圆角矩形工具建立一条路径;使用转换点工具移动左上角路径节点,使其产生卷页的形状; 2) 用任意一种色彩填充工作路径;再复制下半部分;对其添加图层样式,如图所示. 3) 用任意一种色彩绘制一个圆角矩形;将其图层移至红色矩形之后;添加图层样式,如图所示. 4) 再新建一层,绘制圆色矩形,颜... 阅读全文
posted @ 2011-11-14 11:39 小2010 阅读(212) 评论(0) 推荐(0)
常用的CSS命名规则
摘要：常用的CSS命名规则 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：... 阅读全文
posted @ 2011-10-30 19:27 小2010 阅读(141) 评论(0) 推荐(0)
用CSS制作圆角框的方法一,二
摘要：CSS产生之初，只能制作直角边框，虽然可以制作圆角的CSS3已经问世，但还不普及。曲线设计在网页中的广泛应用，使圆角成为了时髦的CSS技术之一。 创建圆角的方法有很多种，每种要根据实际情况应用。下面我介绍一个最简单的圆角边框制作方法——固定宽度的圆角框。 顾名思义，固定宽度的圆角框的宽度是固定的，而高度是可伸展的，如图一的效果，这样的圆角框只要两张图片即可制作完成。一张图片用于... 阅读全文
posted @ 2011-10-29 12:53 小2010 阅读(653) 评论(0) 推荐(0)
300+Jquery, CSS, MooTools 和 JS的导航菜单资源
摘要：如果你是网站前端开发人员，那么对你来说，也许做一个漂亮导航菜单会很得心应手。但今天暴风彬彬要为大家总结各种导航菜单的资源，以便让大家的网站前端开发的工作更方便更快速，只要选择现成的例子就可以应用于自己的网站了。暴风彬彬收集的这些资源，从非常简单的HTML和CSS导航菜单，到非常复杂和高级的JQuery、JavaScript和MooTools技术，这都可以让你轻松实现褪色、滑动、拖动等效果。如... 阅读全文
posted @ 2011-10-26 15:40 小2010 阅读(173) 评论(0) 推荐(0)
<推荐>65个以自然风光为背景的UI设计
摘要：以自然风光为背景的设计是当前UI设计是趋势。在平时浏览网站的时候，也许你会不经意间看到网站Header或者整个网站以清新的自然景象为背景，是否让你眼前一亮呢？下面介绍的65个以自然风光为背景的设计也许会给你一些灵感，这些设计有的是Photoshop教程,有的是Photoshop笔刷和纹理，也有的是矢量素材。希望大家喜欢。 Photoshop Layout Tutorials: How to C... 阅读全文
posted @ 2011-10-26 15:16 小2010 阅读(258) 评论(0) 推荐(0)
13个绚丽的Jquery 界面设计
摘要：转载于http://www.cnblogs.com/ywqu/archive/2010/01/14/1647480.html 今天共享一些令人振奋的UI教程，这些UI大部分是基于Jquery的插件，主要包括动态切换视图的相册、3D旋转分享按钮、Facebook admin Panel，下滑效果的导航Menu，滑翔购物车功能，漂亮的Form表单元素等等。 How to create the im... 阅读全文
posted @ 2011-10-26 15:10 小2010 阅读(190) 评论(0) 推荐(0)
36个引人注目JQuery导航菜单
摘要：转载于 http://www.cnblogs.com/ywqu/archive/2009/08/15/1546559.html 1.jQuery 选项卡界面 / 选项卡结构菜单教程 这种类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此演示哟，你一定会喜欢上它的。 Preview || Down... 阅读全文
posted @ 2011-10-26 15:02 小2010 阅读(239) 评论(0) 推荐(0)
网页设计灵感手册
摘要：http://haoduo.info/ 网页设计灵感手册 http://www.freecsstemplates.org/ xhtml css free templates layouts 阅读全文
posted @ 2011-10-20 13:01 小2010 阅读(176) 评论(0) 推荐(0)
纯CSS的下拉菜单
摘要：结合JavaScript的下拉菜单，纯CSS的下拉菜单我也写过很多了。不过在微软 Microsoft Expression Web 的相关站点上看到这个纯CSS下拉菜单的时候，我还是觉得很赞赏。这应该是最精简、最干净的纯CSS下拉菜单了。 先看一下效果（这是我重新实现的）： 下面是实现方法： 首先是菜单的XHTML代码： <ul> <li><a href="#">菜单一</a></l... 阅读全文
posted @ 2011-09-01 22:49 小2010 阅读(283) 评论(0) 推荐(0)
block(块元素)、inline(内联元素)的差别是什么？
摘要：我们首先要了解，所有的html元素，都要么是block(块元素)、要么是inline(内联元素)。下面了解一下block、inline各自的特点： block元素的特点： Example Source Code [www.52css.com] 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度。 inline元素的特点： Example Sou... 阅读全文
posted @ 2011-07-31 00:49 小2010 阅读(206) 评论(0) 推荐(0)
一个css中z-index的用法
摘要：大多数的CSS属性都很容易使用。常常，当您对标记语言的元素使用CSS属性时，产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性，却会有一些复杂，且只能在给定的环境下才会工作。 Z-index属性便属于上面所说的后面的那一组。Z-index无疑的比其他任何属性都会频繁的导致（兼容性）上的混乱和（开发者心理上）的挫败感。但滑稽的是，一旦你真正理解了Z-index，你会发现它却是一个非常容易使用的... 阅读全文
posted @ 2011-07-29 11:12 小2010 阅读(378) 评论(0) 推荐(0)