image
 
收藏文章 楼主
白色简约模板导航菜单美化。
版块:站长交流区   类型:普通   作者:小手牵大手   查看:1620   回复:4   获赞:11   时间:2018-05-13 20:34:14
Image



1:根据官方提供的代码,修改了css,增加了轮播图效果。(手动滑动,不是自动)

2:轮播图下部增加导航菜单。默认4个,如需增加,更改(.pk-daohang{width: 25%;} 更改长度的百分比来缩短间距。)

3:下面是css部分,放在后台—白色简约导航菜单里。2个js文件没在里面,官方下载页有。

4:菜单圆角可更改。(border-radius: 34%;修改百分比就行,50%是圆形。)

<style type="text/css">
.swipe {overflow: hidden;visibility: hidden;position: relative;}
	
.swipe>div:nth-of-type(2) {
padding: 5px 0 0 0;}
	
.swipe>div:nth-of-type(2)>span {
display: inline-block;
 width: 9px;
height: 9px;
border-radius: 49%;
border: solid 1px #FF5722;
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;padding-bottom:10px;text-align: center;}
	
.swipe-wrap>div>div>div>a {display: block;margin: 0 auto;width: 66px;}

.swipe-wrap>div>div>div>a>span:nth-of-type(1) {
float: ;
border-radius: 34%;
font-size: 33px;
background: #8BC34A;
color: #fff;
width: 52px;
height: 52px;
line-height: 52px;
margin-bottom: 8px;}
.swipe-wrap>div>div>div>a>span:nth-of-type(2) {font-size: 14px;color: #FFFFFF;word-break: keep-all;overflow: hidden;} 
.pk-powheight{height:193px;}
.pk-height {height:70px;}
.pk-rowimg{position:absolute;top:0;left:0;width:100%;height:193px;}
.pk-rowsp{text-align:left;position:absolute;bottom:0;left:0;height:43px;line-height: 41px;background: rgba(39,39,39,.7); color:#fff;font-size:16px;width:100%;padding:0 10px 0 10px;overflow: hidden;}
.tubiao{position:absolute;left:10px;bottom:0;color:#fff;font-size:3em;}
.pk-daohang{padding-left: 10px;padding-right: 10px;width: 25%;float: left;position: relative;}



.swipe-wrapp {overflow: hidden;position: relative;}

.swipe-wrapp>div {float: left;width: 100%;position: relative;}

.swipe-wrapp>div>div>div {padding-top: 15px;padding-bottom:10px;text-align: center;}
	
.swipe-wrapp>div>div>div>a {display: block;margin: 0 auto;width: 66px;}

.swipe-wrapp>div>div>div>a>span:nth-of-type(1) {
float: ;
border-radius: 34%;
font-size: 33px;
background: #8BC34A;
color: #fff;
width: 52px;
height: 52px;
line-height: 52px;
margin-bottom: 8px;}
.swipe-wrapp>div>div>div>a>span:nth-of-type(2) {font-size: 14px;color: #FFFFFF;word-break: keep-all;overflow: hidden;} 


</style>

<div id='slider' class='swipe'>
<div class='swipe-wrap'>

<div>
<div class="pk-row pk-powheight">
<img src="http://shujuhs.cn/1_201811221710.jpg"  class="pk-rowimg">
<a href="/index.php?c=read&id=405&page=1"><p class="pk-rowsp">蓝鲸休闲驿站</p></a>
</div>
</div>
		
<div>
<div class="pk-row pk-powheight">
<img src="http://shujuhs.cn/bg3.jpg"  class="pk-rowimg">
<a href="/index.php?c=read&id=432&page=1"><p class="pk-rowsp">
医院的检查报告,这样一看就懂,以后别再问医生了!</p></a>
</div>
</div>

<div>
<div class="pk-row pk-powheight">
<img src="http://shujuhs.cn/bg3.jpg"  class="pk-rowimg">
<a href="#"><p class="pk-rowsp">待定</p></a>
</div>
</div>


<div>
<div class="pk-row pk-powheight">
<img src="http://shujuhs.cn/bg3.jpg"  class="pk-rowimg">
<a href="#"><p class="pk-rowsp">待定</p></a>
</div>
</div>


<div>
<div class="pk-row pk-powheight">
<img src="http://shujuhs.cn/bg3.jpg"  class="pk-rowimg">
<a href="#"><p class="pk-rowsp">待定</p></a>
</div>
</div>

</div>
<div></div>

<div class='swipe-wrapp'>
<div>
<div class="pk-row pk-height">
<div class="pk-daohang">
<a href="index.php">
<span class="fa fa-fw fa-cog" style="background: #8BC34A;"></span>
<span style="color:#8BC34A">最新动态</span>
</a>
</div>
<div class="pk-daohang">
<a href="/index.php?c=forum">
<span class="fa fa-fw fa-th" style="background: #f35d2d;"></span>
<span style="color:#f35d2d">版块列表</span>
</a>
</div>
<div class="pk-daohang">
<a href="">
<span class="fa fa-fw fa-bullhorn" style="background: #ff9800;"></span>
<span style="color:#ff9800">12头条</span>
</a>
</div>
<div class="pk-daohang">
<a href="/index.php?c=list&sortid=8&page=1">
<span class="fa fa-fw fa-commenting-o" style="background: #b355c3;"></span>
<span style="color:#b355c3">反馈建议</span>
</a>
</div>

</div></div></div>

</div>
喜欢点赞呀。。。

 
回复列表
默认   热门   正序   倒序
luntanooo
5F
ccccccLv2 
可以哦
 1   2018-06-29 22:29:15 回复
mmy421
4F
mmy421Lv11 
zhichil支持了
 1   2018-05-16 19:19:32 回复
guest
3F
游客Lv0 
替换原有的css。把原来的删掉
 0   2018-05-14 17:27:07 回复
athome
2F
里面的图片地址都是防盗链,需要自己更换。
 1   2018-05-13 21:04:33 回复

回复:白色简约模板导航菜单美化。

暂无用户组
退出
0级
游客:

公告

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

最新活动

3年个人版授权+2400天豆仅需154元

8年个人版授权+6400天豆仅需385元

终身个人版授权+5600天豆仅需539元

3年尊享版授权+24000天豆仅需1540元

8年尊享版授权+64000天豆仅需3850元

终身尊享版授权+56000天豆仅需5390元

HadSky 官方微信号
服务号 HadSky微信服务号 技术/文档/精帖
订阅号 HadSky微信订阅号 公告/更新/活动
关注送福利,登录送天豆

Powered by HadSky 6.4.0

©2015 - 2018 HadSky

购买产品 用户文档 授权查询 网站绑定 关注公众号 陕ICP备13005805号

您的IP:54.161.77.30,2018-10-17 03:22:23,Processed in 0.05529 second(s).

支持原创软件,抵制盗版,共创美好明天!
已有1次打赏
乐天打赏给楼主27天豆,2018-05-18 08:14:16