ie ff 之 <A> 虚线

最新推荐文章于 2024-02-14 21:30:31 发布
原创 最新推荐文章于 2024-02-14 21:30:31 发布 · 105 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#IE #CSS #HTML

本文介绍了一种解决网页中超链接点击后出现虚线框的方法，通过CSS样式设定与HTML属性结合，有效避免视觉干扰，提升用户体验。
解决超链接点击后虚线问题：


a{
outline:none;
/*outline:0;*/
}



<a href="#" hidefocus="true"></a>
HTML `＜fieldset＞` 标签 `form` 属性深度解析
2501_93104808的博客
09-19 1028
HTML <fieldset> 标签 form 属性解析摘要 HTML <fieldset> 标签用于分组表单控件，提高可用性和可访问性。HTML5 引入的 form 属性允许 <fieldset> 及其控件与外部 <form> 关联，即使不在表单标签内也能提交数据。该属性支持组件化开发，不影响可访问性，现代浏览器兼容良好。关键点包括：通过 form 属性指定表单 ID；与单个控件 form 属性的优先级关系；必须配合 <legend> 保持可访问
html基础-几种布局
qq_46065861的博客
07-31 1517
1.html标签 html为网页标记语言 <标签名> DTD声名 新版 <!DOCTYPE html> 标题标签 hn <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> n越大，字体越小，自动加粗，换行 color设置字体的颜色 1.HEXColor 六位的十
HTML中标签的作用（一）
ALIX的博客
03-02 8924
（1.）Link标签。可以导入css和其他的插件。 A标签，用途很广，可以放入网址，文件等，（注意放入东西后，a标签里面要放入字体，否则会显示不出来），放入文件点击a标签会下载此文件。 (3.)div，一个最常用的东西，它是一个快级元素，也是一个新的行。div可以把文档分割为独立的、不同的部分。div里面可以放入class或id等（注意，每个id都是独一无二的）。 （4.）可以创建各种不同类...
Web基础01-HTML+CSS
qq_33627452的博客
02-14 2037
HTML是一门语言，所有的网页都是用HTML这门语言编写出来的HTML(HyperText Markup Lánguage)：超文本标记语言超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容标记语言:由标签构成的语言HTML运行在浏览器上，HTML标签由浏览器来解析HTML 标签都是预定义好的。例如:使用< img >展示图片W3C标准：网页主要由三部分组成结构：HTML表现：CSS行为：JavaScript学习网站：w3c，菜鸟...Atom。
css去掉a标签点击后的虚线框
careless_2018的博客
03-30 291
css去掉a标签点击后的虚线框outline是css3的一个属性，用的很少。声明，这是个不能兼容的css属性，在ie6、ie7、遨游浏览器都不兼容。outline控制的到底是什么呢？当聚焦a标签的时候，在a标签的区域周围会有一个虚线的框，这个框不同于border的是，它是不占有任何宽度的。当你取消焦点的时候，这个虚线框就会自然消失。你可以通过遨游、火狐或者ie的几个版本看到。而safari、ope...
快速学习html、css的经典笔记
ddqj31317的博客
06-26 1286
HTML语言剖析 Html简介-目录 全写：HyperTextMark-upLanguage 译名：超文本标识语言 简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver。 1.Html特点： ►描述性语...
使用css制作三角，兼容IE6，用到的标签<div><s><span>
飒水飞月的专栏
11-09 3354
使用css来制作三角，在日常用得较多。恰好这几天项目中有用到，之前只是从网上copy下来代码直接用，但是今天在用的时候遇到一些问题，于是借此机会把这个css绘制三角好好研究下吧。 我们分别写一个,,标签，并给上下左右四个border赋值不同的颜色，看看是什么样子： html： css： .triangle { width: 20px; height:
CSS 学习总结
fsthrjkugoib的博客
05-13 467
CSS技术梳理CSS 选择器 CSS的基本语法结构 // h1 ——为选择器 大括号中编辑属性和值 // 设置字体颜色为红色，字体大小14px h1 { color : red; font-size: 14px; } CSS 选择器 1. 标签选择器 如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a // 选择器以标签名 命名，说明样式给那个标签加 html {color: black;} p {color: gray;} h2 {color: silver;
JS的IE和Firefox兼容性汇编<转>
mystruts_1的专栏
09-06 752
1.document.form.item 问题 (1)现有问题： 现有代码中存在许多 document.formName.item("itemName")这样的语句，不能在 MF 下运行 (2)解决方法： 改用 document.formName.elements["el
人民币符号在html的显示方法
JJumper.Wang
08-02 3618
转载之：http://hi.baidu.com/mucunzhishu/blog/item/a498ebcdd84eda1593457e54.html 人民币符号 (￥) 的显示问题，虽然不是多大的事，可有时候蛮让人纠结，我已经纠结了几次了，就收藏一下某位仁兄的方法： 人民币符号 ¥ 的页面显示： 1. 直接复制粘贴使用 ” ￥ ” 2. 使用 ” & #65509 ; ”...
CSS3 改变空格作用 -webkit-nbsp-mode
JJumper.Wang
07-20 655
-webkit-nbsp-mode 换行有时是很棘手的事情：有时你希望文字在适当的地方断行(而不是折行)，有时你又不想这样。一个能控制这个的属性就是-webkit-nbsp-mode，它让你可以改变&nbsp;空白符的行为，强制文字在它被用到的地方断行。通过设置值为space即可实现。 ...
js replace 符号
JJumper.Wang
12-14 516
同样的问题，做个记录 [code="java"] var aa="aaa+++"; aa.replace(/[+]/g,"bbb"); //输出 aaabbb [/code]
css3动画事件—webkitAnimationEnd
JJumper.Wang
07-20 452
当-webkit-animation动画结束时有一个webkitAnimationEnd事件，只要监听这个事件就可以实现这个动画完成时才执行令一个事件，比如让动画保持在终止的状态或其他一些事件。 1、-webkit-animation动画含三个事件：开始事件webkitAnimationStart；结束事件webkitAnimationEnd；重复运动事件webkitAnimationItera...
js 获取file
JJumper.Wang
05-11 448
[code="java"] function getFilePath(filePath) { if (navigator.userAgent.indexOf("MSIE")!=-1){ readFileIE(filePath); }else if (navigator.userAgent.indexOf("Firefox")!=-1 || naviga...
仿开心标签
JJumper.Wang
07-05 172
在网上看到篇关于 “仿开心标签”的文章，于是也自己试了下,做了些修改。 [code="css"] a{ text-decoration:none;} .impress,.impress_in{ margin:0; padding:0;border:1px solid #fff; color:#fff; font-size:12px;} .impress{white-space:nowr...
【日期Date】字符串 转 日期
JJumper.Wang
09-06 169
var s = "2005-12-15 09:41:30"; var d = new Date(Date.parse(s.replace(/-/g, "/")));
js cookie
JJumper.Wang
05-08 129
[code="js"] //存cookies function SetCookie(name,value){ var Days = 30; //30 天 var exp = new Date(); //new Date("December 31, 9998"); exp.setTime(exp.getTime() + Days*24*60*60*100...
firefox中span设置width
JJumper.Wang
11-02 127
[code="java"] span{ display:-moz-inline-box; /*ff*/ display:inline-block; /*ie*/ width:100px; } [/code]
table 内容换行
JJumper.Wang
04-21 125
[code="java"] table{ table-layout:fixed; } td{ table-layout:fixed; word-break: break-all; overflow:hidden; } aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa [/code] ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .container { max-width: 800px; margin: 20px auto; padding: 20px; border: 1px solid #ccc; background-color: white; } .top, .banner, .footer { background-color: #e6f7ff; border: 1px dashed #ccc; padding: 20px; margin-bottom: 20px; text-align: center; color: #666; } .card-container { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; } .card { flex: 1; min-width: calc(25% - 15px); background-color: #e6f7ff; border: 1px dashed #ccc; padding: 40px 0; text-align: center; color: #666; } .footer { margin-bottom: 0; } </style> </head> <body> <div class="container"> <div class="top">top</div> <div class="banner">banner</div> <div class="card-container"> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div> <div class="footer">footer</div> </div> </body> </html> 检查代码生成与上图差异
最新发布
11-07
```markdown ## 代码概述 该HTML代码实现了一个简单的网页布局，包含顶部（top）、横幅（banner）、卡片区域（card-container）和页脚（footer），整体居中显示，最大宽度为800px。使用了Flexbox布局控制卡片的排列。 ## 代码解析 - **`<div class="container">`**：外层容器，限制宽度并居中，设置了边距、内边距和白色背景。 - **`.top`, `.banner`, `.footer`**：样式一致，浅蓝色背景、虚线边框、居中文本。 - **`.card-container`**：使用 `display: flex` 实现弹性布局，`flex-wrap: wrap` 允许换行，`gap: 20px` 设置间距。 - **`.card`**：每个卡片等分空间，最小宽度设为 `calc(25% - 15px)`，理论上应每行显示4个卡片。 ### 与图像的差异分析（基于提供的`image.png`描述） 提供的图片仅标注了 `top`, `banner`, `footer` 文字，未提供实际视觉布局。但从当前代码推断： 1. **预期布局**： - top、banner、footer 各占一行； - card-container 中8个空白卡片，每行最多4个，共2行。 2. **可能存在的差异**： - 若图像中卡片**不是每行4个**，则 `min-width: calc(25% - 15px)` 计算错误，应调整为考虑 `gap` 的影响； > 正确写法建议：`min-width: calc(25% - 15px)` 在 `gap: 20px` 下不够精确，推荐使用 `calc(25% - 15px)` 可接受，但更佳做法是用 `@media` 控制响应式。 - 图像若显示卡片高度不一致或非等宽分布，则代码中 `flex: 1` 和 `min-width` 需优化； - 若图像中 `top`, `banner`, `footer` 有不同颜色或结构，而图中无体现，则无法验证样式还原度。 3. **缺少图像细节的问题**： - 当前图像描述仅为文本标签，**无法确认真实布局样式**（如是否响应式、移动端表现、字体大小等）； - 无法判断是否有JavaScript交互或图片资源缺失。 ## 知识点 1. **Flexbox 布局** 使用 `display: flex` 实现弹性盒模型，支持自动分配空间与对齐方式。 2. **CSS 宽度与间隙计算** `min-width` 与 `gap` 共同作用时需合理计算百分比减去间距，避免换行异常。 3. **响应式容器设计** `max-width` + `margin: auto` 实现居中布局，适配不同屏幕尺寸。 ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值