網頁布局案例

效果圖

導航欄和大圖輪播

頁面具體布局

　　風景圖應用css3動畫效果，鼠標滑動到圖片上邊，紅色邊框會按照順時針反向消失，鼠標移開后再按逆時針方向出現

　　文字介紹添加了滾動條

具體代碼

HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">-->
<!--    <meta name="renderer" content="webkit|ie-comp|ie-stand">-->
<!--    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<!--    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />-->
    <title>Title</title>
    <link rel="stylesheet" href="css.css">
    <script src="jquery-3.4.1.js"></script>

</head>
<body>
<!--導航欄-->

<div class="nav">
    <div class="nav-content">

        <div class="con-left">
            <a href="#">網站首頁</a>
            <a href="#">歷史沿革</a>
            <a href="#">行政區別</a>
            <a href="#">地理環境</a>
            <a href="#">自然資源</a>
        </div>
        <img src="images/logo.gif" alt="" class="logo">
        <div class="con-right">
            <a href="#">人口民族</a>
            <a href="#">經濟</a>
            <a href="#">社會事業</a>
            <a href="#">風景名勝</a>
            <a href="#">當地名人</a>
        </div>
    </div>

</div>
<!--內容部分-->
<div class="content-box">
    <!--輪播圖部分-->
    <div class="banner">
        <img src="images/banner-bg.png" alt="" id="banner-bg">
        <ul class="images">

            <li class="img1"><img src="images/banner1.png" alt="" class="banner-img"></li>
            <li class="img2"><img src="images/banner2.png" alt=""></li>
            <li class="img3"><img src="images/banner3.png" alt=""></li>
        </ul>
        <!--輪播圖上方形框-->
        <ul class="num">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!--詳細內容部分-->
    <div class="content-data">
        <!--風景圖部分-->
        <div class="section">
            <div class="con-img-bg section__item">
                <div class="con-img ">
                    <img src="images/title.png" alt="">
                    <div class="content-img">
                        <div class="section__box box1">
                            <div class="r-button ai-element ai-element_padding-all ai-element5">
                                    <div class="content content-img1 ai-element__label">七星臺</div>
                            </div>
                        </div>
                        <div class="section__box box2">
                            <div class="r-button ai-element ai-element_padding-all ai-element5">
                                    <div class="content content-img2 ai-element__label">松陽鄉村美景</div>
                            </div>
                        </div>
                        <div class="section__box box3">
                            <div class="r-button ai-element ai-element_padding-all ai-element5">
                                    <div class="content content-img3 ai-element__label">夕陽西下</div>
                            </div>
                        </div>
                        <div class="section__box box4">
                            <div class="r-button ai-element ai-element_padding-all ai-element5">
                                    <div class="content content-img4 ai-element__label">界首美景</div>
                            </div>
                        </div>
                        <div class="section__box box5">
                            <div class="r-button ai-element ai-element_padding-all ai-element5">
                                    <div class="content content-img5 ai-element__label">濕地風光</div>
                            </div>
                        </div>
                        <div class="section__box box6">
                            <div class="r-button ai-element ai-element_padding-all ai-element5">
                                    <div class="content content-img6 ai-element__label">七七廣場</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--介紹部分-->
        <div class="con-itd">
            <ul class="itd">
                <li><img src="images/itd1.png" alt=""></li>
                <li><img src="images/itd2.png" alt=""></li>
                <li class="itd-pag">
                    <h3>
                        位置境遇：
                    </h3>
                    <p>
                        界首位東經115°15'－115°32'，北緯30°0'－33°0'。南北長48至58公里，東西寬10至25公里，國土面積667.3平方公里。地處淮北平原西北部。東與太和相鄰，東南與阜陽市潁泉區接壤，南與臨泉隔泉河相望，西連豫沈丘縣，北依豫鄲城縣。
                    </p>
                    <h3>
                        地形地貌：
                    </h3>
                    <p>
                        界首屬沉積平原，地勢平坦。海拔高度在32.5至38.2米之間，相對高度5.7米，西北稍高于東南，自然坡降為七千分之一至萬分之一。平原地表并不平整，可分為北、中部黃泛平原區和南部河間平原區兩部分。
                    </p>
                    <h3>
                        水文：
                    </h3>
                    <p>
                        界首境內主要有潁河、泉河兩大水系。潁河水系控制面積約占全縣總面積的47%；泉河水系控制面積約占全縣總面積的52%。余為茨谷河水系。潁河源出河南省登封縣嵩山南麓，自西北而東南，由沈丘縣劉灣村入境，流經縣境中部，東至張莊出境入太和縣，東南經阜陽、潁上，至沫河口與淮河成“T”字匯。
                    </p>
                </li>
                <li><img src="images/itd3.png" alt=""></li>
                <li><img src="images/itd4.png" alt=""></li>
                <li><img src="images/itd5.png" alt=""></li>
            </ul>
        </div>
    </div>

</div>

<script src="js.js"></script>
</body>
</html>

css代碼

body{
    margin: 0;
    width: 1920px;
    /*height: auto;*/

}
a{
    text-decoration: none;
}
/*導航部分*/
.nav{
    width: 1920px;
    height: 100px;
    background-color: #2c85d7;
    position: relative;
}
.nav .nav-content .logo{
    float: left;
    z-index: 99999;
    position: absolute;

}
.nav .nav-content .con-left {
    display: inline-block;
    float: left;
    height: 100px;
    margin-left: 320px;
    margin-right: 25px;

}
.nav .nav-content .con-right{
    display: inline-block;
    float: right;
    height: 100px;
    margin-left: 150px;
    position: absolute;
}
.nav .nav-content a{
    display: inline-block;
    font-weight: bold;
    color: white;
    text-align: center;
    line-height: 100px;
    width: 100px;
    height: 100px;
    margin: 0;


}
.nav .nav-content a:hover{
    background-color: #F8C24D;
}
/*輪播圖部分*/
.banner{
    position: relative;
    z-index: 0;
    width: 1920px;
    height: 570px;
    overflow: hidden;
}
.banner-bg{

}
.images{


}
.images li{
    position: absolute;
    float: left;
    /*background-image: url("images/banner-bg.png");*/
    overflow: hidden;
    background-repeat: no-repeat;
    /*z-index: 3;*/
    list-style: none;
    width: 1024px;
    height: 570px;
}
.banner .img1{
    position: absolute;
    float: left;
    z-index: 3;
    left: 325px;
    top: -100px;
    height: 750px;
}

.banner .img2{
    position: absolute;
    float: left;
    /*z-index: 2;*/
    left: 325px;
    width: 1920px;
    height: 750px;
    top: -100px;
}
.banner .img3{
    position: absolute;
    float: left;
    z-index: 3;
    left: 970px;
    top: 90px;
    width: 600px;
}

.num{
    position: absolute;
    left: 900px;
    list-style: none;
    bottom: 30px;
    text-align: center;
}
.num li{
    display: inline-block;
    width: 35px;
    height: 10px;
    line-height: 10px;
    margin-left: 0;
    background-color: #A5A5A2;
}

.num .active{
    background-color: #EFA300;
}
/*詳細內容部分*/
.content-data{
    background-color: white;
    width: 1920px;
    height: auto;
    text-align: center;
}
/*風景部分*/
.con-img-bg{
    margin-top: 30px;
    background-color: #EDF4E2;
    overflow: hidden;
}
.con-img{
    width: 1920px;
    padding-left: 25px;
    padding-bottom: 70px;
    position: relative;
}
.con-img .section__box{
    display: inline-block;
    float: left;
    margin: 15px;
}

.con-img .content{

    margin: 0;
    font-family: "微軟雅黑", serif;
    font-size: 25px;
    color: white;
    letter-spacing: 3px;

}
.con-img .content-img1{
    width: 230px;
    height: 360px;
    background-image: url("images/content-1.png");

}
.con-img .content-img2{
    width: 480px;
    height: 170px;

    background-image: url("images/content-2.png");
}
.con-img .content-img3{
    width: 230px;
    height: 170px;
    top: 190px;
    left: 250px;
    background-image: url("images/content-3.png");
}
.con-img .content-img4{
    width: 230px;
    height: 170px;
    top: 190px;
    left: 500px;
    background-image: url("images/content-4.png");
}
.con-img .content-img5{
    width: 195px;
    height: 360px;
    background-image: url("images/content-5.png");
}
.con-img .content-img6{
    width: 193px;
    height: 360px;
    background-image: url("images/content-6.png");
}

.con-img .content-img{
    /*position: absolute;*/
    margin-left: 343px;
}
.con-img .content-img .box3{
    position: absolute;
    top: 235px;
    left: 628px;
}
.con-img .content-img .box4{
    position: absolute;
    top: 235px;
    left: 880px;
}
/*介紹部分*/
.con-itd{
    background-color: #E4F6F4;
}
.con-itd .itd{
    margin: 0;
    padding-top: 70px;
    padding-bottom: 70px;

}
.con-itd .itd li{
    list-style: none;
    display: inline-block;
    height: 408px;
    background-color: #EDF4E2;
}

/*文章段落部分*/
.con-itd .itd .itd-pag{
    overflow-y: scroll;

}
.con-itd .itd h3{
    text-align: left;
    margin-left: 30px;
    padding-top: 0;
}
.con-itd .itd p{
    margin: 0 10px 30px 30px;
    width: 820px;
    text-indent: 2em;   /*設置段落開頭空兩格*/
    text-align: left;
    line-height: 30px;

}
/*滾動條的整體樣式*/
.con-itd .itd .itd-pag::-webkit-scrollbar{
    width: 15px;
    height: 40px;
}
/*滾動條里的滑塊樣式*/
.con-itd .itd .itd-pag::-webkit-scrollbar-thumb{
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background-color: #CCCCCC;
}

/*css3動畫部分*/

.ai-element{
    --uiaiElementDisplay: var(--aiElementDisplay, inline-flex);
    --uiaiElementTextColor: var(--aiElementTextColor);
    --uiaiElementTextColorHover: var(--aiElementTextColorHover);

    display: var(--uiaiElementDisplay);
    color: var(--uiaiElementTextColor);
    position: relative;
    overflow: hidden;
}

.ai-element__label{
    display: block;
}

/* ai-element_padding-all */

.ai-element_padding-all{
    --uiaiElementLineWeight: var(--aiElementLineWeight, 5px);
    --uiaiElementLineColor: var(--aiElementLineColor, red);
    --uiaiElementPadding: var(--aiElementPadding, 5px);

    padding: var(--uiaiElementPadding);
}

.ai-element_padding-all::before,
.ai-element_padding-all::after{
    width: 100%;
    height: var(--uiaiElementLineWeight);
    left: 0;
}

.ai-element_padding-all::before{
    top: 0;
}

.ai-element_padding-all::after{
    bottom: 0;
}

.ai-element_padding-all .ai-element__label::before,
.ai-element_padding-all .ai-element__label::after{
    width: var(--uiaiElementLineWeight);
    height: 100%;
    top: 0;
}

.ai-element_padding-all .ai-element__label::before{
    left: 0;
}

.ai-element_padding-all .ai-element__label::after{
    right: 0;
}

.ai-element_padding-all::before,
.ai-element_padding-all::after,
.ai-element_padding-all .ai-element__label::before,
.ai-element_padding-all .ai-element__label::after{
    content: "";
    background-color: var(--uiaiElementLineColor);
    position: absolute;
    opacity: 1;

    will-change: transform, opacity;
    transition-property: opacity, -webkit-transform;
    transition-property: transform, opacity;
    transition-property: transform, opacity, -webkit-transform;
}

.ai-element_padding-all:hover::before,
.ai-element_padding-all:hover::after,
.ai-element_padding-all:hover .ai-element__label::before,
.ai-element_padding-all:hover .ai-element__label::after{
    opacity: 0;
}

/* ai-element_padding-bottom */

.ai-element_padding-bottom{
    --uiaiElementLineWeight: var(--aiElementLineWeight, 2px);
    --uiaiElementLineColor: var(--aiElementLineColor, #fff);

    padding-bottom: var(--uiaiElementLineWeight);
    position: relative;
}

.ai-element_padding-bottom::after{
    content: "";
    width: 100%;
    height: var(--uiaiElementLineWeight);
    background-color: var(--uiaiElementLineColor);

    position: absolute;
    left: 0;
    bottom: 0;
}

/* ai-element_bg */

.ai-element_bg {
    --uiaiElementLineColor: var(--aiElementLineColor, #fff);
    --uiaiElementTextColor: var(--aiElementTextColor, #000);
    --uiaiElementTextColorHover: var(--aiElementTextColorHover, #fff);
    --uiaiElementPadding: var(--aiElementPadding, 5px);

    padding: var(--uiaiElementPadding);
    transition: color .3s ease-out;
}

.ai-element_bg::before,
.ai-element_bg::after{
    content: "";
    background-color: var(--uiaiElementLineColor);
    opacity: 1;
    position: absolute;

    transition: opacity .35s ease-out .03s, -webkit-transform .35s ease-out;

    transition: transform .35s ease-out, opacity .35s ease-out .03s;

    transition: transform .35s ease-out, opacity .35s ease-out .03s, -webkit-transform .35s ease-out;
}

.ai-element_bg .ai-element__label{
    position: relative;
    z-index: 2;
}

.ai-element_bg:hover::before,
.ai-element_bg:hover::after{
    opacity: 0;
    transition-delay: 0s;
}

.ai-element_bg:hover{
    color: var(--uiaiElementTextColorHover);
}

/* ai-element_text */

.ai-element_text::before{
    content: attr(data-ai-element-text);
    color: var(--uiaiElementTextColorHover);
    position: absolute;
}

.ai-element_text::before,
.ai-element_text .ai-element__label{
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-timing-function: cubic-bezier(.86, .6, .08, 1.01);
    transition-duration: .4s;
}

.ai-element_text:hover::before,
.ai-element_text:hover .ai-element__label{
    transition-duration: .3s;
}


/*邊框旋轉*/
.ai-element5::before,
.ai-element5::after,
.ai-element5 .ai-element__label::before,
.ai-element5 .ai-element__label::after{
    transition-duration: .2s;
    transition-timing-function: ease-out;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.ai-element5::before,
.ai-element5::after{
    width: 100%;
    height: var(--uiaiElementLineWeight);
    left: 0;
}

.ai-element5 .ai-element__label::before,
.ai-element5 .ai-element__label::after{
    width: var(--uiaiElementLineWeight);
    height: 100%;
    top: 0;
}

.ai-element5::before{
    top: 0;
}

.ai-element5::after{
    bottom: 0;
}

.ai-element5 .ai-element__label::before{
    left: 0;
}

.ai-element5 .ai-element__label::after{
    right: 0;
}

.ai-element5:hover::before,
.ai-element5:hover .ai-element__label::before{
    transition-delay: .35s;
}

.ai-element5::after,
.ai-element5:hover .ai-element__label::after{
    transition-delay: .15s;
}

.ai-element5 .ai-element__label::after,
.ai-element5:hover::after{
    transition-delay: .3s;
}

.ai-element5 .ai-element__label::before,
.ai-element5:hover::before{
    transition-delay: 0s;
}

.ai-element5:hover::before{
    -webkit-transform: translate3d(105%, 0,0);
    transform: translate3d(105%, 0, 0);

}

.ai-element5:hover::after{
    -webkit-transform: translate3d(-105%, 0, 0);
    transform: translate3d(-105%, 0, 0);
}

.ai-element5:hover .ai-element__label::before{
    -webkit-transform: translate3d(0, -105%, 0);
    transform: translate3d(0, -105%, 0);
}

.ai-element5:hover .ai-element__label::after{
    -webkit-transform: translate3d(0, 105%, 0);
    transform: translate3d(0, 105%, 0);
}


/*

The component will reset button browser styles

*/

.r-button{
    --uirButtonPadding: var(--rButtonPadding, var(--rButtonPaddingTop, 0) var(--rButtonPaddingRight, 0) var(--rButtonPaddingBottom, 0) var(--rButtonPaddingLeft, 0));
    --uirButtonBackgroundColor: var(--rButtonBackgroundColor, transparent);

    --uirButtonBorderWidth: var(--rButtonBorderWidth, 0);
    --uirButtonBorderStyle: var(--rButtonBorderStyle, solid);
    --uirButtonBorderColor: var(--rButtonBorderColor, currentColor);

    --uirButtonFontFamily: var(--rButtonFontFamily, inherit);
    --uirButtonFontSize: var(--rButtonFontSize,  inherit);
    --uirButtonColor: var(--rButtonColor);

    background-color: var(--uirButtonBackgroundColor) !important;
    padding: var(--uirButtonPadding) !important;

    border-width: var(--uirButtonBorderWidth) !important;
    border-style: var(--uirButtonBorderStyle) !important;
    border-color: var(--uirButtonBorderColor) !important;

    font-family: var(--uirButtonFontFamily) !important;
    font-size: var(--uirButtonFontSize) !important;
}

/* Remove the inner border and padding in Firefox. */

.r-button::-moz-focus-inner,
.r-button[type="button"]::-moz-focus-inner,
.r-button[type="reset"]::-moz-focus-inner,
.r-button[type="submit"]::-moz-focus-inner {
    --rButtonBorderStyle: none;
    --rButtonPadding: 0;
}

js代碼

var t = 0;
var imgNum = $(".images li").length;
$(".num li").eq(0).addClass("active");
var c = setInterval(goTo,2000);     /*定時器循環輪播*/

function goTo() {
    if (t == imgNum-1){
        t = -1;
    }
    t++;
    $(".num li").eq(t).addClass("active").siblings().removeClass("active");
    $(".images li").eq(t).stop().fadeIn().siblings().stop().fadeOut();      /*設置淡入淡出，達到輪播效果*/
}

posted @ 2019-09-16 00:42 saber゛ Views(604) Comments(0) 收藏舉報

刷新頁面返回頂部

saber゛

網頁布局案例

效果圖

具體代碼

公告