【跟我学弘帝建站系列教程】每天学一点(争取控制在5分钟内),一周会建站。
上一期,我们学习了DIV插入版块功能函数,但实际网站运行起来是这样子的,如图:
天哪,这样的网站怎么见人?
其实,现在的网站就应该是这样的,数据与版面控制完全独立,这就是CSS2.0的起源,让数据只显示数据,让样式来操控数据的美观度,弘帝是中国较早启用CSS2.0技术的技术开发商,也是本土最早使用CSS2.0的服务商。
我们获知了CSS与数据可以完全分离后,就不要介意这个界面是否难看了,因为后续的工作只是对CSS进行操作,而对数据操作是没有意义的,也是不符合CSS2.0规范的。因此,有人说这个网站太丑,就等于直接告诉你了,这个不懂建站技术,只是没有写CSS而已。
CSS是一个相对较为复杂的脚本程序,学习的内容也比较多,也是最难点,大约超过20个英文单词,这里只简单介绍几个:width宽度,height高度,display显示方法,background背景图或色,如果没有基础,特别是英文基础,则需要较长时间的练习才能把握。
在开发前,我们希望广大网页制作爱好者,下载几个软件:取色器与屏幕量尺,学习群有提供下载。
然后在模板页面建立include文件夹,在include新建记事本,取名style.css,一定不要弄错哟,所有CSS代码就写在这里面。
这时候就可以写代码了:
比如,我们对<div class="logo"></div>进行编写CSS时,只需写.logo{float:left;display:block;width:宽度值;height:高度值;overflow:hidden}其中的值就屏幕量尺丈量,也可以用F12获取。
我们依次对每个.favi,.search,.menu,.banner,.....重复.logo的代码,并修改width和height为丈量高宽值尺寸,将数据分别固定在各个版面框架内。
建议大家使用直观的CSS工具来开发,这里我们用最原始的方法:CTRL+C复制,CTRL+V粘贴,来慢慢了解CSS的整个思想。
我们观察插入代码,发现有article,about,banner,product等等函数,那么这些代码怎么弄呢?说实话,相当复杂,不过没关系,我们有办法:
首先,在弘帝建站系统技术交流平台找到:二次开发->示范脚本。
查找article相关的css,比如有:ArticleView.css,ArticleList.css,ArticleDetail.css一股脑的复制粘贴到style.CSS里;
查找about相关的css,复制粘贴进style.css
查找banner,product,....等等,复制粘贴进style.css
这时候再打开网站看一看,您会发现漂亮多了。
网站学习自此基本结束,下一步需要精心细致打磨您的网站,精益求精,这可以帮助您练习和掌掘更多的css属性,后面附上CSS学习进阶教程自行学习,也可以入群交流,欢迎参加培训,也可以远程一对技术指导。
|