网页布局案例

效果图

导航栏和大图轮播

页面具体布局

　　风景图应用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(547) Comments(0) Edit 收藏举报

刷新页面返回顶部

saber゛

网页布局案例

效果图

具体代码

公告