近期前端笔记

最新推荐文章于 2024-02-26 22:38:59 发布

原创最新推荐文章于 2024-02-26 22:38:59 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一系列前端开发实用技巧，包括如何使元素不可见但保留屏幕阅读器读取功能、使用CSS实现三角形图形、设置页面在不同浏览器下的显示模式、通过JavaScript获取文件内容等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、tabindex="-1"
则在使用[Tab]键时，此元素被忽略。注意：如果使用-1值时，onfocus与onblur事件仍被启动。
2、button标签是行内元素
3、<span class='sr-only'>40% Complete</span>
'sr-only'表示该元素不显示，只用于屏幕阅读器
屏幕阅读器可以把"40% Complete"念出来，以方便残障人士
4、三角形CSS：
<style>
.abc{
position: absolute;
top: 20px;
left: 50px;
border: 10px solid #f63;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
}
</style>
<div class="abc"></div>

5、http://help.dangdang.com/index 常见问题小广告不错
6.http://wiki.cn.mikecrm.com/faq 每个list的样式很好看
7、http://www.ganji.com/newhelp/ banner是一张简单的CSS3动画
8、<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="renderer" content="webkit"> html打开强制为极速模式
9、http://www.w3school.com.cn/jquery/ajax_get.asp
function rd(){
$.get('data/td.txt').success(function(content){
alert(content);
});
}
2015年12月-2016年8月用过，今天有人发给我，知道大概怎么回事了，值得研究
10、find 找到的是数组标准要用 eq $(this).find('en').eq(0).text()；
11.inline-block 清空隙 </li><li放一行
12、$('body').css('height',$('.wrap').css('height'))
13、CSS抗锯齿 font-smoothing 属性
body{

-webkit-font-smoothing: antialiased;

}
-moz-osx-font-smoothing: inherit | grayscale

这个属性也是更清晰的作用，特别是图标文字流行的今天。
14、<style>
@font-face
{
font-family: myFirstFont;
src: url('/example/css3/Sansation_Light.ttf')
,url('/example/css3/Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>
15、竖向居中最简单的方法(三行CSS3代码)
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}