前端大本营

HTML5,CSS3,Responsive,资料站
table-cell进行横向排列的好处 对要素进行横向排列的时候,一般都会使用float, display:inline-block等方法。我们使用table-cell也可以简单的实现, 利用table-cell来制作横向排列的好处我觉得有三点(呵呵呵,有些牵强)
  • float以及 clear:both都可以省略了
  • 纵向居中也可以了
  • 就算使用border和padding也不会顶出边框了
clear:both可以使用display:inline-block替换,display:table-cell最主要的是纵向居中。 还有就是在响应式设计的时候,padding和border不会导致样式顶出边框的问题。再也不需要计算宽度和使用box-sizing了。

table-cell制作的横向排列

首先介绍一下table-cell的基本写法 例,我们制作一个,一般网站中都会出现的左图右文的样式 图片1
<div class="list-box">
  <a href="XXXX.html">
    <div class="list-img"><img src="xxx/xxx.jpg" alt="XXXX"></div>
    <div class="list-text">text text text text text text text text text</div>
  </a>
</div>
CSS样式
.list-box {
  display: table;
}
.list-img,
.list-text {
  display: table-cell;
  vertical-align: middle;
}
方法非常简单,父元素上添加 display:table,并在子元素上添加display:table-cell即可。为了实现纵方向的居中,添加vertical-align:middle 最后,这回的例我们没有使用ul li,但是同样能够实现列表的样式,将list-img,和 list-text的div改成li即可。
Posted in CSS最新技术 | 【CSS】不使用float,利用table-cell来创建水平菜单已关闭评论
本文我们将为jQuery用户分享8个超实用的技巧攻略。jQuery是JavaScript最好的库之一,主要用于制作动画、事件处理,支持Ajax及HTML 脚本客户端。此外,jQuery还拥有各种插件,以帮助开发者在最短时间内快速创建网站/网页。 文中分享的这些实用代码,希望你会喜欢。 1)禁用右键单击功能 如果你想为用户节省网站信息,那么开发者可以使用这段代码——禁用右键单击功能。
<font><font>$(document).ready(function() {
//catch the right-click context menu
$(document).bind("contextmenu",function(e) {
//warning prompt - optional
alert("No right-clicking!");
//delete the default context menu
return false;
});
});</font></font>
2)使用jQuery设定文本大小 使用这段代码,用户可根据需求重新设定文本尺寸(增加或减少)。
&lt;font&gt;&lt;font&gt;$(document).ready(function() {
//find the current font size
var originalFontSize = $('html').css('font-size');

//Increase the text size
$(".increaseFont").click(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNumber = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNumber*1.2;
$('html').css('font-size', newFontSize);
return false;
});

//Decrease the Text Size
$(".decreaseFont").click(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
});

// Reset Font Size
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
});&lt;/font&gt;&lt;/font&gt;
3)在新窗口打开链接 使用这段代码会帮助用户在新窗口打开链接,为用户带来更好的用户体验。
$(document).ready(function() {
//select all anchor tags that have http in the href
//and apply the target=_blank
$("a[href^='http']").attr('target','_blank');
});
4)更改样式列表使用这段代码帮助你更改样式列表。
$(document).ready(function() {
$("a.cssSwap").click(function() { 
//swap the link rel attribute with the value in the rel 
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 
}); 
});
5)返回到顶部链接 此代码对于长时间点击单页面非常实用,你可以在重要关头点击“返回顶部”功能。
$(document).ready(function() {
//when the id="top" link is clicked
$('#top').click(function() {
//scoll the page back to the top
$(document).scrollTo(0,500);
}
});
6)获取鼠标指针的X / Y轴
<font><font>$().mousemove(function(e){
//display the x and y axis values inside the P element
$('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});</font></font>
7)检测当前鼠标坐标 使用这个脚本,你可以在任何网络浏览器获取鼠标坐标。
$(document).ready(function() {
$().mousemove(function(e)
{
$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
});
8)图片预加载 此段代码帮助用户快速加载图片或网页页面。
<font><font>jQuery.preloadImagesInWebPage = function()
{
for(var ctr = 0; ctr<arguments.length; ctr++)
{
jQuery("").attr("src", arguments[ctr]);
}
}
To use the above method, you can use the following piece of code:
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
To check whether an image has been loaded, you can use the following piece of code:
$('#imageObject').attr('src', 'image1.gif').load(function() {
alert('The image has been loaded…');
});</font></font>
Posted in 精彩内容 | 8个超实用的jQuery技巧攻略已关闭评论

resize 说明

resize 属性, 指定用户是否可以变更要素尺寸 。<规定可以由用户调整 div 元素的大小。>

属性值

none 不提供用户对要素变更尺寸的功能(默认值)<用户无法调整元素的尺寸。> both 提供用户对要素宽高尺寸的调整功能 <用户可调整元素的高度和宽度。> horizontal 提供用户对要素宽的尺寸调整 <用户可调整元素的宽度。> vertical 提供用户对要素高的尺寸调整 <用户可调整元素的高度。> inherit 继承父要素的属性值
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> outline-offset </title>
<style>
div.sample1 {
width:200px; height:50px;
border:1px solid; background-color:yellow; 
overflow:auto;
resize:both;
}	
</style>

</head>

<body>
<div class="sample1">resize:both; </div>	
</body>
</html>
实例图
resize:both;
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 用户接口 | resize 指定用户是否可以变更要素尺寸 —— CSS3 参考 UI接口已关闭评论

outline-offset 说明

box-sizing 属性, 指定边框外轮廓的值 。<对轮廓进行偏移,并在边框边缘进行绘制。>

属性值

length 边框距边框外轮廓的距离(默认值为0)<轮廓与边框边缘的距离。> inherit 继承父元素的属性值 <规定应从父元素继承 outline-offset 属性的值。>
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> outline-offset </title>
<style>
.sample {outline:dotted 2px red;}
.sample:focus {outline-offset:5px;}
</style>

</head>

<body>
<form action="xxx" method="post">
<p>
姓名<br>
<input name="namae" type="text" class="sample">
</p>
<p>
内容<br>
<textarea name="goiken" cols="40" rows="4" class="sample"></textarea>
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
</body>
</html>
实例图 outline-offset
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 用户接口 | outline-offset 指定边框外轮廓的值 —— CSS3 参考 UI接口已关闭评论