随笔分类 -  Css

CSS兼容IE6 IE7 IE8 IE9 Firefox的总结
摘要：无标题页 阅读全文
posted @ 2013-07-08 13:19 zhangchun 阅读(5508) 评论(0) 推荐(0)
css 字符制作三角边框
摘要：<!doctype html><html><head><meta charset="utf-8"><title>字符制作三角边框</title><style>*{margin:0;padding:0;}/* 方式一 margin */.test{font-family:SimSun; width:300px; margin:0 auto; border:1px solid #F00; margin-top:20px; height:100px;}.test em,.test span{ fo 阅读全文
posted @ 2013-05-20 17:38 zhangchun 阅读(539) 评论(0) 推荐(0)
IE中的CSS3不完全兼容方案
摘要：http://www.cnblogs.com/platero/archive/2010/08/31/1870151.html 阅读全文
posted @ 2013-05-03 17:19 zhangchun 阅读(108) 评论(0) 推荐(0)
让IE支持CSS3圆角的方法
摘要：如果要想在IE浏览器中实现圆角的效果，我们一般都会采用圆角图片的方式。用图片的话，基本就跟浏览器没有多大关系了，因为任何浏览器都支持这种方式。 本文我们主要是讲解如果用CSS 3样式表来实现圆角效果，值得注意的是，IE6/7/8这三个IE浏览器版本都不支持CSS 3的解析，只有还不太主流的IE 9支持CSS 3和HTML 5的标准。让IE支持CSS 3的解析方法有很多种，下面介绍一种实用的让IE支持CSS 3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角： 1、下载一个压缩包，里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML.. 阅读全文
posted @ 2013-05-03 16:55 zhangchun 阅读(238) 评论(0) 推荐(0)
css中!important的作用
摘要：{*rule !important}这个css规则当今在网页制作的时候的普及已经非常流行了，以前我对它的理解就停留在‘浏览器是否识别阶段’ 而没有真正去研究过，可是现在发生了变化。众所周知，!important这个规则对Ie6.0,Ie7.0和Firefox能写hack，现在就来讲解这是什么原理： *对于Ie系列浏览器都能够识别， firefox 浏览器则不能识别; !important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用. (1)区别ie与firefox的hack为:border:2px solid #f00;*border:1px solid #... 阅读全文
posted @ 2013-05-02 16:57 zhangchun 阅读(404) 评论(0) 推荐(0)
CSS在IE和Firefox中的误区及区别
摘要：1. 对高度的解析 IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度 Firefox：没有定义高度时，如果内容中包括了图片内容，Firefox的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。 结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！2.布局问题 当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firef 阅读全文
posted @ 2013-05-02 15:48 zhangchun 阅读(294) 评论(0) 推荐(0)
csss
摘要：.JQtabel{/*border: red solid 1px; position: relative; top: 100px; left: 300px;*/}.t_header{background-color: #0B7DB2;height: 40px;}/*标题栏文本样式*/.title{margin-left: 7px;font-size: 26px;position: relative;top: 6px;left: 0px;}/*标题栏文本搜索框的样式*/.searchtxt{border: 1px solid;width: 120px;height: 22px;backgroun 阅读全文
posted @ 2012-08-28 17:53 zhangchun 阅读(610) 评论(0) 推荐(0)
利用CSS实现渐变效果，使网站更美观
摘要：第一步：将CSS主要代码封装进单独文件（方便重复利用）.HomeCon{ border:border:1px solid dimgray; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr= #284775, EndColorStr=#cccccc);}其中GradientType设置为0表示垂直渐变（从上到下）；设置为1则表示水平渐变（从左到右）。StartColorStr表示渐变开始颜色EndColorStr表示渐变结束颜色firefox支持的渐变样式.HomeCon{backg 阅读全文
posted @ 2012-06-12 15:01 zhangchun 阅读(349) 评论(0) 推荐(0)
css圆角
摘要：aspx页面：<%@ Page Language="C#" AutoEventWireup="true" CodeFile="圆角.aspx.cs" Inherits="圆角" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=& 阅读全文
posted @ 2012-05-22 16:25 zhangchun 阅读(236) 评论(0) 推荐(0)
纯css多级菜单
摘要：html页面：View Code 1 2 <!doctype html> 3 <title>纯CSS多级菜单by 司徒正美</title> 4 <meta charset="utf-8"/> 5 <meta name="keywords" content="纯CSS多级菜单 by 司徒正美" /> 6 <meta name="description" content="纯CSS多级菜单 by 司徒正美" /> 7 </ 阅读全文
posted @ 2012-03-30 13:19 zhangchun 阅读(347) 评论(0) 推荐(0)
css横向菜单
摘要：html页面：View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 5 <script type="text/javascript" src=&quo 阅读全文
posted @ 2012-03-30 12:00 zhangchun 阅读(388) 评论(0) 推荐(0)
纵向菜单
摘要：html页面代码：View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <link rel="Stylesheet" href="Style 阅读全文
posted @ 2012-03-28 22:29 zhangchun 阅读(303) 评论(0) 推荐(0)
Css实现tab标签效果(二)----------内容为动态的div
摘要：html代码：View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <link rel="Stylesheet" href="Styles/ 阅读全文
posted @ 2012-03-27 21:50 zhangchun 阅读(2008) 评论(0) 推荐(0)
Css实现tab标签效果(一)----------内容为静态的div
摘要：html页面：View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head runat="server"> 4 <title></title> 5 阅读全文
posted @ 2012-03-24 12:12 zhangchun 阅读(567) 评论(0) 推荐(0)