IT技术 – 第 21 页

如何为第一个或最后一个元素甚至是某类规律元素添加样式?

有时候,我们在写DIV+CSS的时候,在某一类相同的元素内想给其中的第一个元素或者最后一个元素,甚至是其中某些特定的有规则的排列的元素添加特别的CSS样式,我们该如何下手?下面我将给大家将就一些在CSS中十分实用的方法.

首先,你可以手动使用下面这段代码来应用修改某个元素的效果(当然这个办法很笨,是个人都知道):

~~http://jsfiddle.net/kingterrors/szCM9/embedded/result,html,css/~~

PS:由于近日(2014年6月)jsfiddle无法正常访问,可能受内网影响,现将之前所有jsfiddle预览去除,不过你仍然可将以上地址拷贝到浏览器预览,或选择尝试以下代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>how to remove margins for first last elements</title>
<style type="text/css">
ul {
    border: 1px solid #000;
    margin: 0;
    padding: 0;
    list-style: none;
    float:left;
}
ul li {
    background:#eee;
    color: #F00;
    margin: 50px;
}
.first {
    color: #000;
    margin-top: 0 !important;
    margin-left: 0 !important;
}
.last {
    color: #0f0;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}
</style>
</head>
<body>
<ul>
  <li class="first">Hello, This is first element</li>
  <li>WOW, so many elements</li>
  <li>WOW, so many elements</li>
  <li>WOW, so many elements</li>
  <li class="last">Here it is, The last element</li>
</ul>
</body>
</html>

当然你也可以利用:first-child伪类和:last-child伪类(当然这种效果IE6完全不支持,IE7,IE8部分支持,其中IE7和IE8效果相同,不支持:last-child),比如:

~~http://jsfiddle.net/kingterrors/44GzJ/embedded/result,html,css/~~

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>how to remove margins for first last elements</title>
<style type="text/css">
ul {
    border: 1px solid #000;
    margin: 0;
    padding: 0;
    list-style: none;
    float:left;
}
ul li {
    background:#eee;
    color: #F00;
    margin: 50px;
}
ul li:first-child {
    color: #000;
    margin-top: 0 !important;
    margin-left: 0 !important;
}
ul li:last-child {
    color: #0f0;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}
</style>
</head>
<body>
<ul>
  <li>Hello, This is first element</li>
  <li>Whidy! so many elements</li>
  <li>Whidy! so many elements</li>
  <li>Whidy! so many elements</li>
  <li>Here it is, The last element</li>
</ul>
</body>
</html>

IE6,IE7,IE8都不能完好支持first-child和last-child伪类

其中还有种很另类的方式,给任意元素的规则性的添加伪类.比如你有5个li元素,你想让每两个li有区别,比如应用在有些特殊列表,你给每两行加上不同的背景色,我这里随便做了个效果给大家参考:

~~http://jsfiddle.net/kingterrors/76jxP/embedded/result,html,css/~~

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>how to remove margins for first last elements</title>
<style type="text/css">
ul {
    border: 1px solid #000;
    margin: 0;
    padding: 0;
    list-style: none;
    float:left;
}
ul li {
    background:#eee;
    color: #F00;
    margin: 50px;
}
ul li:nth-child(2n) {
    color: #000;
    margin-top: 0 !important;
    margin-left: 0 !important;
}
</style>
</head>
<body>
<ul>
  <li>Hello, This is first element</li>
  <li>Whidy! so many elements</li>
  <li>Whidy! so many elements</li>
  <li>Whidy! so many elements</li>
  <li>Here it is, The last element</li>
</ul>
</body>
</html>

当然这个在IE8以下包括IE8的版本都是不被支持的 😯 !

最后总结一下:first-child和:last-child伪类在IE6下是完全不支持的,而IE7和IE8仅支持:first-child,IE9是完全支持的.而:nth-child只有IE9支持,其他的比如Safari 3+, Firefox 3.5+ and Chrome 1+是完全支持以上效果的.

另外,你也可以用jq来控制某个任意元素的样式,之前我也提到过,有兴趣可以看看列表中最后一个元素样式清除修改方法 🙄

如果有兴趣可以参考下原文,Remove Margins for First/Last Elements

wordpress评论区域下方添加表情图标方法

最近研究淘宝网店,顺便自己开了个做测试,没想到拉了个小客户,虽然交易价很便宜只有一元钱,并且花了一会就解决了他的问题.

随后他又遇到了一些问题想我询问,不过我以学习研究的态度帮助了他,这也就是今天要说的内容,何如给wordpress模板的评论区域快添加一排表情.先来看看效果图…

看后大家觉得这个很简单的,其实说简单也简单说有点麻烦也的确有点麻烦.首先我要说的是,调用系统默认的表情是需要在适当的位置添加下面一行代码:

<?php if ( function_exists(cs_print_smilies) ) {cs_print_smilies();} ?>

然而究竟是在哪里添加这段代码呢,我们继续分析研究…

可能回事修改主题的comments.php模板文件,但是当你找到评论区表单部分的时候,你发现居然只有短短的一句话:

<?php comment_form(); ?>

于是这个要么就出现在了整个评论表单区域的前面要么出现在了最底部,这并不美观,更不是我们想要的.所以修改comments.php是做不到的…那么就需要研究一下comment_form();这个函数了,可能是我比较笨,我首先想到的依然是主题目录下的functions.php文件里面修改,恰巧我也找到了,不过略不相同,抱着试试的态度,搜索到了comment_form_default_fields,具体完整代码如下:

add_filter('comment_form_default_fields','MxS_fields');
/** -----------------------------------------------
	 * custom comments
*/ 
if ( ! function_exists('MxS_custom_comments')) {
function MxS_custom_comments($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>">
<div class="message_head">
<span class="avatarx"><?php echo get_avatar($comment,$size='40',$default='' ); ?></span>
<span class="name"><?php comment_author_link() ?></span> <?php edit_comment_link( __( '(Edit)', 'mxs_theme' ), ' ' ); ?>
<span class="reply"><?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => get_option('thread_comments_depth') ) ) ); ?></span>
</div>
<span class="date"><?php comment_date('y/m/d') ?></span>
<div class="clear"></div>
<div class="cmt_text"><?php comment_text(); ?></div>
</div><!-- #comment-##  -->	
<?php }}

当然这个函数之前的语句是与这个函数没有什么关系的.看这个函数,写的是已评论的表单结构.貌似也不对,其中有一句$GLOBALS[‘comment’] = $comment;目测好像是调用系统全局评论变量,具体是啥意思,我这PHP外行也不大明白…改来改去还是没该成功,于是想到会不会是跟系统函数模块有关.于是继续查找…找到了wp-includes/comment_template.php打开一看,仍然搜索comment_form,在1510行,找到了好长一段…耐心读下去..一直看到<?php if ( comments_open() ) : ?>字面上意思是,如果评论功能开启,则执行以下语句,接着看,就发现跟表单相关了.找到

<?php echo $args['comment_notes_after']; ?>
<p class="form-submit">
  <input name="submit" type="submit" id="<?php echo esc_attr( $args['id_submit'] ); ?>" value="<?php echo esc_attr( $args['label_submit'] ); ?>" />
  <?php comment_id_fields( $post_id ); ?>
</p>

其实也就看出来了,我不正是要在submit之前添加表情么?果断在form-submit前面加一行之前提到的表情调用代码,修改如下:

<?php echo $args['comment_notes_after']; ?>
<?php if ( function_exists(cs_print_smilies) ) {cs_print_smilies();} ?>
<p class="form-submit">
  <input name="submit" type="submit" id="<?php echo esc_attr( $args['id_submit'] ); ?>" value="<?php echo esc_attr( $args['label_submit'] ); ?>" />
  <?php comment_id_fields( $post_id ); ?>
</p>

保存,接着刷新一下文章内容页看到评论区域就有了表情了.至此关于wp评论区域调用系统自带的表情图标功能就实现了.是不是很简单啊 😀

PS: 似乎这个方法在现在的3.8.2修改无效了.如果不行就直接装个Custom Smilies插件吧~(2014年4月9日)

PHPCMS数据源功能使用注意事项

上次很抱歉的,上次写了一篇关于PHPCMS V9通过数据源生成代码调用至DISCUZ论坛上的方法<<PHPCMS利用数据源对网站数据调用至其他网站方法>>,但是后来发现有个问题,就是论坛上出现了一个链接地址的问题,经过大量搜索,无果,决定自己想办法解决.

首先说一下问题状况吧.

列表中的地址并非直接引用的外链数据源地址,而是

http://b.net/"http://h.net/6-8540-1.html/"

这又不像其他网站外链提示是否安全再进行正常访问,而这个地址是完全无法用的.我最早考虑的解决方案是因为论坛域名固定,那么长度固定,所以截取前面http://b.net/”这段,但是貌似后面有个双引号也是无法正常访问的.

这样我想到另一个方法,自动找到h.net,并且通过正则表达式判断html为结束段,PHP string方法很强大,都是可以用的,但是觉得这个方法太笨重了.写起来不容易.最终决定在网上找到好的办法,搜索了discuz外链不正确,discuz外链地址等关键字无果.唯一找到一个沾边的内容,说是修改include/discuzcode.func.php文件内function parseurl($url, $text)这个函数

但是,我试过了,完全是两码事,于是放弃了,我尝试发帖的时候外链试试,发现会自动添加[url][/url],是这在模版上加了个,但是HTML和BBS语言在不同的位置上也是不能用的,思考了很久,最后决定试试修改数据源的代码,很巧的事情发生了,我将数据源内的代码改成了

<h3>行业最新产品</h3>
{loop $data $k $v}
    <li>· <a href={$v[url]}>{$v[title]}</a></li>
{/loop}

注意,跟之前的不同,a标签内的双引号我去掉了,就成功了,论坛首页刷新一看,完全正常.至此这个问题就解决了.

PS:我也试过在数据源的这段代码内添加[url]当然这个是完全不成立的还是那句话,HTML是HTML,BBS CODES是BBS CODES…

PHPCMS利用数据源对网站数据调用至其他网站方法

话说,我工作上有个需要,公司论坛上想加个小区域,放一些公司的门户站的最新的新闻等等内容,问怎么解决?

情况: 两个站h.net(PHPCMS V9)是门户站b.net(DISCUZ 7.2)是论坛,当然这两个站都是拥有后台管理权限的!那么b.net有一个区域要放h.net的文章列表,OK,最初我以为是整合两个站,让其关联数据库.其实这个办法是错误的,对于PHPCMS V9这个系统来说,其实有个更好的解决办法,适合初级菜鸟使用,详细操作办法如下:

进入h.net后台,找到 模块 > 模块管理 > 数据源 > 添加数据源调用 弹出一个窗口

这些选项大家应该看得懂吧,我简单说明一下,

1.先看数据源调用配置区,调用方式中模型配置其实就是大家常用的PC标签调用方式,而自定义SQL也就是get sql方式调用的,这里建议新手选择模型配置.选择模型下拉菜单,这个就更不用说了,一般我们如果调用栏目内文章列表,则选择内容模块,接下来选择列表,则出现一些关于调用范围的选项和条件,大家根据自己需要添加,其中值得说明的是,调用附表建议勾上.这个跟字段的是否为主键有关,此处不进行详细说明.

2.公共配置区域,名称可以随便写了,只要你自己看得懂,输出方式,这个比较复杂,如果对动态脚本不熟悉的同学,我建议使用js,我今天也已js为例给大家说一下,选中js后,弹出选择模板,这里我分享一下我得模板,

<h3>最新行业动态</h3>
{loop $data $k $v}
    <li>· <a href="{$v[url]}">{$v[title]}</a></li>
{/loop}

其实跟普通的文章调用方式写的模板相同,缓存时间一般为0,数量自己决定,最后确定,于是就生成了一段代码.接下来我们将在论坛上放置此js代码.

打开论坛系统安装目录的模板目录,一般在安装根目录下的templates文件夹内的某个模板文件夹,我这里修改的是discuz.htm文件,此段代码我插入到

<!--{else}-->
<div id="ad_text"></div>
<!--{/if}-->

我进行简单修改如下:

<div id="ad_text"></div>
<!--{/if}-->
<style>
.linkBox {
  padding-bottom: 10px;
  height:100px;
  width:98%;
  border: 0px solid #6595D6;
  background-color: #E6F6E6;
  clear: both;
  margin:10px auto;
}
.linkBox ul {
  float:left;
  text-align:left;
  width:32%;
}
.linkBox ul h3 {
  margin-left:10px;
}
</style>
<div class="linkBox">
  <ul>
    <script type="text/javascript" src="http://h.net/index.php?m=dbsource&c=call&a=get&id=1"></script>
  </ul>
  <ul>
    <script type="text/javascript" src="http://h.net/index.php?m=dbsource&c=call&a=get&id=1"></script>
  </ul>
  <ul>
    <script type="text/javascript" src="http://h.net/index.php?m=dbsource&c=call&a=get&id=1"></script>
  </ul>
</div>

我这是样本,所以重复三块.仅供大家参考用.最终效果图

对了忘记说了,我这个调用的代码其实调用了两个地方的- -!所以略有不同..z请谅解

PS:其实这个链接效果上虽然成功了,其实还有个小问题…就是链接地址不正确,我后来才发现,又经过半天时间研究,原来是这么个小问题,详情请见<<PHPCMS数据源功能使用注意事项>>