• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 适合新手的CSS网页布局小技巧整理

适合新手的CSS网页布局小技巧整理

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,页面布局等相关知识,佚名 希望在学习及工作中可以帮助到您
对CSS网页布局的技巧,可谓是名目繁多。这里将适合新手的CSS网页布局的小技巧总结出来,或许对您更有实际的参考价值:
1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。
2、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为ID的权值要比CLASS大。
3、一个兼容性调整(IE和Mozilla)的笨办法:
初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。
临时解决方法:选择符{属性名:B !important;属性名:A}
4、如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属性吧,而不要去定义位于外面的标签的padding
5、li标签前面的图标推荐使用background-image,而不是list-style-image。
6、IE分不清继承关系和父子关系的差别,全部都是继承关系。
7、在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。
8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。
9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active
10、与内容无关的图片请使用background
11、定义颜色可以缩写#8899FF=#89F
12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。
13、<script>没有language这个属性,应该写成这样:<script type=”text/JavaScript”>
14、标题是标题,标题的文字是标题的文字。有时候标题不一定需要显示文字,所以:<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1>
15、完美的单象素外框线表格(在IE5、IE6、IE7及FF1.0.4以上中均可通过测试)
Example Source Code

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06使用CSS实现页面复选框的方法
  • 2017-08-06css实现点击滚动翻页的效果(无js)
  • 2017-08-06CSS画出各种三角形如等边三角形
  • 2017-08-06使用CSS3配合IE滤镜实现渐变和投影的效果
  • 2017-08-06div 内table 居中实现代码
  • 2017-08-06网页设计技巧:网站的首页设计对于能观众的影响
  • 2017-08-06CSS计数器(序列数字字符自动递增)详解
  • 2017-08-06CSS居中效果之transform的使用
  • 2017-08-06不能不知道的CSS选择器技巧
  • 2017-08-06ie6、ie7下overflow失效的有效解决方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 外部引用CSS中 link与@import的区别
    • CSS中一些常用的文本属性整理
    • css按坐标取背景图示例代码
    • 关于select标签的高度设置在ie6/ie7下兼容心得
    • 利用SVG和CSS3来实现一个炫酷的边框动画
    • clear:both后margin-top不起作用其他左右下都起作用
    • CSS编写规范的相关建议
    • 利用CSS定位背景图片的常用方法总结
    • 纯CSS实现漂亮的提交表单
    • 网页制作 css让页面居中对齐

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有