模板 
收藏文章 楼主
全新手机模板白色简约666上线!
版块:模板应用   类型:精华   作者:乐天   查看:18901   回复:40   获赞:55   时间:2016-09-23 10:04:01

[2017年9月30日更新内容]

修复版块文章数统计不正确的bug


[2017年3月15日更新内容]

1.修复会员数及帖数显示错误的bug

2.添加搜索和智能返回按钮


参考QQ部落设计。

截图:

ImageImage





以下导航代码复制粘贴在后台 - 模板 - 白色简约 - 导航HTML处,链接、图标及文字自行更改。



导航默认样式:

<div class="pk-row">
	<div class="pk-w-sm-3" style="border-right:solid 1px #EFEFEF;">
		<a href="#"><span class="fa fa-list"></span><br>导航</a>
	</div>
	<div class="pk-w-sm-3" style="border-right:solid 1px #EFEFEF;">
		<a href="#"><span class="fa fa-delicious"></span><br>导航</a>
	</div>
	<div class="pk-w-sm-3" style="border-right:solid 1px #EFEFEF;">
		<a href="#"><span class="fa fa-download"></span><br>导航</a>
	</div>
	<div class="pk-w-sm-3">
		<a href="#"><span class="fa fa-shopping-cart"></span><br>导航</a>
	</div>
</div>

手机可滑动的多导航样式:

<script src="http://m.hadsky.com/template/puyuetian_baisejianyue/js/swipe.min.js"></script>
<style>
	.swipe {
		overflow: hidden;
		visibility: hidden;
		position: relative;
	}
	
	.swipe>div:nth-of-type(2) {
		padding: 10px 0 5px;
	}
	
	.swipe>div:nth-of-type(2)>span {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		border: solid 1px #777;
		margin-right: 4px;
	}
	
	.swipe-wrap {
		overflow: hidden;
		position: relative;
	}
	
	.swipe-wrap>div {
		float: left;
		width: 100%;
		position: relative;
	}
	
	.swipe-wrap>div>div>div {
		padding-top: 15px;
		text-align: center;
	}
	
	.swipe-wrap>div>div>div>a {
		display: block;
		margin: 0 auto;
		width: 56px;
	}
	
	.swipe-wrap>div>div>div>a>span:nth-of-type(1) {
		float: left;
		border-radius: 50%;
		font-size: 28px;
		background-color: #12b7f5;
		color: #fff;
		width: 56px;
		height: 56px;
		line-height: 56px;
		margin-bottom: 5px;
	}
	
	.swipe-wrap>div>div>div>a>span:nth-of-type(2) {
		font-size: 16px;
		color: #555;
		word-break: keep-all;
		overflow: hidden;
	}
</style>
<div id='slider' class='swipe'>
	<div class='swipe-wrap'>
		<div>
			<div class="pk-row">
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-home"></span>
						<span>导航</span>
					</a>
				</div>
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-list-ul"></span>
						<span>导航</span>
					</a>
				</div>
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-th"></span>
						<span>导航</span>
					</a>
				</div>
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-shopping-cart"></span>
						<span>导航</span>
					</a>
				</div>
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-download"></span>
						<span>导航</span>
					</a>
				</div>
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-plug"></span>
						<span>导航</span>
					</a>
				</div>
			</div>
		</div>
		<div>
			<div class="pk-row">
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-home"></span>
						<span>导航</span>
					</a>
				</div>
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-list-ul"></span>
						<span>导航</span>
					</a>
				</div>
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-th"></span>
						<span>导航</span>
					</a>
				</div>
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-shopping-cart"></span>
						<span>导航</span>
					</a>
				</div>
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-download"></span>
						<span>导航</span>
					</a>
				</div>
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-plug"></span>
						<span>导航</span>
					</a>
				</div>
			</div>
		</div>
		<div>
			<div class="pk-row">
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-home"></span>
						<span>导航</span>
					</a>
				</div>
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-list-ul"></span>
						<span>导航</span>
					</a>
				</div>
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-th"></span>
						<span>导航</span>
					</a>
				</div>
				<div class="pk-w-sm-4">
					<a href="#">
						<span class="fa fa-fw fa-shopping-cart"></span>
						<span>导航</span>
					</a>
				</div>
			</div>
		</div>
	</div>
	<div></div>
</div>
<script>
	//导航链接的处理,添加定位控制参数
	$('#slider .swipe-wrap>div a').each(function() {
		var h2;
		$(this).attr('href').indexOf('?') == -1 ? h2 = '?' : h2 = '&';
		$(this).attr('href', $(this).attr('href') + h2 + 'swipe_div_index=' + $(this).parent().parent().parent().index() + '&swipe_a_index=' + $(this).parent().index());
	});
	//添加下面的小灰点
	$('#slider .swipe-wrap>div').each(function() {
		$('#slider>div:eq(1)').append('<span></span>');
	});
	//跳至并选中导航链接
	var swipe_div_index = $_GET('swipe_div_index') || 0;
	var swipe_a_index = $_GET('swipe_a_index') || -1;
	if(swipe_a_index > -1) {
		$('#slider .swipe-wrap>div:eq(' + swipe_div_index + ') a:eq(' + swipe_a_index + ')').css('opacity', 0.2).attr('href', 'javascript:');
	}
	$('#slider>div:eq(1)>span:eq(' + swipe_div_index + ')').css('background-color', '#777');
	window.mySwipe = Swipe($('#slider')[0], {
		startSlide: swipe_div_index,
		callback: function(index, elem) {
			$('#slider>div:eq(1)>span').css('background-color', '#FFF');
			$('#slider>div:eq(1)>span:eq(' + index + ')').css('background-color', '#777');
		}
	});
</script>


导航图标库:http://fontawesome.io/icons/



白色简约(手机模板)


有些梦虽然遥不可及,但并不是不可能实现。 
回复列表
默认   热门   正序   倒序
woshixiaobai
41F
流弊,买不起
 1   2018-12-21 00:45:25  回复
xizi
40F
xiziLv2
学习一下
 2   2018-08-14 12:48:24  回复
lumingjin
39F
可以显示图片吗
 6   2017-10-23 11:18:30  回复
骚年66
38F
豆豆怎么赚
 6   2017-09-12 08:19:38  回复
Fishdeep
37F
正在挣emotion
 8   2017-08-03 22:45:58  回复
520qcf
36F
520qcfLv3
想买
 6   2017-06-06 08:25:00  回复
guest
35F
游客Lv0
导航链接的背景颜色怎么改?
 6   2017-04-19 19:47:33  回复
DoonZhang
34F
DoonZhangLv17
太贵了
 6   2017-04-10 19:31:00  回复
LosMery
33F
LosMeryLv9
努力赚豆豆
 6   2017-04-07 09:05:47  回复
wkdage
32F
乐天天Lv18
授权的用户免费赠送,免费试用的用户想试用
 6   2017-04-05 13:42:24  回复

回复:全新手机模板白色简约666上线!

暂无用户组
退出
0级
天豆:颗
余额:元
游客:

公告

近期本站被人为恶意注册及发布垃圾帖,本站已开启普通用户发帖审核功能,VIP系列用户组不受影响,一但发现发布违法或垃圾帖的用户,该用户账号将会被永久封号,请大家共同维护互联网环境,共创美好互联网未来。

永久免费,购授权享豪礼

3年个人版授权+1400天豆仅需140元

终身个人版授权+2800天豆仅需280元

3年尊享版授权+14000天豆仅需1400元

终身尊享版授权+28000天豆仅需2800元

Powered by HadSky 7.3.5

©2015 - 2019 HadSky

购买产品 用户文档 加入QQ群 授权查询 网站绑定 客户案例 陕ICP备13005805号

您的IP:3.233.226.151,2019-11-16 02:34:24,Processed in 0.06314 second(s).

支持原创软件,抵制盗版,共创美好明天!
头像

用户名:

粉丝数:

签名:

资料 关注 好友 消息
应用名称 白色简约(手机模板)
应用版本 v1.0.0
应用类型 模板
应用售价 333天豆
交易方式 天豆或现金余额
更新时间 2016-09-23
适用版本 3.x及以上版本
演示地址 http://hs.27ui.net/?tn=puyuetian_baisejianyue
在线下载 HS7.0.14及以上版本在线购买/下载
郑重提示 该页面最下面的下载地址为HS6.x版本,HS6.x系列版本且不与HS7.x互通,如果你是2019-04-04之后使用的HS,请点击上方的“HS7.x及以上版本在线购买/下载”进行购买/下载。
已有0次打赏
(55) 分享
分享

请保存二维码或复制链接进行分享

取消