美化设计:
1. 百度风格
特点:简洁明了,加载飞快,搜索功能强大,很容易被同事作为书签页收藏甚至做成主页。
2. hao123风格
特点:满屏的超链接,花里胡哨,但很实用,全是常用网址,设计公司内测试平台的话也可以用各种内部常用链接作为首页,这样做更容易让同事保存成书签。
3. 数据总结显示
特点:此类页面更加直观的给用户展示必要数据,显得高大上和正规。但是要求技术难度较高,且需要大量的网上去抄第三方控件,首次进入加载会很慢。
4. 广告类页面
特点:通篇的大屏图片,动画,感觉高端大气上档次。低调奢华有内涵,但是不太适合作为一个测试平台使用
5. 主要工具实用类
特点:就相当于 没有主页了。用户进来的第一个页面 就是一个最常用的工具页面,给人感觉是比较务实,但是失去了仪式感
6. 文字排版文档类,简简单单欢迎语+使用说明+更新说明
特点:制作简单,无任何难度。只要设计得体,那么依然漂亮的一批,国外的很多开源网址,下载地址页面都这样,低调,朴素。
本节就介绍第6个,做一个简单的页面美化
1. 欢迎语:welcome.html 我们准备后续给它当作公共菜单,home.html 作为主页。所以把welcome.html的title改成测试平台
2. 新建home.html,添加标题:欢迎使用 接口测试平台
直接打开浏览器,看看效果:
3. 设计
给body增加text-align属性,值为center。意思是让整个body内的文字元素都居中显示
<body style="text-align: center">
增加div容器块:
<div style="border: 1px solid black; width: 200px; text-align: left; margin-left: -webkit-calc(50% - 100px); padding-left: 10px">
<h2>如何使用:</h2>
1. 打开左侧菜单<br>
2. 找到要用的功能<br>
3. 点击进入<br><br>
</div>
看看效果:
4. 继续写其他的
span 标签:静态文案,可以肆意的改变文案的大小字号,颜色,阴影等各种样式。
br 标签:回车换行符
a 标签:超链接
h1 - h5 :常用的标题,自动加粗加黑加大
看看效果:
5. 装饰主页
图片的标签是img,你输入img之后,按下tab键,就会自动给你补全,图片放在static中
src 属性:图片的具体位置路径
alt 属性:缺省,当图片坏了找不到了,就显示alt的属性内容,比如说:抱歉,图片走丢了 5555
<img src="/static/WetChatIMG86.jpeg" alt="抱歉,图片走丢了 5555">
看看效果:
原因:图片路径是以/static/开头,因为django服务会自动去static中提取所有静态资源,但目前是直接在浏览器中打开home.html,并没有走django的路线,所以找不到这个路径。
如果要在django服务中看到,我们必须要先去写urls.py的映射,写个后台函数,后台函数来返回我们的home.html,才可以。
解决:添加映射
看看效果:http://127.0.0.1:8000/home/
加宽度限制
<img src="/static/WeChatIMG86.jpeg" alt="抱歉,图片走丢了 5555" width="200px">
6. 可以换个图,比如做一个平台的专属logo!
百度,在线logo制作,你会看到很多同类型的网站
下节预告:如何让各个页面都显示平台的菜单。