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

所属分类: 网页制作 / CSS 阅读数: 412
收藏 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元素。

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

CSS入门教程:计算CSS盒模型宽和高

 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多