Emmet优雅地搭建起Html骨架

Emmet优雅地搭建起Html骨架

技术应用 算法语言 软件开发 12个月前 (12-05) 浏览: 192 评论: 0

曾经看见一位学长在PHP-Storm上输入一段奇怪的代码,当他按下了Tab键后,神奇的事情就发生了。 如果HTML也是一种编程语言的话,私以为Html会是我们接触到的最多的编程语言。可能有人并不知道什么是HTML(超文本标记语言),但是当他人生中第一次上网打开浏览器浏览网页的时候,他与HTML的邂逅就开始了……只是当初,他不知道纷繁绚丽的网页的背后,是HTML语言在默默支撑; HTML+JS+CSS是前端的三大语言。如果把网页比作人的话,HTML给了人以骨架,CSS未知赋予了血肉、发肤以至衣物、妆饰,而JS则给了他运动的灵魂。 这边文章从HTML讲起,对于HTML的基本知识在此就不便赘述了,Google一下,你就知道。在此,我主要讲的是怎样快捷地搭建起HTML的骨架。 把HTML比作骨架并非我心血来潮,我只是在告诉自己写HTML页面要有搭框架的意识。不瞒你说,我以前的HTML的代码都是拼凑而成的。哪里不对改哪里,效率很低。正向箭头 + 标签名+反响箭头这种重复的代码,写多了就觉得腻了。那么有没有什么快捷的方式让我们关注HTML的架构本身,而不是繁杂的html语言本身呢? 用Emmet Tab一下 Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度 Emmet 的语法极客人目前还只是刚刚入门,这里主要是抛砖引玉一下,给大家几个例子,更专业的介绍与教程,给大家推荐下面文章:http://www.iteye.com/news/27580 ,在此我也就不大篇幅地复制粘贴了。 ** 输入“!”或“html:5”,然后按Tab键: ** * ** 连续输入元素名称和ID,比如输入p.foo: ** 还有一些较复杂的用法大家自行研究,在此不做赘述,因为我的作用就是抛砖引玉,勾起大家的兴趣。 ** 要见证奇迹的话建议自己亲手试一下!!** 一个例子:实现列表 我要实现的效果如下: 按照搭建骨架的意识,我们得弄清这个列表的结构是什么样子: ** 最外层一个无序列表,这个无序列表每个列表项都嵌套一个有序列表,这个有序列表有两个列表项,每个列表项含有个无序列表 ** Emmet语法如下:   Tab一下: 然后把文字填进去   效果预览 > Javascript 第一章 const let 第二章 function object Java 第一章 class package 第二章 private public 参考文章: * http://www.iteye.com/news/27580 * http://www.powerxing.com/emmet-syntax-cheatsheet/

支持自动提示的多引擎的搜索框

支持自动提示的多引擎的搜索框

技术应用 算法语言 2年前 (2015-12-30) 浏览: 248 评论: 0

使用网上开源的导航站源码制作了我的导航网页“百元导航”后,总觉得它丢掉了导航网站的一个很重要的东西—搜索框。于是极客人为自己的导航站加入了搜索框的功能,支持百度搜索、好搜、极客搜、CSDN搜索、蒲公英PT搜索等(可以加代码轻松扩展),除了网站界面使用了网上的代码,逻辑处理部分的js代码全由本人实现。 html代码: 下面是搜索框的界面的html部分,CSS没有贴在下面,如果需要请留言: javascript代码 要想搜索框支持多搜索引擎切换,首先需要掌握搜索引擎搜索关键词的URL参数,查看有几个GET参数(搜索引擎一般都是用GET传值的),比如下面是搜索引擎搜索“王柏元的博客”的结果页的URL: https://www.baidu.com/s?ie=UTF-8&wd=%E7%8E%8B%E6%9F%8F%E5%85%83 ?ie后面是编码格式,wd后面是搜索的关键词的URLEncode编码。 所以只要做一个表单,在表单内部加入name="ie"的DOM元素,这个元素没有必要在界面上显示,可以在CSS样式中加入“display:none”,下面的addparams函数实现的就是这一功能;再加入name="wd"的文本框,就是输入关键词的那个搜索框。最后将表单的action设置为百度搜索关键词网址:https://www.baidu.com/s 下面的setEngine函数就是切换搜索引擎的函数。传入searchIndex,就是html中select下option的value; 为了在用户切换搜索引擎后,再次打开导航页默认显示切换后的搜索引擎,可采用cookie记录searchIndex。 下面的代码用以在切换搜索引擎时,如果搜索框不为空则自动搜索搜索框内关键词,不用点击“搜索按钮”。 搜索框加入百度搜索自动提示 其中搜索自动提示的功能采用了百度开放的百度搜索框提示:引入一个百度的opensug.js文件,然后在要绑定搜索提示的文本框input元素中加入baiduSug="1"。这样在绑定的搜索框中输入文字即可获得和百度一样的搜索提示。 比如: 网上说百度搜索提示还有很多高级用法,比如自定义搜索提示的背景颜色、字体等等。不过极客人试过发现并不支持,你可以自行尝试,成功了欢迎来王柏元的博客交流!

在网页页面右上方加上百度是否收录的印章

在网页页面右上方加上百度是否收录的印章

算法语言 3年前 (2015-03-22) 浏览: 389 评论: 1

前面王柏元的博客里有一篇文章介绍用PHP实现判断文章是否被百度收录的方法,可能尝试的朋友看到自己的显示的效果和我的个人博客的效果不太一样。接下来向大家介绍通过PHP自动判断网站网页是否被百度收录,并通过印章悬浮的方式提示站长当前页面是否被百度收录,并为站长提供快速提交当前页面给百度收录的入口,每次在网页发表时可手动向百度提交新文章。   在我的博客文章右上方我加入了一个类似“百度图标”一样的水印,具有透明的悬浮效果,和论坛的加“精华”的印章效果相似。这种效果不仅更炫酷,更能引起访问者的注意,不知不觉中可能就为你点击向百度提交未被收录的网页。下面为大家介绍一下这究竟是怎样实现的。 一、添加PHP实现判断文章是否被百度收录的代码 请参考我前面的文章《PHP实现判断文章是否被百度收录》 二、在引用“baidu_record()”函数的地方添加CSS代码 其中:“百度”图标css: style="right: 20px;//图标离父容器右边20px; position: absolute;//定位元素为absolute,实现图标悬浮 color:red;//收录时使用color:#2565D8;   “百度”图标父容器”span“的CSS: float:right;//使图标悬浮在右方 font-size: 7em; z-index: 99;//是图标悬浮在其他标签上方,这个需要根据实际调整 opacity: 0.8;//实现图标透明效果 position: relative; 三、拓展 为了节省网站的带宽,王柏元的博客图标尽量采用Font Awesome图标字体,如果你觉得这不够美观,可以PS一个印章图片.上面的css同样适用。

css3圆角边框和边框阴影示例

css3圆角边框和边框阴影示例

算法语言 3年前 (2014-12-06) 浏览: 140 评论: 4

border-radius向元素添加圆角边框,css3中的。IE9+ chrome safari5+ firefox4+ 现在都支持。可以向input div等设置边框。与border相似,可以四个角一起设置,也可以单独设置。 1.圆角效果 效果演示: css3圆角边框和边框阴影示例——王柏元的博客 语法: 代码如下: 按top-left, top-right, bottom-right, bottom-left顺序设置每个 radius 的值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。 例子1: 代码如下: 等价于: 代码如下: 例子2: 代码如下: 等价于: 代码如下:  2.阴影效果 效果演示: css3圆角边框和边框阴影示例——王柏元的博客 box-shadow向框添加一个或多个阴影。IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。 语法: 代码如下: h-shadow,v-shadow必须。水平,垂直阴影的位置。允许赋值。blur可选,模糊距离。spread可选,阴影的尺寸。color可选,阴影的颜色。inset可选,将外部阴影(outset)改为内部阴影。 例子: 代码如下:

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册