分享25个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在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。

时间: 2024-07-28 17:08:33

分享25个CSS前端网页设计常用技巧的相关文章

css+div网页设计(三)--与多种技术的混合应用

本篇博客将介绍css与多种技术的混合应用,javascript可以为我们的页面更加方便的交互,xml使数据存储跟方便,ajax的异步更新可以加快我们网页的载入速度. 1.css与javascript 由于前面已经讲过javascript的基本知识这里就不多加介绍了http://blog.csdn.net/jinfulin/article/details/38406273 给大家举个实战例子,大家去仔细体味一下css与javascript的强大之处. <span style="font-si

css+div网页设计

css是网页制作不可缺少的部分,我会用两篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 二.使用css控制页面方法 css控制页面的方法共有四种,行内样式.内嵌式.链接式.导入式. a.行内样式 ps:行内样式

css+div网页设计(二)--布局与定位

在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子模型的范围包括 margin.border.padding.content. 需要指出的一点是,在ie中与firefox中盒子模型表示略有不同: IE 盒子模型的 content 部分包含了 border 和 pading. 而firefox中的盒子模型的content部分不包含border和pad

HTML 5+CSS 3网页设计经典范例 (李俊民,黄盛奎) 随书光盘?

<html 5+css 3网页设计经典范例(附cd光盘1张)>共分为18章,涵盖了html 5和css3中各方面的技术知识.主要内容包括html 5概述.html 5与html 4的区别.html 5的结构.canvas绘图功能.网络上的视频和音频应用.表单应用.全新的文件应用.地理位置信息处理.web本地存储应用.离线web应用.web workers api的应用.应用websockets api通信.css样式入门.使用css控制文字样式.使用css设置图片和背景.使用css控制列表.c

web前端开发视频教程全集下载 WEB前端网页设计教程

轻松搞定网页设计(html.css.js),全集共54讲!免费分享!更多好资源,尽在齐学网!!!!!! 第0讲.开山篇第1讲.html介绍第2讲.html项目演示.运行原理.开发工具.html文件结构.标记和元素.属性.符号~第3讲.超链接href.图像image.表格table第4讲.html菜谱页面练习第5讲.html无序列表.有序列表.框架和综合练习第6讲.html表单form元素.各种input元素.常用元素综合案例第7讲.html加强(各种字体.Entities)第8讲.html加强(

涨知识!5个简单直观的网页设计对比技巧

对比是视觉设计中非常常用以及常见的设计技巧之一,甚至我个人觉得对比是设计中最最重要的要点. 今天会给大家介绍5种直观简单的对比方法. 如果能熟练理解和掌握,相信会对大家的日常设计中起到非常大的作用和帮助. 现任数美互动创意总监,曾任职于IM2.0 DDB 新意互动 等国际4A广告公司,担任互动美术指导,资深互动美术指导. 1. 大小对比 首先我们先看几个事例. 大小对比通过突出应该突出的信息和内容,在功能上可以更好的突出内容,在设计形式可以形成不同的版式结构,更佳绝有设计感. 实例演示,我们如何

sublime前端开发工具常用技巧

ctrl+N//新建文件夹ctrl+shift+p//打开命令行!,ctrl+E//快速生成html模板ctrl+E//自动补齐ctrl+P(#@)//goto 任何地方,其中#查找元素,@查找样式ctrl+enter//对齐回车ctrl+[     ctrl+]//前者伸展,后者缩进ctrl+shift+v//自动适应格式的粘贴产生多行游标的方法:1,选定目标,ctrl+d(选定下一个) ctrl+k(跳过某一项)2,选定目标,alt+F33,选定目标,ctrl +a ctrl+shift+L

[工作经验]前端开发过程中常用技巧总结

多行文本溢出显示省略号(...)的方法 现在的浏览器都支持text-overflow:ellipsis属性,用来实现单行文本的溢出显示省略号. 如: 单行文本: overflow:hidden;white-space:nowrap;text-overflow:ellipsis 一些其他技巧可参考:http://www.zhangxinxu.com/wordpress/?p=230 多行文本: text-overflow:ellipsis; display:-webkit-box; -webkit

【转】手机web——自适应网页设计(html/css控制)

手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献给大家. 作者:佚名来源: 68design | 2013-09-04 11:02 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport"