《通信软件开发与应用》课程结业报告
一、要求以及所选主题
根据课程结业要求，选择A主题，即静态网站。可使用你喜欢的任何CSS框架如BootStrap、MDB、tailwind等，页面不少于5个，最后一个页面放置结业报告的超链接。网站需部署到你喜欢的托管服务器上如github等。
撰写结业报告，要求如下：
A. 题目为《通信软件开发与应用》课程结业报告；
B. 报告需阐述：做的什么、开发过程、遇到的问题、如何解决、哪些未解决、总结；
C. 该报告需表现为HTML格式，从你上面的网站中可访问到。
结合该要求，我选择的主题为一个曾经学习过的教学机构做一个宣传网站。
二、作业最终效果展示
这次作业我主要分了五个主页的html文件，其中包括home,IU,Yangmi,Crystal,以及报告页面。共五个文件。下图为图片展示。
三、开发过程
1.选择模板的思考过程
参考明星图库主页，因为我做的是一个比较简单的平台推荐网页，所以就选择了比较喜欢的MDB框架来进行设计。作为提供高清图片壁纸，需要面向对流量明星感兴趣的对象，向他们展示极为关注的图片，如明星生平、代表作品、近期活动等。为了网页美观度，也要展示高清图像，最后还要展现明星的语录、生活感悟。最后还要提供便捷的联系方式。运用了五个HTML文件，用跳转链接将其联系起来。
2.头部设计
网页主页头部设计由导航条加上背景图组成。导航条可以快速锁定所需要的内容，是网页开发极其重要的内容。背景图明确网站主题。其中，导航条使用了一个< nav >标签，其内容包括三个部分，包括< a >超链接，来实现网页的快速跳转，按钮来实现点击，区块，用于放置各个导航超链接。
导航是便于浏览整个网页的很重要的部分，这部分的代码为
<!--==============================
header
=================================-->
<header>
<div class="header_top">
<div class="container">
<div class="row">
<div class="grid_12">
<h1><a href="#">Photo.star <br> Capturing Life </a></h1>
superstar
</div>
</div>
</div>
</div>
<section id="stuck_container">
<!--==============================
Stuck menu
=================================-->
<div class="container">
<div class="row">
<div class="grid_12 ">
<h1 class="logo">
<a href="index.html">
Photo.star
</a>
</h1>
<div class="navigation ">
<nav>
<ul class="sf-menu">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">IU</a></li>
<li><a href="gallery.html">Yangmi</a></li>
<li><a href="blog.html">Crystal</a></li>
<li><a href="am.html">报告</a></li>
</ul>
</nav>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</section>
</header>
效果图为
3.主页设计
主页1，home.html
这部分的内容主要包括主要介绍的对象人物，包括刘亦菲、杨幂、李知恩。也包括了南韩女团blackpingk的简介。介绍资料主要来自知乎、百度百科等网站。
<!--=====================
Content
======================-->
<section id="content"><div class="ic">More Website Templates @ TemplateMonster.com - August11, 2014!</div>
<div class="container">
<div class="row">
<div class="grid_12">
<h2 class="ta__center">Recent Photos</h2>
<div class="shuffle-group">
<div class="row">
<div class="grid_8">
<div data-si-mousemove-trigger="100" class="shuffle-me offset__1">
<a href="gallery.html" class="info" target="_blank"></a>
<div class="images">
<img src="images/gall_1.jpg" alt="">
<img src="images/gall_1-1.jpg" alt="">
<img src="images/gall_1-2.jpg" alt="">
</div>
</div>
</div>
<div class="grid_4">
<div data-si-mousemove-trigger="100" class="shuffle-me">
<a href="gallery.html" class="info" target="_blank"></a>
<div class="images">
<img src="images/gall_2.jpg" alt="">
<img src="images/gall_2-1.jpg" alt="">
<img src="images/gall_2-2.jpg" alt="">
</div>
</div>
<div data-si-mousemove-trigger="100" class="shuffle-me offset__1">
<a href="gallery.html" class="info" target="_blank"></a>
<div class="images">
<img src="images/gall_3.jpg" alt="">
<img src="images/gall_3-1.jpg" alt="">
<img src="images/gall_3-2.jpg" alt="">
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div class="sep-1"></div>
<div class="container">
<div class="row">
<div class="grid_8">
<h3>blackpink</h3>
<img src="images/page1_img1.jpg" alt="" class="img_inner fleft noresize">
<div class="extra_wrapper"><p class="offset__1">BLACKPINK（블랙핑크）是YG Entertainment于2016年8月8日推出的韩国女子演唱组合，由金智秀（JISOO）、金智妮（JENNIE）、朴彩英（ROSÉ）、LISA四名成员组成。组合名“BLACKPINK”在看起来很美的粉色中稍微加入了否定的意义，旨在传达出“不要只看漂亮的部分”、“看到的并不是全部”的意思。</p></div>
<div class="clear"></div>
<a href="#" class="btn">more</a>
</div>
<div class="grid_4">
<h3>Follow me</h3>
<ul class="socials">
<li>
<div class="fa fa-facebook"></div>
<a href="#">Be a fan on Facebook</a>
</li>
<li>
<div class="fa fa-twitter"></div>
<a href="#">Follow me on Twitter</a>
</li>
<li>
<div class="fa fa-google-plus"></div>
<a href="#">Follow me on Google+</a>
</li>
<li>
<div class="fa fa-youtube"></div>
<a href="#">Follow me on YouTube</a>
</li>
</ul>
</div>
</div>
</div>
<div class="sep-1"></div>
<div class="container">
<div class="row">
<div class="grid_7">
<h3 class="head__1">you are my sunshine</h3>
<time class="time-1" datetime="2014-01-01">08.06 <br> 2021</time><p class="offset__2">When tomorrow turns in today, yesterday, and someday that no more important in your memory, we suddenly realize that we r pushed forward by time. This is not a train in still in which you may feel forward when another train goes by. It is the truth that we've all grown up. And we become different.<br>
<a href="#" class="btn">more</a>
</div>
<div class="grid_4 preffix_1">
<h3 class="head__1">Lovers</h3>
<blockquote class="bq_1">
<img src="images/page1_img2.jpg" alt="" class="img_inner fleft noresize">
<div class="extra_wrapper">
<div class="bq_title">IU</div>
</div>
<div class="clear"></div>
Live a good life meet slowly .
（ 好好生活 , 慢慢相遇 ）
<br>
<a href="#" class="btn">more</a>
</blockquote>
</div>
</div>
</div>
</section>
主页2，IU.html
本部分讲了iu的身份以及作品，底部加入了IU的粉丝评论。并简单介绍了电子邮箱等基础信息。
图片如下
<!--=====================
Content
======================-->
<section id="content"><div class="ic">More Website Templates @ duhuahuaya</div>
<div class="container">
<div class="row">
<div class="grid_12">
<h2>Her Biography and Experience</h2>
<img src="images/page2_img1.jpg" alt="" class="img_inner fleft">
<p>李知恩（이지은/Lee Ji Eun），艺名IU，1993年5月16日出生于韩国首尔特别市，韩国女歌手、演员、主持人。</p>
<p>2008年9月，在Mnet音乐节目《M ! Countdown》中演唱歌曲《迷儿》，正式出道；随后发行首张迷你专辑《Lost And Found》。
2009年，发行首张正规专辑《Growing Up》。
2010年，发行迷你专辑《Real》，主打歌《好日子》连续五周位居韩国Gaon榜榜首。
2011年1月，出演校园剧《dream high》；3月，成为SBS音乐节目《人气歌谣》的固定主持人。发行第二张正规专辑《Last Fantasy》，全专歌曲总下载量超过1700万次。
2012年，名列韩国福布斯名人榜第三位。
2013年，发行的第三张正规专辑《Modern Times》展现了多元化的歌曲风格。凭借周末剧《最佳李顺心》获得KBS演技大赏新人女演员奖。
2014年5月，发行翻唱专辑《花书签》；12月，获得韩国盖洛普调查歌手部门第一位以及第16届Mnet亚洲音乐大奖最佳女歌手奖。
2015年，发行迷你专辑《CHAT - SHIRE》，并被《Billboard》认可为韩国流行音乐百强榜的领跑者；同年，获得韩国大众文化艺术奖国务总理表彰奖。主演KBS金土剧《制作人》。
2016年，主演古装穿越《步步惊心：丽》。
2017年4月，发行第四张正规专辑《Palette》。9月，发表第二张翻唱专辑《花书签2》。李知恩还涉足主持以及表演领域。12月，获2017MAMA最佳女歌手奖。
2018年1月，获得韩国金唱片奖音源部门大奖。
2019年4月，首次主演电影《Persona》在网飞放映。 </p>
<img src="images/page2_img2.jpg" alt="" class="img_inner img_fright">
<p>步步惊心：丽》是韩国SBS电视台于2016年8月29日首播的浪漫奇幻古装剧，由金奎泰执导，赵允英编剧，李准基、李知恩、姜河那主演。</p>
<p>该剧根据中国小说《步步惊心》改编，讲述了在日全食现象中灵魂穿越到高丽的21世纪女人解树和四王子王昭之间的浪漫爱情故事，以及高丽宫廷火热的王权竞争 </p>
<p>高丽太祖王建的四王子王昭（李准基饰）被人称作“狼狗”，他一直把自己封闭在冷酷的面具之下。解树（李知恩饰）是一个性格倔强坚韧的女汉子，原本生活在21世纪，却突然穿越到了高丽时代，陷入历史事件的中心。王昭遇到解树后，渐渐敞开心扉，并在解树的鼓励下摘下面具，开始新的人生。解树也开拓着自己全新的命运，与王昭以及一众王子发展出友情和爱情，并从中逐渐成长</p>
主页3，Yangmi.html
本部分主要介绍杨幂的影视作品，根据遮盖、滑动等命令，可以显现出不同的剧照。并在遮盖滑动时候显示了杨幂的经典语录。运用了遮盖滑块的功能，点击图中黑框中的文字，将遮盖图片，进而显示明星语录，以及语录的英文翻译，并用button显示更多文件。
语法如下：
<div class="box">
<img src="images/page3_img6.jpg" alt=""><span></span>
<div class="box_bot">
<div class="box_bot_title">只要你的脚还在地面上，就别把自己看得太轻；只要你还生活在地球上，就别把自己看得太大。如果你知道去哪，全世界都会为你让路。</div>
<p>As long as your feet are on the ground, don't take yourself too seriously; If you know where you are going, the whole world will make way for you</p>
<a href="#" class="btn">more</a>
<!--=====================
Content
======================-->
<section id="content" class="gallery"><div class="ic">More Website Templates @ TemplateMonster.com - August11, 2014!</div>
<div class="container">
<div class="row">
<div class="grid_12">
<h2>Gallery</h2>
</div>
<div class="grid_4">
<div class="box">
<a href="images/big1.jpg" class="gall_item"><img src="images/page3_img1.jpg" alt=""><span></span></a>
<div class="box_bot">
<div class="box_bot_title">数学指出函数的极大值往往在最不稳定的点取到，人追求极端就会失去内心的平衡。</div>
<p>Mathematics is pointed out that the maximum of the function is often in the most unstable points to get, people pursuit of extreme balance will lose heart. </p>
<a href="#" class="btn">more</a>
</div>
</div>
</div>
<div class="grid_4">
<div class="box">
<a href="images/big2.jpg" class="gall_item"><img src="images/page3_img2.jpg" alt=""><span></span></a>
<div class="box_bot">
<div class="box_bot_title">没有遗憾的人生，就不是精彩的人生。</div>
<p>A life without regrets is not a wonderful life</p>
<a href="#" class="btn">more</a>
</div>
</div>
</div>
<div class="grid_4">
<div class="box">
<a href="images/big3.jpg" class="gall_item"><img src="images/page3_img3.jpg" alt=""><span></span></a>
<div class="box_bot">
<div class="box_bot_title">感觉演员有时很像鸟,看起来最自由,其实是毫无着落</div>
<p>Sometimes actors feel like birds, they seem to be the most free, but actually they have no land at allt</p>
<a href="#" class="btn">more</a>
</div>
</div>
</div>
<div class="grid_4">
<div class="box">
<a href="images/big4.jpg" class="gall_item"><img src="images/page3_img4.jpg" alt=""><span></span></a>
<div class="box_bot">
<div class="box_bot_title">今天已经是今天，就不要把梦留在昨天。今天的阳光已如此精彩，而我还住在昨天没有醒来。</div>
<p>Today is today, don't leave your dream in yesterday. Today's sunshine has been so wonderful, but I still live in yesterday did not wake up</p>
<a href="#" class="btn">more</a>
</div>
</div>
</div>
<div class="grid_4">
<div class="box">
<a href="images/big5.jpg" class="gall_item"><img src="images/page3_img5.jpg" alt=""><span></span></a>
<div class="box_bot">
<div class="box_bot_title">我曾经以为把不完整的东西拼凑起来他们就可以完整了，其实不是。它们无法填补彼此的空白。只是彼此徒增更多的伤口。</div>
<p>I used to think that they could be complete by piecing together the incomplete things. In fact, it is not that they cannot fill the gap between each other, but each other only adds more wounds</p>
<a href="#" class="btn">more</a>
</div>
</div>
</div>
<div class="grid_4">
<div class="box">
<a href="images/big6.jpg" class="gall_item"><img src="images/page3_img6.jpg" alt=""><span></span></a>
<div class="box_bot">
<div class="box_bot_title">只要你的脚还在地面上，就别把自己看得太轻；只要你还生活在地球上，就别把自己看得太大。如果你知道去哪，全世界都会为你让路。</div>
<p>As long as your feet are on the ground, don't take yourself too seriously; If you know where you are going, the whole world will make way for you</p>
<a href="#" class="btn">more</a>
</div>
</div>
</div>
<div class="grid_4">
<div class="box">
<a href="images/big7.jpg" class="gall_item"><img src="images/page3_img7.jpg" alt=""><span></span></a>
<div class="box_bot">
<div class="box_bot_title">对不起是一种真诚，没关系是一种风度。如果你付出了真诚却得不到风度，那只能说明对方的无知与粗俗。
</div>
<p>Sorry is a kind of sincere, never mind is a kind of grace if you pay a sincere but not grace, that can only show the other side of the ignorance and vulgarity</p>
<a href="#" class="btn">more</a>
</div>
</div>
</div>
<div class="grid_4">
<div class="box">
<a href="images/big8.jpg" class="gall_item"><img src="images/page3_img8.jpg" alt=""><span></span></a>
<div class="box_bot">
<div class="box_bot_title">就算你觉得现实抛弃了自己，我们自己也不要放弃自己。</div>
<p>Even if you feel that reality has abandoned you, we don't give up on ourselves</p>
<a href="#" class="btn">more</a>
</div>
</div>
</div>
<div class="grid_4">
<div class="box">
<a href="images/big9.jpg" class="gall_item"><img src="images/page3_img9.jpg" alt=""><span></span></a>
<div class="box_bot">
<div class="box_bot_title">心灵需要阳光，打开心窗，面对朝阳。</div>
<p>The soul needs sunshine, open the heart window, face the sun</p>
<a href="#" class="btn">more</a>
</div>
</div>
</div>
</div>
</div>
</section>
主页4，Crystal.html
本部分主要分为四个区块，讲述了刘亦菲的百科信息、高清图像、代表作品以及神雕侠侣的详解。
主要运用的语法功能有，滑动显块。语法为：
<li><span></span><a href="#"><div class="fa fa-chevron-right"></div>The Story of A Noble Family </a></li>
本部分代码如下：
<!--=====================
Content
======================-->
<section id="content"><div class="ic">More Website Templates @ TemplateMonster.com - August11, 2014!</div>
<div class="container">
<div class="row">
<div class="grid_8">
<h2>Crystal</h2>
<div class="blog">
<img src="images/page4_img1.jpg" alt="" class="img_inner">
<div class="text1 color1"><a href="#">Super idol Crystal liu</a></div>
<p>刘亦菲（Crystal Liu，1987年8月25日-），出生于湖北省武汉市，毕业于北京电影学院，中国内地女演员、歌手。
2002年，因出演电视剧《金粉世家》中白秀珠一角踏入演艺圈。2003年，因主演武侠剧《天龙八部》王语嫣崭露头角。2004年，凭借仙侠剧《仙剑奇侠传》赵灵儿一角获得了高人气与关注度。2005年，因在《神雕侠侣》中饰演小龙女受到广泛关注。2006年，发行首张国语专辑《刘亦菲》和日语专辑《All My Words》；同年，成为金鹰节历史上首位金鹰女神。2008年起转战大银幕，并凭借好莱坞电影《功夫之王》成为首位荣登IMDB电影新人排行榜榜首的亚洲女星。2015年起，刘亦菲主演的电影《夜孔雀》、《烽火芳菲》均入围国际A类电影节主竞赛单元。2020年3月，为电影《花木兰》演唱中文主题曲《自己》；9月4日，主演的电影《花木兰》定档在Disney+上线，在剧中饰演花木兰；11月20日，凭借《花木兰》获首届评论家选择超级奖动作电影最佳女演员提名；12月27日，获2020英国读者大奖最佳女演员奖。2021年2月16日，主演的电视剧《梦华录》开机。</p>
<br>
<a href="#" class="btn">more</a>
<table>
<tbody>
<tr>
<td><time datetime="2014-01-01">
<span class="fa fa-calendar"></span>
August 15, 1987
</time> </td>
<td><a href="#"><div class="fa fa-user"></div> Beautiful</a></td>
<td><a href="#"><span class="fa fa-link"></span> Permalink</a></td>
</tr>
<tr>
<td><div class="fa fa-bookmark"></div> Uncategorized </td>
<td colspan="2"><div class="fa fa-tag"></div> No tags</td>
</tr>
<tr>
<td><div class="fa fa-comments"></div> No commentts </td>
<td colspan="2"><div class="fa fa-eye"></div>182
<div class="fa fa-thumbs-up"></div>0
<div class="fa fa-thumbs-down"></div>0</td>
</tr>
</tbody>
</table>
</div>
<div class="blog">
<img src="images/page4_img2.jpg" alt="" class="img_inner">
<div class="text1 color1"><a href="#">The Brave Archer and His Mate
</a></div>
<p>It mainly tells the story of the late Southern Song Dynasty, Yang Guo and Xiaolongnu experienced a beautiful love and enmity of all rivers and lakes. The same story, not the same plot, and strive to show a moving river's lake past.</p>
Yang Kang's son Yang Guo from childhood a river's lake, after being taken in by old Guo Jing sent Quanzhen to teach hone. Rebellious Yang Guo can not stand torment, escape Quanzhen to teach by accident into the ancient tomb group, be taken in by Xiaolongnu, grant with martial arts. After because Li Mo sorrow breaks into ancient tomb and face life and death, 2 people developed by the friendship of teacher and apprentice the love that is engraved on my heart.
<br>
<a href="#" class="btn">more</a>
<table>
<tbody>
<tr>
<td><time datetime="2014-01-01">
<span class="fa fa-calendar"></span>
December 05, 2014
</time> </td>
<td><a href="#"><div class="fa fa-user"></div> Admin</a></td>
<td><a href="#"><span class="fa fa-link"></span> Permalink</a></td>
</tr>
<tr>
<td><div class="fa fa-bookmark"></div> Uncategorized </td>
<td colspan="2"><div class="fa fa-tag"></div> No tags</td>
</tr>
<tr>
<td><div class="fa fa-comments"></div> No commentts </td>
<td colspan="2"><div class="fa fa-eye"></div>182
<div class="fa fa-thumbs-up"></div>0
<div class="fa fa-thumbs-down"></div>0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="grid_4">
<h2>The main work</h2>
<ul class="list-1">
<li><span></span><a href="#"><div class="fa fa-chevron-right"></div>The Story of A Noble Family </a></li>
<li><span></span><a href="#"><div class="fa fa-chevron-right"></div>The Demi-Gods and the Semi-Devils</a></li>
<li><span></span><a href="#"><div class="fa fa-chevron-right"></div>The Brave Archer and His Mate </a></li>
<li><span></span><a href="#"><div class="fa fa-chevron-right"></div>Night Peacock </a></li>
<li><span></span><a href="#"><div class="fa fa-chevron-right"></div>Hua mu LAN </a></li>
<li><span></span><a href="#"><div class="fa fa-chevron-right"></div>Wei menghua record </a></li>
</ul>
</div>
</div>
</div>
</section>
4.其他内容部分设计
①滑动遮盖部分
运用了遮盖滑块的功能，点击图中黑框中的文字，将遮盖图片，进而显示明星语录，以及语录的英文翻译，并用button显示更多文件。
语法如下：
<div class="grid_4">
<div class="box">
<img src="images/page3_img3.jpg" alt=""><span></span>
<div class="box_bot">
<div class="box_bot_title">感觉演员有时很像鸟,看起来最自由,其实是毫无着落</div>
<p>Sometimes actors feel like birds, they seem to be the most free, but actually they have no land at allt</p>
<a href="#" class="btn">more</a>
</div>
</div>
</div>
②滑动变色部分
在第四分页crystal.html中，有显示滑动变色的一个功能。
当鼠标移到此区域，就会变色。滑动显示。语法为：
<li><span></span><a href="#"><div class="fa fa-chevron-right"></div>The Story of A Noble Family </a></li>
③页面风格部分
接下来是明星风格介绍部分，在第四分页crystal.html中，有一个巧妙可爱的分区，主要运用了表格的语法，设计了一个简约的表格区域，增加页面内容以及美观度。
主要代码部分为：
<table>
<tbody>
<tr>
<td><time datetime="2014-01-01">
<span class="fa fa-calendar"></span>
December 05, 2014
</time> </td>
<td><a href="#"><div class="fa fa-user"></div> Admin</a></td>
<td><a href="#"><span class="fa fa-link"></span> Permalink</a></td>
</tr>
<tr>
<td><div class="fa fa-bookmark"></div> Uncategorized </td>
<td colspan="2"><div class="fa fa-tag"></div> No tags</td>
</tr>
<tr>
<td><div class="fa fa-comments"></div> No commentts </td>
<td colspan="2"><div class="fa fa-eye"></div>182
<div class="fa fa-thumbs-up"></div>0
<div class="fa fa-thumbs-down"></div>0</td>
</tr>
</tbody>
</table>
④Footer反馈部分
这一部分是加入了一些关于本网站的资料，希望可以根据提供的邮箱等联系方式可以收到反馈。
该部分不是重点，只是表现网站质量的一种形式，所以占用版面以及色调都不会太突出。
代码为：
<footer id="footer">
<div class="container">
<div class="row">
<div class="grid_12">
<h2>Contacts</h2>
<div class="footer_phone">+1 800 559 6580</div>
<a href="#" class="footer_mail">info@demolink.org</a>
</div>
</div>
</div>
</footer>
⑤后续其他部分
在IU的html文件中，存在一个粉丝评论区，里面是我在网站上搜集到的粉丝对IU的真切表白。
该部分的语法为：
</div>
<div class="grid_3">
<div class="block-1">
<div class="fa fa-trophy"></div>
<div class="block-1_title">Happiness</div>Life is full of confusing and disordering Particular time, a particular location, Do the arranged thing of ten million time in the brain, Step by step , the life is hard to avoid delicacy and stiffness No enthusiasm forever, No unexpected happening of surprising and pleasing So, only silently ask myself in mind Next happiness, when will come?
人生的纷纷扰扰，杂杂乱乱， 在一个特定的时间，特定的地点， 做脑海中安排了千万遍的事， 一步一骤，人生难免精致，却也死板， 永远没有激情，没有意料之外的惊喜。 于是，也只有在心里默默地问： 下一班幸福，几点开？
<br>
<a href="#" class="btn">more</a>
</div>
</div>
发送邮件部分
最后一页则是网页的惯用联系方式部分，这里简单清晰的展示了联系方式以及自己的课程实验报告地址
代码部分：
<section id="content"><div class="ic">More Website Templates @ TemplateMonster.com - August11, 2014!</div>
<div class="container">
<div class="row">
<div class="grid_12">
<h2>Contacts</h2>
<div class="map">
<figure class="">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d24214.807650104907!2d-73.94846048422478!3d40.65521573400813!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1395650655094" style="border:0"></iframe>
</figure>
</div>
</div>
<div class="grid_5">
<h2>Contact Info</h2>
<div class="text1 tx__1">Lorem ipsum dolor sit amet, consecteturpiscinger elit um dolor sit amet, consecteturpiscing.
</div>
<p>All <a href="http://www.templatemonster.com/ " rel="nofollow" class="color1"><strong>premium website themes</strong></a> go with 24/7 support.</p>
<p>If you have any questions regarding customization of <a href="http://blog.templatemonster.com/free-website-templates/" rel="nofollow" class="color1"><strong>freebies</strong></a>, ask guys from <a href="http://www.templatetuning.com/" rel="nofollow" class="color1"><strong>TemplateTuning</strong></a> to help you.</p>
The Company Name Inc. <br>
9870 St Vincent Place,<br>
Glasgow, DC 45 Fr 45.<br>
Telephone: +1 800 603 6035<br>
FAX: +1 800 889 9898<br>
E-mail: <a href="#">mail@demolink.org</a>
</div>
<div class="grid_6 preffix_1">
<h2>Contact Form</h2>
<form id="contact-form">
<div class="contact-form-loader"></div>
<fieldset>
<label class="name">
<input type="text" name="name" placeholder="Name:" value="" data-constraints="@Required @JustLetters" />
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid name.</span>
</label>
<label class="email">
<input type="text" name="email" placeholder="E-mail:" value="" data-constraints="@Required @Email" />
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid email.</span>
</label>
<label class="phone">
<input type="text" name="phone" placeholder="Phone:" value="" data-constraints="@Required @JustNumbers" />
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid phone.</span>
</label>
<label class="message">
<textarea name="message" placeholder="Message:" data-constraints='@Required @Length(min=20,max=999999)'></textarea>
<span class="empty-message">*This field is required.</span>
<span class="error-message">*The message is too short.</span>
</label>
<div class="ta__right">
<a href="#" class="btn" data-type="reset">clear</a>
<a href="#" class="btn" data-type="submit">send</a>
</div>
</fieldset>
<div class="modal fade response-message">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
You message has been sent! We will be in touch soon.
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
⑦返回顶部的按钮部分
语法：
<a href="#" id="toTop" class="fa fa-chevron-up"></a>
四、发现问题以及如何解决
问题、如何将做的网页托管到平台上
一开始在托管到github上时遇到了一些问题，最后解决方法如下：
一、直接在网页打开github的主页
链接: github
二、点击此处创建一个新的项目
三、起名字，并选择公开链接
四、因为我们已经在vs code上写好了代码，准备好了文件，所以直接进行上传文件
五、上传后提交
六、选择setting，并点击图片所画的部分
七、这样网页就已经托管到github中了。
五、心得体会
本次课程结业实验，是我第一次进行简单的网页设计，应用了比较简单的MDB框架，学习了HTML的各种标签，了解CSS进行页面的美化和调整。实践过程中，我掌握了许多有关网页前端和后端制作的知识，知道了静态网页和动态网页的区别，让我将爱好与网页设计结合到一起，更是收获良多，受益匪浅。
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
