页面的自动滚动效果，可由javascript来实现，但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果，无需js控制。使用marquee标记不仅可以移动文字，也可以移动图片，表格等.语法：<marquee>...</marquee>； 说明：在标记之间添加要进行滚动的内容。重要属性：1.滚动方向direction（包括4个值：up、 down、 left和 right） 语法：<marquee direction="滚动方向">...</marquee>2.滚动方式behavior（scro...
水平垂直居中图片及文字(兼容IE6+)实例直接看代码：<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>水平垂直居中</title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><style>* { margin: 0; padding: 0; font-size: 12px; color: #FFF; }.container {display: table; /*主要代码*/*position: r...
本文介绍HTML超级链接详细讲解的实例代码超级链接是网站中使用比较频繁的HTML元素，因为网站的各种页面都是由超级链接串接而成，超级链接完成了页面之间的跳转。超级链接是浏览者和服务器的交互的主要手段，在后面的技术中会逐步深化学习。 — 注意：图片也可以做链接，将在下一章“网页中的图片”详细学习。 4.5.1 给文字添加链接 超级链接的标签是<a></a>，给文字添加超级链接类似于其他修饰标签。添加了链接后的文字有其特殊的样...
CSS3绘图实例代码*{ margin:0; padding:0;}body { background: #fff;}.color1{ background: #ffb400;}.color2{ background: #e78500;}.color3{ background: #bd5d00;}.color4{ background: #9e3300;}.color5{ background: #772400;}div{ overflow: hidden;}.wrapper{ width:450px; height:450px; left:50%; top:50%; margin:-225px 0 0 -225px; position: absolute;}.top{ width:48px; height:62px; top:9px; left:232px; position...
CSS实现的多行文本垂直居中实例代码: 将一行文本在容器中垂直居中是非常简单的，只需要两句代码就好了，例如: div{ width:100px; height:100px; line-height:100px;} 以上代码可以实现单行文本在div中垂直居中效果，只要将div的height属性值和line-height设置为相同就可以了。 但是以上代码并不能实现多行文本垂直居中下过，下面再看一段代码实例: 蚂蚁部落.wrapper { width:200px; height:200px; back...
CSS让div水平居中实例代码:在布局中，往往希望一个div是水平居中的，对于如何让div水平居中，稍有经验的人员都不成问题，只需要一句代码就可以搞定，但是初学者往往可能不清楚，废话不多说了，直接给出代码。 .box{ width:200px; height:200px; margin:0px auto;} 在这里必须要注意的是，div宽度必须要认为的设置，否则无法设置居中。 原文地址是:http://www.softwhy.com/forum.php?mod=view...
CSS实现的鼠标滑过改变链接文字实例代码:鼠标滑过的时候，有时候需要改变链接中的文本，这个如果使用js就比较好实现，当然使用CSS也并不难，下面就是一段这样的代码实例，下面就做一下介绍，希望对需要的朋友带来一定的帮助。代码如下: 蚂蚁部落#Menu{ width:500px; margin:50px auto; border:1px solid #CCC; overflow:hidden;}#Menu ul{ margin:0; padding:0; list-style:none;}#Menu li{ width:100px...
CSS实现的柱状图效果实例代码:柱状图一般用于数据统，比较直观人性化，下面就简单介绍一下如何使用CSS实现此效果。代码实例如下: 蚂蚁部落#wrap { position:relative; width:500px; height:600px;}#wrap div { width:15px; position:absolute; bottom:5px; background:#f00;} 以上代码非常的简单就是采用绝对定位，控制div的位置，这样就实现了并排效果。 原文地址是:http://ww...
CSS实现的鼠标经过链接切换背景图片实例代码:很多导航栏都有这样的效果，当鼠标滑过的时候能够实现背景图片的切换，算是一个比较好的效果吧，也算是对导航栏最基本的美化了。代码实例如下: 蚂蚁部落ul li{ list-style:none; width:150px; height:30px; line-height:30px; text-align:center; float:left; margin-left:5px;}ul li a{ display:block; width:150px; height:30px; text-decoration:none; bac...
div垂直水平居中实例代码:关于让div垂直水平居中的效果太多了，这里就不介绍了，废话不多说，直接给出代码。代码实例如下: 垂直水平居中代码body { background-color:#e1ddd9; font-size:12px; padding:0px; margin:0px;}#inhalt { position:absolute; height:200px; width:400px; margin:-100px 0px 0px -200px; top:50%; left:50%; text-align:left; padding:0px; background-color:#f5f5f5; border:...
CSS制作横向导航菜单实例代码:横向导航菜单是div css布局中最为基础的且必须要掌握额技能，对于稍有布局经验的朋友这都不是问题，但是对于初学者可能未必如此，所以这里分享一段最为基础的布局代码，希望能够给需要的朋友带来帮助。代码如下: 蚂蚁部落ul { float:left; width:100%; padding:0; margin:0; list-style-type:none;}a { float:left; width:7em; text-decoration:none; color:white; backg...
CSS实现的带有箭头的矩形效果实例代码:带有箭头的矩形效果现在应用非常的广泛，例如危险的信息是带有箭头矩形效果，当然它们的实现原理和咱们是不一样的，在网页中当然也有这样的应用，例如弹出信息提示说明，可以用箭头用来作为方位提示，下面就用实例代码简单介绍一下。代码实例如下: 三种纯CSS实现三角形的方法 .message-box { position:relative; width:240px; height:60px; line-height:60px; ...
div css三列布局效果实例代码:三列布局在是比较中规中矩的布局之一，大量的网站都有应用，也是初学者必须要掌握的布局方式之一，下面就是一个三列布局的实例代码，仅供参考之用，希望对初学者有一定的帮助，代码实例如下: 三列布局效果代码实例* { padding:0px; margin:0px;}body { background-color:#e1ddd9;}h1 { font-size:11px; text-align:center; color:#564b47; background-color:#90897a;}strong...
CSS实现div固定于网页右下角实例代码:将一个元素固定于网页右下角的效果使用非常频繁，比如返回顶部的按钮，或者说是信息提示框之类的，下面就介绍一下如何使用CSS实现此效果，代码实例如下: 蚂蚁部落*{ padding:0; margin:0;}body{height:1000px;}#footer{ position:fixed; background:#eee; bottom:20px; right:10px; width:100px; height:100px;} 以上代码实现了我们的要求，div块能够固定在网页右...
纯CSS实现的二级下拉导航菜单实例代码:二级下拉菜单在众多的网站都有应用，不但能够有效的组织分类导航，并且能够节省大量的网站空间，也能够实现网站的动态化效果，大多数二级导航菜单都是结合javascript实现，本章节介绍一下使用纯css实现的下拉菜单。代码如下: 蚂蚁部落.navigator{ width:80%; margin:0;}.navigator ul{ padding:0; margin:0; list-style-type:none;}.navigator li{ float:left; posit...