上节说到,首页我们可以成功打开了。本节就说说,如何设计主页吧~
美化设计:
关于设计这点,老实说,我是没有什么话语权的,因为我做的东西不好看。但是大不了我们可以借鉴啊.....所以我们来介绍几种设计:
1.百度风格
特点:简洁明了,加载飞快,搜索功能强大,很容易被同事作为书签页收藏甚至做成主页。
2.hao123风格
特点:满屏的超链接,花里胡哨,但是很实用,全都是常用网址,设计公司内测试平台的话也可以用各种内部常用链接作为首页,这样做更容易让同事保存成书签。
3.数据总结显示:
特点:此类页面更加直观的给用户展示必要数据,显得高大上和正规。但是要求技术难度较高,且需要大量的网上去抄第三方控件,首次进入加载会很慢。
4.广告类页面
特点:通篇的大屏图片,动画,感觉高端大气上档次。低调奢华有内涵,但是不太适合作为一个测试平台使用
5.主要工具实用类
特点:就相当于 没有主页了。用户进来的第一个页面 就是一个最常用的工具页面,给人感觉是比较务实,但是失去了仪式感。
6.文字排版文档类简
简单单欢迎语 使用说明 更新说明
特点:制作简单,无任何难度。只要设计得体,那么依然漂亮的一批,国外的很多开源网址,下载地址页面都这样,低调,朴素。
本节我们就介绍第6个,做一个简单的页面美化
首先,我们设计一个欢迎语
打开项目,让我们新建一个html页面,叫做:home.html
这里我们要更改一个概念:welcome.html 我们准备后续给它当作公共菜单。home.html 作为主页。所以我们把welcome.html的title改成测试平台:
这样我们后续进入的各种页面都会显示这个了
好的,让我们打开新建的home.html开始开发:
然后在浏览器打开看看效果:
接着设计, 给body增加text-align属性,值为center。这个意思是让整个body内的文字元素都居中显示。
代码语言:javascript复制<body style="text-align: center">
然后如上图,我们添加了一个div块,用来存放 使用说明。并且给它加了一些自己的特定属性。虽然在body这个父控件中指定了text-align:center。但是如果内部子控件单独写了同一个属性,那么这个子控件将不再接受父控件的这个属性,而按照自己单独写的。
看看效果:
接下来我们继续写其他的:
其中span 标签是静态文案的标签,写了之后可以肆意的去改变文案的大小字号,颜色,阴影等各种样式了。
br标签是回车换行符
a标签是超链接
h1 - h5都是常用的标题,自动加粗加黑加大
看看效果:
接下来让我们放一个图片进来装点一下:
图片的标签是img,你输入img之后,按下tab键,就会自动给你补全:
按tab键:
神奇么?
src属性就是你的图片的具体位置路径。alt属性是缺省,就是当你的图片坏了找不到了,就会显示alt的属性内容,比如说:抱歉,图片走丢了 5555
我们的图片应该放在哪呢?当然是static这个静态资源文件夹了!
然后我们在src属性中写路径,一定要以 /satic/开头,注意左边的/
顺便在图片之前加俩个br
好了现在,我们在浏览器打开可以看到:
为啥会发生这个现象呢?
因为我们的图片路径是以/static/开头的写法。这个写法是因为django服务会自动去static中提取所有静态资源,但是我们目前是直接在浏览器中打开home.html,并没有走django的路线,所以找不到这个路径。而如果要在django服务中看到,我们必须要先去写urls.py的映射,然后写个后台函数,后台函数来返回我们的home.html,才可以。
所以现在开始写url映射吧~
按如图修改,新写一个home/$ 作为url
然后我们去views.py写这个home函数:
然后确保我们的服务没有停止。
现在让我们打开网址:127.0.0.1:8000/home/ 来看看刚刚开发的首页!
可以看到图片很好的加载了,但是显得有点大,让我们给它加一个width宽度css属性:
回来浏览器,刷新看看。
现在小多了。但是图片内容可能引起小邪