CSS圆角
介于纯粹CSS的无图片圆角实在是代码太乱,还是倾向于利用图片结合CSS来自做圆角;
(1)高宽皆自适应:
.roundedcornr_box_510746 {
background: #dddddd url(roundedcornr_510746_grad.gif) repeat top left;width:300px;
}
.roundedcornr_top_510746 div {
background:transparent url(roundedcornr_510746_tl.gif) no-repeat top left;
}
.roundedcornr_top_510746 {
background:transparent url(roundedcornr_510746_tr.gif) no-repeat top right;
}
.roundedcornr_bottom_510746 div {
background:transparent url(roundedcornr_510746_bl.gif) no-repeat bottom left;
}
.roundedcornr_bottom_510746 {
background:transparent url(roundedcornr_510746_br.gif) no-repeat bottom right;
}
.roundedcornr_top_510746 div, .roundedcornr_top_510746,
.roundedcornr_bottom_510746 div, .roundedcornr_bottom_510746 {
width: 100%;
height: 30px;
font-size: 1px;
}
.roundedcornr_content_510746 { margin: 0 30px; }
-->
</style>
<div class="roundedcornr_box_510746">
<div class="roundedcornr_top_510746"><div></div></div>
<div class="roundedcornr_content_510746">
<h1>hello world</h1>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
&n
相关文档:
2009-10-20 13:30:21
简写CSS一直被我忘记,没办法就搜了点资料,记录如下:
font
简写:
font:italic small-caps bold 12px/1.5em arial,verdana;
等效于:
font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:1.5em;font-family:arial,verdana;
顺序:font-style | font-var ......
只针对ie6,ie7和firefox的csshack
注意都要写在正常样式的后边,除!important方法在前边
---------------针对样式名------------
如果只让ie6看见用*html .head{color:#000;}
如果只让ie7看见用*+html .head{color:#000;}
如果只让ff看见用:root body .head{color:#000;}
如果只让ff、IE8看见用html>/**/body .he ......
<style>
#enlarge {padding:0; margin:2em auto; list-style-type:none; width:240px;
height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px;
position:relative;}
#enlarge li a {display:block; width:40px; height:40px; background:transparent;
overflow:hidden; positio ......
<!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="text/html; charset=gb2312" /& ......
1.position的absolute属性表示该块已经完全脱离文本流了。也就是不再占用空间位置
。完全靠top,button,right,left来进行定位。
这个必须能够完全理解。同时为减少错误在设置absolute后,一定至少指定top,buttom,right,left中的一个。
2.如果块设置了absolute属性,其定位的原点和父块的position有关。
如果父块设置 ......