柒比貳主題—首頁(yè)大幻燈模式下如何修改幻燈高度

    幻燈高度太高了,在普通屏幕下,給用戶的第一感覺顯示內(nèi)容會(huì)太少了,因此改了幻燈的高度,下面說一下改幻燈高度和左右切換按鈕位置的小教程,有需要的朋友可以看看!

    來源于:

    https://www.6fwq.com/1512.html

    我總感覺柒比貳主題首頁(yè)五張圖的時(shí)候因?yàn)榇钆洳缓每矗燥@得很雜亂不堪的。又因?yàn)槭醉?yè)幻燈不常常更換,而且注意到五張圖的人不是很多,所以把小幻燈模式改成了大幻燈,因詞換成大幻燈,并且不顯示標(biāo)題。又發(fā)現(xiàn)幻燈高度太高了,在普通屏幕下,給用戶的第一感覺顯示內(nèi)容會(huì)太少了,因此改了幻燈的高度,下面說一下改幻燈高度和左右切換按鈕位置的小教程,有需要的朋友可以看看!

    操作步驟

    01、找到幻燈模式主題文件位置:/themes/seven/inc/fuctions-templates.php

    具體位置大家參照下圖,每個(gè)人diy很多次,位置都不一樣的

    柒比貳主題—首頁(yè)大幻燈模式下如何修改幻燈高度

    02.函數(shù)修改幻燈高度

    如上圖所示的,找到$height = 420;的函數(shù),自己修改成自己想要的高度

    03.css修改文章標(biāo)題的高度(有標(biāo)題的情況下)

    在seven主題目錄下的style.css的1310行的.bigcarousel-cell,修改padding-top:37%。

    把其中的37%變成30%,注意:這個(gè)高度和我的幻燈高度360剛好適配,自己的不適合就修改數(shù)值!

    04、修改幻燈的切換按鈕位置:

    在seven主題目錄下的style.css中1292行、1295行查找修改為下面:(初始值是20px)

    .home-big-swipe .flickity-button.next{
        right:0px;
    }
    .home-big-swipe .flickity-button.previous{
        left:0px
    }
    

    05、修改懸浮的標(biāo)題文字的黑色塊狀,修改如下:

    文件在sytle.css的1400行左右!

    .wp-l::after,.wp-r-t::after,.wp-r-b-l .img-bg::after,.wp-r-b-r .img-bg::after,.bigcarousel-cell::after{
        bottom: 0;
        content: "";
        display: block;
        height: 70%;
        width: 100%;
        position: absolute;
        z-index: 0;
        background: -moz-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%);
        /* background: -webkit-gradient(linear,left top,left bottom,color-stop(40%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.7))); *//* background: -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%); */background: -o-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%);
        background: -ms-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%);
        /* background: linear-gradient(to bottom,rgba(0,0,0,0) 40%,rgba(0,0,0,0.7) 100%); */
    }
    

    教程到此結(jié)束

    隨記

    柒比貳美化-首頁(yè)仿優(yōu)設(shè)四格界面修改代碼

    2018-4-9 11:43:30

    隨記

    markdown是為哪些使用者設(shè)計(jì)的 ?

    2018-7-9 0:11:42

    ??
    Npcink上的部份代碼及教程來源于互聯(lián)網(wǎng),僅供網(wǎng)友學(xué)習(xí)交流,若您喜歡本文可附上原文鏈接隨意轉(zhuǎn)載。
    無意侵害您的權(quán)益,請(qǐng)發(fā)送郵件至 1355471563#qq.com 或點(diǎn)擊右側(cè) 私信:Muze 反饋,我們將盡快處理。
    0 條回復(fù) A文章作者 M管理員
      暫無討論,說說你的看法吧
    ?
    個(gè)人中心
    購(gòu)物車
    優(yōu)惠劵
    今日簽到
    有新私信 私信列表
    搜索
    主站蜘蛛池模板: 日韩精品一区二区三区影院| 国产SUV精品一区二区88L| 久久无码人妻一区二区三区午夜 | 成人日韩熟女高清视频一区| 国产91精品一区二区麻豆网站| 国产精品被窝福利一区 | 亚洲中文字幕久久久一区| 久久国产午夜精品一区二区三区| 中文字幕在线不卡一区二区| 亚洲高清毛片一区二区| 人妻少妇AV无码一区二区| 爱爱帝国亚洲一区二区三区| 香蕉免费一区二区三区| 亚洲乱码国产一区网址| 国产日产久久高清欧美一区| 中文字幕一区二区三区久久网站| www一区二区三区| 日本人的色道www免费一区| 99热门精品一区二区三区无码| 中文字幕亚洲乱码熟女一区二区 | 日本不卡一区二区三区视频| 一区二区日韩国产精品| 日韩一区二区三区免费体验| 亚洲欧美一区二区三区日产| 亚洲一区二区三区在线观看蜜桃 | 国产一区二区三区精品视频| 日本一区二区三区在线视频| 国产伦精品一区二区三区免费迷| 久久中文字幕无码一区二区| 亚洲高清一区二区三区| 精品无码一区二区三区亚洲桃色| 国产成人精品一区二区三区免费 | 精品一区二区三区免费视频| 色噜噜一区二区三区| 国产一区在线观看免费| 日韩视频一区二区在线观看| 精品国产一区二区麻豆| 日韩一区二区三区在线| 麻豆视传媒一区二区三区| 免费人人潮人人爽一区二区| 天堂不卡一区二区视频在线观看|