资讯频道 → Web前端
阅读更多

45顶
1踩

Web前端

原创新闻 最常用和实用的CSS技巧

2008-08-11 16:46 by 资深编辑 ╱/罒呍唲 评论(23) 有36614人浏览
CSS

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

下面是CSS最常用和实用的技巧。


1.重置浏览器的字体大小
重置浏览器的默认值 ，然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ，如果你不想下载9MB的文件，代码如下： 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td {margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:”; }
abbr,acronym { border:0; }

其次，我们重设浏览器字体的大小为10像素，使用如下： 
html {font-size: 62.5%;}

这个大小基本合适，然后您可以根据自己的需要调整大小，如 标题1为120像素: 
h1 {font-size: 2em;}


2.设置水平居中
大多数的网站目前都是固定宽度的。CSS代码如下： 
div#container {margin: 0 auto;}


3.控制位置：绝对位置，相对位置
假如有两个div 
<div id='parent'>
<div id='son'></div>
</div>

div有left和top属性,是用来定位的.
如果内层的div的position属性是absolute.那他就是相对于文档的左上角的位置..
如果内层的div(id为son的那个)position属性为relative,那它的left和top值就是相对于外层的div的左上角的距离.


4.将重要元素放置在屏幕中央
如果你希望将您想要的东西放在最中央，可以使用以下CSS： 
div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
div.popup { margin-top: -200px; margin-left: -250px;}

您必须明确的指定宽度和高度，再把top和left属性设为他们的一半，这样就可以是这个部分回到屏幕的中心。


5.可以重复利用的规则 
.left {float: left;}
.right {float: right;}
img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}

设置自己的CSS样式表，就可以在您需要的时候直接的添加标记即可。



6. 解决IE6 的浮动元素的双倍边距问题
对一个div设置了float:left 和 margin-left:100px 那么在IE6中，这个bug就会出现。您只需要多设置一个display即可，代码如下： 
div {float:left;margin:40px;display:inline;}



7.简单的导航菜单
在您的设计中预设一个导航栏是非常有益的。可以让别人对你网页的主要内容有一个大致的了解。第一次来的XHTML： 
<div id=”navbar”>
<ul>
<li><a href=”http://www.peakflowdesign.com”>Peakflow Design</a></li>
<li><a href=”http://www.google.com”">Google</a></li>
<li><a href=”http://zenhabits.net/”>Zen Habits</a></li>
</ul>
</div>

CSS代码： 
#navbar ul li {display:inline;margin:0 10px 0 0;}
#navbar ul li a {color: #333;display:block;float:left;padding:5px;}
#navbar ul li a:hover {background:#eee;color:black;}

 
8.不使用table的form表单
正如我们现在进行网站设计的table-free，把重点是放在使用DIVs上。不再对表的列和域进行约束，所以我们需要一些好用的CSS，在JeddHowden.com 发现 
XHTML:
<form action=”form.php” method=”post”>
<fieldset>
<legend>Personal Information</legend>
<div>
<label for=”first_name”>First Name:</label>
<input type=”text” name=”first_name” id=”first_name” size=”10″ value=”" />
</div>
<div>
<label for=”last_name”>Last Name:</label>
<input type=”text” name=”last_name” id=”last_name” size=”10″ value=”" />
</div>
<div>
<label for=”postal”>Zip/Postal Code:</label>
<input type=”text” name=”postal” id=”postal” size=”10″ value=”" />
</div>
</fieldset>
</form>


CSS:
form div {clear:left;display:block;width:400px;zoom:1;margin:5px 0 0 0;padding:1px 3px;}
form div label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;}


9.让footer总是停留在页面的底部
在网页的底部总是保留着公司的版本信息，如何是这部分信息来实现呢？这是一个很古老的技术，这都要归功于The Man in Blue 。 
XHTML：
<body>
<div id=”nonFooter”>
<div id=”content”> *Place all page content here* </div>
</div>
<div id=”footer”> *Place anything you want in your footer here*
</div>
</body>

CSS:
html, body { height: 100%; }
#nonFooter { position: relative; min-height: 100%; }
* html #nonFooter { height: 100%; }
#content { padding-bottom: 9em; }
#footer { position: relative; margin-top: -7.5em; }

10.在同一元素上使用多种类
随着有用的功能越来越多的，大多数的人都忽略了内部CSS的选择。一个元素可以套用很多的类，例如： 
.red {color: red;}
.bold {font-weight: strong;}

我们可以运用它： 
<p class=”red bold”>This text will be red yet also bold!</p>

希望这些能对您有所帮助！







45
顶
1
踩
评论 共 23 条 请登录后发表评论
3 楼 fornever 2008-08-12 09:38
不错，收藏。。。
2 楼 form_rr 2008-08-12 09:19
非常好! 解决了蛮多的问题,谢谢啦!
1 楼 VSandJava 2008-08-12 09:11
不错，学习一下！

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 各种游戏按钮音效素材

    里面有制作游戏的各种按钮音效资源，供游戏开发者使用，是游戏可以有更好的体验

  • 关于EasyX图形库的声音播放细节

    （因为使用的是windows的设备，就需要包含windows.h头文件，但是graphics已经包含这个文件了）注意：音乐文件名的基本名（two.mp3的two）必须是英文的，它识别不了中文。以上是一些对于图形库函数的音乐播放细节。首先需要包含两个头文件。其次就是写基本代码了。

  • Python实现游戏中的音效制作与环境声音设计

    在Python中，有许多优秀的音频处理库可以帮助我们实现各种各样的功能。其中最著名的两个库莫过于Pygame和PyDub了。Pygame：这个库主要面向游戏开发者，提供了丰富的多媒体处理功能，包括音频播放、混合以及基本的音效处理。如果你打算制作一款完整的游戏，那么Pygame几乎是必不可少的选择。PyDub：这是一个更专注于音频处理的库，可以用于剪辑、合并音频文件，甚至做一些基础的声音效果。对于需要对音频文件进行复杂操作的人来说，PyDub提供了非常方便的接口。

  • （EasyX入门与实战）第五章 添加音乐

    音乐是人类创造而出的共同语言，它有着不可小觑的力量，在你悲伤时，音乐会使你坚强，在你落魄时，音乐能使你重振旗鼓，在你遇到挫折时，音乐能给你鼓励，让你迎难而上！ 那么，如何把这股神奇的力量注入到我们的程序中，让它多一种音乐的灵魂呢？接下来请跟代码骑士一同学习第五章-添加音乐。 1、将 .mp3 文件复制粘贴到程序文件夹中。 2、音乐播放、循环播放、停止播放语法及步骤 步骤： （1）引用Winmm.lib链接库 语法：#prag...

  • 游戏音效素材大全下载 - 3000首高清无损-按分类整理

    因为我看到国外很多素材，但是国内不多，我希望来做好这个事情。本人整理了3000首，我想请问下iteye的朋友这里的整理和分类对大家有没有帮助。按照这个思路做下去可行吗，有多大的实用性。先看看分类，我个人觉得还不够完善，大家还有什么好的建议吗？我那里还有很多，还想做更完善更大的游戏音效库。   游戏音效素材的下载地址 ： http://www.2gei.com/sound/ 音效清单如下： ...

  • 一套飞行类游戏音效包

    一套飞行游戏的音频素材包，包括爆炸音效，背景音乐，提示音

  • 游戏音效素材

    500来个短声音音效.包你满意.游戏音效.短声音素材.有打斗的也有其他.

  • 音效素材（游戏音效，动画音效）

    音效素材（游戏音效，动画音效）；供大家学习

  • C语言 使用图形库（Easy X）绘制界面及程序添加音乐

    这是一个用c语言制作的简单迷宫游戏 迷宫游戏，虽说玩起来十分简单，但是界面的设计也很重要，下面从背景图绘制、贴图、操作方式等方面说一说界面设计的部分。 背景图绘制 先放一波界面图~ 首页界面背景 板绘厚涂，临摹B站上的一个大佬-&gt;&gt;&gt;&gt;&gt;MORNCOLOUR 画出来的感觉，还与大佬相差甚远QAQ… 游戏运行界面 使用数组储存地图,一个数字对于一块区域，并使用循环将...

  • 用java编的一个放背景音乐的小程序

    用java写的一个可以放背景音乐的小程序，可以添加到你原有的java代码中，带来趣味性的效果，不过音乐格式必须是wav

  • 按头安利！好听又实用的游戏音效素材看这里！

    别找了，你想要的游戏音效素材小编都为你整理好了，数量多，质量好，赶紧码住看一下！ 1、爱给网（海量 优质 免费） 爱给网的音效分类非常的全，音效质量高，游戏音效也海量，本次小编推荐游戏音效下的角色类的音效，质量超高，极少数需要vip下载，强烈推荐~ 优点： 1.资源数量丰富、分类详细； 2.免费资源数量多； 3.页面设计简洁、排版清晰； 4.全品类网站，充值性价比高、全站通用； 特色功能 - 控制音频波形图 可以点击音频波形图上任何位置，这样可以避免存在超长前缀，可以随时控制.

  • andriod游戏音效

    同学们在玩游戏的时候应该都会发现游戏中会有两种形式来播放音乐 ，一般设置选项中会明确标明 设置游戏音乐 与设置游戏音效。 客观的分析一下这两种形式的音乐，游戏背景音乐同时只会播放一首也就是说两首背景音乐不会同时播放，除非一首播放完毕或者切换场景等 才会播放下一首。而游戏音效 比如主角与敌人挥动武器的声音 被攻击中的声音等，这些声音比较短而且播放很频繁很有可能会同时播放游戏音效。 1.使用Me

  • EasyX中使用背景音乐

    #include &lt;graphics.h&gt; #include &lt;conio.h&gt; #include &lt;mmsyscom.h&gt; #pragma comment(lib,"winmm.lib") int main() { initgraph(600, 600); IMAGE bk; loadimage(&amp;bk, L"./res/美国情报机构.jpg", 600, 600); putimage(0, 0, &amp;bk); mciSendString.

  • 游戏音效有哪些分类你知道吗

    游戏音效是游戏中的重要音乐，也必不可缺，游戏中的音效分类又很多，音效主要分为环境音效、场景音效、角色绑定音效、NPC音效、功能音效、角色语音，你知道这些音效都是在什么时候出现吗？ 环境音效：环境音效主要用于营造场景或者关卡的氛围和情绪，包括了下雨天、刮风、晴天、等天气相...

  • 游戏音效制作详解

    玩游戏的朋友都知道，在游戏当必不可缺的除了音乐，还有音效，音效在游戏中的作用也可谓是必备。音效能增加游戏的真实感，但是你知道游戏音效制作的过程是怎么样的吗？ 1. 素材选择/拟音 音效制作一部分为素材音效、另一部分为原创音效，素材音效制作的第一步就是挑选出...

  • Java小游戏的音乐播放

    Java小游戏音乐播放 昨天突然想把做过的小游戏加上背景音乐，但是倒腾了好久，先是发现toURL不能使用（过时了）,然后由于格式问题又弄了好久，到最后出声的那刻泪崩了。 注意： 1.由于toURL过时了（昨天在网上看到大佬说toURL有一点问题），要先转化成URI然后用URI的toURL转化为URL类型。 2.一定要是WAV音乐格式的，改后缀名是行不通的，找到一个下WAV的网址，然后找自己...

Global site tag (gtag.js) - Google Analytics