css实现的最简单的标签页

最新推荐文章于 2022-03-23 16:11:04 发布
最新推荐文章于 2022-03-23 16:11:04 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： CSS 文章标签： css xhtml border float html c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/diligentcatrich/article/details/6803306
版权
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>CSS标签</title>
    <style type="text/css">
        dl
        {
            position: relative;
            width: 240px;
            height: 200px;
        }
        dt
        {
            position: absolute;
            left: -2px;
            top: -1.5em;
        }
        dt a
        {
            display: block;
            float: left;
            margin: 1px;
            width: 78px;
            text-align: center;
            font: bold 12px/1.8em "宋体" ,sans-serif;
            color: #fff;
            text-decoration: none;
            background: #666;
        }
        dt a:hover
        {
            background: orange;
        }
        dd
        {
            margin: 0;
            width: 240px;
            height: 200px;
            overflow: hidden;
            border: 1px solid #999;
        }
        ul
        {
            margin: 0;
            padding: 6px 0;
            width: 240px;
            height: 200px;
            list-style: none;
        }
        li
        {
            width: 230px;
            font: 12px/1.8em "宋体" ,sans-serif;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <br />
    <br />
    <dl>
        <dt><a href="#a" title="">新闻1</a><a href="#b" title="">新闻2</a><a href="#c" title="">新闻3</a></dt>
        <dd>
            <ul id="a">
                <li>·<a href=" http://www.showwho.com" title="">新闻1</a></li>
                <li>·<a href=" http://www.showwho.com" title="">新闻1</a></li>
                <li>·<a href=" http://www.showwho.com" title="">新闻1</a></li>
                <li>·<a href=" http://www.showwho.com" title="">新闻1</a></li>
                <li>·<a href=" http://www.showwho.com" title="">新闻1</a></li>
            </ul>
            <ul id="b">
                <li>·<a href=" http://www.showwho.com" title="">新闻2</a></li>
                <li>·<a href=" http://www.showwho.com" title="">新闻2</a></li>
                <li>·<a href=" http://www.showwho.com" title="">新闻2</a></li>
                <li>·<a href=" http://www.showwho.com" title="">新闻2</a></li>
                <li>·<a href=" http://www.showwho.com" title="">新闻2</a></li>
            </ul>
            <ul id="c">
                <li>·<a href=" http://www.showwho.com" title="">新闻3</a></li>
                <li>·<a href=" http://www.showwho.com" title="">新闻3</a></li>
                <li>·<a href=" http://www.showwho.com" title="">新闻3</a></li>
                <li>·<a href=" http://www.showwho.com" title="">新闻3</a></li>
                <li>·<a href=" http://www.showwho.com" title="">新闻3</a></li>
            </ul>
        </dd>
    </dl>
</body>
</html>
一剑平江湖
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css常用标签及页面布局
m0_46487113的博客
07-10 1037
JAVA Web基础 css标签 在css标签中，我们要对一个标签或者多个标签的属性进行改变，那么我们要通过选择器来过滤出自己需要的标签，对标签进行样式修改。 css中的选择器： ID选择器：使用div时，定义id号，并且通过id过滤出自己想要改变的元素 类选择器：使用div时，定义类名，并且通过类名过滤出自己想要改变的元素 标签名选择器，通过标签名，来过滤出自己想要改变的标签，改变样式。 属性选择器：通过一些特定的属性来改变样式。 伪类选择器 伪元素选择器 选择器的优先级： 当一个内容被多个选择
精通CSS-添加样式
qq_36973122的博客
08-16 2696
精通CSS-添加样式
css+jquery实现简单标签页效果html代码
04-16
css+jquery实现最简单标签页效果html代码，效果很好
html css js 实现Tab标签页
tanbase的专栏
09-11 9263
body{font:"宋体";font-size:12px;} a:link,a:visited{font-size:12px;color:#666;text-decoration:none;} a:hover{color:#ff0000;text-decoration:underline;} #Tab{margin:0 auto;width:220px;border:1px solid #
CSS tab选项卡(标签页)切换
热门推荐
兜ぃф糖
07-12 1万+
在github上看到一篇 You dot need JavaScript 很多效果不需要js也能做到，比如手风琴的效果，轮播，弹出的对话框，工具提示，标签页的切换，多级的下拉菜单等等，css甚至还能做游戏！ 之前就看到一个用css制作的轮播的例子，这次又遇到了，所以简单记录下。 观察了那篇github中的几个例子，不难发现凡是涉及到点击事件的都是通过隐藏的input和与之关联的label
CSS实现梯形标签页的方法
09-24
总之，使用CSS实现梯形标签页涉及到理解并巧妙运用伪元素、定位、3D变换以及变换原点等技术。掌握这些技巧将有助于开发者创造出更具创新性和个性化的Web界面。实践中，不断尝试和探索不同的CSS属性组合，可以衍生出...
CSS实现标签效果的示例代码
12-09
这里以制作图片右上角标签为例，用CSS以最简单、直接的方式实现效果。 实现效果  实现思路 准备两个div（一个父容器，一个标签div），分别设置宽高，并设置相对布局。 使标签div居于父容器右上角，设置内容居中...
css滤镜实现页面灰色黑白色效果代码
10-30
最简单的方法是在`<head>`标签内添加以下CSS代码，直接将页面变为灰色： ```html <style type="text/css"> html { FILTER: gray; } ``` 对于Discuz论坛这样的平台，如果需要全局修改，可以编辑控制CSS的文件，...
CSS简单实现重叠线效果
09-25
代码的核心在于`<style>`标签内的CSS样式定义。首先，通过设置通用样式`*{padding:0;margin:0;}`，确保所有元素默认没有内外边距，以避免干扰后续的布局。 接着，创建了一个名为`.line`的类，用于表示线条分隔。它...
html实现标签页效果,jQuery+CSS实现的标签页效果示例【测试可用】
weixin_39627699的博客
06-03 400
本文实例讲述了jQuery+CSS实现的标签页效果。分享给大家供大家参考，具体如下：CSS代码：#tabs{width:600px;height:250px;background:white;margin:20px;}#tabs ul{float:left;margin:20px 0 0 20px;padding:0;}#tabs li{width:80px;height:40px;line-he...
html css js 实现Tab标签页示例代码
01-21
复制代码代码如下: <html xmlns=””> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gbk” /> <meta http-equiv=”Content-Language” content=”zh-CN” /> <meta name=”roots” content=”” /> <meta name=”Keywords” content=”” /> <meta name=”Description” content=”” /> <title></title> <style type=”text/cs
纯css+js写的一个简单的tab标签页带样式
12-12
最近经常要用tab标签页，所以写了一个简单的，以后用的话直接拷贝一个，稍微改改就OK了。 先看效果图：  接下来看下代码怎么写的吧： 一、sp文件easytab.jsp 代码如下: <%@ page language=”java” import=”java.util.*” pageEncoding=”UTF-8″%> <% String path = request.getContextPath(); String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+
CSS样式漂亮Tab页
09-28
一个很漂亮的Tab 标签 切换样式 非常经典的东东
js+css 实现tab标签页切换圆角显示效果
acvc225的博客
07-07 2064
先看效果图 html代码部分 很简单 就是一个li列表 <style type="text/css"> .main{ float: left;height: 500px;width: 200px;} .list{ float: left;} .list ul{ padding:0;margin:0; text-align: center;} ...
css--让网页布局美观(1)
qq_50883182的博客
03-08 1519
文章目录前言一、什么是css？二、1.2.总结 前言 一、什么是css？ 二、 1. 2. 总结
通过CSS和DIV创建TAB标签页
狮子爱睡觉的专栏
12-13 2425
通过CSS和TAB创建一个简单的TAB标签页 样式简单，清新，可以放在表格中使用的 样式如下： a { color:#000000; text-decoration:none; } #navbar { } #header { float:left; width:100%; font-size:93%; line-height:normal; } #header
『前端学习实例』 标签页实现（Javascript + CSS）
猪窝
07-26 776
参考文档：JavaScript 教程 W3school 参考文档：CSS 教程 W3school 文章目录功能需求结果展示源代码文件目录index.html 功能需求 实现动态标签页，包含一系列按钮和文本。 切换功能：点击按钮可以切换到相应文本。（切换效果使用JSDOM，效果内容使用CSS） 结果展示 默认状态： 点击按钮（P2）： 点击按钮（P1）：同默认状态。 源代码 文件目录 根目录 index.html 网页源代码 index.html <!DOCTYPE html&g
css实现页面标签的跳转
Everywhere_Shipoars的博客
07-25 6295
纯css实现页面标签的跳转 html代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-sc
CSS标签及样式
input_form_value的博客
03-23 242
1.CSS的概念及优势 2. style标签 3. CSS的基本语法结构 4.css的外部样式 5.css的内部样式 6.行内样式 7.优先级（就近原则） 8.CSS基本选择器 9.标签选择器 10.类选择器 11.ID选择器 12.基本选择器的优先级 ...
基于bootstrap实现标签页
最新发布
05-03
可以使用Bootstrap提供的标签页组件来实现标签页。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap标签页</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">首页</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">个人资料</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">联系我们</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <h2>欢迎来到首页</h2> <p>这里是首页的内容</p> </div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <h2>个人资料</h2> <p>这里是个人资料页面的内容</p> </div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"> <h2>联系我们</h2> <p>这里是联系我们页面的内容</p> </div> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> </body> </html> ``` 这里使用了`nav`和`tab-pane`两个类来实现标签页的切换，其中`nav`代表标签导航栏，`tab-pane`代表标签页内容。`data-toggle`属性用于指定标签导航栏的链接和标签页的内容之间的关联，`active`类用于指示当前选中的标签页。在标签页内容中，`fade`类可以实现标签页的渐隐渐现效果。最后，需要引入jQuery和Bootstrap的JavaScript文件，以实现标签页的切换功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值