引言

任务

设计某个公司/社团的网站主页，有介绍、新闻、以及其他的展示

环境

windows10
VisualStudio2019()
Node.js
bootstrap
Vue
google浏览器

安装bootstrap和Vue的教程

具体过程

在<head>中链接bootstrap和Vue的库

<!--Bootstrap--> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> 
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/bootstrap-tab.js"></script> 
<!--Vue--> 
<script type="text/javascript" src="JS/vue.min.js"></script>

用Bootstrap的颜色设定背景和文字颜色(Bootstrap颜色教程)

<body class="bg-dark text-white">

头部用Bootstrap的Jumbotron，并设置背景图片固定 (教程)

<!--HTML-->
<div class="jumbotron jumbotron-fluid text-center my-jumb text-dark row justify-content-center">
  <div class="align-self-center main-tittle">
    <h1 class="display-3 font-weight-bold">北京网元圣唐娱乐科技有限公司</h1>
    <br>
    <h3 class="display-4 font-weight-bold">用快乐的方式传承中国文化</h3>
  </div>
</div>

/*CSS*/
.my-jumb {
  background-color: rgba(216, 58, 42, 1.00);
  margin-bottom: 0;
  background-image: url("../image/bg.jpg");
  background-attachment:fixed;
  height: 750px;
}
.main-tittle {
  color: rgba(216, 58, 42, 1.00);
}

效果图

导航栏用Bootstrap4 导航栏，加一个下拉框（Bootstrap4 导航栏教程）

<!--HTML-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark my-nav"> 
  <!-- Brand/logo --> 
  <a class="navbar-brand" href="#"><img src="image/logo-wy-small.png" width="194" height="47" alt=""/></a> 
  <!-- Links -->
  <ul class="navbar-nav text-white my-nav-inner">
    <li class="nav-item"> <a class="nav-link" href="#">首页</a> </li>
    <li class="nav-item"> <a class="nav-link" href="#">新闻</a> </li>
    <li class="nav-item"> <a class="nav-link" href="#">游戏</a> </li>
    <li class="nav-item"> <a class="nav-link" href="#">影视</a> </li>
    <li class="nav-item"> <a class="nav-link" href="#">衍生</a>
    <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">商城</a>
      <div class="dropdown-menu"> <a class="dropdown-item" href="#">官方商城</a> <a class="dropdown-item" href="#">淘宝商城</a> </div>
    </li>
    </li>
  </ul>
</nav>

/*CSS*/
.my-nav {
  margin-bottom: 50px;
}
.my-nav-inner {
  font-size: 20px;
  font-weight: bold;
}

效果图

公司介绍部分使用了可切换的选项卡（Vue教程）

<!--HTML-->
<div id="tab" class="container introduce">
  <div class="tab-tit d-flex justify-content-center mb-3"> 
    <!--点击设置curId的值  如果curId等于0，第一个a添加cur类名，如果curId等于1，第二个a添加cur类名，以此类推。添加了cur类名，a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式--> 
    <a @click="curId=0" v-bind:class=" {'tab-tit-a':true, 'cur':curId==0}">总公司介绍</a> <a @click="curId=1" v-bind:class="{'tab-tit-a':true, 'cur':curId==1}">公司领导人</a> <a @click="curId=2" v-bind:class="{'tab-tit-a':true, 'cur':curId==2}">子公司介绍</a> </div>
  <div class="tab-con"> 
    <!--根据curId的值显示div,如果curId等于0，第一个div显示，其它三个div不显示。如果curId等于1，第二个div显示，其它三个div不显示。以此类推-->
    <div v-if="curId==0">
      <h2 class="text-center"><img src="image/logo-black.png" width="135" height="35" alt=""/></h2>
      <br>
      <p><b>&emsp;&emsp;北京网元圣唐娱乐科技有限公司</b>成立于2009年9月，以发展文化为核心的泛娱乐综合业务为战略目标，以单机游戏为起点，研发时长制网络游戏为核心，发展新兴的移动端游戏为重要方向.</p>
      <br>
      <p>　　 旗下拥有上海烛龙信息科技有限公司、北京九凤信息科技有限公司、北京翔跃信息科技有限公司等精湛、高水平的研发团队，和专业、高效的运营团队，以及泛娱乐文化发展的北京呈祥影视文化传媒有限公司、河北推趣世纪信息技术有限公司。网元圣唐及旗下五家全资子公司搭建了完善的自主研发及运营一体化运作体系。</p>
      <br>
      <p>　　 公司以弘扬中华文化为己任，用快乐的方式传承中国文化。</p>
      <br>
      <p>　　 现网元圣唐已打造出核心品牌《古剑奇谭》，最新品牌《神舞幻想》首部单机游戏作品也已上市推出，将为国产泛娱乐文化品牌注入新鲜血液和活力。</p>
      <br>
      <p>　　公司使命：用快乐的方式传承中国文化</p>
      <p>　　公司愿景：以卓越的游戏体验，将中国文化与世界联结</p>
      <br>
      <p>　　 网元圣唐永远致力于打造经典游戏作品，并以此作为载体，赋予用户最优质的文化体验，传承与弘扬中华优秀传统文化，推动中国元素走向世界。</p>
    </div>
    <div v-if="curId==1" class="d-flex mb-3">
      <div class="p-2 flex-fill"> <img src="image/Meng.jpg" width="280" height="409" alt=""/> </div>
      <div class="p-2 flex-fill">
        <h1 class="display-3">孟宪明</h1>
        <h1>网元圣唐CEO</h1>
        <p>《古剑奇谭》、《神舞幻想》两大品牌创立者 </p>
        <p>投资成立北京网元圣唐娱乐科技有限公司<br>
          中国文化创意产业重要领军人物，被粉丝亲切称为“老孟”。</p>
      </div>
    </div>
    <div v-if="curId==2">
      <article class="my-article">
        <h2 class="text-center"><img src="image/ZhuLong.jpg" width="192" height="76" alt=""/></h2>
        <p><b>上海烛龙信息科技有限公司</b>（Aurogon Info&amp;Tech (Shanghai) Co., Ltd.）是游戏软件业内资深人士所组建的游戏研发公司，于2007年在上海浦东正式成立。上海烛龙立志于民族游戏精品的研发，力求打造最好的中文RPG游戏，树立华人次世代游戏的典范。以通过游戏这种方式弘扬中华文化，并以此为展示自己理念的渠道。目前，烛龙团队正有条不紊地推进《古剑奇谭》品牌系列产品研发，持续双向发展单机与网游作品，更多方位铺展属于该品牌的小说、电影、电视剧、动画等。上海烛龙将秉承务实的态度去了解玩家的需求，做出包含中国、仙侠、古剑、文化等等具有独特特色的游戏。不分年龄、不分国籍、不分地域——烛龙将通过不懈的努力，使全球的游戏玩家都能感受到华人民族游戏带来的健康、快乐与文化内涵！</p>
      </article>
      <article class="my-article">
        <h2 class="text-center"><img src="image/JiuFeng.jpg" width="183" height="119" alt=""/></h2>
        <p><b>北京九凤信息科技有限公司</b>是集合中国内地与台湾地区游戏软件业内资深人士所组建的游戏研发公司，团队包含多名曾参与《古剑奇谭》、《使命召唤》、《幻想三国志》、《仙剑奇侠传》、《轩辕剑》、《明星志愿》等系列作品的核心主创人员。九凤信息科技坚持自制优质游戏路线，携手国际知名的“虚幻4”游戏开发引擎、打造华人次世代游戏，创造新一代华人经典游戏品牌，同时产品发行部分也将不限于PC平台，包含国际级家用游戏机与新兴智能电视游戏、移动端平台，都将是九凤信息科技即将涉足的领域。</p>
      </article>
    </div>
  </div>
</div>

/*CSS*/
.introduce {
  margin-bottom: 50px;
}
#tab {
  margin: 0 auto;
}
.tab-tit {
  font-size: 0;
  width: 100%;
    background-color:rgba(255,255,255,1.00);
    color: rgba(0,0,0,1.00);
}
.tab-tit-a{
  display: inline-block;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
  width: 25%;
  text-align: center;
  background: #FFFFFF;
  color: #333;
  text-decoration: none;
  border-bottom: solid 1px rgba(158,158,158,1.00)
}
.cur {
  color: #D83A2A;
  border-bottom: solid 5px rgba(216,58,42,1.00);
}

.tab-con{
    margin-top: -16px;
  margin-bottom: 50px;
}
.tab-con div {
  padding: 50px;
  background-color: white;
  color: black;
}

//JS
var tab = new Vue({
        el: '#tab',
        data: {
            curId: 0
        },
        computed: {},
        methods: {},
        mounted: function () {
        }
    })

效果图

新闻部分用了Bootstrap的轮播图(轮播图教程)

效果图

<!--HTML-->
<div class="container news">
  <div id="demo" class="carousel slide" data-ride="carousel"> 
    <!-- 指示符 -->
    <ul class="carousel-indicators">
      <li data-target="#demo" data-slide-to="0" class="active"></li>
      <li data-target="#demo" data-slide-to="1"></li>
      <li data-target="#demo" data-slide-to="2"></li>
    </ul>
    
    <!-- 轮播图片 -->
    <div class="news-container">
      <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="image/news1.jpg" class="img-fluid" alt=""/>
          <div class="carousel-caption">
            <h3>童真六一，还璧欢歌！</h3>
            <p>猜拳换激萌糖人和鸭鸭表情包</p>
          </div>
        </div>
        <div class="carousel-item"> <img src="image/news2.jpg" class="img-fluid" alt=""/>
          <div class="carousel-caption">
            <h3>梨雪别春暮，夏始流萤飞</h3>
            <p>初夏主题外装新品展，收集套装赠永久花环头饰！</p>
          </div>
        </div>
        <div class="carousel-item"> <img src="image/news3.jpg" alt="" class="img-fluid">
          <div class="carousel-caption text-dark">
            <h3>天予风流——《古剑奇谭三》原声音乐集上线</h3>
            <p>音乐大师倾力打造，聆听壮阔的东方史诗</p>
          </div>
        </div>
      </div>
      
      <!-- 左右切换按钮 --> 
      <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div>
  </div>
</div>

/*CSS*/
.news {
  margin-bottom: 50px;
}

热门游戏使用了Bootstrap的Flex布局，五张图片总是刚好排满网页的宽度（Flex布局教程）

效果图

<!--HTML-->
<div class="games d-flex justify-content-center mb-3">
  <div class="p-2 bg-dark text-white">
    <h2>&emsp;热门游戏&emsp;</h2>
  </div>
</div>
<div class="games text-center">
  <div class="d-flex d-inline-flex mb-3">
<div class="p-2">
    <img src="image/gjqt1.jpg" class="img-fluid flex-fill" alt="" style=""/> 
    </div>
<div class="p-2">
      <img src="image/gjqt2.jpg" class="img-fluid p-2 flex-fill" alt=""/>
      </div>
    
<div class="p-2">
      <img src="image/gjqt3.jpg" class="img-fluid p-2 flex-fill" alt=""/> 
      </div>
<div class="p-2">
      <img src="image/gjqtwlb.jpg" class="img-fluid p-2 flex-fill" alt=""/>
     </div>
<div class="p-2">
      <img src="image/swhx.jpg" class="img-fluid p-2 flex-fill" alt=""/> 
    </div>
</div>
</div>

/*CSS*/
.games {
  background-color: rgba(216, 58, 42, 1.00);
  width: 100%;
  margin-bottom: 50px;
}
.games img {
  padding: 0;
}

页脚使用了Bootstrap4 网格系统，分了4列（Bootstrap4 网格系统教程）

效果图

<!--HTML-->
<footer>
        <div class="container">
            <div class="row">
                <div class="col-sm-2">
                <img class="img-fluid" src="image/logo-wy-small.png" alt=""/>     
                </div>
                
                <div class="col-sm-2">
                    <ul class="list-group">
                      <a href="http://www.wangyuan.com/about" target="_blank">
                        关于我们</a>
                      <a href="http://www.wangyuan.com/mobile" target="_blank">商务合作</a>
                      <a href="http://job.wangyuan.com/" target="_blank">加入我们</a>
                      <a href="http://www.wangyuan.com/2012/05/07/000109.shtml" target="_blank">法律声明</a>
                      <a href="http://www.wangyuan.com/contact.php" target="_blank">联系我们</a>
                      <a href="http://service.wangyuan.com/news.php" target="_blank">家长监护</a>
                    </ul>
                </div>
                <div class="col-sm-4">
                    健康游戏忠告：抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活
                    </div>
                <div class="col-sm-4">
                  <p>许可证： （总）网出证（京）字第126号 | 京网文 【2018】9188-778号 | 京ICP证090571号 | 字第直090145号</p>
                  <p>营业执照：<a href="http://static.wangyuan.com/common/images/wy_businesslicense.jpg" target="_blank">91110107692327337F</a></p>
                    <p>备案号： <a href="http://beian.miit.gov.cn/" target="_blank">京ICP备10014416号-5 </a>| 京公网安备11010502035187号</p>
                </div>
                
                
            </div>
        </div>
    </footer><!--页脚结束-->

/*CSS*/
footer {
    color: #989898;
    font-size: 14px;
    padding: 20px;
}
ul.unstyled {
    list-style: none;
    padding: 0;
}
footer h6 {
    color: white;
}
footer a{
    color: white;
}
footer a:hover{
    color: rgba(216,58,42,1.00);
    text-decoration: none;
}

总结

Bootstrap的组件很好用，可以省去写大量CSS的麻烦，但是默认样式并不适合所有的风格，在默认样式的基础上修改会有点麻烦。
Vue比Bootstrap的功能更基础，但是应用会更广泛
引入JS文件要放在<body>的末尾
Bootstrap个版本不兼容，必须根据安装的版本来使用Bootstra
CSS也能实现简单的动画

作业8：Javascript编程训练2

作业8：Javascript编程训练2

引言

任务

环境

安装bootstrap和Vue的教程

具体过程

总结