web标准教程,帮你走进web标准设计的世界 第二讲

所属分类: 网页制作 / CSS 阅读数: 423
收藏 0 赞 0 分享
上一讲我主要讲解了一下网页的基本结构与网页主体部分的基本结构,以及常用的html标签。

非常感谢网友对我的大力支持,谢谢你们给我的鼓励!

我继续上一讲:又开始实战了,代码敲起来!

复制代码
代码如下:

<div id=”logo”>
<a href=”http://online.cumt.edu.cn”><img src=”logo.jpg” title=”Welcome!” alt=”logo” /></a>
</div>

So easy !

标签4img

使用指数:****

功能:导入图片

类型:内联元素

常用属性:idclasstitle

特别属性:1.src:导入图片总要知道图片在哪不是,src就解决这个问题。他的值就是图片存放的路径啦。

      2.alt:title功能类似,都是提示功能,我们知道有的时候一个网页的图片不一定及时(或者就是不能成功)加载,那么为了给用户一个友好的说明,故用此属性

例子:1.E盘新建两个文件夹,命名为html,和images。在html文件夹中建一个html文件命名为:index.html,复制一张你比较喜欢的图片到images文件夹中(例如images.jpg),ok,代码开始了:

index.html

复制代码
代码如下:

<body>
<img alt="我是图片" title="Hello!" src="../images/images.jpg" />
</body>

So easy ! 

插播广告:../images/images.jpg..代表返回到上一级文件,什么意思呢,我们的目的是找到html文件夹外面的images文件夹中的images.jpg文件,那我们就一步一步的进行,首先从html文件夹跳出来(..),这是我们已经指向E盘了,然后找E盘中的images文件夹(/images;最后找到文件(/ images.jpg;光听我讲是不行的,要多实践哦!

当然img标签还有两个常用属性widthheight,分别来限制显示图片的宽度和高度;默认为图片的实际尺寸,不妨试试这段代码,你就明白啦:

复制代码
代码如下:

<body>
<img alt="我是图片" title="Hello!" src="../images/images.jpg" />
<img alt="我是图片" title="Hello!" src="../images/images.jpg" width="20" height="20" />
<img alt="我是图片" title="Hello!" src="../images/images.jpg" width="200" height="200" />
</body>

So easy !
好,我们继续头部讲解,导航的搜索框部分代码被我省略了,表单元素准备单独进行将讲解。


复制代码
代码如下:

<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">论坛</a></li>
</ul>
<ul>
<li><a href="#">个人空间</a></li>
<li><a href="#">博雅园</a></li>
<li><a href="#">跳蚤市场</a></li>
<li><a href="#">音乐站 </a></li>
</ul>
</div>

So easy !
有人可能疑问这代码的运行结果与所给的图片差的太多了,哈哈,这是正常的,但到目前为止至少文字还是对的,如果感兴趣可以提前去学习一下css;
好标签继续:
标签5:ul
使用指数:*****
功能:构造一个无序列表,必须配合li来使用
类型:块级元素
常用属性:id,class
标签6:ol
使用指数:*****
功能:构造一个有序列表,必须配合li来使用
类型:块级元素
常用属性:id,class
何为无序?何为有序?运行一下代码便知分晓:


复制代码
代码如下:

<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">论坛</a></li>
</ul>
<ol>
<li><a href="#">个人空间</a></li>
<li><a href="#">博雅园</a></li>
<li><a href="#">跳蚤市场</a></li>
<li><a href="#">音乐站 </a></li>
</ol>
</div>

So easy !
感兴趣的可以提前去看看他们的list-style属性,你会觉得很有意思,这里就不介绍了,这部分还是在讲解css的时候再说吧。到这里header就完成了。
整理:


复制代码
代码如下:

<div id="header">
<div id="banner">
<span>你还没有登录,请登录</span>
<a target="_blank" href="#" title=”注册只需要5分钟!”>登陆</a><a href="#">注册</a>
</div>
<div id="logo">
<img src="../images/images.jpg" alt="logo" title="其实这不是logo" />
</div>
<div id="nav">
<ul style="list-style:">
<li><a href="#">首页</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">论坛</a></li>
</ul>
<ul>
<li><a href="#">个人空间</a></li>
<li><a href="#">博雅园</a></li>
<li><a href="#">跳蚤市场</a></li>
<li><a href="#">音乐站 </a></li>
</ul>
</div>
</div>

So easy !
效果好难看。。。
至于content部分我只讲三小块,不要惊讶,因为其他的大体都是一样的啊,目的还是为了让大家认识一些常用的标签,ok,Begin!Right now!

代码:

复制代码
代码如下:

<div>
<a title="全国高校百佳网站网络评选活动即将进入投票阶段" href="#">
<img alt="全国高校百佳网站" src="tempImg/nschool_pic.jpg"/>
</a>
<h3>
<a href="#">全国高校百佳网站</a>
</h3>
<p>
由教育部思想政治工作司指导、中国大学生在线网站主办...
<a href="#">【详情点击】</a>
</p>
</div>

So easy !
标签7:h1,h2,h3,h4,h5,h6
使用指数:***
功能:构造一个标题,通常用于显示一块的标题部分,或者文章的标题部分,默认的字体是加粗的,不同级别的标题标签只是字体大小不同而已
类型:块级元素
常用属性:id,class
标签8:p
使用指数:*****
功能:构造一个段落
类型:块级元素(但是不同与div)
常用属性:id,class
例子(这里我引用了w3cSchool的例子):

复制代码
代码如下:

<body>
<p>
这个段落
在源代码中
包含许多行
但是浏览器
忽略了它们。
</p>
<p>
这个段落
在源代码 中
包含 许多行
但是 浏览器
忽略了 它们。
</p>
<p>
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小,将改变段落中的行数。
</p>
</body>


看这个结构显然是一个没有顺序的列表:我们借此来巩固学习一下ul,毕竟他很重要,另外的目的就是为下文铺垫:
代码:

复制代码
代码如下:

<ul>
   <li>
    <a href="#">老师对文法学院2010届...</a>
  </li>
  <li>
    <a href="#">外文学院举行2010届毕...</a>
  </li>
  <li>
    <a href="#">我校举行校领导与2010...</a>
  </li>
  <li>
    <a href="#">校领导深情寄语2010届毕业生</a>
  </li>
</ul>

So easy !
像这种文字以列表形式存在,而且没有顺序性,也没有标题,我们通常可以使用ul和li的组合来描述

这个与上面一个唯一的不同点就是多了一个标题(“求购信息”),可能有人会想到用这样的组合完成:

复制代码
代码如下:

<h4>求购信息</h4>
<ul>
<li>…</li>
  <li>…</li>
</ul>

当然是很好的,不过这里我要介绍里一个标签组合来实现这个架构:

复制代码
代码如下:

<dl>
<dt>求购信息</dt>
<dd>
<a href="#">求个二手手机给老爹用</a>
</dd>
<dd>
<a href="#">求购二手显示器</a>
</dd>
<dd>
<a href="#">寻找自行车钥匙</a>
</dd>
<dd>
<a href="#">求购移动手机(简单功...</a>
</dd>
<dd>
<a href="#">求购天翼电信手机</a>
</dd>
</dl>

好乱啊,但其实你耐心一点就很容易了。
标签9:dl
使用指数:*****
功能:构造一个列表,与dt,dd配合使用
类型:块级元素
常用属性:id,class
例子:

复制代码
代码如下:

<body>
<h4>一个定义列表:</h4>
<dl>
<dt>咖啡</dt>//相当于一个小标题
<dd>黑色的热饮料</dd>//该标题下面的内容
 <dd>黑色的热饮料</dd>
<dd>黑色的热饮料</dd>
<dt>Milk</dt>//一个dl中可以有多个dt
<dd>白色的冷饮料</dd>//一个dt中可以有多个dd
<dd>白色的冷饮料</dd>
<dd>白色的冷饮料</dd>
</dl>
</body>

至于尾部我就不讲了,相信你已经可以写出他的html部分了
下一讲我将为大家重点讲解表单元素和table元素。

更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之 首先声明: 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2、水平居中 问题:div里的内容,ie默认为center,而ff默认left 解决:mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序,刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多