建站知识

当前位置:首页 > 新闻资讯 > 建站知识 >

已阅读

网站建设中css的一些常见用法

来源:admin       时间:2015-12-23 08:32         责任编辑:admin

网站建设中,我们切图div/css中常见的一些用法。

文字自动对齐:

text-align:justify;text-justify:inter-ideograph;



=================================================


div#content {width: 580px}
* html body div#content {width: 600px}
在div前面加上*号,这样你能为IE定制特殊样式。




===============================================


CSS阴影<br>


.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
你能为块级元素或任何被div包裹的类或标签应用上面的样式。你需要设置水平和竖直偏移量、模糊半径和阴影填充色。你可以在这篇文章贴出的那张图片上看看这个例子。




===============================================


CSS首字放大


p:first-letter {
display: block;
float: left;
margin: 5px 5px 0 0;
color: red;
font-size: 1.4em;
background: #ddd;
font-family: Helvetica;
}
定义你的首字放大很容易,用CSS的first-letter属性就可以自动选定的博客的首字母,这样你可以定制CSS来设计首字母的样式了,像更大字号、斜体等等。




=========================================


用CSS翻转图像


#content img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}


============================================


元素透明


.element {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
使用透明属性,你可以让任何浏览器上的元素透明,这些属性可以在所有主流器上工作,甚至IE(PS:IE6略过?...)


==========================================




主要针对外贸网站的英文排版。


word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。


word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。