移动端左右滑动菜单css实现方式

移动H5页面左右滑动的导航实现。

一个朋友从北京来电话咨询这个导航的实现,他自己找了一个js插件swiper,实现了PC端的左右滚动切换,在安卓机上滑动不了。

很早的时候我当时审查百度视频的手机站首页,发现他直接CSS写的左右滑动菜单导航。我在今天早上抽了几分钟尝试了下,css来实现这类的导航也很简单的。如下图。

CSS主要的知识点:

1,overflow-x: scroll; overflow-y: hidden;//横向自动,竖向隐藏滚动

2,scrollbar{ width:0;display:none}//隐藏默认滚动条。

3,display: -webkit-box; (display: flex;的兼容写法)弹性盒子模型的声明

HTML

<div class=”global-head”>
<header class=”title_bar”>
<div class=”nav-list”>
<div class=”nav-content”> <a class=”nav-item ” href=”/”>
<div> 热播 </div>
</a> <a class=”nav-item ” href=”/tv”>
<div> 电视剧 </div>
</a> <a class=”nav-item ” href=”/movie”>
<div> 电影 </div>
</a> <a class=”nav-item ” href=”/live”>
<div> 卫视直播 </div>
</a> <a class=”nav-item ” href=”/child”>
<div> 少儿动画 </div>
</a> <a class=”nav-item ” href=”/show”>
<div> 综艺 </div>
</a> <a class=”nav-item ” href=”/comic” >
<div> 动漫 </div>
</a> <a class=”nav-item ” href=”/short/yule”>
<div> 明星 </div>
</a> <a class=”nav-item ” href=”/vipmovie” >
<div> VIP电影 </div>
</a> </div>
</div>
</header>
</div>

CSS

/*css-s*/
::-webkit-scrollbar {
width:0;
height:12px;
display:none
}
.global-head { z-index: 999; width: 100%; top: 0; position: fixed; }
.title_bar { background-color: #2c74e2; height: 46px; line-height: 46px; text-align: center; color: #fff; z-index: 999; position: relative; top: 0; width: 100%; }
.title_bar .nav-content { margin-right: 12px; background-color: transparent; height: 46px; display: -webkit-box; -webkit-box-orient: horizontal; overflow-x: scroll; overflow-y: hidden; }
.title_bar .nav-content .nav-item { display: block; width: auto; margin: 0 10px; text-align: center; line-height: 46px; color: #fff; font-size: 16px; }
/*css-n*/

帝国ecms列表页模版程序代码

帝国ecms列表页程序代码功能
在模版管理中的列表内容模板(list.var) (*)处,勾选使用程序代码按钮。
如下图:

有一个需求在新闻列表页用程序代码判断是否有标题图片、以及格式化摘要的文本。

需要实现如下功能:
1,如果有标题图片,就输出另外一组html模版代码;
2,摘要部分,过滤掉空格、和乱码、首字前的空格;

具体代码如下:

$geshismalltext=str_replace(‘ ’,”,str_replace(‘“’,’“’,str_replace(‘”’,’”’,str_replace(‘&’,’&’,str_replace(‘·’,’·’,$r[smalltext])))));
if(empty($r[titlepic]))
{
$listtemp='<li>
<a href=”[!–titleurl–]” title=”[!–title–]”><div class=”gmzn-item”>
<h2>[!–title–]</h2>
<div class=”ui-tiled”>
<p class=”ui-tiled-item”>’.$geshismalltext.'</p>
</div>
</div></a>
</li>’;
} else {
$listtemp='<li><a href=”[!–titleurl–]” title=”[!–title–]”><div class=”gmzn-item”>
<h2>[!–title–]</h2>
<div class=”ui-tiled”>
<div class=”gmzn-pic”><img src=”[!–titlepic–]” width=”400″ height=”300″ alt=”[!–title–]”/></div>
<p class=”ui-tiled-item”>’.$geshismalltext.'</p>
</div>
</div></a>
</li>’;
}

实现效果图:

再贴一个列表页程序代码功能:
帝国多字段的值,输出会有|,用程序代码可以过滤掉,如下图:

列表页模版过滤多字段的值代码如下:

$keyyouhuiok=”;
$keyyouhui=explode(‘|’,$r[youhui]);
$keyyouhuiok=$keyyouhui[1];
$listtemp='<li><a href=”[!–titleurl–]” title=”[!–oldtitle–]”><div class=”lingyuan-item ui-tiled”>
<div class=”lingyuan-pic”> <img src=”[!–titlepic–]” width=”400″ height=”300″ alt=”[!–title–]”/></div>
<div class=”lingyuan-txt ui-tiled-item”>
<h2>[!–title–]</h2>
<p class=”score”><span> <i class=”icon_rate_up”></i><i class=”icon_rate_up”></i><i class=”icon_rate_up”></i><i class=”icon_rate_up”></i><i class=”icon_rate_up”></i> </span><span>25条点评</span></p>
<p class=”ui-nowrap”>[!–quyu–]/[!–juli–]公里/[!–tese–]</p>
<p class=”price”>[!–jiage–]万起</p>
<span class=”ui-tag”>’.$keyyouhuiok.'</span> </div>
</div></a>
</li>’;

更多模板list.var支持程序代码的官网介绍看:
http://bbs.phome.net/showthread-13-107990-0.html

mac 环境下安装nodejs npm vuejs小记

从nodejs.org 中下载Node.js for Mac 安装包。
下载完毕后,双击安装即可。
官网地址:https://nodejs.org/en/

安装包包涵了 Node.js 和 npm 。
安装完成之后我们打开“终端”:依次输入以下三个命令:
curl http://npmjs.org/install.sh | sh
sudo npm update npm -g
查询是否安装成功:
npm -v

接着需要做的是,使用淘宝的npm镜像模块,在终端中输入以下命令:
npm install -g cnpm –registry=https://registry.npm.taobao.org

安装好nodejs和nam后。可以搭建下vue环境试试:
cnpm install -g vue-cli

剩下的看vue 官网的安装步骤:
相关链接:http://cn.vuejs.org/v2/guide/installation.html
创建一个基于 webpack 模板的新项目
vue init webpack my-project
安装依赖,走你
cd my-project
cnpm install
cnpm run dev

帝国ecms绑定信息ID功能

v6.6 增加的一个小功能,新增栏目可绑定信息ID。

官方说明如下:

http://bbs.phome.net/ShowThread/?threadid=177414&forumid=13

论坛中也不少帖子说这功能的使用方法和使用场景。如下图:

QQ截图20141222231458

帝国cms后台栏目管理处:

这样的企业网站很多见的栏目结构,只要是单页面显示的栏目都可以去绑定一条对应的信息ID。而这比起以前自定义页面,或者其他的个人解决方法来说,结果不重要,重要的是这个小功能能完美的把客户整理的栏目文档搬到网站后台上,当用户在操作时候省去很多麻烦。

Photoshop cc微软雅黑字体渲染优化

 

Photoshop cc 微软雅黑字体渲染优化
Photoshop cc微软雅黑字体渲染优化

网页设计中再也不用告知客户设计图 和 最后生成的页面 有差距的。特别是个人业务上,对客户的需求把控点,任何一个开发阶段都需要得到客户的认可才能进行下一步。避免网站开发完后进行返工。

Photoshop cc微软雅黑字体渲染优化,如上图所示,让客户在最快的时间看到网页开发完上线后的效果图,并且可以做到HTML页面和设计稿 丝毫不差,在网站开发中和客户沟通体验上得到提升。赞一个!