ProjectOne（05） - 首页，bootstrap初体验（1）

最新推荐文章于 2022-03-17 18:03:34 发布

abb_chen

最新推荐文章于 2022-03-17 18:03:34 发布

阅读量427

点赞数

本文链接：https://blog.csdn.net/abb_chen/article/details/50752610

版权

来来来，给我们的ProjectOne写个新首页吧。

既然是一个介绍自己的作品的网站，那么还是随性写吧。

布局话的，就以

这样的形式写出来吧。（其实是写完后补的截图。

首先。我们在bootstarp的官网先下个bootstrap吧。http://v3.bootcss.com/getting-started/#download 我下的是v3.3.5版本。

这次我写的是首页。那么，我在项目的web目录下，新建了一个style文件夹。

里面就是用来存放各种css层叠样式表文件的。

然后开始编写首页代码。

在head部分，插入css代码引用：

<link rel="stylesheet" href="style/bootstrap.min.css">

为了适配移动设备，我们还加入了一段代码：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

接下来，我们先将页面分为3层，从上至下分别是：Title、Menu、Content。

顺便一提，后面Title和 Menu都是一样的，以后再作抽象。

目前先管实现。

先给head加上两个小样式，让页面上下左右进行一点点的缩进，避免太接近屏幕边缘，显得有压迫感。

同时去掉横向的滚动条。

        body{
            margin: 10px;
            overflow-x: hidden;
        }

然后我们先写好首页的html的body部分的代码：

<div class="row" id="divTitle">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><h1>ABB的产品展示</h1></div>
</div>
<div class="row" id="divMenu">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">首页</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">about me</div>
</div>
<div class="row" id="divContent"></div>

在首页。我们将页面分为了3层，

divTitle层，divMenu层和divContent层，是为了留个id，方便我们在后面操纵它们。

尤其是divContent层，毕竟目前是没内容的嘛。方便用js代码来填充。

反正是第一个项目，先随便写呗。

然后。我们新增一个script文件夹，在里面新建一个index.js文件

接着，还是在原来index.html的body的最下面补上一句：

<script src="script/index.js"></script>

恩。引入js文件。

目前首页的代码看起来就是这样的。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>abb_chen的ProJectOne</title>
    <link rel="stylesheet" href="style/bootstrap.min.css">
    <style>
        body{
            margin: 10px;
            overflow-x: hidden;
        }
    </style>
</head>
<body>
<div class="row" id="divTitle">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><h1>ABB的产品展示</h1></div>
</div>
<div class="row" id="divMenu">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">首页</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">about me</div>
</div>
<div class="row" id="divContent"></div>
<script src="script/index.js"></script>
</body>
</html>

下面。我们就来开始编辑index.js文件啦。

(function(){
    var works = ['aaa','bbb','ccc','ddd','aaa','bbb','ccc','ddd','aaa','bbb','ccc','ddd','aaa','bbb','ccc','ddd'];//16个作品
    var divHtml = "";
    (function(arr){
        for(var i = 0;i<arr.length;i++){
            divHtml+='<div class="col-xs-4 col-sm-4 col-md-3 col-lg-2">' +
                    '<div class="row">' +
                        '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">产品'+arr[i]+'</div>' +
                        '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><img src="image/wait.jpg" class="img-responsive"></div>' +
                        '<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><a href="#">简介</a></div>' +
                        '<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><a href="#">下载</a></div>' +
                    '</div>' +
                '</div>';
        }
    })(works);
    document.getElementById('divContent').innerHTML=divHtml;
})();

哎呀。看看B站发发呆就半夜了...先丢点乱七八糟的代码出来吧。