接口测试平台-4：html欢迎首页前端制作

1. html页面就是一个xxxx.html，是由哪些部分组成：html静态语言、js、css

 

2. 初始状态没有templates

 

在apitest下新建templates文件夹，用来存放所有的html，这个名字不能随便改，写死在settings.py的配置里了

 

3. 新建welcome.html

 

将title修改为首页

 

选择一个浏览器打开

或

或

手工复制welcome.html的绝对路径，在浏览器中打开

 

看看效果：

 

4. 在body标签内写该页面的主体：

 

 

 

将views.py里的映射关系改为下图：

 

http://127.0.0.1:8000/welcome.html

报错：找不到welcome.html，404

 

解决：要在django项目中注册app，settings.py的INSTALLED_APPS中添加apitest

 

看看效果：

 

5. 美化页面

• 加个标题：

<h1>欢迎来到 接口测试平台 首页！</h1>

• 加个颜色

<h1 style="color: green">欢迎来到 接口测试平台 首页！</h1>

• div容器，空白容器，来包装好内部的一堆东西，它几乎什么都能装进去。并且自身的样式也很灵活。

<div style="background-color: grey; text-align: center">
    <h1 style="color: green">欢迎来到 接口测试平台 首页！</h1>
</div>

再次美化：

; border-radius: 5px; box-shadow: 4px 4px 10px #535353

 

也可以手工在编辑器左侧选择颜色，背景颜色也可以改成渐变色，增加圆角和阴影

 

下节预告：顶部菜单的开发 和 如何在任何页面都可以看到菜单。