分类目录:随意说

分享交流共进!

qcms 留言本DIY

<span style="font-size: large;"><span style="color: #ff0000;"><span style="color: #ff0000;">原文(转自qcms官方)</span></span></span>
 
<span style="font-size: large;"><span style="color: #ff0000;"><span style="color: #ff0000;"><a href="http://qesy.5d6d.com/thread-177-1-1.html">http://qesy.5d6d.com/thread-177-1-1.html</a></span></span></span>
 
<span style="font-size: large;"><span style="color: #ff0000;"> </span></span>
 
<span style="font-size: large;"><span style="color: #ff0000;"><span style="color: #ff0000;">效果:
<a href="http://www.xiyyx.cn/qcms/guest.asp" target="_blank">http://www.xiyyx.cn/qcms/guest.asp</a></span></span></span>
 
<span style="font-size: large;"> </span>
 
<span style="font-size: large;"><span style="color: #ff0000;">开始吧。</span></span>

ie6双倍边距解决办法!

div {
     float:left;
     margin-left:10px;
     width:420px;
     height:150px;
     border:1px solid red
     }

 

  这样设置以后。本来左边距设置为10px,但IE6.0解释为20px,这是一个比较头疼的问题。
  但解决也非常简单。办法就是是加上display:inline。就搞定了。

DIV CSS实例:橙蓝互换的CSS翻页效果

  CSS翻页效果在实际开发中是最常遇见的情况

  在前面的教程中我们曾经介绍过一篇相关的文章:
  DIV CSS实例:一款不错的CSS翻页效果(DIGG)
  http://www.52css.com/article.asp?id=647

  但编码不够优化,有些地方比较烦琐!

  现在我们再看这一款CSS翻页效果
  最终效果www.52CSS.com如下图所示

2200811801839

  下面的图片是本案例中的链接背景图片:

v200811802116
  下面是XHTML编码:

 Example Source Code
[www.52css.com]
<div id=”pagebar”>
    <a href=”#”><<</a>
    <span class=”page_now”>1</span>
    <a href=”#”>2</a>
    <a href=”#”>3</a>
    <a href=”#”>4</a>
    <a href=”#”>5</a>
    <a href=”#”>6</a>
    <a href=”#”>7</a>
    <a href=”#”>8</a>
    <a href=”#”>9</a>
    <a href=”#”>10</a>
    <a href=”#”>11</a>
    <a href=”#”>12</a>
    <a href=”#”>13</a>
    <a href=”#”>14</a>
    <a href=”#”>15</a>
    <a href=”#”>>></a>
</div>

  下面是CSS编码:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
* {
    margin:0;
    padding:0;
    text-decoration:none;
}
#pagebar {
    float:left;
    display:inline;
    width:570px;
    height:32px;
    margin:50px;
    font-size:13px; }
#pagebar a,#pagebar .page_now {
    display:block;
    float:left;
    margin-right:4px;
    padding:2px 5px;
    border:1px solid #f30;
    color:#fff;
    font-weight:800;
    background:url(pagebar_bg.png) repeat-x  0 0 ;
}
#pagebar a {
    display:inline;
}
#pagebar a:hover {
    border:1px solid #03c;
    background-position:0 -30px;
}
#pagebar .page_now {
    border:1px solid #333;
    background-image:none;
    background:#666;
}

  最终的运行效果:

 Source Code to Run [
www.52css.com]

    [ 可先修改部分代码 再运行查看效果 ]

xhtml+div+css设计者要注意的几个地方(转载)

1. 要有合理并赋有语义的化的 属性。
例如:
头部布局 hearter
页面盒子 main
页脚 footer
窗口盒子 nav 。。。。。。。
2. 在书写CSS过程中,要区别对待 id 与 clss ,id 为页面唯一样式 class 是可多出引用的样式。
例如:
<div id=”nav_left”>01</div>
<div id=”nav_left”>02</div>
<div id=”nav_left”>03</div>
这样做是错误的,且不符合 W3C对于 XHTML的标准化规范。正确的写法就是用class
<div>01</div>
<div>02</div>
<div>03</div>
3. 在XHTML CSS 中不要属性标签不能使用大写,因为XHTML中对于大小写是很敏感的,在Transitional模式下的确可以容纳这些错误,但是无法通过W3C验证的。Strict模式下是绝对不允许出现的。
例如:
<BR> <DIV> 等等的所有属性标签。
正确的是:
<br /> <div>
4. 在XHTML中要确保有开始就有关闭。
例如:
<ul>
<li>首页
<li>产品
</ul>
<p> 您现在的位置<br>
这样是不对的,正确的写法为
<ul>
<li>首页</li>
<li>产品</li>
</ul>
<p><span> 您现在的位置</span></p><br />说明 br 因为一个独立的标识所以作为一个个体完整的标识存在 其关闭形式就是 <br />
5. 如果在CSS文件中使用了 float 浮动属性 那么在IE6中就会极容易出现双倍浮动的BUG
例如:
#div { float:left; padding:10px; width:300px; height:580px;}
那么这个div 很容易就会在IE6中出现 宽达到600px 的BUG 这样就会导致IE6中出现页面错位混乱的情况。
解决方法目前只能采用CSS HACK 的写法
区别IE6与FF:
background:#000;*background:#CCC;
区别IE6与IE7:
background:#F30 !important;background:#00F;
区别IE7与FF:
background:#F63; *background:#F33;
区别FF,IE7,IE6:
backgroundrange;*background:green !important;*background:blue;
注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
IE6                      IE7                    FF
*                √                        √                      ×
!important  ×                        √                      √
——————————————————————————–
另外再补充一个,下划线”_”,
IE6支持下划线,IE7和firefox均不支持下划线。
还有一种写法就是 display:inline  就是将元素显示为行内元素.
#div {display:inline;  float:left; padding:10px; width:300px; height:580px;}
6. CSS中是可以进行缩写的。
例如颜色 白色 完整的颜色代码是 #FFFFFF 根据 RR GG BB 的缩写规则可以缩写为 #FFF
注意:有些代码是不可以缩写的 例如 #0D2345 墨蓝色 是不符合 RR GG BB的缩写规范的所以必须采用全写方式,最后要注意的一点是 颜色代码要大写

最后一些 XHTML+CSS 的常用命名
CSS命名规则
头:header
内容:content/containe
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner

XHTML文件中id的命名
(1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

FastCMS留言调用代码

新建一静态(html)文件,在适当位置加入下面代码  查看演示

<script type=“text/javascript”>

  • var iframeids=[“frameGB”]
  • var iframehide=“yes”
  • var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf(“Firefox”)).split(“/”)[1]
  • var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0
  • function resizeCaller() {
  • var dyniframe=new Array()
  • for (i=0; i<iframeids.length; i++){
  • if (document.getElementById)
  • resizeIframe(iframeids[i])
  • //reveal iframe for lower end browsers? (see var above):
  • if ((document.all || document.getElementById) && iframehide==”no”){
  • var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
  • tempobj.style.display=“block”
  • }
  • }
  • }
  • function resizeIframe(frameid){
  • var currentfr=document.getElementById(frameid)
  • if (currentfr && !window.opera){
  • currentfr.style.display=“block”
  • if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight)
  • currentfrcurrentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
  • else if (currentfr.Document && currentfr.Document.body.scrollHeight)
  • currentfrcurrentfr.height = currentfr.Document.body.scrollHeight;
  • if (currentfr.addEventListener)
  • currentfr.addEventListener(“load”, readjustIframe, false)
  • else if (currentfr.attachEvent){
  • currentfr.detachEvent(“onload”, readjustIframe)
  • currentfr.attachEvent(“onload”, readjustIframe)
  • }
  • }
  • }
  • function readjustIframe(loadevt) {
  • var crossevt=(window.event)? event : loadevt
  • var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
  • if (iframeroot)
  • resizeIframe(iframeroot.id);
  • }
  • function loadintoIframe(iframeid, url){
  • if (document.getElementById)
  • document.getElementById(iframeid).src=url
  • }
  • if (window.addEventListener)
  • window.addEventListener(“load”, resizeCaller, false)
  • else if (window.attachEvent)
  • window.attachEvent(“onload”, resizeCaller)
  • else
  • window.onload=resizeCaller
  • </script>
  • <iframe id=“frameGB” src=“/GuestBook.asp” scrolling=“no” marginwidth=“0” marginheight=“0” frameborder=“0” vspace=“0” hspace=“0” style=“overflow:visible; width:100%; display:none”></iframe>
  • fastcms标签说明

     

     

    fastcms标签说明 

    终极栏目标签(含分页)
    [Fast:NewsChildList Target=”_blank” Length=”15″ DateFormat=”{Y}年{m}月{d}日” CssTitle=”blue” CssClass=”red” Style=”|{class}{title}{date}|”]
    Target : 打开方式     [_blank]
    Length : 标题长度     [40]
    DateFormat : 日期格式 [{m}-{d}]
     {Y} : 4位年
     {y} : 2位年
     {M} : 不补位的月
     {m} : 补位的月,如03,01
     {D} : 不补位的日
     {d} : 补位的日
     {H} : 不补位的小时
     {h} : 补位的小时
     {MI}: 不补位的分钟
     {mi}: 补位的分钟
     {S} : 不补位的秒
     {s} : 补位的秒
    CssClass : 类别链接样式(外部CSS样式表文件)
    CssTitle : 标题链接样式(外部CSS样式表文件)
    Style : 显示样式 (内容须写在”| |”之间) [{title}{date}<br>]
     {class} : 栏目名称
     {title} : 标题
     {date}  : 日期
     实例 : Style=”|<tr><td height=’25’>·[{class}]{title}({date})</td></tr>|”
    大类(有下级栏目的类别):
    指定新闻栏目标签
    [Fast:NewsClassList ClassID=”1″ TopNum=”5″ Target=”_blank” Type=”hot” Length=”20″ CLength=”100″ DateFormat=”{Y}年{m}月{d}日”
    CssClass=”blue” CssTitle=”red” CssImg=”” Style=”|{class}{title}{date}{img}{content}|”]
    ClassID : 栏目ID(包含下属栏目)
    TopNum : 显示记录条数     [5]
    Target : 打开方式     [_blank]
    Type : 新闻属性     [new]
     new : 最新(默认)
     hot : 热点
     top : 固顶
     elite : 推荐
    Length : 标题长度     [25]
    DateFormat : 日期格式 [{m}-{d}] 同上
    CssClass : 类别链接样式(外部CSS样式表文件)
    CssTitle : 标题链接样式(外部CSS样式表文件)
    CssImg : 图片链接样式(外部CSS样式表文件)
    Style : 显示样式 (内容须写在”| |”之间) [{title}{date}<br>] 同上
            {img} 图片链接 与前面的CssImg样式配合使用 只提取对应栏目的图片文章
        {content} 文章内容 根据CLength截取显示的内容

    指定图片标签
    [Fast:PicClassList ClassID=”1″ TopNum=”5″ Target=”_blank” Type=”hot” Length=”20″ DateFormat=”{Y}年{m}月{d}日” CssTitle=”red” CssClass=”green” Style=”|{img}{title}|”]
    ClassID : 栏目ID(包含下属栏目)
    TopNum : 显示记录条数     [5]
    Direction : 排列方式 [Horizontal]
     Vertical : 垂直
     Horizontal : 水平
    Target : 打开方式     [_blank]
    Type : 新闻属性     [new]
     new : 最新(默认)
     hot : 热点
     top : 固顶
     elite : 推荐
    Length : 标题长度     [25]
    DateFormat : 日期格式 [{m}-{d}] 同上
    CssTitle : 标题链接样式(外部CSS样式表文件)
    CssClass : 类别链接样式(外部CSS样式表文件)
    Style : 显示样式 (内容须写在”| |”之间) [{img}<br>{title}]
     {img} : 图片地址
     {class} : 栏目名称
     {title} : 标题
     {date}  : 日期

    页面:
    具体内容标签
    [Fast:data Field=”title” Kind=”string” Format=”20″]
    Field : 表中字段(仅列出常用字段)
     新闻类频道(News):
      Title : 标题
      Author : 作者
      CopyFrom : 来源
      Editor : 添加者
      Hits : 点击次数
      UpdateTime : 更新时间
      Content : 新闻内容
      Keyword : 关键字
      FilePath : 文件路径
    Kind : 类型 [String]
     String : 字符型
     DateTime : 时间型
    Format : 格式
     Kind=”String” 表示长度     [显示全部]
     Kind=”DateTime” 表示日期样式 [{Y}-{m}-{d}] 同上

    当前新闻栏目标签
    [Fast:NewsSelfList TopNum=”5″ Target=”_blank” Type=”推荐” Length=”15″ ShowDate=”true” DateFormat=”{Y}年{m}月{d}日” CssClass=”blue” Style=”|{class}{title}{date}|”]
    TopNum : 显示记录条数     [5]
    Target : 打开方式     [_blank]
    Type : 新闻属性     [new]
     new : 最新(默认)
     hot : 热点
     top : 固顶
     elite : 推荐
     relate : 相关 (此属性只适合在页面中)
    Length : 标题长度     [25]
    DateFormat : 日期格式 [{m}-{d}] 同上
    CssClass : 类别链接样式(外部CSS样式表文件)
    CssTitle : 标题链接样式(外部CSS样式表文件)
    Style : 显示样式 (内容须写在”| |”之间) [{title}{date}<br>] 同上

    栏目导航标签
    [Fast:Location Separator=”>” Target=”_blank” CssTitle=”blue” ShowLink=”false”]
    Separator : 分隔符     [>]
    Target : 打开方式     [_blank]
    CssTitle : 链接样式(外部CSS样式表文件)
    ShowLink : 是否显示链接和主页     [true]
    注:[]内为该标签属性的默认值。
    PicFilterList

    [Fast:Static Title=”” Target=”Top”]

    [Fast:Navigation ParentID=”” Target=”_blank” Css=”blue” Style=”|{name}|”]
    商品标签 与 新闻标签类似
    [Fast:ProductChildList Target=”_blank” Length=”15″ DateFormat=”{Y}年{m}月{d}日” CssTitle=”blue” CssClass=”red” Style=”|{class}{title}{date}|”]
    Target : 打开方式     [_blank]
    Length : 标题长度     [40]
    DateFormat : 日期格式 [{m}-{d}]
     {Y} : 4位年
     {y} : 2位年
     {M} : 不补位的月
     {m} : 补位的月,如03,01
     {D} : 不补位的日
     {d} : 补位的日
     {H} : 不补位的小时
     {h} : 补位的小时
     {MI}: 不补位的分钟
     {mi}: 补位的分钟
     {S} : 不补位的秒
     {s} : 补位的秒
    CssClass : 类别链接样式(外部CSS样式表文件)
    CssTitle : 标题链接样式(外部CSS样式表文件)
    Style : 显示样式 (内容须写在”| |”之间) [{title}{date}<br>]
     {class} : 栏目名称
     {title} : 标题
     {date}  : 日期
     实例 : Style=”|<tr><td height=’25’>·[{class}]{title}({date})</td></tr>|”
    大类(有下级栏目的类别):
    指定新闻栏目标签
    [Fast:ProductClassList ClassID=”1″ TopNum=”5″ Target=”_blank” Type=”hot” Length=”20″ CLength=”100″ DateFormat=”{Y}年{m}月{d}日”
    CssClass=”blue” CssTitle=”red” CssImg=”” Style=”|{class}{title}{date}{img}{content}|”]
    ClassID : 栏目ID(包含下属栏目)
    TopNum : 显示记录条数     [5]
    Target : 打开方式     [_blank]
    Type : 新闻属性     [new]
     new : 最新(默认)
     hot : 热点
     top : 固顶
     elite : 推荐
    Length : 标题长度     [25]
    DateFormat : 日期格式 [{m}-{d}] 同上
    CssClass : 类别链接样式(外部CSS样式表文件)
    CssTitle : 标题链接样式(外部CSS样式表文件)
    CssImg : 图片链接样式(外部CSS样式表文件)
    Style : 显示样式 (内容须写在”| |”之间) [{title}{date}<br>] 同上
            {img} 图片链接 与前面的CssImg样式配合使用 只提取对应栏目的图片文章
        {content} 文章内容 根据CLength截取显示的内容
    当前新闻栏目标签
    [Fast:ProductSelfList TopNum=”5″ Target=”_blank” Type=”推荐” Length=”15″ ShowDate=”true” DateFormat=”{Y}年{m}月{d}日” CssClass=”blue” Style=”|{class}{title}{date}|”]
    TopNum : 显示记录条数     [5]
    Target : 打开方式     [_blank]
    Type : 新闻属性     [new]
     new : 最新(默认)
     hot : 热点
     top : 固顶
     elite : 推荐
     relate : 相关 (此属性只适合在页面中)
    Length : 标题长度     [25]
    DateFormat : 日期格式 [{m}-{d}] 同上
    CssClass : 类别链接样式(外部CSS样式表文件)
    CssTitle : 标题链接样式(外部CSS样式表文件)
    Style : 显示样式 (内容须写在”| |”之间) [{title}{date}<br>] 同上

    栏目导航标签
    [Fast:Location Separator=”>” Target=”_blank” CssTitle=”blue” ShowLink=”false”]
    Separator : 分隔符     [>]
    Target : 打开方式     [_blank]
    CssTitle : 链接样式(外部CSS样式表文件)
    ShowLink : 是否显示链接和主页     [true]
    注:[]内为该标签属性的默认值。

    [Fast:Counter Refresh=1 Pic=True Id=1…5]

    PicFocusList