CSS之盒子模型与面向对象_html/css_WEB-ITnose
说到盒子,鞋盒,饭盒,总之是装东西的东西,所以在web中,他也是指装东西的一个容器。
盒子和OOP的比较说道web盒子,我们先给大家一些名词:内容(content)、填充(padding)、边框(border)、边界(margin)我们就认为他就是一个盒子,也就是我们网页中要操作的对象,其实他和我们编程是非常的相似的,尤其是我们的面向对象,说道面向对象的基本,大家一定非常熟悉,继承,封装,那么我们来看看这个web这个盒子到底和我们的面向对象有多么的像。
1、OO:面向对象首先是面向对象的编程来实现,而盒子是面向盒子这个对象来写代码。都是对象 方法()
2、属性和方法:OOP中每个对象都有自己的属性和方法,很好,咱们的盒子有内容(content)、填充(padding)、边框(border)、边界(margin),这就是他们的属性,至于方法,下边的实例中我会给大家呈现出来。
3、继承:这个更是简单,在java中,我们要extends是吗,在CSS中,我们只需要空格就可以,具体怎么实现,请看下边的实现。
盒子的实现和面向对象的实现如果我们要在网页的顶端放两张图片,一张是我们网站的logo,一张是我们一个链接到我们网页的图片。这个大家应该都很熟悉把,在新浪里边很多都是图片,我们单机就可以进入想要阅读的文章。那么我们先来实现一下这个简单的实现。
我先简单的解释一下,这两张图片就是代码中的niunanlogo.jpg,tg029logo.gif,第一张为logo,第二张为要和新闻有关系的图片,而新闻的链接是http://www.tg029.com。接下来我们来对这两张图片进行设计。
#top{ /*顶部样式*/ height:120px; margin:10px auto 10px auto; /*外边界的上,右,下,左*/ width:760px;}#top img{ /*顶部图片样式,浮动向左*/ float:left;}然后这就是我们实现后的效果
那么他和OOP的相同点在哪呢,现在我再给大家实现一个简单的面向对象的例子。
class Cat { private string name = ""; public Cat(string name) { this.name = name; } public string shout() { return "我的名字叫"+name+"喵"; } public void 客户端() { Cat mimi = new Cat("咪咪"); MessageBox.show(mimi.shout()); } }上边就是要给简单的面向对象的编程,我们首先要申明一个对象,然后再去实例化,之后调用方法就可以了,那么现在我们再看看我们的盒子是如何实现的。
首先他是把顶部设成top,也就是上边的
如果大家说为什么这篇文章为什么没有CSS盒子的详细讲解,那么不好意思了,我也是刚刚学习,如果大家想学习的更深入的画,那么完全可以去买一本书去看,我只是在初次接触是发现他和我们后台的代码有异曲同工之妙用,都是实现了实现与内容的分离,也就是咱们的组合和聚合原则。而且既然大家有了面向对象的方法,在学习CSS的时候,完全可以按照OO的思想去学习,那么是不是会简单很多呢?这个问题还是等我学习完了再告诉大家吧。
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
推荐阅读
-
Nancy之ModelBinding(模型绑定)_html/css_WEB-ITnose
-
CSS之盒子模型与面向对象_html/css_WEB-ITnose
-
css3中 弹性盒模型布局之box-flex_html/css_WEB-ITnose
-
牛腩发布系统CSS盒子模型基础_html/css_WEB-ITnose
-
CSS中的盒子模型详解_html/css_WEB-ITnose
-
div盒子模型(一图胜千言)_html/css_WEB-ITnose
-
看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记_html/css_WEB-ITnose
-
后端码农谈前端(CSS篇)第六课:盒子模型_html/css_WEB-ITnose
-
有趣的CSS盒子模型--【牛腩新闻发布系统】_html/css_WEB-ITnose
-
div盒子模型(一图胜千言)_html/css_WEB-ITnose