无法将我的单页网站放在彼此之下

时间:2017-09-15 13:00:24

标签: html css

我正在尝试创建一个单页的网站,但我无法在主页选项卡(图片和头文本和按钮)下自然地进行关于选项卡我正在尝试制作它所以你不能滚动,直到按下“了解更多”按钮。我打赌我正在做一个noob错误,但我刚开始编程,我希望你们中的一个人可以帮助我,因为我找不到问题。所以请帮我看一下“主页”部分下的“关于”选项卡。

    vue.esm.js?65d7:479 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'ordinal' of undefined"

    found in

    ---> <Grapha> at src/components/GraphA.vue
           <App> at src/App.vue
             <Root>
    warn @ vue.esm.js?65d7:479
    handleError @ vue.esm.js?65d7:562
    callHook @ vue.esm.js?65d7:2667
    insert @ vue.esm.js?65d7:3526
    invokeInsertHook @ vue.esm.js?65d7:5469
    patch @ vue.esm.js?65d7:5639
    Vue._update @ vue.esm.js?65d7:2414
    updateComponent @ vue.esm.js?65d7:2538
    get @ vue.esm.js?65d7:2881
    Watcher @ vue.esm.js?65d7:2870
    mountComponent @ vue.esm.js?65d7:2542
    Vue$3.$mount @ vue.esm.js?65d7:7863
    Vue$3.$mount @ vue.esm.js?65d7:10066
    Vue._init @ vue.esm.js?65d7:4236
    Vue$3 @ vue.esm.js?65d7:4321
    (anonymous) @ main.js?1c90:26
    (anonymous) @ app.js:785
    __webpack_require__ @ app.js:660
    fn @ app.js:86
    (anonymous) @ app.js:1032
    __webpack_require__ @ app.js:660
    (anonymous) @ app.js:709
    (anonymous) @ app.js:712
    vue.esm.js?65d7:566 TypeError: Cannot read property 'ordinal' of undefined
        at VueComponent.mounted (GraphA.vue?6492:111)
        at callHook (vue.esm.js?65d7:2665)
        at Object.insert (vue.esm.js?65d7:3526)
        at invokeInsertHook (vue.esm.js?65d7:5469)
        at Vue$3.patch [as __patch__] (vue.esm.js?65d7:5639)
        at Vue$3.Vue._update (vue.esm.js?65d7:2414)
        at Vue$3.updateComponent (vue.esm.js?65d7:2538)
        at Watcher.get (vue.esm.js?65d7:2881)
        at new Watcher (vue.esm.js?65d7:2870)
        at mountComponent (vue.esm.js?65d7:2542)
 body {
     margin: 0;
     padding: 0;
     height: 100%;
     width: 100%;
     background: #4f4f4f;
 }
 /* home page deco */
 
 .home {
     background: #4f4f4f;
     margin: 0;
     padding: 0;
     height: 100%;
     width: 100%;
     position: absolute;
     display: block;
 }
 
 .backgroundpic {
     background-image: url("http://cdn.wallpapersafari.com/58/58/hlVdYW.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     height: 93.7%;
     margin-left: 50px;
     margin-right: 50px;
     margin-bottom: 30px;
     margin-top: 30px;
 }
 /* Writing 1 */
 
 .headtext {
     font-family: Open sans;
     padding: 0;
     margin: 0;
     display: block;
     color: #fff;
     float: left;
     text-align: center;
     margin-left: 50%;
     transform: translate(-50%, -50%);
     margin-top: 20%;
     cursor: default;
 }
 
 .header1 {
     font-size: 50px;
     padding: 0;
     margin: 0;
 }
 
 .text1 {
     font-size: 70px;
     padding: 0;
     margin: 0;
 }
 /* button */
 
 .buttonhead {
     font-family: Baloo Bhaijaan;
     margin-left: 50%;
     transform: translate(-50%, -50%);
     padding: 5px;
     color: #FFF;
     float: left;
     border: solid 2px;
     border-radius: 9px;
     font-size: 30px;
     cursor: pointer;
 }
 
 .buttonhead:hover {
     color: #ff0000;
 }
 /* nav button */
 
 .navigation {
     display: inline;
     cursor: pointer;
     margin-top: 80px;
     margin-right: 120px;
     position: fixed;
     margin-left: 54%
 }
 
 .stripes {
     float: right;
 }
 
 .bar1, .bar2, .bar3 {
     width: 30px;
     height: 2px;
     background-color: #fff;
     transition: 0.2S;
 }
 
 .bar2, .bar3 {
     margin-top: 7px;
 }
 
 .rotate .bar1 {
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg) translate( -5px, 7px);
 }
 
 .rotate .bar3 {
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg) translate( -6px, -7px);
 }
 
 .rotate .bar2 {
     opacity: 0;
 }
 /* nav locations  */
 
 .navloc {
     display: inline-block;
     color: #fff;
     font-family: Open sans;
     text-align: center;
     cursor: pointer;
     margin-right: 30px;
     transition: 0.2S;
     opacity: 0;
 }
 
 .loc {
     margin: 0;
     padding: 0;
     float: left;
     margin-left: 30px;
     cursor: pointer;
 }
 
 .loc:hover {
     color: #ff0000;
     border-bottom: 2px solid;
     margin-bottom: -2px;
 }
 
 .rotate .navloc {
     opacity: 1;
 }
 /* Writing 2 */
 
 .about {
     font-family: Open sans;
     color: #fff;
 }
 
 .about a {
     text-decoration: none;
     color: #fff;
     border-bottom: 2px solid rgba(225, 225, 225, .7);
 }
 
 function rotatebar(x) {
     x.classList.toggle("rotate");
 }
 
 function show(x) {
     x.classList.toggle("showIt");
 }

0 个答案:

没有答案