-
Notifications
You must be signed in to change notification settings - Fork 0
/
baogao.html
97 lines (90 loc) · 7.02 KB
/
baogao.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>心灵鸡汤</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="css/mdb.min.css">
<!-- Your custom styles (optional) -->
<link rel="stylesheet" href="css/style.css">
<style>
.jianbian{
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top,rgb(229, 196, 241),rgb(191, 241, 239),rgb(136, 179, 228));
}
</style>
</head>
<body >
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#" style="margin-left: 3%;font: xx-large;font-style: oblique;margin-right: 3%;">
心灵鸡汤
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="./index.html" >首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./juzi.html">美言美句</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">结业报告</a>
</li> <li class="nav-item">
<a class="nav-link " href="https://blog.csdn.net/weixin_47314449" target="_blank">我的CSDN</a>
</li>
</ul>
<ul class="navbar-nav my-2 my-lg-0">
<li class="nav-item">
<a class="nav-link" href="./zhuce.html">注册</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./denglu.html">登录</a>
</li>
</ul>
</div>
</nav>
<br>
<br>
<h1 class="s" style="text-align: center;font-weight: bold;">通信软件开发与应用</h1>
<div class="container s jianbian" >
<div class="row">
<div class=" col-md-1" >
</div>
<div class=" col-md-10" >
<h4 style="font-weight: bold;">一、网站简介</h4>
<p style="text-indent: 2em;">此网页的题目名为《心灵鸡汤》,主要包括首页、美言美句、登录、注册、结业报告
以及我的CSDN几个模块。主要使用MDBbootstrap框架来实现。涉及到的知识点有Bootstrap的网格系统设计、按钮、图片、导航栏、
背景等的设计。
</p>
<h4 style="font-weight: bold;">二、开发过程</h4>
<h6 style="font-weight: bold;margin-left: 2em;">1、导航条</h6>
<p style="text-indent: 2em;">首先是对导航条的设计,在设计导航条的时候,我选择的是默认的导航栏,即是在<nav>标签中添加类:.navbar,并为其设置样式,将背景颜色设置为黑色。接着通过列表的方式来对导航栏的内容选项进行设计。主要涉及的标签有<div>、<ul>、<li>、<a>。
</p>
<h6 style="font-weight: bold;margin-left: 2em;">2、首页</h6>
<p style="text-indent: 2em;">首页的设计主要是一张图片和一句鲁迅先生说的话,左边是图片,右边是文字。即是分为左右两栏,分为左右两栏的设计方法我使用的是表格,即是<table></table>标签。然后分为两个单元格,一个插入图片,一个插入文字,文字居中显示。</p>
<h6 style="font-weight: bold;margin-left: 2em;">3、美言美句板块</h6>
<p style="text-indent: 2em;">此板块主要是以图片、文字展示。图片位于左列,文字位于右列居中。可以看到页面分为五个板块,每一个板块的宽度高度,图片大小都是一样的。采用的是表格标签和表头标签来实现的。一共使用了五次。</p>
<h6 style="font-weight: bold;margin-left: 2em;">4、注册和登录部分</h6>
<p style="text-indent: 2em;">登录和注册页面采用的都是表单格式。通过多个<div>划分不同的选项,每一个选项都有<label>标签,除此之外还有输入标签,让用户进行输入,对于输入框,在设计的时候给注册页面的输入框设置了提示信息。用户可根据提示信息进行输入。注册页面主要涉及到的有手机号、邮箱、密码的输入,输入完成之后下面有记住密码选项和已有账号登录选项,用户可以勾选记住密码,或点击已有账号登录选项跳转到登录页面。结束之后,最后设置一个注册按钮,点击按钮注册。在登录界面上,主要有账号和密码两个输入框,带有忘记密码和记住密码选项,最后也设计了登录按钮,点击登录。除此之外,还为登录和注册界面设计了背景图片,让页面看起来更加美观。</p>
<h6 style="font-weight: bold;margin-left: 2em;">5、结业报告板块</h6>
<p style="text-indent: 2em;">此板块主要是对我自己设计的静态网页的一个介绍说明,对本次课程的一个总结。并为此页面设计了渐变背景颜色。</p>
<h4 style="font-weight: bold;">三、相关问题</h4>
<p style="text-indent: 2em;">在设计这个网页的时候,遇到的最大的问题是在登录和注册页面的设计上。怎么设置背景图片的明暗程度,让页面看起来柔和,怎么让表单的忘记密码选项实现打勾或未选。还有在设计结业报告页面时,怎么将页面分为三列,将文字放置在正中间的列上。刚开始做的时候因为基础不牢靠,所以都不太会。后来通过查看官方文档以及菜鸟教程,才得以逐步实现。</p>
<h4 style="font-weight: bold;">四、总结</h4>
<p style="text-indent: 2em;">通过本次网页设计,让我对Bootstrap的栅格布局有了更加清楚的认识。实践见真知,通过自己亲手设计网页实践才发现自己有很多基本的基础知识都没有掌握,平时练的太少了,不能仅仅停留在书本知识上面,要多练,边看边练,理解每一句代码的含义。令自己不满意的地方是这个网页设计的是静态网页,由于动态网页知识不牢靠,写了很久没写出来,所以转为了静态网页制作。
</p>
<p style="text-indent: 2em;">通过这次课程,让我对前端有了了解,也对前端很感兴趣。同时也感谢学校和老师安排了这次课程,因为在这次课程中,我做出了对未来工作岗位的抉择,我想称为一名web前端开发工程师,虽然课程结束了,但是我对前端的学校不会结束,我会一直学下去,为未来找工作做好准备。</p>
</div>
<div class=" col-md-1" ></div>
</div>
</div>
</div>
</body>
</html>