美化设计：
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制作，你会看到很多同类型的网站
下节预告：如何让各个页面都显示平台的菜单。
953
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
