Text使用心得,制作三角形

关于css的兼容,css兼容

这篇随笔为了方便自己后期的学习和查找,用来记录平时遇到的一些问题,后期会陆续更新

1、背景图
background-position属性,在ff下不支持该属性的拆分写法(background-position-x,background-position-y),即使用js后期设置也不可以

2、ie6下双边距:设置为float的div在ie6下,margin会加倍,可通过在该div下设置display:inline解决

3、ie下文本偏移:div浮动,ie文本会产生3像素的bug,左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距,对左边对象添加margin-right:-3px

这篇随笔为了方便自己后期的学习和查找,用来记录平时遇到的一些问题,后期会陆续更新
1、背景图 : background…

CSS 实用技巧:制作三角形,css实用技巧

实现如图所示的三角形图标:

图片 1

html代码如下:

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

css样式:

body{background:#faf7ef;}
div{margin:20px auto}
div.arrow-up {
  width:0px;
  height:0px;
  border-left:50px solid transparent;  
  border-right:50px solid transparent; 
  border-bottom:50px solid #ff0000; 
  font-size:0px;
  line-height:0px;
}


div.arrow-down {
  width:0px;
  height:0px;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-top:50px solid #0000ff;
  font-size:0px;
  line-height:0px;
}


div.arrow-left {
  width:0px;
  height:0px;
  border-bottom:50px solid transparent;  
  border-top:50px solid transparent; 
  border-right:50px solid #008000; 
  font-size:0px;
  line-height:0px;
}


div.arrow-right {
  width:0px;
  height:0px;
  border-bottom:50px solid transparent; 
  border-top:50px solid transparent; 
  border-left:50px solid #ffff00; 
  font-size:0px;
  line-height:0px;
}

 需要demo猛点该文字,百度云盘下载

 

作者:风雨后见彩虹

出处:

如果您觉得本文对您的学习有所帮助,请多支持与鼓励。

 

实用技巧:制作三角形,css实用技巧
实现如图所示的三角形图标: html代码如下: div class =”arrow-up” / div
div class =”arrow-down” / div div class…

Sublime Text使用心得(一),sublime使用心得

  以前写web前端样式都是用eclipse、myeclispe这些IDE开发工具,现在想纯粹的写点HTML的东西,一心想找一个轻量的编辑器,这样能够随手打开编写,方便平时业余学习。网上搜罗了一堆编辑器,最后看上了Sublime
Text,小小编辑器,70刀的售价,想必也是个牛X闪闪的东西。这款软件出来很久,如今刚开始入门,学习的同时,写下心得,既可以作为学习笔记,也能方便分享于别人,让别人少走弯路,本文重点关于用Sublime编写HTML文件。

如果纰漏,还望指正!

一、Sublime Text2安装和汉化

Sublime Text2百度网盘下载(希望有能力的多多支持正版,虽然可以无限试用)

链接: 密码:bywe

汉化包百度网盘下载

链接: 密码:6o9z

汉化方法:运行软件,依次点击菜单Preferneces -> Browse Packages
,在打开的目录的父目录中有一个Packages文件夹,把下载下来的汉化压缩包中的Default文件夹内的文件替换掉Packages->Default内同名文件即可。

二、Sublime Text2主要的几个界面设置及快捷键

左侧目录栏(关闭/打开):查看->侧边栏->隐藏侧边栏(点击一次打开,再点击一次关闭,选项卡文字并没有改变,应该是汉化的问题)

右侧迷你视图(关闭/打开):查看->隐藏迷你地图

三、Sublime Text2插件安装

 Sublime插件很多,不过要想便捷地安装这些插件前提是要安装Package
Control控件,安装最简单的方法是通过Sublime的文本控制台。控制台通过Ctrl
+`快捷方式或查看(视图)->显示控制台菜单访问。一旦打开,粘贴你Sublime(本文为Sublime
Text2)版本对应的Python代码到控制台。

Sublime Text2安装Package Control对应的Python代码为:

图片 2import
urllib2,os,hashlib; h = ‘eb2297e1a458f27d836c04bb0cbaf282’ +
‘d0e7a3098092775ccb37ca9d6b2e4b7d’; pf = ‘Package
Control.sublime-package’; ipp = sublime.installed_packages_path();
os.makedirs( ipp ) if not os.path.exists(ipp) else None;
urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler())
); by = urllib2.urlopen( ” + pf.replace(‘ ‘,
‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join(
ipp, pf), ‘wb’ ).write(by) if dh == h else None; print(‘Error validating
download (got %s instead of %s), please try manual install’ % (dh, h) if
dh != h else ‘Please restart Sublime Text to finish installation’) Python Code

参考资料:

四、快捷键让Sublime Text2在编文件快速在浏览器打开

安装好Package
Control后,接下来我们就可以方便的安装各种插件了,如题四如何安装一个“在编文件快速在浏览器打开的插件”,这样我们在编辑HTML文件时可以边写代码边在浏览器查看显示效果,这个插件叫view
in browser:

1、通过”ctrl+shift+p”打开命令面板

2、输入“ip”即可,全称(install
package)打开安装插件面板,选择第一个Package Control:Install
Package,等一会跳出安装插件的输入面板

图片 3

3、输入”view in browser”后通过鼠标左键单击或者回车键进行安装

4、察看SublimeText2左下角状态栏了解是否安装成功

 装好之后,聊瞧瞧看如何使用:

1、打开Sublime Text2,菜单栏:Preference->Package Settings->View In
Browser->Settings-User

2、在” [  ]
“内输入以下代码:红字1处为你自己设置的快捷键,红字2处为该快捷键对应的将运行在编文件的浏览器,其他火狐-firefox,苹果-safari

注意:开头和结尾的“[
]”不能删除,否则会在打开Sublime时报错,就算什么代码也没有,也要留个空的”[
]”符号,不然也会报错。图片 4

五、Sublime Text2插件Emmet使用(快速生成HTML文件开头代码)

 用一些IDE开发工具创建HTML文件时都会自动生成标准的头文件代码,但是Sublime要想实现这个效果就必须插件的配合,这里我们将要安装的插件叫Emmet,安装方法同上。

安装好Emmet插件后,创建文件,打开Sublime>文件>新建文件,这时创建的文件为Plain
Text(纯文本)文件,可以从Sublime窗体的右下角看出,同时点击右下角的Plain
Text,在弹出的文件类型列表里选择HTML类型,这样一个HTML类型空文件就创建好了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注