📄 网页设计中的一些技巧.htm
字号:
<UL>
<LI><FONT
color=#008000><STRONG>实现直线效果</STRONG></FONT>（适用于IE40以上；不适用于NETSCAPE）：
</LI></UL>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=0>
<TBODY>
<TR>
<TD width=1 bgColor=#000000></TD></TR>
<TR>
<TD width="100%" bgColor=#ffffff>步骤：
<P>1：单击右键，选择“TABLE PROPERTIES”，表格边框设置为“0”；</P></TD></TR>
<TR>
<TD width="100%" bgColor=#ffffff></TD></TR>
<TR>
<TD width="100%" bgColor=#ffffff>2：鼠标放在单元格内，单击右键，选“CELL
RPROPERTIES”，在“MINIMUM SIZE”中将“SPECIFY HEIGHT”设定为“1”（IN
PIEXLS），取消“SPECIFY WIDTH”；然后确定即可。</TD></TR>
<TR>
<TD bgColor=#008080 height=1></TD></TR>
<TR>
<TD width="100%" bgColor=#ffffff>说明：便于制作，实现效果较好；</TD></TR>
<TR>
<TD bgColor=#000000 height=1></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>
<UL>
<LI><FONT color=#008000><STRONG>实现竖线效果</STRONG></FONT>（适用于IE4<FONT
size=3>.</FONT>0以上；不适用于NETSCAPE）： </LI></UL>
<DIV align=center>
<CENTER>
<TABLE height=140 cellPadding=0 width=466 border=0>
<TBODY>
<TR>
<TD width=217 height=359>闪烁
<P>中国</P>
<P>光荣</P>
<P>梦想</P></TD>
<TD width=1 bgColor=#000000 height="89%"></TD>
<TD width=227 height=359>闪烁
<P>中国</P>
<P>光荣</P>
<P>梦想</P></TD></TR>
<TR>
<TD bgColor=#000000 colSpan=3 height=1></TD></TR>
<TR>
<TD width=445 colSpan=3 height=160>步骤：
<P>1：单击右键，选择“TABLE PROPERTIES”，表格边框设置为“0”；</P>
<P>2：鼠标放在单元格内，单击右键，选“CELL RPROPERTIES”，在“MINIMUM SIZE”中将“SPECIFY
WIDTH”设定为“1”（IN PIEXLS），取消“SPECIFY HEIGHT”；然后确定即可。</P>
<P>说明：便于制作，实现效果较差；</P></TD></TR>
<TR>
<TD bgColor=#000000 colSpan=3
height=2></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>
<UL>
<LI><FONT color=#008000><STRONG>其 他：</STRONG></FONT> </LI></UL>
<DIV align=center>
<CENTER>
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=4 width="80%"
border=1>
<TBODY>
<TR>
<TD width="33%"> </TD>
<TD width="33%" rowSpan=2>
<TABLE borderColor=#ff00ff cellSpacing=0 width="100%" border=1>
<TBODY>
<TR>
<TD width="47%"> </TD>
<TD width="53%"> </TD></TR></TBODY></TABLE></TD>
<TD width="34%"> </TD></TR>
<TR>
<TD width="33%"> </TD>
<TD width="34%"> </TD></TR></TBODY></TABLE></CENTER></DIV>
<P>（说明：如图所示：在表一（黑色边框）的格内有表二（粉红色边框），如何在表二所在的单元格内输入文字）</P>
<P> 步骤一：将光标放在表二内；</P>
<P> 步骤二：打开菜单“table”，选择“select table”，然后将表进行“剪切”；</P>
<P> 步骤三：在单元格内连续按回车键，这样格内就有至少两个行；</P>
<P>
步骤四：在将光标放在任一行中（除最后一行外），将表进行“复制”，然后试着将光标放在表下面的行。怎么样？是不是可以放下了。好，一切OK。你就可以输入汉字了。</P>
<P align=right><A
href="http://www.shanxiwindow.net/teaching/file03.htm#a0">top</A> </P></TD></TR>
<TR>
<TD width="100%" bgColor=#ffffff height=664><A name=a7></A><FONT
size=3>◆.</FONT>给你的鼠标来点个性（适用于IE4<FONT size=3>.</FONT>0以上；不适用于NETSCAPE）
<P><BIG><a href=index.htm <FONT
color=#0000ff><STRONG>style=</STRONG>"<STRONG>cursor:</FONT><FONT
color=#ff0000>help</FONT><FONT
color=#0000ff>"</FONT></STRONG>>需要帮助吗？</a> </BIG></P>
<P align=center><STRONG><BIG><BIG><BIG><A style="CURSOR: help"
href="http://www.shanxiwindow.net/">test</A></BIG></BIG></BIG></STRONG></P>
<P> 将这一行文字加入HTML文件中，在浏览器中运行后会发现，当把鼠标指针放在这个超级链接上时，鼠标指针就会变成表示帮助的左上方箭头加一问号形。这样的样式如果用在指向一个帮助文件的超级链接上，比手形指针形象化、个性化多了。当然还有很多别的形状，你只需把属性cursor的属性值help换成不同的属性值就可以了，</P>
<TABLE cellPadding=10 width="100%" border=1>
<TBODY>
<TR>
<TD width="50%">hand表示常见的手形 </TD>
<TD width="50%">
<P align=center><A style="CURSOR: hand"
href="http://www.shanxiwindow.net/">test</A></P></TD></TR>
<TR>
<TD width="50%">move表示带四方向箭头的十字形</TD>
<TD align=middle width="50%"><A style="CURSOR: move"
href="http://www.shanxiwindow.net/">test</A></TD></TR>
<TR>
<TD width="50%">crosshair表示十字形 </TD>
<TD align=middle width="50%"><A style="CURSOR: crosshair"
href="http://www.shanxiwindow.net/">test</A></TD></TR>
<TR>
<TD width="50%">ne－resize表示右上方向箭头</TD>
<TD align=middle width="50%"><A style="CURSOR: ne-resize"
href="http://www.shanxiwindow.net/">test</A></TD></TR>
<TR>
<TD width="50%">e－resize表示右方向箭头</TD>
<TD align=middle width="50%"><A style="CURSOR: e-resize"
href="http://www.shanxiwindow.net/">test</A></TD></TR>
<TR>
<TD width="50%">nw－resize表示左上方向箭头</TD>
<TD align=middle width="50%"><A style="CURSOR: nw-resize"
href="http://www.shanxiwindow.net/">test</A></TD></TR>
<TR>
<TD width="50%">n－resize表示上方向箭头</TD>
<TD align=middle width="50%"><A style="CURSOR: n-resize"
href="http://www.shanxiwindow.net/">test</A></TD></TR>
<TR>
<TD width="50%">se－resize表示右下方向箭头</TD>
<TD align=middle width="50%"><A style="CURSOR: se-resize"
href="http://www.shanxiwindow.net/">test</A></TD></TR>
<TR>
<TD width="50%">wait表示等待的沙漏形</TD>
<TD align=middle width="50%"><A style="CURSOR: wait"
href="http://www.shanxiwindow.net/">test</A></TD></TR>
<TR>
<TD width="50%">text表示插入文本的“I”形</TD>
<TD align=middle width="50%"><A style="CURSOR: text"
href="http://www.shanxiwindow.net/">test</A></TD></TR></TBODY></TABLE>
<P align=right> <BR><A
href="http://www.shanxiwindow.net/teaching/file03.htm#a0">top</A> </P></TD></TR>
<TR>
<TD width="100%" bgColor=#ffffff height=232><A name=a8></A><FONT
size=3>◆.字的阴影</FONT>（适用于IE4<FONT size=3>.</FONT>0以上；不适用于NETSCAPE）
<P><FONT size=3>效果：</FONT></P>
<P align=center><SPAN
style="FILTER: shadow(Color=#CFCFE0,Direction=135); WIDTH: 300px; POSITION: relative; HEIGHT: 30px">---我就是妹力，张惠妹---
</SPAN></P>
<P align=center> </P>
<P>实现：<STRONG><FONT color=#ff0000><</FONT><FONT
color=#800080>span</FONT><FONT color=#ff0000> STYLE="</FONT><FONT
color=#0000ff> width:300; height:30;
filter:shadow(Color=#CFCFE0,Direction=135)</FONT><FONT
color=#ff0000>"></FONT></STRONG></P>
<P><FONT
color=#ff0000><STRONG>-</STRONG></FONT>--我就是妹力，张惠妹---<STRONG><FONT
color=#ff0000></</FONT><FONT color=#800080>span</FONT><FONT
color=#ff0000>></FONT></STRONG></P>
<P align=right><A
href="http://www.shanxiwindow.net/teaching/file03.htm#a0">top</A> </P></TD></TR>
<TR>
<TD width="100%" bgColor=#ffffff height=153><A name=a9></A><FONT
size=3>◆.</FONT>改变链接的说明文字（适用于IE4<FONT size=3>.</FONT>0以上；不适用于NETSCAPE）
<P>效果：<A title=逗你玩。呵呵 href="http://www.shanxiwindow.net/">把鼠标放过来</A>！</P>
<P>实现：<a href="http://www.shanxiwindow.net"<STRONG><FONT color=#ff0000>
title="</FONT><FONT color=#0000ff>逗你玩。呵呵</FONT><FONT
color=#ff0000>"</FONT><FONT color=#000000>>把鼠标放过来<</FONT><FONT
color=#800080>/a</FONT><FONT color=#000000>>！<</FONT><FONT
color=#800080>/p</FONT><FONT color=#000000>></FONT></STRONG></P>
<P> </P>
<P align=right><A
href="http://www.shanxiwindow.net/teaching/file03.htm#a0">top</A> </P></TD></TR>
<TR>
<TD width="100%" bgColor=#ffffff height=1><A name=a90></A><FONT
size=3>◆.关闭窗口（JAVASCRIPT）</FONT>
<P><FONT size=3>效果：</P>
<FORM>
<DIV align=center>
<CENTER>
<P><INPUT onclick="window.open('close.htm','new','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes,width=300,height=200')" type=button value=打开新窗口,试试效果 name=Button1>
</FONT></P></CENTER></DIV></FORM>
<P>实现：</P>
<BLOCKQUOTE>
<BLOCKQUOTE>
<P><HTML><BR><HEAD><BR><TITLE>中国山西之窗</TITLE></P>
<BLOCKQUOTE>
<BLOCKQUOTE>
<P><FONT color=#ff0000><STRONG><script
language=JavaScript><BR>function
shutwin()<BR>{<BR>window.close();<BR>return;<BR>}<BR></script></STRONG></FONT></P></BLOCKQUOTE></BLOCKQUOTE>
<P><body></P>
<BLOCKQUOTE>
<BLOCKQUOTE>
<P><a href="<FONT
color=#ff0000><STRONG>javascript:shutwin()</STRONG></FONT>">你敢按我？！</a></P></BLOCKQUOTE></BLOCKQUOTE>
<P> </P>
<P></body><BR></html></P></BLOCKQUOTE></BLOCKQUOTE>
<P align=right><A
href="http://www.shanxiwindow.net/teaching/file03.htm#a0">top</A> </P></TD></TR></TBODY></TABLE></CENTER></DIV>
<P align=center><FONT color=#ffffff size=3>山西省网络管理中心<BR><A
href="mailto:sjnet@sjstc.edu.cn"><FONT
color=#ffffff>联系我们sjnet@sjstc.edu.cn</FONT></A></FONT></P></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -