弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 3044|回复: 2

【跟我学建站】【入门五】弘帝建站系统模板的美化与整形!

[复制链接]
发表于 2017-9-5 01:50:50 | 显示全部楼层 |阅读模式
【跟我学弘帝建站系列教程】每天学一点(争取控制在5分钟内),一周会建站。
上一期,我们学习了DIV插入版块功能函数,但实际网站运行起来是这样子的,如图:
网页设计框架.jpg
天哪,这样的网站怎么见人?

其实,现在的网站就应该是这样的,数据与版面控制完全独立,这就是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学习进阶教程自行学习,也可以入群交流,欢迎参加培训,也可以远程一对技术指导。

回复

使用道具 举报

 楼主| 发表于 2017-9-5 02:27:52 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-4-29 19:31 , Processed in 0.060878 second(s), 18 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表