作为一个程序员,不能只学习技术,适当的时候需要站的高一点,这样才能看的更远,才会取得更高的成就!
如果你是做Web开发的,那么DIV+CSS将是我们学习的基础,很多人认为DIV+CSS很简单,的确如此,一个好的程序员,几乎可以模仿出所有显示的网页,并实现非常炫的页面特效,给人耳目一新的感觉,我也经常为能够看到一个漂亮的网页而兴奋。但是如果学习停留的层次仅限于此,那么除了做一个码工还能干什么呢!
全局思考问题的意识
任何页面设计首先要做的就是用DIV设计框架,例如考虑页面整体上应该是什么样子的结构,是上、中、下三层,还是左、中、右三层,又或者只有其中的一部分等等。
<div style="border:1px solidred;margin:1px;height:100px;">这是top部分</div>
<div style="border:1px solidred;margin:1px;height:500px;">这是middle部分</div>
<div style="border:1px solidred;margin:1px;height:100px;">这是bottom部分</div>
<div style="border:1px solidred;margin:1px;width:200px;float:left;">这是left部分</div>
<div style="border:1px solidred;margin:1px;width:400px;float:left;">这是center部分</div>
<div style="border:1px solidred;margin:1px;width:200px;float:left;">这是right部分</div>
尽管这已经成为了所有Web开发人员做网页的第一步,并且在此道路上混迹江湖很多年,但是这其中的智慧并不是所有人都会思考的。框架要求设计者有站在高处的思维,能够从全局的角度思考问题,而不是一味的在一个层次上勇往直前,否则你的设计将是眉毛胡子一把抓,既没有清晰整体的架构也没有明确的细节处理!
找到共同之处
完成DIV的框架设计之后,通常需要将页面元素进行分类,这样对页面样式的修改将会变得非常方便,比如常见的CSDN左侧的博客栏目都有他们共同的样式,这样当我们修改样式的时候,就可以尽可能的保证页面样式的统一,避免因样式不同而导致页面不堪入目!
按照这种方式,针对上述的DIV代码,我们可以将它的公有成分抽象出来形成类,而在每个div块中保留他们的不同部分,代码如下
<div class="style1" style="height:100px;">这是top部分</div>
<div class="style1"style="height:500px;">这是middle部分</div>
<div class="style1"style="height:100px;">这是bottom部分</div>
<div class="style1"style="width:200px;float:left;">这是left部分</div>
<div class="style1"style="width:400px;float:left;">这是center部分</div>
<div class="style1"style="width:200px;float:left;">这是right部分</div>
其中提出的公有成分放在CSS文件中,具体如下:
.style1{
border:1pxsolid red;
margin:1px;
}
对于Web开发者来说,公有部分的抽取是菜鸟和大鸟区别的重要部分!这种思考方式放在学习上就是:将我们未学过的放在学过的基础上进行,这其中的智慧,对于你我而言其实比学习很牛技术更值得推崇!
再牛的技术也是看的见、摸得着的,只要想学、没有学不会的!但是思想的凝练却并不是谁都能做的,所以多思考、总结学习经验、提炼其中的方法才是各位朋友进步的捷径!
分享到:
相关推荐
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址: 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...
独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <...
divid=’content’内容区域/div /div Notice: 在android 有bug, 滚动完后会回退到最顶端的内容区域,解决办法是使用后两种方式实现 2)js 编程实现 思路:对比手指在屏幕上移动前后位置变化改变内容元素content 1. ...
在网页的最顶端 <!doctype html> 2、由一对 html 根标记,来表示页面的开始与结束 Demo : 1、在 htdoc 中,创建一个网页 01-first.html 文件 创建一个 记事本,将 .txt 重命名为 .html 2、搭建HTML网页结构 ...
Alwaysontop 可以使弹出的窗口始终位于顶端 Browse4redirct 页面自动重定向到某个地址 Moustrail 鼠标移动带有"轨迹" windowresizer 指定窗口的分辨率 Pageborder 设定页边距 ColourDethRedirect 根据访问者的...
a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示【回到顶部+回到首页】的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一...
3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器 第4章 ...
3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器 第4章 ...
2) 修正控件在浏览器滚动条下端位置时弹出DIV窗口会出现显示位置有误的BUG。 3) 修改原ImgPathType属性名称为PathType,并且路径形式的切换对插入文件路径和插入图片路径都生效(原来的属性仅对图片路径生效)。...
实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口 65 实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用...