`
xuedong
  • 浏览: 295509 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

对于css+div网站重构学习的拙见(1)–准备篇

    博客分类:
  • css
阅读更多

      接触css、div也有一段时间了,经常被一些人问及这个该如何学习。我承认自己目前学的不是很全面,对于这方面的书籍拜读的也不是很多,我也只是从一个自己慢慢摸索入门的角度来做一些总结。如果对大家能有一定的帮助那是最好,当然如果你觉得这种方法并不适合你,或者有什么不周全的地方也希望帮忙指出。在网站重构的学习方面,我是一只自己摸索过来的,对于一些人提及的理论上的东西我掌握的可能不够全面,很多经验也都是自己在摸索中总结出来的,给自己做个总结,也希望大家能在学习上少走弯路。

      好了,废话少说开始进入正题。很多可以轻松百度的东西我就不再累述了。

1.首先是学习前的准备工作

(1)IE升级到IE8版本

(2)安装IETester(最新版的下载地址http://www.my-debugbar.com/wiki/IETester/HomePage

(3)安装Firefox最新版并安装firebug插件。

(4)安装Dreamweaver

(5)准备一个css2中文参考手册

(6)几套较为标准的布局示例源码

(7)html基础知识

 

      说明一下,IETester是一款很实用的IE测试工具,可以让你的电脑同时拥有IE5.5到IE9的各个版本,但是有人会问为什么安装以后不正常,不能够正常模拟,其实答案很简单,就是在你安装这个软之前必须要先把你的IE升级到最高版本,只有这样它才能正常的模拟,如果你电脑只有IE7,那么软件模拟出的IE8实际上也是IE7的内核。安装好以后测试一下吧。在页面的head里边加入如下代码:

 

<style type=”text/css”>
<!–
body{ background:#000; *background:#F00; _background:#00F;}
–>
</style>

 

 

      IE8下边背景色是黑色,IE7为红色,IE6为蓝色,如果正确了,恭喜你,你的软件安装成功了。虽然目前FireFox的使用率并不大,但是我们特别要安装这个浏览器的原因在于,目前他是最标准的,符合W3c标准的浏览器,事实上微软也会逐步的像其靠近,如果你要保证你的代码在将来的浏览器上还可以保证良好的表现,那么兼容firefox是必不可少的。另外一个原因是Fierfox的Firebug插件是你调试页面的好帮手,开始利用它吧,慢慢的你会发现你已经爱上它了。

      学习页面重构,你可以不看教材,可以自己琢磨,但是css手册是你必不可少的,简单、易于阅读、上手快。它存在着很多的优点,而且对于各种属性它才是最权威,最标准的。所以你必须拥有它,并好好阅读它。

我认为做页面重构最好的学习途径就是看别人的代码,然后自己多练,书本上的东西永远都不够你学的,因为很多问题只有你亲身经历了,自己解决了,你才能清楚的了解他,遇到问题先自己尝试解决,然后再百度清楚,这才是一个正确的路线,也许会花费你更多的时间,但是它给你带来的收获是远远大于直接百度的。页面结构是在不断变化的,我们只有掌握了问题的核心,解决起问题才能加得手。

      当然html的基础必然是你不可缺少的了。至少你该了解都有哪些标签,各个标签的含义,常用标签的属性,这个不难的,找一本html手册你会很快掌握它的。

      至此,学习页面重构的准备工作已经毕本写清楚了,当然如果你是喜欢深入了解事物的,你可以再详细阅读一些关于css的介绍,了解一下它的发展,这对于以后的提高也是很有帮助的。本篇暂时写到这里,我会陆续进行更新,也希望大家可以一起交流。

 

 

文章作者:IceSun
本文地址:http://www.iscss.tk/?p=23
版权所有 © 转载时必须以链接形式注明作者和原始出处!

分享到:
评论

相关推荐

    html+div+css+js学习.zip

    html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习...

    css+div网页模板整站

    《CSS+Div网页模板整站解析》 在网页设计领域,CSS(层叠样式表)与Div元素的结合是构建现代网页布局的核心技术。本资料集合包含了一个完整的网站模板,由十个不同页面组成,旨在为网页设计师提供实用的参考和学习...

    HTML+CSS+DIV网页设计.zip

    html+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计...

    CSS+div网站模板

    本压缩包中包含了十几套精心设计的CSS+div网站模板,这些模板具有简洁美观的特点,旨在帮助用户快速搭建符合个人或企业需求的网站。 1. **CSS**:CSS是一种样式表语言,用于定义HTML或XML(包括SVG、MathML等各种...

    HTML+CSS+DIV网页设计源码.zip

    HTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML...

    后台模板 css+div+html

    后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 ...

    精通CSS+DIV网页样式与布局

    精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局....

    html+css+div学习实例教程

    HTML+CSS+Div 学习实例教程是网页设计领域中不可或缺的一部分,这三种技术共同构成了网页的静态结构和样式。本教程将深入探讨如何利用它们来创建高效、响应式的网页设计。 HTML(HyperText Markup Language)是网页...

    css+div网站实例源码

    "css+div网站实例源码"提供了一个优秀的学习资源,让我们深入探讨这个主题。 **1. CSS简介** CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它的主要功能是将样式分离于...

    精通CSS+DIV 书中实例和源代码

    这本书提供了5个完整的网站设计案例,通过这些案例,读者可以深入理解并掌握CSS+DIV在实际应用中的技巧和策略。 CSS(Cascading Style Sheets)是网页设计中用于控制表现样式的重要工具,它将内容和表现分离,使得...

    简单的css+div网站

    【标题】:“简单的css+div网站” 在网页设计领域,CSS(Cascading Style Sheets)与div元素是构建现代网页布局的基础。这个“简单的css+div网站”项目,旨在为大学学生提供一个基础的框架,便于他们进行期末作业。...

    CSS+DIV 20个经典实例(上)

    CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)

    《精通CSS+DIV网页样式与布局》光盘源码

    第2部分 CSS+DIV美化和布局篇  第10章 理解CSS定位与div布局   10.1 div 标记与 span 标记  10.2 盒子模型  10.3 元素的定位   10.4 定位实例一:轻轻松松给图片签名   10.5 定位实例二:文字阴影...

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示,可以根据窗口的大小自动调节所显示的大小! DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格...

    最全的CSS+div学习资料

    最全的CSS+div学习资料

    CSS+DIV实例

    1. 浮动布局:早期的`CSS+DIV`布局常使用`float`属性,让元素在容器中浮动,实现左右排列或自适应布局。 2. 盒模型:理解盒模型是布局的关键,它包括元素的内容、内边距、边框和外边距,影响元素的总尺寸。 3. 定位...

    CSS+DIV详解网站好帮手

    《CSS+DIV详解网站好帮手》是一本深入解析CSS(层叠样式表)与DIV(定位元素)技术的专业书籍,对于网页设计和开发人员来说,无疑是一份宝贵的参考资料。CSS与DIV是构建现代网页布局的核心工具,它们的合理运用能够...

    jsp css+div 后台框架

    "jsp css+div 后台框架"是一种常见的前端与后端技术组合,用于构建高效、美观且用户友好的Web应用程序。这种框架结合了Java...总的来说,选择一个合适的“jsp css+div 后台框架”对于开发高质量的Web项目至关重要。

    css+div (10套网站模板)完整网站模板

    1. 律师事务所网站模板:这类模板通常需要专业且正式的外观,可能包含律师简介、服务范围、案例展示等板块,通过CSS+Div可以实现清晰的导航结构和专业的视觉效果。 2. 女性化妆品网站模板:这类模板可能强调色彩、...

    CSS+DIV光盘程序

    【CSS+DIV光盘程序】是一种用于网页设计和布局的技术组合,主要由两部分组成:层叠样式表(Cascading Style Sheets, 简称CSS)和文档对象模型(Document Object Model, DOM)中的&lt;div&gt;元素。CSS是用于描述HTML或XML...

Global site tag (gtag.js) - Google Analytics