网页制作超级技巧(一)

2016-01-29 12:44 6 1 收藏

网页制作超级技巧(一),网页制作超级技巧(一)

【 tulaoshi.com - Html 】

  

  编者按:网页制作既简单也复杂。本文简单介绍了几种网页制作的技巧。

  A.文字和图片效果

  一、让文字改变颜色 

  在有些网页我们可以看到一些文字,当鼠标移上去是一种颜色,移开就是另外一种颜色,这是怎么样实现的呢?

  原来我们只需要在Head内预先定义两个类,分别定义了两种颜色,这在后面的HTML源文件中会用到这个颜色的定义:

  <style
   .normal {color:red;}
   .start {color:blue;} 
  </style

  然后我们在要改变的字前后加上下面的代码:

  <SPAN onmouseover = "this.className = 'normal'" onmouseout = "this.className='start'" class=start here </SPAN

  这里的“class=start”是将这行字的默认值设为 start {color:blue;}, 要是不加上这句 的话,你这行字的颜色就会变成HTML预先设定的数值。

  当我们把鼠标移动到“here”上的时候,颜色为“normal”定义的颜色,而当鼠标移开的时候“here”的颜色为“start”定义的颜色(这种效果只有在浏览器中才可以看到)。

  二、给置网页加上背景图像 

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/html/)

  网页的背景色和背景图选择得好,会给页面增色不少。如果选取单一的背景色,难免显得单调,如果选择整个图片做背景,由于图片本身的文件大,造成网页的加载时间长,一般用户很难有耐性等待下去。那么带背景的网页是如何制作出来的?

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/html/)

  很简单,一般是采用一幅很小的图片,然后铺展开,形成很漂亮的背景。对背景图的要求当然是越漂亮越好,文件越小越好。当你有了一幅可以自然拼接的图像后,在中,我们可以设置background图片。

  打开源文件我们可以看到〈BODY〉标签中多了一串代码。代码的表达式如下:

  <BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFFF"

  这里的images/background.gif就是BACKGROUND的值,其图像文件名为一个URL。

  当然我们可以在源代码中直接加入上面的代码。

  B.链接和段落

  三、去掉超链接的下划线

  在访问一些页面的时候,我们会发现,当鼠标移动到具有超级连接的文字上的时候,有的会产生相应的下划线。然而有些网页却没有。主页超链接的下划线是如何去掉的呢?

  我们在<HEAD...</HEAD之间插入下面的代码。

<style
B {font-weight: 700; }
P {padding: 5px 0px; 
 margin: 0px;
 font-family: 宋体,黑体,宋体; 
}
A {text-decoration: none}
TD { font-family: 宋体,黑体,宋体; }
</style
<script language="javascript"
var contents = true;
</script 

  更简单的方法是:

<style
<!--
a {text-decoration:none}
a:hover {color: red;text-decoration:none}
--!
</style

  

  四、段落缩进的方法 

  在利用Dreamweaver制作有关文档资料内容的网页时,如果是英文书写格式,段落一般不缩进(不支持半角空格);如果需要缩进往往需要人为的加入两个中文全角空格,才能够显示出位置缩进效果。
除了上面所说的外,还有下面几种方法,可以值得一试,现介绍如下。

   1.预格式(PRE)

  用预格式编写的源文件,在显示时照源文件中的排版字样显示,空行和空格都能很清楚地区别开来。如源文件为:   

  <pre
  --预格式显示……
  </pre

  网页就会按照你预先设置好的显示方式显示,即在“预格式显示”的前面就会空两个汉字的位置。

  2.插入点图或图形

  点图是指图片中只有一个或几个像素点,用肉眼看不出来。当我们在段落开头插入这样一个点图,并用HSPACE和VSPACE属性来调整点图的左右和上下的空格,以达到段落缩进。

  同样可以插入图形,只不过该图形的颜色需要用网页背景色,这种方式用IMG的WIDTH和HEIGHT属性调整图形大小,以达到缩进。

  插入图形的方法,需要我们掌握好HSPACE和VSPACE大小的尺度,使之刚好留出两个汉字的位置,这样才比较美观。

  3.插入没有边框和内容的表格

  这种方式与上述的插入图形方式类似,该表格没有边框和内容,是空表格。用TABLE的WIDTH和HEIGHT属性调整表格大小适合缩进的需要。

  利用表格来定位一般来说比较可靠,我常常就采用这种方式来对比较复杂的页面进行定位。不过这种方法有一个问题,就是可能是页面的源文件变大。因此也不见得是

来源:https://www.tulaoshi.com/n/20160129/1487368.html

延伸阅读
标签: Web开发
关于闭合浮动元素(clearing float)的方法现在已经很多了,你还不了解的话去old9的blog看看,有一篇闭合浮动元素。 这些方法我最喜欢就是 使用:after 伪类动态的嵌入一个用于清除浮动的元素,可惜代码量太大了,看着不够简洁。现在我看到有个方法超级简单。赶紧介绍一下。 原理是这样的,外围元素之所以不能很好的延伸,问题出在了overflow...
标签: Web开发
CSS网页布局中文排版有别于国外所介绍的英文排版,由于汉字的特殊性,所以有一些地方是需要大家注意的。今天webjx.com的这个文章或许对大家对排版的控制有所帮助。 一、如何设定文字字体、颜色、大小  使用font  font-style设定斜体,比如font-style: italic;  font-weight设定文字粗细,比如font-weig...
标签: Web开发
帧窗口是一种复杂的页面技术,应用帧窗口使得用户可以在同一个浏览器窗口中浏览不同网站的内容,可以在一个小窗口中发出查询命令而在另一个小窗口中接收查询结果。实现帧窗口的思路是将浏览器窗口按照功能分割成多个小窗口。每个窗口都对应有自己的HTML页面,按照一定的组合方式组合在一起,以实现特殊的效果。 在HTML中用frameset(...
标签: Web开发
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《css基本语法》。 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写;100,但是在CSS中,你必须给一个准确的单位,比如:" width:100em。只有两个例外情况可以不定义单位:行高和0值。除...
本篇总结了一些css常用技巧,为网站重构打下基础,但愿您能学到一点有用的东西。 一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《css基本语法》。 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写;100,但是在CSS中,你必须给一个准确的单位...

经验教程

982

收藏

54
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部