Tag: DIV

CSS定义HR和DIV成一条水平虚线

线条的CSS的两个样式：
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
水平线条，我们可以用hr来实现，也可以定义一个div，将它的高度设为1px或其它你想要的高度。

1、CSS定义一条水平虚线hr的方 Continue reading "CSS定义HR和DIV成一条水平虚线"

免费DIV+CSS视频教程下载

DIV＋CSS当今WEB开发流行前台页面布局方式。 完整的代码演示，细致的讲解，高胖胖老师带你迅速掌握DIV+CSS应用技巧。

DIV+CSS视频教程（一）下载地址:
http://www.phpchina.com/download/vido/div.css1/div.css1.rar
DIV+CSS视频教程（二）下载地址:
http://www.phpchina.com/download/vido/div.css2/div.css2.rar
DIV+CSS视频教程（三）下载地址:
http://www.phpchina.com/download/vido/div.css3/div.css3.rar
DIV+CSS视频教程（四）下载地址:
http://www.phpchina.com/download/vido/div.css4/div.css4.rar
DIV+CSS视频教程（五）下载地址:
http://www.phpchina.com/download/vido/div.css5/div.css5.rar

注意：视频资料来源于http://www.phpchina.com,只供大家学习交流之用,请勿用于商业用途!

在线观看DIV+CSS视频教程地址：

1、CSS基本概念
CSS初探 - CSS基本知识 - 第1课http://learning.artech.cn/uploads/2007/05/30/20070530.html

CSS基本语法与核心概念 - CSS基本知识 - 第2课http://learning.artech.cn/uploads/2007/05/31/20070531.html

设置丰富的文字效果 - CSS基本知识 - 第3课http://learning.artech.cn/uploads/2007/06/01/20070601.html

2、CSS/DIV布局专题讲解

设置图片效果 - CSS/DIV专题讲解 - 第1课http://learning.artech.cn/uploads/2007/06/04/20070604.html

设置网页背景 - CSS/DIV布局专题讲解 - 第2课http://learning.artech.cn/uploads/2007/06/05/20070605.html

设置表格与表单的样式 - CSS/DIV布局专题讲解 - 第3课http://learning.artech.cn/uploads/2007/06/06/20070606.html

设置页面和浏览器的元素 - CSS/DIV布局专题 - 第4课http://learning.artech.cn/uploads/2007/06/07/20070607.html

用CSS制作漂亮的菜单- CSS/DIV布局专题讲解 - 第5课 http://learning.artech.cn/uploads/2007/06/08/20070608.html

CSS滤镜的应用 - CSS/DIV布局专题讲解 - 第6课http://learning.artech.cn/uploads/2007/06/11/20070611.html

理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课http://learning.artech.cn/uploads/2007/06/12/20070612.html

CSS排版 - CSS/DIV布局专题讲解 - 第8课http://learning.artech.cn/uploads/2007/06/13/20070613.html

网页变幻 - CSS/DIV布局专题讲解 - 第9课http://learning.artech.cn/uploads/2007/06/14/20070614.html

3、CSS与其他技术

CSS与javascript的综合应用 - CSS与其他技术 - 第1课http://learning.artech.cn/uploads/2007/06/15/20070615.html

CSS与XML的综合运用 - CSS与其他技术 - 第2课http://learning.artech.cn/uploads/2007/06/18/20070618.html

CSS与AJAX的综合应用 - CSS与其他技术 - 第3课http://learning.artech.cn/uploads/2007/06/19/20070619.html

4、CSS/DIV综合实践

博客设计DIY - CSS/DIV综合实践 - 第1课 http://learning.artech.cn/uploads/2007/06/20/20070620.html

小型工作室 - CSS/DIV综合实践 - 第2课 http://learning.artech.cn/uploads/2007/06/21/20070621.html

公司网站 - CSS/DIV综合实践 - 第3课http://learning.artech.cn/uploads/2007/06/22/20070622.html

JavaScript自动关闭的DIV公告框代码

实现效果：
使用JAVA和DIV组合让公告框在规定的时间内自动关闭。

完整代码内容如下：

<div style="width:645px; margin:auto;" id="gdGonggaoBox01">
<div align="right"><a onclick="document.getElementById('gdGonggaoBox01').style.display='none';" href="#">关闭 </a></div>
<div align="center"><strong>关于XXX调整的公告</strong></div>
<div><p>     尊敬的XX客户：<br />        为使广大客户更容易了解自己的积分，方便参与XXX公司客户积分计划，XXX公司自即日起，对积分计划规则进行调整升级。...... <a href="http://429006.com/" target="_blank"><font color="#FF0000">【查看详情】</font></a> </p></div>
</div>
<script language="JavaScript" type="text/javascript">
function hidengonggao()
{
document.getElementById('gdGonggaoBox01').style.display='none'
};
setTimeout(hidengonggao,30000);
//setInterval("timer.innerText--;if(timer.innerText<='0')timer.innerText=='0';",1000);
</script>

SEO优化中的div&css命名规则

SEO（搜索引擎优化）对代码的优化是一个很关键的步骤。为了更加符合SEO的规范，下面中部IT网将对目前流行的CSS+DIV的命名规则整理如下：

页头:header
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendLink
页脚:footer
版权:copyRight

1.CSS ID 的命名
外　套:　　wrap
主导航:　　mainNav
子导航:　　subnav
页　脚:　　footer
整个页面:　content
页　眉:　　header
页　脚:　　footer
商　标:　　label
标　题:　　title
主导航:　　mainNav(globalNav)
顶导航:　　topnav
边导航:　　sidebar
左导航:　　leftsideBar
右导航:　　rightsideBar
旗　志:　　logo
标　语:　　banner
菜单内容1: menu1Content
菜单容量:　menuContainer
子菜单:　　submenu
边导航图标:sidebarIcon
注释:　　　note
面包屑:　　breadCrumb(即页面所处位置导航提示)
容器:　　　container
内容:　　　content
搜索:　　　search
登陆:　　　login
功能区:　　shop(如购物车，收银台)
当前的　　　current

2.另外在编辑样式表时可用的注释可这样写:
内容区

3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

CSS定义某一DIV的链接字体颜色和大小

默认网页的连接文本是蓝色的，已访问的连接是紫色的。如果使用CSS的话就可以改变这些默认的定义，首先我们要知道这些代码如何的定义

a: link 用在为访问的连接上。
a :visited 用在已经访问过的连接上。
a :hover 用于鼠标光标置于其上的连接。
a :active 用于获得焦点（比如，被点击）的连接上。

如果给特定的DIV设定与其他DIV不一样的链接样式，就必须单独的定义

如：

.tab {
padding-left: 16px;
font-size: 16px;
font-weight: bold;
}
.tab a{
color: #000;
}
.tab active{
color:#000
}

或者是：

#news{font-size:14px; color:#CC3300; margin-left:20px; line-height:22px;}
#news a{font-size:14px; color:#CC3300; text-decoration:none; line-height:22px;}
#news a:hover{color:#000000; font-size:14px;}
#news a:visited{ color:#999999;}
#news a:active{font-size:20px;color:#333333;text-decoration:underline;}

DIV实现欺骗性的超链接

pop：主要是在文字上面放一个DIV的层的链接使状态栏显示层的链接，而没有显示文字的链接

效果：打开浏览器会有一个超级链接。把鼠标放上去会变成手型，状态栏也显示是www.baidu.com，但是如果点击，将会指向另外一个网站。

将下面的代码保存为保存为 *.html

代码：

<div><a id="link" href="http://429006.com/" target="blank"></a></div>
<div>
<table><caption><label for="link">
<span style="text-decoration: underline;">www.baidu.com</span>
</label>
</caption>
<tbody></tbody>
</table>
</div>

隐藏如51la、cnzz、yahoo统计等的DIV框架图标的代码

pop：开始以为把宽和高设置成0就可以隐藏了，但是一测试发现不行，后来找到了一个代码就可以搞定了。不过希望大家还是把统计代码显示出来，毕竟免费用别人的，算是一个汇报别人了。

利用下面的这段代码可以隐藏如51la、cnzz、yahoo统计等的图标

代码1：<div style="display:none">这里放统计代码</div>

代码2：<div style="visibility:hidden">这里放统计代码</div>

完整代码演示：

<!--51la开始-->
<div style="visibility:hidden;">
<script language="javascript" type="text/javascript" src="http://js.users.51.la/1.js"></script>
<noscript><a href="http://www.51.la/?1" target="_blank"><img alt="我要啦免费统计" src="http://img.users.51.la/1.asp" style="border:none"/></a>
</noscript></div>
<!--51la结束-->