首页 > 教程 > 关键词  > css学习经验最新资讯  > 正文

如何掌握CSS精要,学习网页布局经验分享

2008-10-20 10:28 · 稿源:Chinaz用户投稿
CSS是不是真的很难学?其实不难,只是缺少了掌握的经验,拿着一本书硬肯,有没有收获?有!但可能成效不大,作为过来人我觉得被动学习想要记住的东西是很难的,学习它我的经验是可以先掌握精要(重要属性开始),待掌握精要自然而然这些属性远远不够满足自己的需求引起自己求知的欲望,自动延伸其他相关的属性从而自然掌握和加深对CSS的认识。这是我认为的一种方法(可惜我学的时候要是有人这么告诉我会走少很多弯路)。第一次写经验和大家共享,语言组织上或许有些欠缺,还请网友包含,但相信在以后更多的经验中,会写的更好。以下是我总结的一些经验和我认为必要讲的一些概念性解释。有经验分享欢迎发表评论共同探讨。

在现时的网页技术中,CSS+DIV已经成为一种主流的网站标准,我们可以称他为(web标准)。CSS是英语CascadingStyleSheets(层叠样式表单)的缩写,它是一种用来表现HTML或XML等文件式样的计算机语言。

在了解和学习CSS之前,首先我们要了解这种计算机语言对我们存在着那些优势和方便,理解这个我个人觉得很基础但也很必要,有助于明确CSS+DIV学习目的。本人综合网站技术和设计人员的体会,并从网络应用的角度,将CSS+DIV网站设计的优势和问题归纳如下:

首先,CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽(真正意义在于,增加了有效关键词占网页总代码的比重)使用web标准制作的网站具有搜索引擎友好有一定优势;从程序与网页的美工方面,两者可以相互独立再结合从而减轻工作量避免重负开发。

其次是CSS+DIV制作的网站使得网站改版相对简单,很多问题只需要改变CSS而不需要改动程序,从而降低了网站改版的成本,节省很多的时间。在和开发室的同事都有合作过类似的项目案例,相信同事对这点或多或少能感觉到实质的方便感受。

最后一点是在刚开始接触的时候感觉很不好控制,反而觉得table更好控制方位,并且有可能会有抵触使用DIV编写写网页布局的情绪。其实这个是一个适应过程,我们可以通过大量的实际操作和练习并用心领会要点。之后就能感觉得出它确实是千变万化,一个页面不同的布局有可能有不同实现布局的写法,但无论如何写法都好,代码都是朝一个原则走的:就是:定义的名称尽可能的通用性,也就是用最少的代码定义更多的盒模具我称它为(一名多用);命名要规范性、组合性,方便其他设计师见名解用。另外一个是关于使用ID还是使用Class,对于这个有很多人可能会很模糊。其实是相对的,不过现在我写的习惯主要是使用class比较多,我觉得这个更方便并适合自己的编写习惯。

以下是我整理认为需要首先认识和掌握基本常用的属性:

CSS必须了解和掌握的重要属性:

CSS2.0中文手册请参阅:https://www.kiloso.com/onlinecss/

margin:auto|length由浮点数字和单位标识符组成的长度值|百分数。百分数是基于父对象的高度。对于内联对象来说,左右外延边距可以是负数值。

padding:length由浮点数字和单位标识符组成的长度值|或者百分数。百分数是基于父对象的宽度。

float:none|left|right这个是浮动,在定义布局中必定用到的属性,在使用它的时候要注意产生的走位和浏览器兼容性问题,要在很多的实践操作中多了解这个属性。有这个属性就要了解以下这个配套使用的属性“清除”

clear:none|left|right|both;none允许两边都可以有浮动对象both不允许有浮动对象;left不允许左边有浮动对象right不允许右边有浮动对象。

background:url(images/aardvark.gif)lefttopno-repeat|repeat-x|repeat-y定义背景图片来美化版面也是我们很常用到的属性。

overflow:visible|auto|hidden|scroll这个作用在布局中我通常利用他来防止、解决浏览器兼容出现问题

border:1pxsolid#CCCCC这个是定义边框大小,线条,颜色的属性。

list-style-imagelist-style-positionlist-stle-type这个列表属性通常使用在有序列表和无序列表当中,列表在定义网页标题索引文字连接中经常使用,这是验证CSS定义优越于表格的典型代表。

以上是我认为在学习CSS中必须要熟记和理解的CSS属性,充分理解了它门的特性能够大大提高我们应用布局的自由度。所以学习这个并不是很难,掌握以上样式你会发觉,以前不了解的时候做起页面来感觉力不从心,掌握后很自然根据自己的逻辑思维完全可以去实现自己想要的布局和版面,并且CSS抵触情绪会缓解很多。

谈到这,我要提出一个很常见的问题。我认为WEB标准并不是禁止table全部使用DIV,包括我自己刚开始的时候也有这样的错误想法,“标准”我的理解是规范设计师养成一个良好的编写习惯,达到一种主流的统一。有的情况下表格的在网页的功能实现上还是会有优越于DIV的时候,并且无节制DIV使用过多耗费ie解析增加cpu负担。这也是我们值得注意的问题。

掌握以上常用的属性的同时,下面通过参考网络博客由设计铭(kiloso.com)编写的一个CSS三列布局模板,主要围绕如何掌握CSS精要,学习网页布局教程实例模板,网友可以下载该模板根据文章内容细心琢磨,从而领会掌握技术。该模板经过本站编排涵盖上面列出重要的CSS属性。

实例模板预览:https://www.kiloso.com/download/css_template/template020/example.html

模板下载地址:https://www.kiloso.com/html/csstempate/200810/8541.html

由于是布局教程例子,在版面的细节上没有花更多时间精细修饰,不过我觉得模板的版面不错,懂CSS的可以下载进行更细致的美工将会是一个很不错的网页,初步学习的可以下载来修改修改属性参数从而更形象掌握属性的特性,以达到更深掌握CSS的目的。

欢迎大家共同交流相互学习经验:vincent设计铭(kiloso.com)

举报

  • 相关推荐
  • SSD Fans评测:忆联消费级SSD AM541|强性能 高可靠 长守护

    国内知名技术社区SSD Fans对忆联消费级SSD AM541进行了深度评测。这款PCIe4.0固态硬盘采用3D NAND闪存颗粒和最新主控芯片,1TB版本顺序读取速度达7143MB/s,写入6037MB/s,远超标称值。评测显示AM541在性能、压力测试和可靠性方面表现优异,采用无缓存DRAM-Less设计配合智能SLC缓存机制,在CDM、SNIA标准测试中均展现业界领先水平。游戏实测《FF14》加载仅7.445秒,《黑神话:悟空》启动快40%,充分满足消费级用户对高性能存储的需求,展现了忆联在存储领域的技术实力。

  • Checkout.com携手Visa推出发卡业务 (Card Issuing)

    Checkout.com与Visa达成战略合作,在英国及欧洲地区推出全方位发卡业务。通过Visa全球支付网络,商户可即时获取收款资金用于支付供应商款项,显著提升资金使用效率。该合作特别针对旅游业企业,解决其支付流程分散、资金周转慢的痛点。Checkout.com每年处理数千亿交易的技术能力与Visa网络结合,帮助商户消除预存资金需求,优化现金流管理。双方表示这将大幅提升欧洲商户运营效率,释放增长潜力。

  • 免费入场+高能福利!AGON爱攻ChinaJoy CS水友赛玩家招募通道即刻开启

    2025年ChinaJoy将于8月1-4日在上海举办,AGON爱攻将携手完美世界电竞打造精彩赛事活动。亮点包括:水友可报名与传奇战队"钢盔队"对决,还有机会与三大CS主播组队;现场将展示多款电竞显示器新品,包括CS24A定制款;参与互动问答和抽奖有机会赢取AGON大礼包。活动地点为N1-G201完美世界展区主舞台,14:00开赛。线上观众关注B站AGON官方账号参与话题互动也有福利。这是一�

  • BOSS直聘通报“王某香”涉黄简历:男子恶意编造 已被刑拘

    今日,@BOSS直聘在微博就近日网络热议的“简历涉黄”事件作出回应。 此前,网络流传BOSS直聘平台上一名自称“王某香”的求职者与招聘方沟通时出现低俗信息。这些截图在社交媒体迅速热传,引发公众对BOSS直聘存在“色情招聘”的强烈声讨。 针对这一事件,BOSS直聘迅速与警方展开核实工作。经查,账号使用人为一尹姓男子,该男子为寻求刺激,盗用他人信息,冒充女性�

  • OpenAI发布2款开源模型:gpt-oss系列 能力接近o3和o4-mini

    OpenAI发布开源模型系列GPT-OSS,包含120B和20B两个版本。120B旗舰模型适配单H100 GPU架构,20B轻量版适合边缘计算。两款模型均开放完整推理链监控接口,支持动态参数调节和任务微调优化,性能接近闭源的GPT-O3和O4-mini。该系列突破性地支持代理功能,包括网页交互和Python代码执行,在标准化测试中表现优异。开源策略为开发者提供高性能替代方案,重新定义了AI模型的应用边界。

  • CleanMyMac上线云存储清理功能

    CleanMyMac推出全新"云存储清理"功能,支持iCloud和OneDrive两大主流云服务。该功能提供统一可视化界面,可批量删除云端和本地的重复文件,或仅解除同步保留云端文件。通过滚动列表和可视化图谱两种模式,帮助用户高效管理存储空间。所有操作均在本地完成,确保数据安全。软件提供7天免费试用,并推出Basic基础版和Plus高级版两种套餐,现有用户可免费升级体验Plus全部功能。未来计划支持腾讯云、百度云等中国本土云平台,持续优化Mac存储管理体验。

  • Razer(雷蛇)在新加坡设立AI CENTER OF EXCELLENCE,加速人工智能投资布局

    雷蛇宣布在新加坡设立全球AI卓越中心,并计划在欧洲和美国建立类似机构,推动游戏与开发者工具领域的创新。新加坡中心将招聘150名AI工程师,专注于下一代AI游戏技术研发。雷蛇还推出AI工具套件,包括Game Co-AI和QA Co-AI,帮助开发者提升游戏质量和开发效率。该战略布局正值全球游戏市场快速增长期,预计2033年AI游戏市场规模将达280亿美元。新加坡数字产业发展局表示,此举将巩固该国作为区域AI创新中心的地位。

  • 大型制造业的成功经验:全业务上云,为什么深信服托管云更适合?

    格力博公司面临制造业数字化转型挑战,原有私有云资源不足、运维成本高、设备老旧等问题。采用深信服托管云专属方案,通过裸光纤互联实现本地机房与托管云数据中心高速连接,确保业务稳定迁移。方案包含:1)网络架构采用主备裸光纤组网,保障数据传输高可靠;2)计算存储资源池采用6台高性能服务器实现完全独享;3)安全体系复用本地安全资产,构建统一防护标准;4)分5批次完成70台虚拟机迁移,单次停机控制在30分钟内。实施后实现:业务系统访问延迟降低至毫秒级,IT运维人力投入减少50%,年云运维成本下降60%,为智能制造发展奠定数字化基础。

  • ISC.AI PARK:科技博主集体打卡!AI原来可以这么“酷”

    ISC.AI2025大会8月6-7日在北京国家会议中心成功举办,以"ALL IN AGENT"为主题。展会全新升级为"ISC.AI PARK",吸引超万名观众参观。360集团、华为、百度智能云等科技巨头及行业领军企业参展,集中展示了AI与数字安全领域的前沿技术和创新应用。AI互动区设置办公、生活、娱乐等场景体验,机器人表演、智能设备等吸引观众驻足。科技博主现场互动体验AI赋能安全行业的产品,直观感受AI技术带来的变革。大会展现了AI技术在各领域的融合应用,推动构建更安全智能的世界。

  • 周鸿祎称很多成功人士看不起新东西 AI时代需终身学习

    为了更好地阐释这一观点,周鸿祎打了一个生动的比方:在面对危险时,你只需在奔跑,不一定要比熊快,只要比同伴快就足够好。他进一步分析道,在当下这场AI引发的巨大变革面前,许多成功人士容易陷入一个误区。由于过往的成功经历,他们积累了丰富的经验,却也因此容易轻视新出现的事物。 周鸿祎总结称,这种看不起新事物的心态,会让他们缺乏认真学习的动力,进