css3曲线阴影效果

<div class="wrapper effect">
	<h1>Shadow Effect</h1>
</div>

 

body {
	margin: 0;
}
ul {
	margin: 0;
	list-style: none;
}
.wrapper {
	width: 70%;
	height: 200px;
	margin: 50px auto;
	background: #fff;
}
.wrapper h1 {
	font-size: 20px;
	text-align: center;
	line-height: 200px;
}
.effect {
	-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .3), 0px 0px 4px rgba(0, 0, 0, .1) inset;
	box-shadow: 0px 1px 4px rgba(0, 0, 0, .3), 0px 0px 4px rgba(0, 0, 0, .1) inset;
	position: relative;
}
.effect:before {
	content: '';
	background: #f00;
	position: absolute;
	z-index: -1;
	left: 10px;
	right: 10px;
	top: 50%;
	bottom: 0;
	-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .8);
	box-shadow: 0px 0px 20px rgba(0, 0, 0, .8);
	border-radius: 100px/10px;
}

QQ20150330-1

发表在 Linux | 留下评论

jquery mobile 新闻类app结构

<section data-role="page" id="foo" data-transition="slide">
	<header data-role="header" data-position="fixed" data-theme="b">
		<h1>World Wide Web Hacker</h1>
		<div data-role="navbar">
		    <ul>
				<li><a href="" class="ui-btn-active">Lorem.</a></li>
				<li><a href="">Lorem.</a></li>
				<li><a href="">Lorem.</a></li>
				<li><a href="">Lorem.</a></li>
				<li><a href="">Lorem.</a></li>
			</ul>
		</div>
	</header>
	<article data-role="main" class="ui-content">
		
	</article>
	<footer data-role="footer" data-position="fixed" data-theme="b">
		<div data-role="navbar">
		    <ul>
				<li><a href="" data-icon="home" class="ui-btn-active">Lorem.</a></li>
				<li><a href="" data-icon="grid">Lorem.</a></li>
				<li><a href="" data-icon="star">Lorem.</a></li>
				<li><a href="" data-icon="gear">Lorem.</a></li>
				<li><a href="" data-icon="home">Lorem.</a></li>
			</ul>
		</div>
	</footer>
</section>

 

发表在 Linux | 留下评论

jquery mobile loader

<section data-role="page" id="foo" data-transition="slide">
	<header data-role="header" data-position="fixed" data-theme="b">
		<h1>World Wide Web Hacker</h1>
	</header>
	<article data-role="main" class="ui-content">
		<button id="show" data-textonly="false" data-textvisible="false" data-msgtext="" data-inline="true" data-theme="b">Show</button>
		<button id="hide" data-textonly="false" data-textvisible="false" data-msgtext="" data-inline="true">Hide</button>
	</article>
	<footer data-role="footer" data-position="fixed" data-theme="b">
		<h4>Powered by Musikar</h4>
	</footer>
</section>

 

$(document).on('click', '#show', function() {
	var $this = $(this),
	theme = $this.jqmData('theme') || $.mobile.loader.prototype.options.theme,
	msgText = $this.jqmData('msgtext') || $.mobile.loader.prototype.options.text,
	textVisible = $this.jqmData('textvisible') || $.mobile.loader.prototype.options.textVisible,
	textonly = !!$this.jqmData('textonly'),
	html = $this.jqmData('html') || '';

	$.mobile.loading('show', {
		text: msgText,
		textVisible: textVisible,
		theme: theme,
		textonly: textonly,
		html: html
	});
});

$(document).on('click', '#hide', function() {
	$.mobile.loading('hide');
});

 

发表在 前端技术 | 留下评论

bootstrap checkbox、radio按钮组

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-6">
			<div class="btn-group" data-toggle="buttons">
				<label class="btn btn-primary active">
					<input type="checkbox" autocomplete="off" checked="checked" /> Checkbox 1 (pre-checked)
				</label>
				<label class="btn btn-primary">
					<input type="checkbox" autocomplete="off" /> Checkbox 2
				</label>
				<label class="btn btn-primary">
					<input type="checkbox" autocomplete="off" /> Checkbox 3
				</label>
			</div>
		</div>
		<div class="col-xs-6">
			<div class="btn-group" data-toggle="buttons">
				<label class="btn btn-primary active">
					<input type="radio" autocomplete="off" checked="checked" /> Radio 1 (pre-checked)
				</label>
				<label class="btn btn-primary">
					<input type="radio" autocomplete="off" /> Radio 2
				</label>
				<label class="btn btn-primary">
					<input type="radio" autocomplete="off" /> Radio 3
				</label>
			</div>
		</div>
	</div>
</div>

 

发表在 前端技术 | 留下评论

bootstrap button

<button type="button" id="mybtn" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
	Loading state
</button>

 

jQuery(function($) {
	$('#mybtn').on('click', function() {
		var $btn = $(this).button('loading');
		setTimeout(function() {
			$btn.button('reset');
		}, 3000);
	});
});

 

发表在 前端技术 | 留下评论

解决Android Studio 正式版无法在线更新的问题

Android Studio 是可以在线增量更新的,但是可能连不上服务器更新,解决办法如下:

1.修改系统hosts文件,添加如下2行

203.208.46.146   dl-ssl.google.com

203.208.46.146   dl.google.com

2.修改Android Studio\bin目录下的studio.vmoptions (32位系统) 或者 studio64.vmoptions (64位系统)文件,添加如下3行

-Djava.net.preferIPv4Stack=true

-Didea.updates.url=http://dl.google.com/android/studio/patches/updates.xml

-Didea.patches.url=http://dl.google.com/android/studio/patches/ 重启Android Studio应该就可以更新了,更新时应使用管理员权限打开Android Studio。

3.如果仍然无效,将url里的修改http为https,然后重启点击Check Update试试。

本方法在Win10系统上使用Android Studio 1.0.1验证通过。

发表在 Linux | 留下评论

A new micro clearfix hack

The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required.

Demo: Micro clearfix hack

Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

The “micro clearfix” method is suitable for modern browsers and builds upon Thierry Koblentz’s “clearfix reloaded”, which introduced the use of both the :before and :after pseudo-elements.

Here is the updated code (I’ve used a shorter class name too):

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

This “micro clearfix” generates pseudo-elements and sets theirdisplay to table. This creates an anonymous table-cell and a new block formatting context that means the :before pseudo-element prevents top-margin collapse. The :after pseudo-element is used to clear the floats. As a result, there is no need to hide any generated content and the total amount of code needed is reduced.

Including the :before selector is not necessary to clear the floats, but it prevents top-margins from collapsing in modern browsers. This has two benefits:

  • It ensures visual consistency with other float containment techniques that create a new block formatting context, e.g.,overflow:hidden
  • It ensures visual consistency with IE 6/7 when zoom:1 is applied.

N.B.: There are circumstances in which IE 6/7 will not contain the bottom margins of floats within a new block formatting context. Further details can be found here: Better float containment in IE using CSS expressions.

The use of content:" " (note the space in the content string) avoids an Opera bug that creates space around clearfixed elements if the contenteditable attribute is also present somewhere in the HTML. Thanks to Sergio Cerrutti for spotting this fix. An alternative fix is to use font:0/0 a.

Legacy Firefox

Firefox < 3.5 will benefit from using Thierry’s method with the addition of visibility:hidden to hide the inserted character. This is because legacy versions of Firefox need content:"." to avoid extra space appearing between the body and its first child element, in certain circumstances (e.g.,jsfiddle.net/necolas/K538S/.)

Alternative float-containment methods that create a new block formatting context, such as applying overflow:hidden ordisplay:inline-block to the container element, will also avoid this behaviour in legacy versions of Firefox.

发表在 Linux | 留下评论

bootstrap input focus状态样式

#focusedInput {
	border-color: rgba(82, 168, 236, .8);
	outline: 0;
	outline: thin dotted \9;
	-webkit-box-shadow: 0 0 8px rgba(82, 168, 236,.6);
	box-shadow: 0 0 8px rgba(82, 168, 236,.6);
}

 

发表在 Linux | 留下评论

mysql 两张表数据对比

前提是字段和类型必须一致

用左链接 left  join  on
如   
表shanghai  有数据  
表 _tbl_code  无数据
$sql=”SELECT sh.Name,sh.Code from shanghai sh LEFT JOIN  _tbl_code co ON sh.Code=co.Code WHERE co.Name is Null”;
发表在 Linux | 留下评论

configure: error: cannot run C compiled programs.

error: cannot run C compiled programs

这个报错只要在编译参数最后加上 –host=x86_64即可

 

 

发表在 Linux | 留下评论