程序员经验分享-hwhale

border-style的outset属性在导航中的应用

2023-11-12
代码如下:
<!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>border-style的outset属性</title>
<style type="text/css"> 
.bevelmenu{  font: bold 13px arial;  padding: 6px 0;  margin: 0;  width: 100%;  background-color: #FFF2BF;  text-align: left; /*将值设置为"right"菜单会向右靠拢*/  }
.bevelmenu li{  list-style: none;  display: inline;  }
.bevelmenu li a{  padding: 3px 0.5em;  text-decoration: none;  color: black;  background-color: #FFF2BF;  border: 2px solid #FFF2BF;  }
.bevelmenu li a:hover{  color: black;  background-color: #FFE271;  border-style: outset;  }
html>body .bevelmenu li a:active{ /* 鼠标按下的效果只有非IE浏览器才支持 */  border-style: inset;  }  </style>
</head>
 
<BODY>
<ul class="bevelmenu"><li><a href="http://www.sina.com">新浪</a> </li><li><a href="http://www.163.com">网易</a> </li><li><a href="http://www.baidu.com">Baidu</a> </li><li><a href="http://www.yahoo.com">yahoo</a> </li><li><a href="http://www.google.com">Google</a> </li></ul> 
</BODY>
</html>


如果用inset属性就有种凹陷的感觉,与outset属性正好相反!


<!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>border-style的outset属性</title>
<style type="text/css"> 
.bevelmenu{  font: bold 13px arial;  padding: 6px 0;  margin: 0;  width: 100%;  background-color: #FFF2BF;  text-align: left; /*将值设置为"right"菜单会向右靠拢*/  }
.bevelmenu li{  list-style: none;  display: inline;  }
.bevelmenu li a{  padding: 3px 0.5em;  text-decoration: none;  color: black;  background-color: #FFF2BF;  border: 2px solid #FFF2BF;  }
.bevelmenu li a:hover{  color: black;  background-color: #FFE271;  border-style: outset;  }
html>body .bevelmenu li a:active{ /* 鼠标按下的效果只有非IE浏览器才支持 */  border-style: inset;  }  </style>
</head>
 
<BODY>
<ul class="bevelmenu"><li><a href="http://www.sina.com">新浪</a> </li><li><a href="http://www.163.com">网易</a> </li><li><a href="http://www.baidu.com">Baidu</a> </li><li><a href="http://www.yahoo.com">yahoo</a> </li><li><a href="http://www.google.com">Google</a> </li></ul> 
</BODY>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

border-style的outset属性在导航中的应用 的相关文章

  • 我可以根据同一容器中另一个元素的大小强制内联文本换行吗？

    考虑这个 jsbin http jsbin com ElIKOKe 3 edit html css output 我有这个html div class container span The lime outlined container h

  • 如何向 CSS 形状添加偏移轮廓？

    我在创建带有斜角边缘的块时遇到了一些问题 此外我需要一个斜角的边框并稍微偏离主块 问题是这个块可以根据屏幕响应 不知道具体的方法 希望大家帮忙 这就是我现在所做的 box display flex padding 20px height 2

  • 像在 tumblr 注册页面上那样鬼写

    有谁知道如何创建一个类似 tumblr 的字段 http www tumblr com http www tumblr com 这是一个 URL 字段 其中有一些褪色的文本 然后当您单击它并键入时 它会附加一些文本 tumblr com 您

  • 使用 jQuery 更改父元素样式

    我有下一个 html 设置 div class one div class two a href class three Click a div div 我想更改具有类的元素的背景颜色 one当我点击元素时 three使用 jQuery 这

  • 如何在 Bootstrap 3 的导航栏中添加带有图标的搜索框？

    我正在使用新的 Twitter Bootstrap 3 并尝试放置一个像这样的搜索框 如下 在顶部导航栏中 在 Bootstrap 2 中 可以这样完成

  • 如何处理 Django 中的错误

    我想让我的 django 应用程序尽可能对用户友好 并且我想处理适当的错误并让它推出类似于 javascript 中的警报的错误消息 我想在没有上传文件时执行此操作 因此 当按下上传按钮并且尚未上传任何内容时 将会发出一条警报消息 我的看法

  • 如何让Gmail像加载进度条一样

    我想在页面的中心和顶部创建一个像 Gmail 一样的加载进度条 并适用于所有浏览器 这是基本代码

  • 水平滚动的表格上的“粘性”标题......完全不可能？

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro

  • 嵌套计算操作

    希望这很简单 我想使用CSS calc操作来执行两个计算 我想将宽度设置为等于 100 7 2 但是 如果我尝试在 CSS 计算操作中执行多个操作 则会失败 width calc 100 7 2 如何在一个 CSS 语句中执行多个计算操作

  • 为不同的字体系列指定不同的字体大小

    有没有办法为不同的字体系列指定不同的字体大小 我想要使 用的字体 出于产品品牌目的 是一种有点罕见的字体 FlashDLig 并非所有 PC 和浏览器都支持 我的一台带有 IE 9 的 Windows 7 PC 不显示它 现在 对于我使用

  • CSS 网格框架中的间距有什么作用？

    我正在深入研究 Web 开发 并且正在使用 Blueprint CSS 框架 其中包括网格系统 我有几个问题 水沟有什么用处 当然 它们不用于在列之间包含空间 因为您可以使用 margin CSS 属性来实现这一点 对吗 或者排水沟只是一种

  • ng-include 和 ng-view 不同时加载

    下面是我的应用程序的结构 很简单 页眉和页脚是非常小的文件 而主页上的 ng view 要大得多 当我进入该页面时 我注意到了这一点 首先加载两个 ng include 然后 ng view 出现 页脚被推到底部 页脚闪烁大约 0 1 秒

  • Quill 公开可用的 CSS

    我最初的目的是从 PrimeFaces TextEditor 组件输出的 HTML 生成 PDF 文件 而该组件又基于 免费开源 WYSIWYG 编辑器 Quill 为此 我需要获取 TextEditor 组件生成的 HTML 将其包含在

  • 重新创建 CSS3 过渡三次贝塞尔曲线

    在 CSS3 过渡中 您可以将计时函数指定为 cubic bezier 0 25 0 3 0 8 1 0 在该字符串中 您仅指定曲线上点 P1 和 P2 的 XY 因为 P0 和 P3 始终分别为 0 0 0 0 和 1 0 1 0 根据苹

  • Gmail 无法在电子邮件上正确呈现字体

    我已经建立了一个 html 电子邮件并使用了 Google 字体 我已使用以下方法将字体包含在 head 标签中 if mso endif 并使用字体 即我这样做了

  • 如何将 div 与其父级的顶部对齐，但保持其内联块行为？

    See http jsfiddle net b2BpB 1 http jsfiddle net b2BpB 1 问 如何让box1和box3对齐到父div的顶部boxContainer boxContainerContainer backg

  • 如何覆盖 bootstrap 表 td 样式？

    我正在使用 Bootstrap 3 3我有一个 HTML 代码如下 div table class table table striped tr td 03 td td 04 td td 05 td td 06 td td 07 td td

  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can

  • 如何防止弹性项目高度因其内容而溢出[重复]

    这个问题在这里已经有答案了 我刚刚开始学习 Flex 到目前为止我印象深刻 但是 我对包含页眉 页脚和三列的全页应用程序遇到了问题 第一列包含一个项目列表 由于我无法为其父级设置固定高度 因此每次列表增长时 它都会将页脚向下推 这是一个带有

  • 如何为 TBODY 应用垂直滚动条

    我的表中有 4 列和 5 行数据 我必须为 TBODY 应用垂直滚动条 TH 标题内容不应滚动 我对场景进行了编码 并且在我将滚动类应用于 TBODY 之前它工作正常 一旦我将滚动样式类应用于 TBODY 它就会破坏之前的对齐方式 任何人都

随机推荐

  • 利用Google翻译实现网站国际化——js插件

    文章描述了很多作者的思路 显得繁琐和冗余 若无兴趣请直接下载资源 查阅最终解决方案 最终解决方案 代码静态化已经全部完成 包括面板语言文件 已添加完备的注释 请直接查阅 下载插件js谷歌翻译插件 示例请使用 本地静态资源 html 需要修改

  • Spring AutowireCapableBeanFactory

    Spring AutowireCapableBeanFactory接口的使用小结 Spring的ioc容器中有一个接口叫AutowireCapableBeanFactory 我们从名字中可以看出 具有自动装配Bean的能力 而且这里笔者先透

  • 刷脸支付是万亿级支付模式新趋势

    随着5G时代的到来 互联网 AI智能 云计算 物联网等技术的成熟 一种连手机都不需要的新型支付方式诞生了 那就是刷脸支付 扫码支付较现金支付无需找零 无需携带钱包 只需要扫码就可以完成支付 对于商家和顾客来说 支付变得简单多了 如果说 扫码

  • Feign接口Get请求自动转化成POST

    原因 在入参的时候如果没有通过注解指定 此时的参数会自动封装到body中 feign检测到body里面有请求参数就会默认使用post请求 解决方法 解决方法也很简单 只需要在参数前加 SpringQueryMap即可 GetMapping

  • vue模块化

    vue模块化 模块化开发 不使用模块化带来的问题 CommonJS es6的模块化的导出和导入 export的基本使用 export default导出 统一全部导出 模块化开发 不使用模块化带来的问题 初始模块化思想 CommonJS e

  • 拖延症解药

    拖延症解药 完美主义 情绪问题 原谅过去的自己 与自己和解 不做准备工作 在不充分条件下启动 计划 死线 是第一生产力 将 死线 提前 将它分段 分解为几个阶段性 死线 一个一个完成 更易启动 降低不确定性 完成一个小目标后奖励自己 顺序

  • 电影下载资源总结

    电驴电骡 donkey4u com emul软件 BT kickass to kat ph isohunt com www torrentkitty com thepiratebay sx thepiratebay ee 论坛 cmct c

  • python绘制三维图

    一 初始化 假设已经安装了matplotlib工具包 利用matplotlib figure Figure创建一个图框 1 2 3 4 import matplotlib pyplot as plt from mpl toolkits mp

  • Elasticsearch 5.6.5 基础笔记(一) - 概念和安装

    概念 Elasticsearch 分布式 可扩展 实时的搜索与数据分析引擎 建立在全文搜索引擎库 Apache Lucene 基础之上 能胜任上百个服务节点的扩展 并支持 PB 级别的结构化或者非结构化数据 将所有的功能打包成一个单独的服务

  • 动态数组的创建与维护

    说是动态数组 其实就是在满容量时 再创建创建一个一定容量的数组 实例代码中是原数组容量的一倍 并将对数组的引用指向新的数组 而当数组容量比较小时 则创建一个一定容量的数组 示例代码中是原数组容量的1 4 并将对数组的引用指向新的数组 示例代

  • Vulkan-程序结构

    程序结构 一般来说 完整的Vulkan程序包含 创建Vulkan实例 获取物理设备列表创建逻辑设备 创建命令缓冲 获取设备中支持图形工作的队列 初始化交换链 创建深度缓冲 创建渲染通道 创建帧缓冲 创建绘制对象 初始化渲染管线 创建栅栏和初

  • Qt获取wifi列表，连接wifi后获取IP地址

    环境win7 qt5 13 MinGW32 台式机 直接上步骤了 网上看到的略显啰嗦 就是这么简单直接 1 头文件 include windows h include wlanapi h 2 pro设置连接路径 需要根据自己安装路径加载 L

  • 要成为一名成功的网络爬虫开发者，需要了解哪些知识点？

    要成为一名成功的网络爬虫开发者 您需要掌握以下一些关键知识 编程语言 Python 是最常用的编程语言之一 特别适合网络爬虫开发 您需要掌握 Python 的基础语法 数据结构和面向对象编程 HTTP 和网络基础知识 了解 HTTP 请求和

  • React之条件渲染(学习和总结)

    在实际开发中经常会遇到条件渲染 一般都是通过if else 语句 三元运算符 switch case 语句来实现 这里记录并学习一下 1 条件渲染之 IF const users id 1 firstName Robin lastName

  • 高精度加法c语言,C语言实现高精度加法

    免费资源网 https freexyz cn 本篇为高精度加法的计算 接下来我还会去写高精度乘法的计算 一 高精度运算的概念 高精度运算其实就是参与运算的数完全超出基本数据类型所能表示的范围的运算 例如int型范围就是 2147483648

  • 深度卷积神经网络（CNN）

    CNN简述 卷积神经网络 Convolutional Neural Network CNN 它是属于前馈神经网络的一种 其特点是每层的神经元节点只响应前一层局部区域范围内的神经元 全连接网络中每个神经元节点则是响应前一层的全部节点 一个深度

  • 信号完整性分析基础知识之有损传输线、上升时间衰减和材料特性（三）：耗散因子Df

    在低频下 介电材料的漏电阻是恒定的 用体积电导率来描述材料的电性能 这种体积电导率与材料中离子的密度和迁移率有关 在高频下 由于偶极子的运动增加 电导率随频率增加 材料中可以旋转的偶极子越多 材料的体积电导率就越高 偶极子可以随着施加的场移

  • C++类成员函数可以访问同类不同对象的私有成员

    example 如下例 class Test public Test int v val v Test const Test t val 100 cout lt lt t val lt lt endl void show Test a co

  • Ubuntu识别USB设备

    参考 如何解决Ubuntu无法识别USB设备 作者 一只青木呀 发布时间 2020 08 28 21 02 00 网址 https blog csdn net weixin 45309916 article details 10828682

  • border-style的outset属性在导航中的应用

    代码如下

热门标签