利用HbuilderX制作简单网页
本次综合课程设计要求设计内容不限安卓App，小程序，h5界面等，实现两三功能。 鉴于Android的知识放得太久，且AndroidStudio已被删除，所以尝试下载HbuilderX（十几M大小，操作简单），自学半天设计一个简陋的网页，由于没学过前端，所以很一般。
工具：
项目文件及包含：
1.
HTML是描述网页文档的标记语言(网页) HTML的全写是Hyper Text Markup Language 一门标记语言是由很多标记组成的. HTML标记用来描述HTML文档 每个HTML标签描述不同的文档内容
2.
CSS是描述HTML(或XML)文档的样式表语言. CSS描述了元素在屏幕上、纸上或其他媒体上呈现的方式.
3.
Javascript让HTML页面更加的动态和更有交互性.
内容结构：
DOCTYPE用来申明文档类型为HTML
和之间的内容用来描述HTML文档 和之间的内容描述文档的头部信息 和设置文档的标题 和之间的内容为文档的可见内容
和
申明为一个标题
和
申明为一个段落
HTML结构图可以很快了解具体框架：
主页面.html
主页面包含了整个网页我所想展示的东西。
页面预览：
登录界面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/iconfont.css" /> <script type="text/javascript" src="./js/new_file.js"></script> <title>登录</title> </head> <body> <div id="bigBox"> <h1>小昭的旅行日志</h1> <div class="inputBox"> <div class="inputText"> <span class="iconfont icon-nickname"></span> <input type="text" placeholder="用户名" /> </div> <div class="inputText"> <span class="iconfont icon-visible"></span> <input type="password" placeholder="密码" /> </div> </div> <input class="loginButton" type="button" value="Login" onclick="go()" />//给按钮一个跳转函数，再写一个js的定义，以便跳转到主页面。 </div> </body> </html>
css文件
body
{
margin: 0;
padding: 0;
background-image: url(../img/20150826_IMG_2927.JPG); /* 背景图片 */
background-repeat: no-repeat; /* 背景图片不重复 */
}
#bigBox
{
margin: 0 auto; /* login框剧中 */
margin-top: 200px; /* login框与顶部的距离 */
padding: 20px 50px; /* login框内部的距离(内部与输入框和按钮的距离) */
background-color: #00000090; /* login框背景颜色和透明度 */
width: 200px;
height: 100px;
border-radius: 10px; /* 圆角边 */
text-align: center; /* 框内所有内容剧中 */
}
#bigBox h1
{
color: white; /* LOGIN字体颜色 */
}
#bigBox .inputBox
{
margin-top: 50px; /* 输入框顶部与LOGIN标题的间距 */
}
#bigBox .inputBox .inputText
{
margin-top: 20px; /* 输入框之间的距离 */
}
#bigBox .inputBox .inputText span
{
color: Black; /* icon颜色 */
}
#bigBox .inputBox .inputText input
{
border: 0; /* 删除输入框边框 */
padding: 10px 10px; /* 输入框内的间距 */
border-bottom: 1px solid white; /* 输入框白色下划线 */
background-color: #00000000; /* 输入框透明 */
color: black; /* 输入字体的颜色 */
}
#bigBox .loginButton
{
margin-top: 30px; /* 按钮顶部与输入框的距离 */
width: 150px;
height: 25px;
color: white; /* 按钮字体颜色 */
border: 0; /* 删除按钮边框 */
border-radius: 20px; /* 按钮圆角边 */
background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%); /* 按钮颜色 */
}
