随笔分类 -  design

1 2 下一页
IE6左右边框断线现象
摘要：1.左右边框断线现象条件：容器内有两个浮动，并用CLEAR清除浮动，父元素中没有定义高度宽度。症状：在ie下拖动滚动条时最外层的border会消失, 情况如下：HTML代码<div style="margin:500px100px 10px 100px;padding:50px;border:1px solid #ccc;line-height:300%"><div style="float:left">网页标准化过程中一些理论<br />网页标准化过程中一些理论<br />网页标准化过程中一些理论< 阅读全文
posted @ 2013-03-02 12:51 coxsoft 阅读(154) 评论(0) 推荐(0)
IE6和ie7中border断线消失现象
摘要：这个问题困扰了我很久，今天终于找到解决的答案了，百度Google了好几个小时，也许是我表达的不对头吧，我搜的时候是搜ie中border消失现象，怎么也找不到，后来才发现大家都称之为断线现象。唉，不说也罢，看来自学css的确是有点麻烦，不过很有成就感啦，下面是解决办法。如果容器内有两个浮动，并用CLEAR清除浮动。在ie6和ie7下拖动滚动条时最外层的border会消失，如果给最外层加上宽度或者高度就不会出现。这是一个奇怪的现象，目前还不能解释是什么原因所导致的。　我们可以通过下面的办法解决： 1.在父元素中加入height:1% 2.加入一个宽度 3.加入一个背景色 阅读全文
posted @ 2013-03-02 12:43 coxsoft 阅读(239) 评论(0) 推荐(0)
CSS 盒模型
摘要：网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的，请看下图：如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿)，就会很熟悉下面的图表了。这个图表很好地展示了作用于页面上任意盒子的数值。注意以上两个例子中，margin 都是白色的。Margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容，因此 margin 是盒模型的一个重要的组成部分。盒子本身的大小是这样计算的：Widthwidth + padding-left + padding-right + border-left + border-rightHei 阅读全文
posted @ 2012-08-06 17:21 coxsoft 阅读(165) 评论(0) 推荐(0)
关于margin-top失效的解决方法
摘要：常出现两种情况：（一）margin-top失效先看下面代码：<div><div class="box1" >float:left</div><div class="box2">clear:both; margin-top:20px;</div></div>两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距 margin-top没有效果。网上能找到的两种比较靠谱的解释：1：“在CSS2.1中，水平的margin不会被折叠；垂直margin可能在一些 阅读全文
posted @ 2012-08-05 14:59 coxsoft 阅读(180) 评论(0) 推荐(0)
古董浏览器(IE6,IE7) margin 无效的情况！
摘要：margin 失效，楼主开玩笑的吧！ 前几天做一个页面的时候遇到了这个问题。我设置div的margin-top IE6下居然无效；后来搞了好半天没弄出来。只能设置父元素的padding-top;来达到效果。看下面的演示代码； 今天有时间，所以特意做了一个测试。 <style type="text/css"> .test-1,.test-2{border:5px solid #F00;} .test-1{border-color:#000;} /*width:100%; height:auto !important;heigh... 阅读全文
posted @ 2012-08-05 14:58 coxsoft 阅读(146) 评论(0) 推荐(0)
网页开发的6种在线调试环境
摘要：如今的网页代码，一般由三个部分组成： * HTML，语义层，提供网页的内容。 * CSS，表现层，规定网页的外观。 * Javascript，动作层，定义用户与网页的互动。理想的开发环境，应该既可以分别调试这三种代码，又可以轻松查看它们合并在一起的整体效果。浏览器是最合适的效果查看工具，所以很多人想到，代码调试环境也可以直接部署在浏览器中，以网站的形式提供服务。下面，我根据Design Shack的文章，总结一下目前最常见的6种网页开发在线调试环境。它们大大方便了网页设计师的工作，极大地提供了工作效率。一、CSSDesk网址：http://cssdesk.com/（需FQ）这个网站是最早... 阅读全文
posted @ 2012-06-20 10:18 coxsoft 阅读(206) 评论(0) 推荐(0)
CSS中背景图片定位方法
摘要：CSS中背景图片的定位，困扰我很久了。今天总算搞懂了，一定要记下来。在CSS中，背景图片的定位方法有3种： 1）关键字：background-position: top left; 2）像素：background-position: 0px 0px; 3）百分比：background-position: 0% 0%;上面这三句语句，都将图片定位在背景的左上角，表面上看效果是一样的，实际上第三种定位机制与前两种完全不同。前两种定位，都是将背景图片左上角的原点，放置在规定的位置。请看下面这张图，规定的位置是"20px 10px"和"60px 50px"，都是 阅读全文
posted @ 2012-06-20 09:33 coxsoft 阅读(198) 评论(0) 推荐(0)
制作CSS气泡框
摘要：气泡状文本框，是一种很生动的网页设计手段。它可以用来表示用户的发言。也可以用来作为特定信息的提示符。DVD租借网站Netflix，还用它显示碟片的详细信息。=========================制作CSS气泡框的传统方法，需要5张背景图片，分别是： *tl.gif，左上方的圆角。 *tr.gif，右上方的圆角。 *bl.gif，左下方的圆角。 *br.gif，右下方的圆角。 *angle.gif，突出的三角形。现在假定有这样一段代码： <blockquote>床前明月光，疑是地上霜。</blockquote> <p>李白</p>我们希 阅读全文
posted @ 2012-06-20 09:32 coxsoft 阅读(250) 评论(0) 推荐(0)
CSS选择器笔记
摘要：去年我学jQuery的时候，曾经做过一点选择器（selector）的笔记。这几天拿出来看了一下，发现很多都忘记了。所以，我决定把它们贴在这里，方便以后查看。这对其他朋友应该也是有用的，毕竟选择器是制作网页效果的第一步。笔记分为两个部分，今天是CSS的选择器，以后还有一部分xPath的选择器。今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定。=====================CSS选择器笔记阮一峰 整理参考网址：456 Berea Street一、基本选择器序号选择器含义1.*通用元素选择器，匹配任何元素2.E标签选择器，匹配所有使用E标签的元素3..infocl 阅读全文
posted @ 2012-06-20 09:30 coxsoft 阅读(110) 评论(0) 推荐(0)
自适应网页设计（Responsive Web Design）
摘要：随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多 阅读全文
posted @ 2012-06-20 09:26 coxsoft 阅读(130) 评论(0) 推荐(0)
CSS3圆角详解
摘要：CSS3是样式表（style sheet）语言的最新版本，它的一大优点就是支持圆角。网页设计大师Nicholas Zakas的最新文章，清晰易懂地解释了CSS3圆角的各个方面，非常值得学习。以下就是我翻译的中文版。=========================================CSS3圆角详解作者：Nicholas Zakas译者：阮一峰原文：http://msdn.microsoft.com/en-us/scriptjunkie/gg508841.aspx发表日期：2010年12月8日一、CSS3圆角的优点传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使 阅读全文
posted @ 2012-06-20 09:25 coxsoft 阅读(133) 评论(0) 推荐(0)
一些颜色工具网站
摘要：下面是一组颜色工具网站，非常有用。理论部分，可以参考我前几天做的颜色理论笔记。1. ColorSchemer Gallery网址：http://www.colorschemer.com/schemes/[说明] 专门收集用户上传的各种配色方案。2. WebSite Color Picker网址：http://www.digitdesigns.com/colrPick/framePic.htm[说明] 为网页的背景、字体、链接选择不同的颜色，实时查看效果。3. ColorJack网址：http://www.colorjack.com/sphere/[说明] 选择一种主色调后，自动生成其他相关的颜 阅读全文
posted @ 2012-06-20 09:25 coxsoft 阅读(215) 评论(0) 推荐(0)
HTML模板和CSS基准样式（三）
摘要：今天是这个连载的最后一部分，内容关于网页的布局。废话少说，大家先看我做的一个范例网页，请点击进入。然后，我对这个范例做一点解释。================从布局上看，世界上所有的网页，大多由三个部分构成：* Header（头部）* Footer（尾部）* Content（内容区）一般来说，Header总是在网页的上方，Footer总是在网页的下方，Content是中间的一大块。在 Content中又可以分成很多栏，从一栏式到三栏式都很常见。我们的目的是通过CSS文件，实现栏位和布局的自动调整。网上有很多现成的布局模板，我采用的是Tripoli项目中的布局模板，然后做了一些修改。它要求的网 阅读全文
posted @ 2012-06-20 09:24 coxsoft 阅读(242) 评论(0) 推荐(0)
HTML模板和CSS基准样式（一）
摘要：我经常写网页。很多人喜欢用Dreamweaver，但是我的习惯是直接手写代码。虽然那样看上去很原始，但是能够做到对网页最精确的控制，并且减少了不必要的冗余代码。手写代码最麻烦的地方在于，每次都必须写一些重复性的代码，比如<head>和<body>这样的标签。所以，这两天我就在做一个模板，将那些重复性的代码都事先写好，以后写网页的时候，只要直接写内容部分就可以了。下面就是我制作模板的过程，也顺便整理了一下相关的HTML和CSS知识。我想对需要自己设计网页的朋友，应该都是有用的。因为内容比较多，需要分三次才能贴完。今天是第一部分"HTML模板"。==== 阅读全文
posted @ 2012-06-20 09:19 coxsoft 阅读(323) 评论(0) 推荐(0)
DD_belatedPNG解决IE6下PNG不透明问题
摘要：众所周知IE6不支持透明的PNG图片,而PNG图片在Web设计方面表现力上，具有其它图形格式所达不到的效果，IE6这一致命缺陷极大地限制了Web设计的创意发挥。虽然解决IE6的透明PNG的方法也很多,从使用IE特有的滤镜或是e­xpression,再到javascript+透明 GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat属性。而使用DD_belatedPNG.js可完美的解决IE6下PNG图片透明问题，并且支持backgrond-position与background-repeat. 这是其他方法所 阅读全文
posted @ 2012-03-29 10:02 coxsoft 阅读(165) 评论(0) 推荐(0)
jQuery图片轮播插件：jqFancyTransitions
摘要：又发现了一款不错的图片轮播插件，图片的切换效果还是很不错的，大家可以点击下面的链接预览：http://www.iawen.com/Demo/jqFancyTransitions/demo.html具体的使用方法，大家可以去插件的主要查看.主页是：http://www.workshop.rs/projects/jqfancytransitions这里简单的说明一下：首先是包含脚本：<script type="text/javascript" src="jquery-1.5.2.min.js"></script> <script 阅读全文
posted @ 2012-03-28 22:19 coxsoft 阅读(600) 评论(0) 推荐(0)
一个简单的网页调色板
摘要：一个简单的调色版.效果不错.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html 阅读全文
posted @ 2011-10-29 20:46 coxsoft 阅读(324) 评论(1) 推荐(0)
看着非常舒服的颜色
摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>舒服的颜色</title><meta http-equiv="Content-Type" content="tex 阅读全文
posted @ 2011-10-29 20:43 coxsoft 阅读(137) 评论(0) 推荐(0)
网站幻灯切换效果JS版
摘要：我想对于这个焦点图片轮换大家都不陌生吧.不过原来的是FLASH版的.今天偶然看到一个JS版的.效果很酷.在这和大家分享下.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=& 阅读全文
posted @ 2011-10-29 20:41 coxsoft 阅读(251) 评论(0) 推荐(0)
按比例缩小图片方法总结
摘要：其实早些时候就想写一下这个东东，因为想换下主题用用，但发现日志里的图片却因为太大而把POST撑开了，变得很难看。我想遇到这个问题的人一定不少吧。之前一直太忙，没时间去整它，今天抽点时间写一下怎样解决图片撑开的问题，方法很多的、接下来一一给大家道来…方法一：Max-width|Max-height这是最简单的方法了，给图片一个最大的宽度和高度:#Imgbox img { max-width: 500px; max-height: 300px; border:0; ... 阅读全文
posted @ 2011-10-29 20:38 coxsoft 阅读(510) 评论(0) 推荐(0)

1 2 下一页