收藏

下载资源 加入VIP,免费下载

第1页 / 共16页

第2页 / 共16页

第3页 / 共16页

第4页 / 共16页

第5页 / 共16页

=======================

我们在把中间块进行划分成2个部分，左右各一块，请看效果图。

然后再用css进行控制。

#left{

width:

300px;

height:

500px;

border:

1pxsolid#eee;

float:

left;

}

#right{

width:

450px;

height:

500px;

border:

1pxsolid#eee;

float:

right;

}

让鼠标点击过去就感觉更换了图片那样，其实只有一张图片

只是背景图片改变了位置而已。

。

。

这是网页制作上很经常用到的，就说道这里，现在开始编写div和css来实现吧！

=================

开始还是老样子，先编写一个搜索的div框。

。

#search{

width:

200px;

height:

40px;

border:

1pxsolid#eee;

}

不用太精确，有一个大概的div框架出来先，宽度高度可以慢慢调整

下面开始加入搜索链接

搜索

开始加入背景图片了。

#searcha{

background:

url（'back.gif'）no-repeat00;

}

这个就是让刚才连接使用back.gif这个背景图片。

no-repeat00;不移动图片

line-height:

34px;让文字垂直居中。

那水平居中呢？

text-align:

center;这个用得比较多。

=========================

width:

75px;

height:

34px;

display:

inline-block;

这里要注意的就是display:

inline-block;以块状来显示，不然

即使设置了宽度高度，显示出来的大小还是不会改变的。

现在效果有点出来了呵呵，我们现在才来修改刚才divsearch的高度吧。

再改变一下字体颜色和大小。

大小font-size:

16px;

粗体font-weight:

bold;

颜色：

color:

#ffffff;这里#ffffff也可以写成#fff

再去掉下横线text-decoration:

none;

效果就出来，但是现在鼠标移动过去没有任何反应的。

===============================

好，现在加入鼠标效果。

#searcha:

hover{

background-position:

0-34px;

}

这就是重点，这个大概就是这样的，我说一下

本来背景图片是有2种颜色的，当鼠标移动到按钮上面时候

就移动背景图片，显示下面比较浅色的部分。

。

。

这就是滑动门技术吧。

呵呵

好，现在在Firefox3.5.3版本下也是正常显示出来的。

===========================================

最后加入一个文本输入框吧

再把input文本框用css简单定义一下。

。

。

因为这不是我们的重点。

。

刚才按钮的效果才是我们重点。

现在出现文本框和按钮不对齐。

。

主要是文本框靠上边去了，

需要加入vertical-align:

middle;

这个css语句是让文本框在垂直上处于中间的位置。

最后别忘记去掉开始我们定义的div边框。

。

好，这样就出来了，字体有点不居中，加入line-height:

25px;

完美。

。

。

呵呵，希望大家喜欢吧。

演示就到这里，是不是很简单就出来了呵呵。

。

。

8

在没有接触div+css之前，要编写一个表格，最常用就是table了，

例如

这样就可以制作出一个表格，不过对比之下使用dldtdd更加方便，代码量也少。

当然这不意味着完全可以替换table，主要还是针对2列的表格，

说了这么多，还是让我们看看要做出来的效果吧。

这就是今次我们要制作的表格，使用divcss重新定义dldtdd样式。

=====================

不多说了马上开始吧，可以看到直接使用

效果不明显，下面通过css来进行重新定义。

#news{

width:

600px;

height:

250px;

border:

1pxsolid#eee;

}

定义好显示新闻的div块大小高度，如果不合适的话，等下在进行修改

下面到dldtdd这些标签了，

我们想要的效果是把新闻文章标题在左边显示，右边显示日期。

#newsdldt{

float:

left;

}

#newsdldd{

float:

right;

}

看到了吧，效果出来了呵呵。

但是添加多几篇文章页面就乱了，还要对dl进行定义

#newsdl{

float:

left;

}

然后在处理行距。

。

。

margin:

5px;现在看上去好多了。

把日期字体设置浅颜色一些。

color:

#d8d8d8;

加入一个标题，说明这是最新的文章列表，设置一下背景颜色

#newsh1{

font-size:

16px;

margin:

0px;

background:

#eee;

}

这样效果就出来了。

。

。

在对字体，还有div大小高度做进一步修改

好了，这样就修改完毕，至于颜色方面可以根据自己网站需要进行搭配，

下面用FireFox3.5进行预览看看是否正常显示出来

做一个网站，如果涉及到数据方面，特别是用户和网站之间数据交换，必须做一个

可以让用户输入信息提交给服务器来接收处理。

例如常见的就有：

用户登陆，注册，搜索等等。

下面做一个注册的页面，先看看要做出来的效果吧。

就是这样的一个界面，如果按照传统的话，也许会使用table表格来划分成2列。

然后在表格里面输入信息进行排版。

。

现在我们使用label和input来做这样一个界面，当然使用DIV+CSS来控制定义

整个页面样式。

===============================

好开始，打开一个空白的网页，都是老习惯了，先写一个div。

。

然后写相关的css控制div的大小等等。

#register{

width:

500px;

border:

1pxsolid#eee;

}

高度先不定义，还不知道多少才适合，

然后就要开始写用户注册填写的表格了

这是一个文本框，在前面再写label提示输入什么信息。

用户名：

接着就是密码了

密码：

加入
进行换行

Email邮箱地址：

简介：

是否同意相关条款：

这样一个注册页面出来了，但是看上去很乱

=========================================

现在要写css来整理一下，首先是对齐方面的，提示信息放一边，

输入框放另外一边。

#registerlabel{

width:

140px;

float:

left;

font-size:

14px;

font-weight:

bold;

text-align:

right;

}

统一输入框的宽度和每个输入框上下距离。

input{

width:

180px;

margin-bottom:

5px;

}

现在看上去界面已经美观很多了，再做细一部操作。

例如textarea,checkbox,submit这些处理

textarea{

width:

250px;

height:

150px;

}

#chk{

width:

15px;

}

#submitbutton{

width:

90px;

margin-left:

270px;

}

======================

基本上完成了界面部分。

。

。

一般如果是checkbox在label加入for这个属性，这样点击label的信息，

数据表格我相信大家在制作网页的时候一定用得很多，最经常就是table这个标签了。

很明显table就是一个制作表格的标签，但是使用ulli也可以做到数据表格，

而且很简单的代码可以实现，主要还是用div和css来控制ulli吧，可以这样说。

先看看是怎样的一个数据表格。

就是这个4列，4行的表格，这里使用了ulli来实现，没有使用tablethtd这些标签。

现在写一个，看看如何实现这个效果的。

开始当然还是写一个div来控制表格的大小了。

这样一个400px的div就出来了。

关于div还有css外部文件引用就不多说了，

因为在之前的视频详细讲解过，

=====================================

现在写入数据了，可以看到没有加入css的ulli原本的样子。

现在把它原来的风格去掉也就是list-style-type:

none;

去掉的前面的圆点后，再进行把字体横着分布（现在是竖着的）。

加入float:

left;是吧，这样就出来了。

把它们之间的距离分开一下，width:

100px;这样就会自动换行。

。

。

其实这个就是重点，让它自动换行，然后就可以自动产生表格效果了。

把div大小改一下。

这样就出现4列的效果。

看到没有，因为div控制了整个表格的大小，而li每添加一个数据

它都会自动换行，例如我现在再添加一个数据，

现在就只差一些基本的美化效果，例如字体居中，字体大小，是否粗体，等等

line-height:

30px;设置每一行

margin-bottom:

1px;这个是每一行底部空出的空隙。

margin-left:

1px;这个是每一个小格左边空出的空隙。

最后去掉div原本的边框，再设置一下字体大小。

最上上面的字体大小和粗体另外设置，这样就要写多一个类，

这个可以说是一个表格的表头。

如果使用#newsli.biaotou这种写法，使用的是

class不是id

第一列

第二列

第三列

第四列

#newsli.biaotou{

font-size:

16px;

font-weight:

bold;

background:

#999;

}

这样效果就出来了。

再把数据填写完整，这样就完成一个表格了。

。

下面使用Firefox3.5.3浏览一下看看，正常显示，这样比起table简单一些，

还有就是很方便以后对表格数据的一些显示修改都在css上控制了。

或者说以后例如修改成5列，也方便一些。

只要把div设置大一下。