发表于   |   分类于

圣诞节活动，做了一个右侧导航点击和主内容的楼层进行对应。实现过程中遇到了一点小问题，每次点击，都会触发滚动，所以总结一下，希望以后的项目也有所帮助

  • 锚点链接实现
  • 滚动效果的实现

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>项目当中右侧导航与主内容楼层实践</title>
	<!-- Demo Styles -->
	<link href="css/demo.css" rel="stylesheet">

</head>

<body>
	<!--S main-->
    <div class="main">
    	<div class="container">
    		<!--S layer1-->	
    		<div class="layer1"></div>
    		<!--S layer2-->	
    		<div class="layer2" id="002"></div>
    		<!--S layer1-->	
    		<div class="layer3" id="003"></div>
    		<!--S layer1-->	
    		<div class="layer4" id="004"></div>
    		<!--S layer1-->	
    		<div class="layer5"></div>
    	</div>
    	<div class="float">
        	<ul>
        		<li><a href="#002" class="md2" title="Lucky Draw">Lucky Draw</a></li>
        		<li><a href="#003" class="md3" title="Free Shipping">Free Shipping</a></li>
        		<li><a href="#004" class="md4" title="Discount Off">Discount Off</a></li>
        		<li><a href="javascript:void(0);" class="md_backtop" title="返回顶部">返回顶部</a></li>
        	</ul>
        </div>
    </div>
</body>
</html>
阅读全文 »

发表于   |   分类于

随着Web响应式的趋势越来越流行，媒体查询在创建响应式网站中起到了主要作用。利用媒体查询，我们可以针对不同的设备，如显示器、智能手机和平板，来写CSS。在这里我把常用的媒体查询进行了分类总结，希望在以后的工作当中方便查阅。这篇主要是对Samsung Galaxy进行了总结。

Galaxy S3 landscape & portrait

1
2
3
4
5
6
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {

}

Galaxy S3 portrait

1
2
3
4
5
6
7
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {

}

Galaxy S3 landscape

1
2
3
4
5
6
7
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {

}
阅读全文 »

发表于   |   分类于

工作之余，学习了一下CSS3属性，希望日后也能用的到。这个按钮的实现效果，主要是结合transform属性和animation属性来实现。

html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3带心跳浮动固定按钮</title>
</head>
<body>
	<div class="post_btn" style="display: block;">
    	<a class="f_post" path="#" data-click-from="post" rel="nofollow">按钮</a>
	</div>

</body>
</html>
阅读全文 »

发表于   |   分类于

随着CSS3的特性越来越完善和标准化，给开发人员在日常的开发过程中带来了非常方便。而且和javascript相比，达到了相同的效果。这次通过CSS3来实现一个弹窗层效果，方便日后再项目的开发中，提高效率。

  • 项目当中经常会有弹出层的需求
  • 在开发中节约时间
  • 适合PC移动端，实用性比较强

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>HTML5/CSS3弹出层，适合移动PC</title>
	<!-- Demo Styles -->
	<link href="css/demo.css" rel="stylesheet">

	<!-- Modal Styles -->
	<link href="css/modal.css" rel="stylesheet">
</head>

<body>
	<div class="container">
		<h2>HTML5/CSS3弹出层，适合移动PC</h2>
		<p>随着CSS3的特性越来越完善和标准化，给开发人员在日常的开发过程中带来了非常方便。而且和javascript相比，达到了相同的效果。这次通过CSS3来实现一个弹窗层效果，方便日后再项目的开发中，提高效率。</p>
		<p><a href="#modal" class="btn go">快来点我</a></p>
	</div>

	<div id="modal">
		<div class="modal-content">
			<div class="header">
				<h2>HTML5/CSS3弹出层，适合移动PC</h2>
			</div>
			<div class="copy">
				<p>随着CSS3的特性越来越完善和标准化，给开发人员在日常的开发过程中带来了非常方便。而且和javascript相比，达到了相同的效果。这次通过CSS3来实现一个弹窗层效果，方便日后再项目的开发中，提高效率。</p>
			</div>
			<div class="cf footer">
				<a href="#" class="btn">关闭</a>
			</div>
		</div>
		<div class="overlay"></div>
	</div>
</body>
</html>
阅读全文 »

发表于   |   分类于

1.使用负margin值来进行居中

此方法特别适合PC端，例如简单的弹出层。一般设置固定的宽度和高度，然后配合一半大小的负margin值，另外还需要left:50%，top:50%，这样就可以在页面居中啦~

html

1
2
3
4
5
6
<div class="container">
  <div class="box-center box-absolute">
    <h4 class="title">使用负margin值来进行居中</h4>
    <p>此方法特别适合PC端，一般设置固定的宽度和高度，然后配合一半大小的负margin值，另外还需要left:50%，top:50%，这样就可以在页面居中啦~</p>
  </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.container{
  background: #eee;
  color: #4fa46b;
  width: 100%;
  height: 400px;
  margin: 20px auto 40px;
  position:relative;
}
.box-center.box-absolute{
  width: 300px;
  height: 200px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -170px;
  /* (width + padding)/2 */
  margin-top: -120px;
  /* (height + padding)/2 */
}
.container .box-center{
  background: #BBB;
}
.box-center .title {
  padding: 0;
  margin: 0 0 .5em;
  line-height: 1em;
}
.box-center{
  color:#fff;
}
阅读全文 »