CSS+DIV--前端er必备基础_html/css_WEB-ITnose
B/S真是一个长见识的阶段,认识了很多前端必备的语言,随着时间的增加,本以为新闻发布系统中学到的那些我还不知道是什么的东西,会早已没了印象。但反而却更加深刻了,当时还不知道什么是CSS,就学会了写CSS。还不是什么是异步通信,就学会了用AjaX。当看到视频中的经典框架时,才发现,这不就是新闻发布系统中用到的CSS+DIV么!(⊙o⊙)哦,原来我早就会写了!
看到这个搭配,我就在想为什么是这样的组合?Span不可以么!直接用HTML不可以么!一个很明确的目的:为了让数据内容与数据格式分离,方便前端er开发和维护。想象一下,一个内链样式表的语句
如果需要修改任何一个前端元素的样式,只要在样式表中去查找ID或类别名就可以了,这无疑大大提高了开发的效率。
还有一个问题就是为什么Span不可以?SPAN和DIV的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN是行内元素,SPAN的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。
Step ONE:DIV分块
首先要考虑到网页分为几个展示部分,Banner和Footer是必备的,其他内容的展示就是个性的问题了,分配给相应的DIV块。
Step Two:DIV定位??盒子模型
用CSS样式表给DIV定位,就要用到我们的盒子模型了,如它的名字,盒子是用来存放东西的,可以任意的挪动。当然更专业的词,我们称它为浮动。下面就是盒子模型的展示,margin、border、padding。如果你可以联想到照相馆墙上的画面那就再好不过了!
Step Three:整体架构
以下的代码是第一张原型的诠释,是一个很基础的CSS+DIV的实现结果。其中用到了盒子浮动的效果,让content模块和link模块各自向左右两边浮动。
CSS排版 datecontent content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
content content content content content content content content content content
otherslinks
links
links
linkslinks
links
links
linkslinks
links
links
linkslinks
links
links
linkslinks
links
links
links
效果图如下:
在有了CSS与DIV组合之后,网页的加载变得轻松,因为数据与格式的分离,让维护更加容易。搜索效率和浏览效率的提高,会带来很好的用户体验。So...CSS+DIV构成的如此简洁的源代码前台,是我们学习前端开发的必备基础。
上一篇: 如何使用Vue数据监听方法watch
下一篇: jquery+css3做出直播平台的导航
推荐阅读
-
前端基础??CSS+DIV布局_html/css_WEB-ITnose
-
前端基础之初识 HTML_html/css_WEB-ITnose
-
前端基础(零)CSS基础_html/css_WEB-ITnose
-
Web前端从零基础到高手之路_html/css_WEB-ITnose
-
零基础也能看懂!写给设计师的前端小知识之各司其职_html/css_WEB-ITnose
-
前端开发基础之HTML--标签系列(1)_html/css_WEB-ITnose
-
零基础也能看懂!写给设计师的前端小知识之各司其职_html/css_WEB-ITnose
-
前端基础(一)CSS布局基础_html/css_WEB-ITnose
-
学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言_html/css_WEB-ITnose
-
前端新人学习笔记-html/css/js基础知识点(三)_html/css_WEB-ITnose