《乐学编程》《网页前端技术》
设计背景
经过一年的的学习之后大致整理了一下目前所学过的知识点，以及以后可能还要学习的框架。我想做一个简单的网页，将这些东西都图形化动态的整理到一起。同时我也想在制作网页的时候，进一步巩固目前所学过的前端知识点。
一、设计思路
1．构建思路
1、我想到的是，首先确定主体内容，各个主体内容之间基本形成并列关系。以这些内容制作菜单栏。
2、其次，我可以从一些图片或者文章中到用户喜欢关注哪些内容。
3、然后是网页中需要做什么来突出这个中心思想：比如网页主要是以文字为中心思想，可以放一些企业文化、企业介绍和客户留言等。
4、最后，我认为还有一个非常重要的一点就是网页中需要用到图片以及视频，这两者对于用户来说都很直观和方便了用户，可以让他们快速的了解旅行社的情况。
2．具体实现
我根据大致内容划分了一个个菜单，将这些菜单做成菜单栏。这些菜单栏有以下部分：
●首页
●Java
●c++
●Mysql
●Web网页
二、构建过程
1．建立站点
1.新建站点“乐学编程”
2.新建html主页“main”
3.站点文件夹下建立“images”、“css”、“html”、“js”文件夹
2．菜单栏
用div实现菜单栏
示例代码：
<div class="head" id="head">
        <div class="main" id="main" >首页</div>
        <div  class="main" id="java">java</div>
        <div  class="main" id="c++">c++</div>
        <div class="main" id="Mysql">Mysql</div>
        <div  class="main" id="web">web网页</div>
        <div js实现轮播图最简代码class="login" id="login"><a href="login.html" target="_blank">登录</a></div>
    </div>
具体效果：
3．css样式
通过给div设置css可以实现组件的布局，并设置组件的颜、大小、文字格式等。以实现整个页面的美观。部分展示：
.main{
    width:270px;
    height:80px;
    background:#EF7211;
    font-family: "黑体";
    float:left;
    display: flex;
    text-align:center;
    font-size:30px;
    align-items: center;
    justify-content: center;
    margin: 0;
}
具体实现的美化效果如上图。
三、页面制作
1．主页制作
菜单栏完成了之后就要再往页面添加主体部分内容了。由于我想设计一个动态的图形化的网页。首先我在网上了一些图片。
并利用JavaScript实现图片的轮播功能，以实现动态的效果，具体代码如下：
var i=1;
function lunbo()
{
    document.body.style.backgroundImage="url(./img/背景"+i+".jpg)";

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。