当前位置:
文档之家 › DW多种网页设计实用效果代码模版
DW多种网页设计实用效果代码模版
CSS产生的特殊效果
经常有朋友问:如何使有超级连接的文字不出现下划线,如何使鼠标移动到超连上产生变色的效果?其实这些通过传统的方法是办不到的。而使用CSS的控制却可以非常轻松地作到,而且,页面的代码也不会臃肿。
★★先看看超连没有下划线的例子
是如何作到这一点的呢?在
和之间加上如下的CSS语法
控制:
这样浏览器在执行时,就明白:a:link指正常的未被访问过的链接a:active指正在点击的链接a:visited指已经访问过的链接其中,text-decoration是文字修饰效果的意思,none
参数表示使有超级链接的文字不显示下划线。如果讲none替换成underline就表示有下划线,换成overline则给超连文字加上划线,换成line-through给超连文字加上删除线,blink则使文字在闪烁。
★★类似的控制:使粗体文字加上删除线
例子2:闪烁的粗体文字使用的代码是:B { text-decoration: line-through}
★★类似的控制:是粗体文字中所有的字母大写
使用代码:B { text-transform: uppercase }
例子3:产生既大写,又有颜色,又有删除线的效果
以上的代码是:b { text-decoration: line-through; text-transform:
uppercase; color: #66FFFF}
类似的,用lowercase使所有字母小写显示,capitalize使每个单词的首字母大写显示。
★★下面则是产生连接变色效果的内容
在上面的“例子1”中,如果作一点修饰,可以使具有link,active,visited属性的连接显示不同的颜色,但是却不会产生鼠标覆盖变色效果。先看下面的代码,使连接文字显示绿色,正在点击的连接显示黄色,已经反复问过的连接显示红色。算是复习前面的内容(别忘记啊!):
如果要产生变色效果,就要用到另一个属性了,这就是hover,看下面的代码。
a:hover { text-decoration: none ; color: yellow }表示鼠标移动到连接文字上时,文字修饰风格为“无”(即没有下划线),同时显示黄色。
a:hover { text-decoration: underline; color: green }表示鼠标移动到连接文字上时,文字修饰风格为“underline”(即下划线),同时显示绿色。
★★扩展一下:如果我们同时用下面2种属性,会产生什么效果呢?
a:link { text-decoration: none ; color: yelloe ; font-size: 9pt }
a:hover { text-decoration: underline; color: green ; font-size: 12pt }
连接文字没有下划线,黄色显示,9pt大小。鼠标移动到连接上时出现下划线,颜色为绿色,字符大小12pt。是不是变色了?而且字体由于大小变化,就有动感了,似乎一下子扩大了。
总之,所有前面讲过的方法,要综合运用才可以呀。
★★注意:并不是所有的浏览器都支持所有的选项属性。自己在多个浏览器上测试一下。
背景固定:
body{background-image: url(bg.jpg) background-attachment: fixed; background-repeat:no-repeat; background-position: bottom left}
bgColor=#ffffff>
背景固定在右下角:
滚图代码:
var swf_width=330
var swf_height=340
var
files='https://www.doczj.com/doc/b74025766.html,/news/2011_06/30/home/1309409274215_000.jpg|http://img.soufun.c om/news/2011_06/30/home/1309409269650_000.jpg|https://www.doczj.com/doc/b74025766.html,/news/2011_07/01/ho me/1309488129025_000.jpg|https://www.doczj.com/doc/b74025766.html,/news/2011_06/30/home/1309409279399_000. jpg'
var
links='https://www.doczj.com/doc/b74025766.html,/news/zt/201106/12soufun.html|https://www.doczj.com/doc/b74025766.html,/zt/201106/s f12zn.html|https://www.doczj.com/doc/b74025766.html,/zt/201106/sf12thyear.html|https://www.doczj.com/doc/b74025766.html,/zt/201106/dsc ome.html'
var texts=''
document.write('classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="https://www.doczj.com/doc/b74025766.html,/pub/shockwave/cabs/flash/swflash.cab#version=6, 0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">');
document.write(' ');
document.write(' ');
document.write(' ');
document.write('src="https://www.doczj.com/doc/b74025766.html,/home/zhuanti/2011zhuangshi/bcastr3.swf " wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash"
pluginspage="https://www.doczj.com/doc/b74025766.html,/go/getflashplayer" />'); document.write('
');
————————————————————
可以调整长宽
var swf_width=330
var swf_height=340
再改掉下面的图片地址和链接地址就可以了
调整窗口尺寸:style="width:378px; height:140px;
修改标题与连接即可
例:https://www.doczj.com/doc/b74025766.html,/zt/201106/sfhome12.html
横向滑动门代码:
style="background-image:url(https://www.doczj.com/doc/b74025766.html,/news/2011_07/21/1311229729342.jpg);
font-size:14px;cursor:hand;" id="dh1" onMouseOver="javascript:doClick_dh(this)" width="76px" height="37px" align="center">广州
style="background-image:url(https://www.doczj.com/doc/b74025766.html,/news/2011_07/21/1311229729342.jpg);
font-size:14px;cursor:hand;" id="dh2" onMouseOver="javascript:doClick_dh(this)" width="76px" height="37px" align="center">天津
style="background-image:url(https://www.doczj.com/doc/b74025766.html,/news/2011_07/21/1311229729342.jpg);
font-size:14px;cursor:hand;" id="dh3" onMouseOver="javascript:doClick_dh(this)" width="76px" height="37px" align="center">北京
style="background-image:url(https://www.doczj.com/doc/b74025766.html,/news/2011_07/21/1311229729342.jpg);
font-size:14px;cursor:hand;" id="dh4" onMouseOver="javascript:doClick_dh(this)" width="76px" height="37px" align="center">杭州
style="background-image:url(https://www.doczj.com/doc/b74025766.html,/news/2011_07/21/1311229729342.jpg);
font-size:14px;cursor:hand;" id="dh5" onMouseOver="javascript:doClick_dh(this)" width="76px" height="37px" align="center">成都
style="background-image:url(https://www.doczj.com/doc/b74025766.html,/news/2011_07/21/1311229729342.jpg);
font-size:14px;cursor:hand;" id="dh6" onMouseOver="javascript:doClick_dh(this)" width="76px" height="37px" align="center">沈阳
style="background-image:url(https://www.doczj.com/doc/b74025766.html,/news/2011_07/21/1311229624011.jpg)">
src="https://www.doczj.com/doc/b74025766.html,/news/2011_07/18/1310972058658.jpg" />
在家居业迅速发展的十余年里,北京崛起了全国性的代表品牌,成为了全国区域性橱柜生产基地的重要成员。搜房家居网记者团队近期深入到产业基地的一线,结合当前经济形势,从媒体角度出发,对基地发展的变迁和企业的发展历程做出了全方位的报道。2011年过半,搜房家居网特邀京派橱柜企业做客搜房,为行业的发展与产业基地的未来构画蓝图。【详细】
出席嘉宾:
中装协厨卫委副秘书:胡亚男
大诚橱柜董事长:路军
好佳益橱柜副总裁:孙开山
图腾宝佳整体家居副总经理:刘艳波
百滋橱柜副总经理:刘辉
style="background-image:url(https://www.doczj.com/doc/b74025766.html,/news/2011_07/21/1311229624011.jpg)">
src="https://www.doczj.com/doc/b74025766.html,/news/2011_07/21/1311228334549.jpg" />
时至2011年中,房价调控尚在对垒酣战,家装行业已牵连其中。从今年来看,无论是从商业模式上、市场定位上都呈现出了差异化的发展格局。杭城家装业的“喜、忧、愁、乐”四大表情,既可从中透视出杭城家装业的发展轨迹,又反映出“2011求新、求变”已成为杭城家装业大佬们正在琢磨和行动的主题。【视频】 【专题】
出席嘉宾:
龙发装饰杭州总经理:周志瑜
杭州中博装饰总裁:凌春粮
九鼎建筑装饰副总裁:章德富
杭州铭品装饰总经理:张一良
南鸿装饰副总经理:赵萌
杭州圣都装饰副总经理:王玉伟
东易日盛杭州副总经理:周志坚
杭州艺创装饰营销总监:薛凤云
style="background-image:url(https://www.doczj.com/doc/b74025766.html,/news/2011_07/21/1311229624011.jpg)">
src="https://www.doczj.com/doc/b74025766.html,/news/2011_07/21/1311229224720.jpg" />
7月10日,央视一则新闻将中国高端家居代理品牌“达芬奇”拉下了“神坛”,“达芬奇”家居造假事件在过去的一周时间内,以各种戏剧化的情节发展着,成为社会热点讨论话题。搜房家居网特别邀请成都各位橱柜企业的老总们齐聚一堂,希望能够围绕“达芬奇”事件进行深入交流,破译达芬奇密码,探寻它背后的深意。【进入专题】
倍特厨柜总经理:刘定河
德贝厨柜总经理:张清
欧派成都总经理:黄祚君
益有厨柜总经理:陈勇
前锋橱柜总经理:罗元柏
经纬王朝总经理:王朝伟
忠信王子总经理:王伟
百年好橱柜总经理:吴章
倍特厨柜副总经理:杜力
style="background-image:url(https://www.doczj.com/doc/b74025766.html,/news/2011_07/21/1311229624011.jpg)">
src="https://www.doczj.com/doc/b74025766.html,/news/2011_07/22/1311317674797.jpg" />
2011年沈阳搜房网积极响应总部310城联动号召,全力推行“中国购房者新居首选家居品牌”活动,为装修业主推荐放心品牌、搜集放心产品、争取实惠折扣、提供放心服务、打造放心平台,推动家居市场健康发展。打造家居建材品牌2011夏季璀璨盛宴,开启家居品牌首选时代。央视一则报道将中国高端家居代理品牌达芬奇推到了风口浪尖。随着达芬奇神秘面纱被揭开,新一轮的信任危机席卷家居业。家居行业诚信问题也受到媒体与社会各界前所未有的关注,家居行业面临着新的挑战与考验。【视频】
出席嘉宾:
菲林格尔沈阳总经理:孙大勇
木勒橱柜总经理:崔雨虹
阿吉诺橱柜副总经理隋哲明
——————————————————————————————
比较复杂的一段代码,美工制作的,直接修改图片地址和文字的话还是用起来很简单的。增减滑动门数量,需要看好代码删除。
美化滚动条:
在样式表里有一些控制滚动条颜色的语句,语句如下:
Body{
Crollbar-Face-color:#FFCC00;
Scrollbar-Highlight-Color:#FF0000;
Scrollbar-Shadow-Color:#FFFFFF;
Scrollbar-3Dlight-Color:#000000;
Scrollbar-Arrow-Color:#000000;
Scrollbar-Track-Color:#FDEAC4;
Scrollbar-Darkshadow-Color:#FFFF00;
}
各条语句含义如下:
Crollbar-Face-color:滚动条页面颜色设定;
Scrollbar-Highlight-Color:滚动条斜面和左面颜色设定;
Scrollbar-Shadow-Color:滚动条下斜面和右面颜色设定;
Scrollbar-3Dlight-Color:滚动条上边和左边的边沿颜色设定;
Scrollbar-Arrow-Color:滚动条两端箭头颜色设定;
Scrollbar-Track-Color:滚动条底版颜色设定;
Scrollbar-Darkshadow-Color:滚动条下边和右边的边沿颜色设定。
图片半透明:
1. 估计是图片的格式不对,比如它的格式是GIF的你给弄成JPG的了
2. 把下面的粘贴在HEAD之间~
把下面的粘贴在BODY中你想要放置图片的地方~把图片的地址换上!
图片滚动向上的代码:
marqueesHeight=155;
stopscroll=false;
icefable1.scrollTop=0;
with(icefable1) {
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preTop=0; currentTop=21; stoptime=0;
function init_srolltext() {
icefable1.scrollTop=0;
setInterval("scrollUp()",40);
}
init_srolltext();
function scrollUp() {
if(stopscroll==true) return;
currentTop+=1;
if(currentTop==22) {
stoptime+=1;
currentTop-=1;
if(stoptime==5) {
currentTop=0;
stoptime=0;
}
} else {
preTop=icefable1.scrollTop;
icefable1.scrollTop+=1;
if(preTop==icefable1.scrollTop) {
icefable1.scrollTop=0;
icefable1.scrollTop+=1;
}
}
}
小图切换大图展示方法:
function getid(obj)//取对应id的元素
{
return document.getElementById(obj);
}
function getNames(obj,name,tij)//取obj元素下标签为tij的元素并要求满足name属性=name;返回一个数组
{
var p = getid(obj);
var plist = p.getElementsByTagName(tij);
var rlist = new Array();
for(i=0;i{
if(plist[i].getAttribute("name") == name)
{
rlist[rlist.length] = plist[i];
}
}
return rlist;
}
function ri(obj)//取得对应的小图列表中当前元素对应的序号
{
var p = getid("bigbig").getElementsByTagName("li");
for(i=0;i
{
if(obj == p[i].getElementsByTagName("img")[0])
{
return i;
}
}
}
function ci(obj)//小图选择框的处理函数
{
var p = getid("bigbig").getElementsByTagName("li");
for(i=0;i
{
if(obj ==p[i].getElementsByTagName("img")[0])
{
p[i].getElementsByTagName("img")[0].className ="s";
}
else
{
p[i].getElementsByTagName("img")[0].className ="";
}
}
}
function fiterplay(obj,num,t,name)//类似页卡的函数.设置对应内容的隐藏和显示obj:元素的id name:元素对应的name属性的值, t:对应内容的标签num:当前选择的元素的序号{
var fitlist = getNames(obj,name,t);
for(i=0;i{
if(i == num)
{
fitlist[i].className = "dis";
}
else
{
fitlist[i].className = "undis";
}
}
}
function play(obj,n1)//播放的函数
{
var p = obj.parentNode.getElementsByTagName("li");
//alert(obj.parentNode.parentNode.innerHTML)
var bimg = getid(n1);
var num = ri(obj);
try //ie下的处理部分
{
with(bimg)
{
filters[0].Apply(); //接收滤镜
ci(obj); //变幻小图的选择.可以放在try以外.
fiterplay(n1,num,"div","f");//设置滤镜中对应部分的显示和隐藏
filters[0].play(); //播放滤镜
}
}
catch(e)//ff下的处理部分
{
ci(obj);
fiterplay(n1,num,"div","f");
}
}
var n=0;
function clearAuto() {clearInterval(autoStart);};
function setAuto(){autoStart=setInterval("auto(n)", 3000)}
function auto()
{
var x = getid("bigbig").getElementsByTagName("li");
n++;
if(n>9)n=0;
play(x[n].getElementsByTagName("img")[0],"bimg","imginfo");
}
setAuto();
.dis {
DISPLAY: block
}
.undis {
DISPLAY: none
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.focus #bimg {
FILTER: progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 ); FLOAT:
left; MARGIN: 0px 7px; WIDTH: 649px; HEIGHT: 366px; TEXT-ALIGN: center
}
.focus .focus_img IMG {
CLEAR: both; WIDTH: 649px; HEIGHT: 366px
}
.focus .focus_img .info {
DISPLAY: block; FONT-SIZE: 12px; COLOR: #ffff99; TEXT-INDENT: 2em; LINE-HEIGHT: 22px; PADDING-TOP: 11px; TEXT-ALIGN: left;
}
.focus .focus_list {
FLOAT: left; OVERFLOW: hidden; WIDTH: 115px; HEIGHT: 417px
}
.focus .focus_list LI {
MARGIN-BOTTOM: 7px; OVERFLOW: hidden; WIDTH: 115px; LIST-STYLE-TYPE: none; HEIGHT: 76px; TEXT-ALIGN: center;}
.focus .focus_list LI IMG {
FILTER: alpha(opacity=50); WIDTH: 111px; CURSOR: pointer; HEIGHT: 74px; moz-opacity: 0.5;
border: 1px solid #ffffff;}
.focus .focus_list .s {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FILTER: alpha(opacity=100); BORDER-BOTTOM-WIDTH: 0px; CURSOR: pointer; BORDER-RIGHT-WIDTH: 0px; opacity: 1
}
dw网页制作基础代码 Dreamweaver 8 基础代码 HTML基本结构(每个网页都是在基本结构的基础上添加内容的) ---------网页文件开始标签
--------头部元素开始标签 ----------网页标题开始标签 … 头部元素 ---------网页标题结束标签 -------头部元素结束标签 ---------网页内容开始标签 ... 网页具体内容 --------网页内容结束标签 ---------网页文件结束标签 Dreamweaver的代码里打“<”会出现可选择代码,或在“< >”里打空格也会出现,方便输入。标签书写方式(不同标签书写方式不同) 1. <标签>对象标签> 如:title、head等。 2. <标签> 如:br 3. <标签该标签的属性1=“参数1” 该标签的属性2=“参数2” ...>对象标签> 如:font 注意: 1.第三种类型的标签也可以使用第一种的格式,即标签的属性不一定要写。 2.可以嵌套,但要注意顺序。 两个代码之间至少要用一个空格隔开。 几个常用标签介绍 文字:... face:字体,引号中输入字体名。如:face=“黑体”。默认是宋体。 size:字号。可以是-7--------+7之间整数。默认是3。 color:颜色。可使用“red”之类的颜色名称或16进制编码指定。默认黑色。 换行: 加粗:... 倾斜:... 滚动字幕: 滚动标签:marquee 最简表达:相关字幕 滚动的属性: Direction--表示滚动的方向,值可以是left,right,up,down,默认为left Behavior--表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)网页制作常用代码 Dreamweaver代码div+css Dreamweaver代码 基本结构标签: ,表示该文件为HTML文件
,包含文件的标题,使用的脚本,样式定义等 --- ,包含文件的标题,标题出现在浏览器标题栏中 ,的结束标志 ,放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示. ,的结束标志 ,的结束标志 其它主要标签,以下所有标志用在中: ,链接标志,"…"为链接的文件地址
,显示图片标志,"…"为图片的地址
,换行标志
,分段标志 ,采用黑体字 ,采用斜体字
,水平画线
,定义表格,HTML中重要的标志
,定义表格的行,用在
中
,定义表格的单元格,用在
中
,字体样式标志
属性是用来修饰标志的,属性放在开始标志内. 例:属性bgcolor="BLACK"表示背景色为黑色. 引用属性的例子:
表示页面背景色为黑色;
表示表格背景色为黑色. 常用属性: 对齐属性,范围属性: ALIGN=LEFT,左对齐(缺省值),WIDTH=象素值或百分比,对象宽度. ALIGN=CENTER,居中,HEIGHT=象素值或百分比,对象高度. ALIGN=RIGHT,右对齐. 色彩属性: COLOR=#RRGGBB,前景色,参考色彩对照表. BGCOLOR=#RRGGBB,背景色.
表示绝对居中. 表格标识的开始和结束. 属性: cellpadding=数值单位是像素,定义表元内距 cellspacing=数值单位是像素,定义表元间距 border=数值单位是像素,定义表格边框宽度 width=数值单位是像素或窗口百分比,定义表格宽度 background=图片链接地址,定义表格背景图 表格中一个表格行的开始和结束; 表格中行内一个单元格的开始和结束 属性:网页设计代码大全
段落标记background:网页背景图像… bgcolor:网页背景颜色align:left right center text:字体颜色强制换行标记link:可链接文字的色彩 alink:被鼠标点中时可链接文字的颜色预排格式标记vlink:已经单击过的可链接文字的颜色 leftmargin:页面左边距插入水平线标记topmargin:页面上边距 Vlink:已经单击过的可链接文字的颜色文本缩标记Leftmargin:页面左边距… Topmargin:页面上边距列表标记 标题格式标记 1.无序标题 (范围(h1-h6))