大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

HTML和CSS如何制作分页效果-创新互联

这篇文章主要介绍HTML和CSS如何制作分页效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联是一家网站设计公司,集创意、互联网应用、软件技术为一体的创意网站建设服务商,主营产品:响应式网站开发成都品牌网站建设成都营销网站建设。我们专注企业品牌在网站中的整体树立,网络互动的体验,以及在手机等移动端的优质呈现。成都做网站、成都网站建设、移动互联产品、网络运营、VI设计、云产品.运维为核心业务。为用户提供一站式解决方案,我们深知市场的竞争激烈,认真对待每位客户,为客户提供赏析悦目的作品,网站的价值服务。

以下是html和CSS实现分页效果的步骤详解:

HTML部分:

在页面中创建一个

    标签和多个
  • 标签,分别给它们一个class类名,便于对其进行CSS样式设置,ul和li可以制作一个无序列表,因为我们需要点击跳转效果,所以需要在li标签中插入a标签,具体代码如下:

    CSS部分:

    基本框架已经搭建出来了,现在我们需要用CSS进行美化。首先用float: left让无序列表左浮动,排列在一行,用text-decoration: none去除a标签默认的下划线,用 padding调整间距,给分页效果添加颜色和鼠标点击或悬停的效果,具体代码如下:

    .box {list-style: none;display: inline-block;padding: 0;margin-top: 10px;}
    .box li {display: inline;text-align: center;}
    .box a {
    float: left;
    display: block;
    font-size: 14px;
    text-decoration: none;
    padding: 5px 12px;
    color: #fff;
    margin-left: -1px;
    border: 1px solid transparent;
    line-height: 1.5;
    }
    .box a.active {cursor: default;}
    .box a:active {outline: none;}
    .modal-4 a {
    margin: 0 5px;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    background-color: #F7C12C;
    }
    .modal-4 a.prev {
    -moz-border-radius: 50px 0 0 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px 0 0 50px;
    width: 100px;
    }
    .modal-4 a.next {
    -moz-border-radius: 0 50px 50px 0;
    -webkit-border-radius: 0;
    border-radius: 0 50px 50px 0;
    width: 100px;
    }
    .modal-4 a:hover {background-color: #FFA500;}
    .modal-4 a.active,.modal-4 a:active {background-color: #FFA100;}

    效果图:

    HTML和CSS如何制作分页效果

    由图可见,一个完整的html分页效果已经制作好了,当鼠标悬停在分页内容上或者分页内容被激活时,其呈现深橘黄色,当鼠标离开时则呈现橘黄色。

    以上是HTML和CSS如何制作分页效果的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站制作公司行业资讯频道!


    网页名称:HTML和CSS如何制作分页效果-创新互联
    网页地址:http://dzwzjz.com/article/dpdpcg.html
在线咨询
服务热线
服务热线:028-86922220
TOP