Andriod应用开发实验报告

Andriod应用开发实验报告实现功能描述Html作为一种样式语言，我们可以利用它来写一个网页设计实现一个小型网站的动态学习空间，网站中涉及到一系列的网址导航，方便用户随机切换学习界面，主页面空间分为两栏，主栏目区和列表导航栏，使得界面简洁美观。实现技术Html（超文本标记语言）这个命令可以说明文字、图形、动画、声音、表格、链接等等，然后通过浏览器显示出效果。2.CSS利用全局的css样式可以实现我们网站的多种功能、3.JavaScript‘通过嵌入html来实现网站的各种动态效果、网页的前端逻辑，提高用户的浏览效果。4．BootStrap一个前端的css框架，其库中有很多css样式，利用该框架进行响应式布局，基于BootStrap的框架来写我们的网站主页代码会使整个代码流程更加简洁。BootStrap的特点有：（1）.响应式布局：响应式Web布局是让用户用户通过不同尺寸的浏览器都可以获得一种良好的视觉体验。是目前较为普遍的一种布局方法。（其中可以利用一些可视化的类(visiable-(md/sm))等来适应屏幕的大小从而实现屏幕的中img的可见与隐藏）。（2）全局CSS样式。（3）栅格系统：栅格将一个页面拆分成多个区来理解，而正是将这些区块共同构成了整个页面的布局，根据不同屏幕尺寸来调整这些区块的排版，这样就实现响应式的设计。栅格系统默认左边占8格，右边占4格。屏幕宽度大时，区块水平分布，小时则竖直堆叠。（4）导航条：依赖于JavaScript，BootStrap框架为我们提供了两种导航形式，水平导航条和竖直堆叠导航条，（5）列表组和标签（6）应用：BootStrap主要用到min-width、max-width,用于不同的分辨率下设置不的CSS样式。实现的布局分析总的来说分成了四个部分：Top：包含了我们的logo图示以及一些小标题的超链接。Nav：第二部分就是我们的导航条，导航条是一些年代片的分类，具体方便我们搜索目标。Div.my_content:第三部分也就是我们的栅格系统，将这个网站主要内容分为了两栏分别为Right(占4格)和Left（占8格）。Div.my_bottom:第四部分就是网站的一些基本信息，以及利用扫二维码获取资源的方式来显示在网站的最底部。实现细节<linkrel="stylesheet"type="text/css"href="bootcss/css/bootstrap.min.css"/><linkrel="stylesheet"type="text/css"href="css/index.css">首先就是把需要导入东西导入到我们的html中来：<ulclass="list-inlinetop_ul"> <li><ahref="top1"class="top_href">战争</a></li> <li><ahref="top2"class="top_href">家庭</a></li> <li><ahref="top3"class="top_href">古装</a></li> <li><ahref="top4"class="top_href">年代</a></li> <li><ahref="top5"class="top_href">都市</a></li> <li><ahref="top1"class="top_href">剧情</a></li> <li><ahref="top2"class="top_href">情感</a></li> <li><ahref="top3"class="top_href">现代</a></li> <li><ahref="top4"class="top_href">悬疑</a></li> <li><ahref="top5"class="top_href">历史</a></li> </ul><divclass="clearfix"></div>把container_top分为两个部分left,right，并调整整个网站左右两部分适应的屏幕大小，然后利用ul以及li把顶部链接写出，也可以是div,但是要注意区分，不能弄混淆了。注意会出现漂浮现象，所以还要链接写完后加上清除漂浮。<navclass="navbarnavbar-default"id="my_nav"><spanclass="icon-bar"></span><ulclass="navnavbar-nav"> <li><aclass="nav_href"href="#">全部</a></li> <liclass="active"><aclass="nav_href"href="#">2020</a></li> <li><aclass="nav_href"href="#1">2019</a></li> <li><aclass="nav_href"href="#2">2018</a></li> <li><aclass="nav_href"href="#3">2017</a></li> <li><aclass="nav_href"href="#4">2016</a></li> <li><aclass="nav_href"href="#5">2015</a></li> <li><aclass="nav_href"href="#6">2014</a></li> <li><aclass="nav_href"href="#7">2013</a></li> </ul>接下来就是导航条中的内容了，用到了<span>、<ul>、<li>、<a>等等标签来连接超链接，注意链接都应该被激活，否则怎么点击都没有用。<divclass="col-md-4"></div><divclass="col-md-8"></div>主要内容还是一样的要分为两部分来写，写的时候注意不要弄错了区块，分为两个部分后，在每个区块中我们用”row”---<divclass="row"></div>这个关键词来表示某一行。<pclass="content_p">武汉会战前夕，八路军排长李梓牧奉命返回上海，与上官静云会合，破坏日军名为“风影”的化学武器研制计划，任务代号“追风行动”。军统派出了凌霜和唐顺之领导的特别行动队，以破坏日军计划。由于军统指挥不力，特别行动队遭受重大损失。而李梓牧也因兵</p><ahref="#readmore"class="btnbtn-warning">下一页</a>用<p>表签把我们要描述的内容写上。btn是按钮，按钮的分布也使得网页布局简洁，方便<li><spanclass="glyphiconglyphicon-heart"></span><ahref="content_left1"class="content_left_href">分享信息</a></li>在整个content的最底部还有一排数字标签链接到下一页的<ulclass="pagination"> <li><ahref="#">1</a></li> <liclass="active"><ahref="#">2</a></li></ul>插入必要的图标，更加美观。以上内容都是整个栅格系统的左半部分接下来是右半部分。右半部分主要就是各种分类标签导航的超链接<divclass="col-sm-4"> <dlclass="right_dl"> <dt>热门片</dt> <dd><ahref="#right11"class="content_right_href">传闻中的陈芊芊</a></dd></div由于网站中要用的标签实在太多，因此我们要尽量避免在同一个内容重复，还有清除漂浮，链接太多，分列也多。因此这也是一个必要的步骤。<divclass="container-fluidmy_bottom">最后一部分是网站的信息栏。信息栏同样的是按照栅格系统的划分方式来划分的。在写html的时侯，伴随着的还有css全局样式，如：按钮的样式设置：.btn-warning{color:#fff;background-color:#333;border-color:#333;}顶部链接的样式：a.top_href:link,a.top_href:visited{ text-decoration:none; color:#666;}a.top_href:hover{ text-decoration:underline; color:#9b171b;}导航条的背景及其他格式的设置：nav.navbar{ background:#333;}.navbara.nav_href