CSS布局案例+选项卡

最新推荐文章于 2021-01-19 19:40:00 发布
最新推荐文章于 2021-01-19 19:40:00 发布
阅读量581 收藏 3
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanfan_h/article/details/89337562
版权

第一个：

使用列表更方便

 <meta charset="UTF-8">
    <title>布局案例1</title>
    <style>
        .pagenation{
            width:958px;
            height:40px;
            border:1px solid #000;
            margin:50px auto 0px;
            font-size:0px;
            text-align: center;

        }
      .pagenation  a{
          display:inline-block;
          padding:5px 10px;
          background-color:lightblue;
          font-size:12px;
          font-family: "微软雅黑";
          text-decoration: none;/*去除文字下划线*/
          margin:9px 5px;
          color:#333;
        }
        .pagenation  a:hover{
            background-color:hotpink;
            color:white;
        }
        .pagenation span{
            display:inline-block;
            font-size:20px;
        }
        .menu{
            width:958px;
            height:40px;
            border:1px solid #000;
            margin:50px auto 0;
            padding:0;
            list-style: none;
            text-align: center;
            line-height: 40px ;
            font-size: 0;
        }
       .menu li{
            display:inline-block;
            font-size:14px;
        }
       .menu .line{
           color:#333;
           margin:0 20px;
       }
        .menu li a{
            font-family: "微软雅黑";
            color:#333;
            text-decoration: none;
        }
        .menu li a:hover{
            color:pink;
        }
    </style>
</head>
<body>
     <div class="pagenation">
         <a href="">上一页</a>
         <a href="">1</a>
         <a href="">2</a>
         <a href="">3</a>
         <a href="">4</a>
         <span>...</span>
         <a href="">17</a>
         <a href="">18</a>
         <a href="">19</a>
         <a href="">20</a>
         <a href="">下一页</a>
     </div>
     <ul class="menu">
         <li><a href="">首 页</a></li>
         <li class="line">|</li>
         <li><a href="">网站介绍</a></li>
         <li  class="line">|</li>
         <li><a href="">网站建设</a></li>
         <li class="line">|</li>
         <li><a href="">网站建设</a></li>
         <li class="line">|</li>
         <li><a href="">网站建设</a></li>
         <li class="line">|</li>
         <li><a href="">网站建设</a></li>
         <li class="line">|</li>
         <li><a href="">网站建设</a></li>
     </ul>
</body>

在这里插入图片描述

第二个

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>布局案例2</title>
    <style>
        .menu{
            list-style:none;
            background-color: pink;
            padding:0;
            width:960px;
            height:40px;
            margin:50px  auto 0;
            position:relative;
        }
        .menu li{
            float:left;
            width:100px;
            height:40px;
            text-align:center;  /*文本居中*/
            line-height:40px;  /*垂直居中*/
        }
        .menu li a{
            font-size:14px;
            font-family: "黑体";
            color:#fff;
            text-decoration: none;
        }
        .menu li:hover {
            background-color:hotpink;
        }
        .menu .active{
            background-color:hotpink;
        }
        .menu .new{
            width:21px;height:20px;
            background:url(xxx.png) no-repeat;
            position:absolute;
            left:445px;
            top:-8px;
        }
        .menu .new:hover{
            background:url(xxx.png) no-repeat;
        }
    </style>
</head>
<body>
<ul class="menu">
    <li class="active"><a  href="">首页</a></li>
    <li><a href="">网站建设</a></li>
    <li><a href="">网站建设</a></li>
    <li><a href="">网站建设</a></li>
    <li><a href="">网站建设</a></li>
    <li><a href="">网站建设</a></li>
    <li><a href="">网站建设</a></li>
    <li class="new"></li>
</ul>

在这里插入图片描述

竖着选项卡

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #dbdbdb;
        }
        .block{
            position: relative;
            margin: auto;
            width: 1190px;
            height: 500px;
        }
        .block_left{
            width: 200px;
            height: 500px;
            float: left;
            margin-right: 10px;
            background-color: white;
        }
        .block_right{
            width: 980px;
            height: 500px;
            background-color: yellow;
            float: left;
        }
        .left_menu>li{
            list-style: none;
            padding-left: 20px;
            font-size: 14px;
            line-height: 27.5px;
        }
        .left_menu>li>a{
            text-decoration: none;
            color: black;
        }
        .left_menu>li>span{
            display: inline-block;
            padding: 0 2px;
            font-size: 12px;
        }
        .left_menu>li>a:hover{
            color: red;
        }
        .left_menu>li:hover{
            background-color: #cecece;
        }
        .li_child{
            position: absolute;
            left: 200px;
            top: 0;
            width:990px;
            height: 500px;
            background-color: white;
            border: 1px solid black;
            box-sizing: border-box;
            display: none;
        }
        .left_menu>li:hover .li_child{
            display: block;
        }
    </style>
</head>
<body>
  <div class="block">
        <div class="block_left">
            <ul class="left_menu">
                <li><a href="#">家用电器</a>
                    <div class="li_child">1</div>
                </li>
                <li><a href="#">手机</a><span>/</span><a href="#">运营商</a><span>/</span><span>/</span><a href="#">数码</a>
                    <div class="li_child">2</div>
                </li>
                <li><a href="#">电脑</a><span>/</span><a href="#">办公</a>
                    <div class="li_child">3</div>
                </li>
                <li><a href="#">家居</a><span>/</span><a href="#">家具</a><span>/</span><a href="#">家装</a><span>/</span><a href="#">厨具</a>
                    <div class="li_child">4</div>
                </li>
                <li><a href="#">男装</a><span>/</span><a href="#">女装</a><span>/</span><a href="#">童装</a><span>/</span><a href="#">内衣</a></li>
                <li><a href="#">美妆</a><span>/</span><a href="#">个护清洁</a><span>/</span><a href="#">宠物</a></li>
                <li><a href="#">女鞋</a><span>/</span><a href="#">箱包</a><span>/</span><a href="#">钟表</a><span>/</span><a href="#">珠宝</a></li>
                <li><a href="#">男鞋</a><span>/</span><a href="#">运动</a><span>/</span><a href="#">户外</a></li>
                <li><a href="#">房产</a><span>/</span><a href="#">汽车</a><span>/</span><a href="#">汽车用品</a></li>
                <li><a href="#">母婴</a><span>/</span><a href="#">玩具乐器</a></li>
                <li><a href="#">食品</a><span>/</span><a href="#">酒类</a><span>/</span><a href="#">生鲜</a><span>/</span><a href="#">特产</a></li>
                <li><a href="#">艺术</a><span>/</span><a href="#">礼品鲜花</a><span>/</span><a href="#">农资绿植</a></li>
                <li><a href="#">医药保健</a><span>/</span><a href="#">计生情趣</a></li>
                <li><a href="#">图书</a><span>/</span><a href="#">文娱</a><span>/</span><a href="#">电子书</a></li>
                <li><a href="#">机票</a><span>/</span><a href="#">酒店</a><span>/</span><a href="#">旅游</a><span>/</span><a href="#">生活</a></li>
                <li><a href="#">理财</a><span>/</span><a href="#">众筹</a><span>/</span><a href="#">白条</a><span>/</span><a href="#">保险</a></li>
                <li><a href="#">安装</a><span>/</span><a href="#">维修</a><span>/</span><a href="#">清洗保养</a></li>
                <li><a href="#">工业品</a></li>
            </ul>
        </div>
        <div class="block_right"></div>
  </div>
</body>

在这里插入图片描述

横选项卡

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .block {
            margin: auto;
            width: 500px;
            height: 400px;
            position: relative;
        }

        .menu {
            font-size: 0;
        }

        .menu > li {
            width: 100px;
            font-size: 16px;
            list-style: none;
            display: inline-block;
            text-align: center;
            line-height: 35px;
            height: 35px;
            border: 1px solid silver;
            box-sizing: border-box;
            cursor: pointer;
        }
        .menu > li>span{
            position: relative;
            z-index: 2;
            display: block;
            width: 100px;
            height: 35px;
            box-sizing: border-box;
        }

        .menu > li:hover {
            color: red;
            border-color: red red white red;
        }
        .menu > li:hover span{
            border-bottom: 1px solid white;
        }

        .menu_c {
            position: absolute;
            display: none;
            left: 0;
            top: 35px;
            width: 500px;
            height: 365px;
            border: 1px solid red;
            text-align: left;
            box-sizing: border-box;
        }

        .menu > li:hover .menu_c {
            display: block;
        }
    </style>
</head>
<body>
<div class="block">
    <ul class="menu">
        <li>
            <span>卡一</span>
            <div class="menu_c">卡一</div>
        </li>
        <li>
            <span>卡二</span>
            <div class="menu_c">卡二</div>
        </li>
        <li>
            <span>卡三</span>
            <div class="menu_c">卡三</div>
        </li>
        <li>
            <span>卡四</span>
            <div class="menu_c">卡四</div>
        </li>
        <li>
            <span>卡五</span>
            <div class="menu_c">卡五</div>
        </li>
    </ul>
</div>
</body>

在这里插入图片描述

莓莓儿～
关注
专栏目录
JS+DIV+CSS排版布局实现美观的选项卡效果
11-25
本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果。分享给大家供大家参考。具体如下： 这是一个基于JavaScript的简单选项卡代码，陪新手练习一下Div+CSS排版的技巧，本选项卡可以继续美化修饰完善，选项卡在目前在众多网站上应用广泛，确实是一个很不错的网页布局方法。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
HTML5+CSS3实现Tabs选项卡特效特效代码
03-20
在本案例中，“HTML5+CSS3实现Tabs选项卡特效”是一个利用这两项技术创建的网页组件，它通过下划线跟随动画实现了选项卡之间的平滑切换，提升了用户体验。 首先，HTML5是超文本标记语言的第五个版本，它的主要改进...
css实现选项卡功能（纯css）
v_111的博客
04-27 2136
css实现选项卡功能（纯css） Document *{ padding: 0; margin: 0; } body{ background: #58596b;  } form{ width: 600px; height: 460px; background: #33344a; } input{ display: none; } input+i
玩转Android---UI篇---Tab Layout（选项卡布局）
LoveZhangjia521的专栏
03-27 553
为了创建一个选项卡的UI，你需要使用一个TabHost和一个TabWidget，TabHost必须是布局文件的根节点，它包含了为了显示选项卡的TabWidget和一个用于显示选项内容的FrameLayout 你可以用一或两种方法实现你的选项卡内容：在用一个Activity中用选项卡来在视图之间切换，或者用用选项卡来改变所有的分离的Activity。你根据你的需求来使用你想在程序中的方法，但是如果...
布局之选项卡切换
我是正直的技术小白
10-21 361
xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="330dp" android:layout_height="320dp" android:orientation="vertical"
Tab Layout（选项卡布局）
pyzheng的专栏
03-07 307
Tab Layout（选项卡布局）:[url]http://hualang.iteye.com/blog/976826[/url] 参考:[url]http://book.51cto.com/art/201007/214806.htm[/url] 所有讲解可以参考上面两个地址。 [b]三个对应tab的Activity[/b] [code="java"]package com.pandy...
jQuery行业案例tab选项卡布局代码.zip
10-27
本案例的"jQuery行业案例tab选项卡布局代码.zip"提供了一个使用jQuery实现的Tab选项卡布局的实例，这在网页设计中非常常见，常用于展示分组内容或节省页面空间。 Tab选项卡布局是一种用户界面设计模式，它允许用户...
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
09-02
在这个案例中，我们主要关注两个关键组件：选项卡和栅格布局。 选项卡是Bootstrap中的一种常见交互元素，它允许用户在多个内容面板之间切换，而无需刷新页面。在提供的代码片段中，虽然没有直接展示选项卡的HTML...
CSS3、1000+案例.zip
05-12
5. **简单实用的点击切换选项卡代码**：选项卡式布局在网页设计中很常见，这个案例提供了一种使用CSS3实现的简单且高效的选项卡切换机制，通过伪类和transition，实现平滑的切换动画。 6. **CSS3动画下拉菜单 带...
纯css实现选项卡
l_x_cser的博客
02-20 1517
纯css实现一个选项卡 先看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>演示文档</title> <style> body{ padding: 100px; } ...
选项卡demo.html
06-09
打开就能使用的选项卡，点击切换内容，开始有一个默认的class，后面点击切换的时候class名也跟着切换，可以实现点击导航改变颜色的效果。通用，易改。
选项卡基础布局
王延朕的博客
05-13 148
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list
CSS选项卡
boia
04-13 2056
看到好多大型的网站都会有一些tab选项卡，所以今天就写了一个供大家参考，代码简洁明了，不需要太多的解释，只需要注意一下兼容性问题就行了。看代码 css选项卡练习 div{width:565px;height:220px;} div.tabcard .nav{background-color:#ff359a;width:565px;height:21px;} .na
纯css选项卡
冰冰酱
12-06 342
代码 这里主要使用表单的单选按钮来实现这个TAB显示和隐藏，首页tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显示内容。具体请看下面代码。 关于兼容性，因为是用CSS3来制作的，所以如果不支持CSS3的浏览将会出现不兼容的情况。 HTML代码 &lt;ul class="tabs"&gt; &lt;li&gt; &lt;input type="radio" nam...
css 实现选项卡
weixin_45846427的博客
12-01 178
想要不使用js实现选项卡 css 也可以实现 使用css3中的 input选中后的选择器 :checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></titl...
CSS实现选项卡
青行灯的博客
01-19 296
<nav> <a href="#div1">111</a> <a href="#div2">222</a> <a href="#div3">333</a> </nav> <div> <section id="div1">11111</section> <section id=
微信小程序滑动选项卡案例开发教程
资源摘要信息:"微信小程序滑动选项卡案例开发" 本案例详细介绍了微信小程序中滑动选项卡的开发过程，适合用于毕业设计或课程设计的学习与实践。以下是本案例开发中涉及的关键知识点： 1. 微信小程序基础： 微信小...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值