CSS+DIV——前端er必备基础
来源:互联网 发布:数据建模 开源 编辑:程序博客网 时间:2024/06/15 23:21
B/S真是一个长见识的阶段,认识了很多前端必备的语言,随着时间的增加,本以为新闻发布系统中学到的那些我还不知道是什么的东西,会早已没了印象。但反而却更加深刻了,当时还不知道什么是CSS,就学会了写CSS。还不是什么是异步通信,就学会了用AjaX。当看到视频中的经典框架时,才发现,这不就是新闻发布系统中用到的CSS+DIV么!(⊙o⊙)哦,原来我早就会写了!
一、为什么是DIV+CSS
看到这个搭配,我就在想为什么是这样的组合?Span不可以么!直接用HTML不可以么!一个很明确的目的:为了让数据内容与数据格式分离,方便前端er开发和维护。想象一下,一个内链样式表的语句
<span style="font-family:KaiTi_GB2312;font-size:18px;"><link href="(css样式表)" rel="stylesheet" type="text/css" /></span>
如果需要修改任何一个前端元素的样式,只要在样式表中去查找ID或类别名就可以了,这无疑大大提高了开发的效率。
还有一个问题就是为什么Span不可以?SPAN和DIV的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN是行内元素,SPAN的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。
二、一步步实现DIV+CSS
Step ONE:DIV分块
首先要考虑到网页分为几个展示部分,Banner和Footer是必备的,其他内容的展示就是个性的问题了,分配给相应的DIV块。
Step Two:DIV定位——盒子模型
用CSS样式表给DIV定位,就要用到我们的盒子模型了,如它的名字,盒子是用来存放东西的,可以任意的挪动。当然更专业的词,我们称它为浮动。下面就是盒子模型的展示,margin、border、padding。如果你可以联想到照相馆墙上的画面那就再好不过了!
Step Three:整体架构
以下的代码是第一张原型的诠释,是一个很基础的CSS+DIV的实现结果。其中用到了盒子浮动的效果,让content模块和link模块各自向左右两边浮动。
<html><head><style type="text/css"><!--body {margin:0px;font-size:13px;font-family:Arial;} #container{position:relative;width:100%;}#banner{height:80px;border:1px solid #000000;text-align:center;background-color:#a2d9ff;padding:10px;margin-bottom:2px;}#content{float:left;text-align:center;padding-right:200px;/* 内容往回挤200px */}#links{float:right;width:200px;border:1px solid #000000;margin-left:-200px;/* 强行往左拉回200px */text-align:center;}#footer{clear:both;/* 不受float影响 */text-align:center;height:30px;border:1px solid #000000;}--></style><title>CSS排版</title><body><div id="container"><div id="banner">banner</div><div id="content"><div class="blog"><div class="date">date</div><div class="blogcontent">content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br>content content content content content content content content content content<br></div></div><div class="others">others</div></div><div id="links"><div class="calendarhead">links<br>links<br>links<br>links</div><div class="calendartable">links<br>links<br>links<br>links</div><div class="side">links<br>links<br>links<br>links</div><div class="syndicate">links<br>links<br>links<br>links</div><div class="friends">links<br>links<br>links<br>links</div></div><div id="footer">footer</div></div></body></html>
效果图如下:
三、小结
在有了CSS与DIV组合之后,网页的加载变得轻松,因为数据与格式的分离,让维护更加容易。搜索效率和浏览效率的提高,会带来很好的用户体验。So...CSS+DIV构成的如此简洁的源代码前台,是我们学习前端开发的必备基础。
- CSS+DIV——前端er必备基础
- 前端基础——CSS+DIV布局
- 【CSS——必备的基础】
- 前端制作必备:CSS全局样式基础代码
- 前端基础——CSS盒子模型
- 前端基础——CSS盒子模型
- 前端基础——CSS常见样式
- H5前端基础——css
- 【CSS+DIV】——基础+格局设计
- div+css基础——9.div其它常用属性
- Css+Div布局学习(一)—Div布局基础
- 前端开发CSS+DIV
- 前端div+css布局
- 前端必备————图片转换成css或js方法
- div+css基础——3.采用div浮动对div进行排版
- div+css基础——5.采用div定位技术对div进行排版(相对定位)
- python爬虫——web前端基础HTML+CSS
- css+div布局总结——基础篇
- HDU 1003 Max Sum
- HDOJ 2025
- 重构笔记——隐藏“委托关系”
- Yii AR对象model查询
- 借前辈们的语录自勉,继续向前!
- CSS+DIV——前端er必备基础
- hdu 1072 Nightmare BFS,第一次刷BFS的题,感好牛逼的。。。
- php字符串处理
- [每天一个知识点]29-C语言-printf的格式符*
- win7激活概述
- jQuery选择器代码详解(三)——tokenize方法
- 【java编程】String之两个字符串获取最大子串
- 二叉树的三种遍历方式的递归与非递归实现
- HDU 1253 胜利大逃亡