-专注于互联网、网络技术、网络工程、网络营销SEO、搜索引擎、社会化网络、IT技术、网络编程、网络安全、服务器管理、网站开发、移动互联网软件应用等领域的原创IT科技博客,欢迎喜欢互联网的朋友一起交流!

Jquery高亮当前选中菜单,导航菜单点击切换选中时高亮状态

功能需求:
写一个站点需要用到在导航菜单点击链接跳转到新页面后,高亮当前菜单样式。
简单的说,就是我点击导航菜单中的一个栏目,跳转到该栏目下,该栏目菜单也同时高亮(可以是背景色也可以是背景图片)

解决方法:
通过查看实例,我们需要用到JS中的jquery来实现这种效果,也可以通过CSS设置不同页面的a:hover实现效果,不过这显然是比较笨拙的方法。
那么,如何用JS来实现效果呢,实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的就用一个css样式标记。此方法支持动态链接和静态链接多种形式。
效果图:

HTML5+CSS3响应式布局要点,5分钟学会响应式布局

什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

响应式布局有哪些优点和缺点?

css3 伪元素和伪类选择器详解

伪类选择器:CSS中已经定义好的选择器,不能随便取名常用的伪类选择器是使用在a元素上的几种,`如a:link|a:visited|a:hover|a:active`提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

CSS3:伪类前的冒号和两个冒号区别

这好像真的是个问题,或许很多前端同学对此都有疑惑,查了些资料,证实了下两个符号的区别,简而言之:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。 



  W3C关于CSS3选择器的规范中有一段描述: 

  A pseudo-element is made of two colons (::) followed by the name of the pseudo-element. 

  This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3. 

  简单翻译一下,大意就是,伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的,用于区分伪类和伪元素。但是伪类兼容现存样式,浏览器需要同时支持旧的伪类,比如:first-line、:first-letter、:before、:after等。 

  那么现在就可以完整的回答标题中的问题了,对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样的。 

  所以,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。 

CSS3.0中伪类和伪元素(或伪对象)的区别及由来详细说明

可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。


首先,阅读 w3c 对两者的定义:

  • CSS 伪类用于向某些选择器添加特殊的效果。

在z-blog博客文章底部加入原文链接方法

主要思路很简单,找到文章详细页模板,里面添加你想写的内容就行了,另外知道文章链接标签名等常用标签名就行。方法如下:

1.打开你的博客当前主题目录下的TEMPLATE目录,系统默认主题的那个文件路径为THEMES\default\TEMPLATE

2.打开TEMPLATE下的b_article-single.html

3.找到b_article-single.html文件代码里的

<div class="post-body"><#article/content#></div>

这句代码,在下面添加这么一句代码:

chrome、360浏览器开发扩展插件教程(3)关于本地存储数据

HTML5中的localStorage

localStorage与cookie类似,它是存储在客户端浏览器中的数据,它与cookie不同的一点是它没有时间限制。localStorage属于html5中的新特性,在浏览器支持localStorage统计中,Chrome4+、Firefox3.5+、IE8+、IE7兼容模式、Safari4+、Opera10.5+都是支持localStorage的。以下代码可以用于检测你的浏览器是否支持localStorage:

if(window.localStorage){
	alert('你的浏览器支持localStorage!');
}else{
	alert('浏览器不支持localStorage!');
}

localStorage是以key/value方式来进行存储的,并且value只能是字符串形式,如果你要使用其他数据类型,需要进行相应的转换。设置和获取localStorage方法是使用localStorage.key,或localStorage[key]的形式,如:

chrome、360浏览器开发扩展插件教程(1)开发Chrome Extenstion其实很简单

Chrome的更新速度可以说前无古人,现在我每天开机的第一件事就是打开Chrome检查是不是有了新版本。界面清爽、操作人性化、网络备份资料 和快速的启动速度令我爱不释手,还有它拥有众多的扩展程序,相对于firefox的插件来说,数量上和质量上稍显不足,但相信chrome将会很快在扩展 上超越firefox,firefox上内存占用上实在不令人满意,也许我使用firefox的一个原因就是因为firebug,不过相信chrome平 台的类firebug插件也会很快出现。

chrome、360浏览器开发扩展插件教程(2)为html添加行为

上一节我们已经讲了Chrome扩展的基础知识,并构建了基础的html,这一节我们将就html DOM添加部分添加脚本,即脚本在我们的popup页面中进行的操作,页面所产生的变化。

正常情况下数据处理加载完成状态,这些数据是从本地数据读取的。

css实现限制文本长度

<html><head></head><body><br>
<style type="text/css">
.css1{
 color:#6699ff;border:1px #ff8000 dashed;
 margin-bottom:20px;
 width: 20em;/*不允许出现半汉字截断*/
}
.css2 {
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    white-space: nowrap;/*强制不换行*/
    width: 20em;/*不允许出现半汉字截断*/
    color:#6699ff;border:1px #ff8000 dashed;
}
</style>
<div>Web前端开发 - 专注于网站前端设计与Web用户体验</div>
<div>Web前端开发 - 专注于网站前端设计与Web用户体验</div>
<p></p></body></html>
«12»
搜索
网站分类
最近发表
文章归档

技术支持TTF的家园

Copyright www.ttfde.org. All Rights Reserved.站点统计 Design by TTF的家园