一般超大流量的网站都是将css直接放在页面里面的,这是应付超大流量的一种优化方案,比如网易首页,腾讯首页等。

1、减少http请求

链接到外部不免增加额外的http请求,这个是很耗时的。

2、避免裸页

假如存放css的服务器挂掉,整个首页就挂掉了。放在页面内,比较安全。用户访问页面时,不会因为CSS加载不上,而造成裸页面。

3、关于修改

你可能说这样不便于修改和管理。
实际上一般都是用程序动态加载进来的,然后用缓存静态化首页等。
知道的暂时就这么多了。

一:边框border缩写

border:border-width|border-style|border-color  例如:border:1px solid #000;

二:背景background缩写

background:background-color|background-image|background-repeat|background-attachment|background-position
例如:background:#f00 url(background.gif) no-repeat fixed 0 0;

三:字体font缩写

font:font-style|font-variant|font-weight|font-size|line-height|font-family
例如:font:italic small-caps bold 12px/1.5 sans-serif;
注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

四:列表list缩写

list-style:list-style-type|list-style-position|list-style-image
例如:list-style:square inside url(image.gif);

五:外边距margin与内边距padding缩写

1、基本写法
margn外边距与padding内边距是制作布局时常用到的两个属性,传统的写法如下:
margin:margin-top | margin-right | margin-bottom  |  margin-left
padding: padding-top | padding-right | padding-bottom | paddin-left
2、参数含义
margin与padding可以带一个、二个、三个、四个参数,各有不同的含义。
  • 一个参数时,例如我们常用到的*{margin:0;padding:0;}表示margin-top、margin-right、margin-bottom、margin-left和padding-top、padding-right、padding-bottom、paddin-left都一样为0。
  • 两个参数时,例如:*{margin:10px 5px; pdding:10px 5px;}表示margin-top、margin-bottom、padding-top、padding-bottom为10px,margin-right、margin-left、padding-right、paddin-left为5px
  • 当三个参数,例如:*{margin:10px 5px 6px; pdding:10px 5px 6px;}表示margin-top、padding-top为10px,margin-right、margin-left、padding-right、paddin-left为5px,margin-bottom、padding-bottom为6px.

现在我只加上这一种方法(能有效解决问题就行了),其他的还没有遇到,自己没有试验就不放心,暂时不加上去了。

这种情况是在Ie6下png图片当背景,然后让png透明,并且png上面的链接有效

1、解决透明:使用滤镜和css 的hack (需要注意的是hack里面的图片地址是相对网页的,css是图片地址是相对css文件的)

.submenu h3{  background:url(mu_bg.png) no-repeat; }
/* ie6 */* html .submenu h3 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’images/mu_bg.png’);background:none; }
 

2、解决链接失效

在连接上的a的样式里面加上position:relative;

反正就是麻烦,大家能用gif的就不要用png了,真折腾

这两天发现写的css在各大浏览器上都没有问题,可是在ie6上很不正常,这是因为我页面的编码是utf-8,但是css文件的编码是ANSI,这样的结果是css里面的中文(包括中文注释和中文字体)就会有问题,导致页面不正常。

解决方法很简单:

1、去掉css中的中文,或者用英文代替

2、将css文件的格式改为utf-8

现在一般网站打开新窗口采用的是target="_blank",这在过渡型DOCTYPE(xh tml1-transitional. dtd)下是允许的,但也不符合W3C的strict(xhtml1-strict.dtd)标准。

如果你去验证,会发现有下面的错误提示:

"there is no attribute target for this element(in this HTML version)"

这是因为W3C认为如果不经过用户同意,没有明确提示就打开一个新窗口是不礼貌的。所以我们只好用下面的rel属性来解决这个问题。rel是HTML4.0新增加的一个属性,这个属性用来说明链接和包含此链接页面的关系,以及链接打开的目标。rel有许多的属性值,比如next、previous,、chapter、section等等。

我们用rel属性的external和一个js脚本来解决问题,代码如下:

 <a href=”http://ourys.com“ rel="external"> 打开一个新窗口</a>

我们把js文件存储为external.js,然后通过<script type="text/javascript" src="external.js"></script>调用

下面是js文件

function externallinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externallinks;

关于css三栏布局自适应宽度的代码网站有很多,基本是左右两列浮动,中间自适应但是经过我的测试,在兼容性方面不令人满意,现在将其bug的地方指出,并写出自己写的可以兼容各个浏览器版本的方法。

1、左右浮动,中间用padding的bug,在ie7和低版本中出现文字离边框有padding的间距(因为middle默认的宽度是浏览器宽度减去两边宽度)。

2、左右浮动,中间用margin的bug,在ie6或更低版本,中间块和两边有几像素的空白。

我的解决方法:

采用绝对定位代替两边的浮动,用padding或者margin都不会有问题。

代码如下:

<body>
<div id="header">header</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="middle">middle</div>
<div id="footer">footer</div>
</body>

css文件代码:

body {margin: 0;padding: 0;}
#header {
    background: yellow;
    height: 150px;
    padding: 1px;
}
#left
{
    position:absolute;
    left:0;
    width: 150px;
    height: 150px;
    background: red;
}
#right {
    position:absolute;
    right:0;
    width: 150px;
    height: 150px;
    background: green;
}
#middle {
    padding: 0 150px;
    height: 150px;
    background: silver;
}
#footer {
    height: 150px;
    background: yellow;
}

注意:

左栏和右栏div必须在中栏之前出现。这样才能让中栏的内容“流”入左右间的空间。如果浏览器在一个或者两个边栏div之前先发现中栏,那么中栏将占据屏幕的一侧或者两侧,这样浮动的部分就会跑到中栏的下面而不是中栏的旁边了。
 

问1:什么情况下要用绝对垂直居中?

答:一些提示页面、登陆页面等必须居中显示,或者其他情况的块元素要居中显示。

问2:用绝对垂直居中有什么好处?

答:各个浏览器兼容,而且随着浏览器窗口的放大缩小,它始终处在最中间,不会产生用margin和padding产生的窗口缩小跑到下面去的现象。

问3:绝对垂直居中的代码是怎样的,怎么解释?
答:如下

position: absolute;  //绝对定位

width:600px;          //宽度500,

height:220px;         高度200

left:50%;             离父容器左边的距离是父容器宽度50%

top:50%;              离父容器上边的距离是父容器高度50%

 

margin-left:-300px;     这个是要居中div的宽度一半,

margin-top:-110px;       同上,高度的一半.

意思就是,div的左上顶点在父容器的中间,再左移、上移本身宽、高的一半 ,这样这个块永远在浏览器中间了。

 

 

今天在写一个网页的css的时候,发现一个图片连接在火狐下怎么点都没有反应,检查了好几遍,发现时float浮动没有闭合(即没有清除)。加上去之后就ok了,这引发了我探究一下float属性。

现将我总结的一些经验列在下面(以后遇到将在里面不断添加):

1、及时清除float

这点是最重要的了,如果不清除可能导致不可预料的错误,比如上面我遇到的,所以大家最好用完float时立即清除。

2、浮动元素设定宽度

你应该为所有的浮动元素设定宽度属性(除非是<img>元素,因其具有隐含的宽度)。如果不设定宽度,结果将是不可预知的。

3、注意哪些元素需要用float

例如A、B是两个块元素,A在左,B在右,如果B向左浮动,那么A就会在B正下方,但在ie下(ff不会)会造成了一个双边距的BUY,大家应当注意。

4、注意元素位置

如果一个三栏布局,A、B、C,A左浮动,C右浮动,B中间。那么就应该把B放在最后,让他融入A、C之间的空隙中。

附:

清除浮动方法:

1、在浮动元素下加上<div style="clear:both;"></div>(这样会产生无语义的标签)

2、用after伪类清除浮动(麻烦了点)

.clear_f:after{
     content:".";        /*在对象后,显示"."*/
     display:block;        /*以块显示(换行作用)*/
     height:0;        /*高度设为0,使其不对页面产生影响*/
     clear:both;        /*清除浮动*/
     visibility:hidden;        /*将以对象后增加的对象隐藏,但保留物理空间(因为高度设为0,所以对页面无影响)*/

}

这样调用:<div class="classname clear_f">  /*classname为包含浮动元素的大块*/

例如:

<div class="parent clear_f">

    <div class="left"> left</div>

    <div class="right"> right </div>

</div>