div css实例教程-CSS结合DIV实现的右侧浮动效果

发布时间：2017-10-28 所属栏目：div css

一 : CSS结合DIV实现的右侧浮动效果

我们见过很多页面右侧浮动效果，最早有QQ联系面板，对联广告等，大多数都是基于Javascript实现的动态效果，今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果。

HTML

我们希望悬浮效果最后加载，因此一般将其放置在页面HTML的末尾，我们建立一个.side-bar，里面包含了QQ在线咨询，微信(鼠标滑向弹出二维码效果)，微博，以及Email联系方式等内容，这些内容我们都以标签包裹。

代码如下:

<div class="side-bar">
<a href="#" class="icon-qq">QQ在线咨询</a>
<a href="#" class="icon-chat">微信<div class="chat-tips"><i></i>
<img style="width:138px;height:138px;" src="helloweba.jpg" alt="微信订阅号"></div></a>
<a target="_blank" href="" class="icon-blog">微博</a>
<a href="http://www.61k.comquot; class="icon-mail">mail</a>
</div>

CSS

我们使用CSS来完成浮动即鼠标滑向弹出效果。我们准备一张图片right_bg.png，包含了几个内容的图标，然后通过background-position各个图标对应的a内容。我们使用position: fixed以及设置bottom和right值将.side-bar固定在右下角，这样无论页面如何滚动，.side-bar将一直在右下角位置不变。这里需要提下ie6下fixed效果需要单独处理，但本文不做详解，放弃ie6吧。

代码如下:

.side-bar a,.chat-tips i {background: url(right_bg.png) no-repeat;}

.side-bar {width: 66px;position: fixed;bottom: 20px;right: 25px;font-size: 0;line-height: 0;z-index: 100;}

.side-bar a {width: 66px;height: 66px;display: inline-block;background-color: #ddd;margin-bottom: 2px;}

.side-bar a:hover {background-color: #669fdd;}

.side-bar .icon-qq {background-position: 0 -62px;}

.side-bar .icon-chat {background-position: 0 -130px;position: relative;}

.side-bar .icon-blog {background-position: 0 -198px;}

.side-bar .icon-mail {background-position: 0 -266px;}

这里还有个鼠标滑向微信图标的效果，当鼠标hover时，.chat-tips的display属性设置为block，并且设置定位位置，一下代码还包含了一个箭头的CSS写法：

代码如下:

.side-bar .icon-chat:hover .chat-tips {display: block;}

.chat-tips {padding: 20px;border: 1px solid #d1d2d6;position: absolute;right: 78px;top: -55px;background-color: #fff;display: none;}

.chat-tips i {width: 9px;height: 16px;display: inline-block;position: absolute;right: -9px;top: 80px;background-position:-88px -350px;}

.chat-tips img {width: 138px;height: 138px;}

简单的几行CSS代码就完成了一个简洁的右下角悬浮效果，快去试下吧。

二 : CSS实例教程：十步学会用CSS建站

第一步：规划网站，本教程将以图示为例构建网站

1.规划网站，本教程将以下图为例构建网站。

其基本布局见下图：

主要由五个部分构成：

1.Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px

2.Header 网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px

3.Content 网站的主要内容。 Width: 480px Height: Changes depending on content

4.Sidebar 边框，一些附加信息。 Width: 280px Height: Changes depending on

5.Footer 网站底栏，包含版权信息等。 Width: 760px Height: 66px

第二步：创建html模板及文件目录等 1.创建html模板。代码如下：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CompanyName - PageName

@import "css/master.css";

将其保存为index.html,并创建文件夹css，images，网站结构如下：

2.创建网站的大框，即建立一个宽760px的盒子，它将包含网站的所有元素。
在html文件的和之间写入

Hello world.

创建css文件，命名为master.css,保存在/css/文件夹下。写入：

#page-container {
width: 760px;
background: red;
}

控制html的id为page-container的盒子的宽为760px，背景为红色。表现如下：

现在为了让盒子居中，写入margin: auto;，使css文件为：

#page-container {
width: 760px;
margin: auto;
background: red;
}

现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在css文件中写入：

html, body {
margin: 0;
padding: 0;
}

第三步：将网站分为五个div，网页基本布局的基础:

1.将“第一步”提到的五个部分都放入盒子中，在html文件中写入：

Main Nav
Header
Sidebar A
Content
Footer

表现如下：

2.为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在css文件写入：

#main-nav {
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}

表现如下：

第四步：网页布局与div浮动等：

1.浮动，首先让边框浮动到主要内容的右边。用css控制浮动:

#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}

表现如下：

2.往主要内容的盒子中写入一些文字。在html文件中写入：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.

表现如下：

但是你可以看到主要内容的盒子占据了整个page-container的宽度，我们需要将#content的右边界设为280px。以使其不和边框发生冲突。
css代码如下：

#content {
margin-right: 280px;
background: green;
}

同时往边框里写入一些文字。在html文件中写入：

表现如下：

这也不是我们想要的，网站的底框跑到边框的下边去了。这是由于我们将边框向右浮动，由于是浮动，所以可以理解为它位于整个盒子之上的另一层。因此，底框和内容盒子对齐了。
因此我们往css中写入：

#footer {
clear: both;
background: orange;
height: 66px;
}

表现如下：

第五步：网页主要框架之外的附加结构的布局与表现：

第五步主要介绍除网页主要框架之外的附加结构的表现(Layout),包括以下内容:
1.主导航条；
2.标题(heading),包括网站名和内容标题；
3.内容；
4.页脚信息,包括版权,认证,副导航条(可选)。

加入这些结构时，为了不破坏原有框架，我们需要在css文件"body"标签(TAG)下加入:

.hidden {
display: none;
}

".hidden"即我们加入的类(class),这个类可以使页面上任意属于hidden类的元素(element)不显示。这些会在稍后使用，现在请暂时忘记它。

现在我们加入标题(heading):
先回到HTML的代码，到是我们常用的html标题代码。比如我们一般用网站名，网站副标题,内容主标题等。我们往html文件的Header层(Div)加入:

Enlighten Designs

刷新一下页面，你就可以看到巨大的标题，和标题周围的空白，这是因为>标签的默认大小和边距(margin)造成的，先要消除这些空白,需要加入：

h1 {
margin: 0;
padding: 0;
}

接下来是导航条：
控制导航条表现的css代码相对比较复杂，我们将在第九步或是第十步中详细介绍。现在html文件加入导航代码：

About
Services
Portfolio
Contact Us

(注：原教程使用了dl和dt，jorux在这使用了更常用的ul和li标签)
目前导航条的表现比较糟糕，但是要在以后的教程中介绍其特殊表现，故需要暂时隐藏导航条,于是加入：

About
Services
Portfolio
Contact Us

我们跳一步，先到页脚：
页脚包括两部分：左边的版权,认证和右边的副导航条。
我们先要让副导航条向右浮动，就像之前处理Sidebar和Content关系的一样，需要加入一个新的层(div):

About -
Services -
Portfolio -
Contact Us -
Terms of Trade

理论上，我们可以控制源文件上的任意元素的浮动，但由于IE浏览器的BUG，被浮动层需要首先出现在源文件上，也就是说我们把副标题放在版权和认证的前面：

About -
Services -
Portfolio -
Contact Us -
Terms of Trade

Copyright © Enlighten Designs
Powered by Enlighten Hosting and
Vadmin 3.0 CMS

刷新你的页面，你将看到如下所示：

最后我们回到内容部分：用表现内容标题–"About","Contact us"；用

表现段落；用
断行。

About

Enlighten Designsis an Internet solutions provider that specialises in
front and back end development. To view some of the web sites we have created view our
portfolio.

We are currently undergoing a 'face lift', so if you have any questions or would
like more information about the services we provide please feel free to contact us.

Phone: (07) 853 6060

Fax: (07) 853 6060

Email: info@enlighten.co.nz

P.O Box: 14159, Hamilton, New Zealand

More contact information…

刷新页面可以看到在Content层中又出现一些空白，这是由于

标签的默认边距(margin)造成的，我们必须消除这些恼人的空白，当又不想把网页中所有的

标签地边距都设为0，这就需要使用css的子选择器("child css selector"),在html的文件结构中，我们想控制的

标签(child)是属于#content层(parent)的,因此在css文件中写入：

#content h2 {
margin: 0;
padding: 0;
}
#content p {
margin: 0;
padding: 0;
}

这样我们就告诉浏览器，仅仅是隶属于content层的

标签的margin和padding的值为0！

第六步：页面内的基本文本的样式(css)设置：

你是不是厌倦了那些大红大绿的背景，现在是去掉它们的时候了，只保留导航条的红色背景。真是难为您居然能坚持学习本教程到此，很好，再过几步，你就能很好了解css控制整个网页版面(Layout)的能力。
–言归正传–
先设置全局的文本样式：

body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;
}

一般我们把body标签放在css文件的顶端，当然你要是执意要把它放在尾部，浏览器不会和你计较。font-family内的顺序决定字体显示优先级，比方如果所在计算机没有Arial字体，浏览器就会指向Helvetica字体，依次类推；color指字体颜色；background指背景颜色。
如果你都是按本教程的操作，应该能看到下图：

你可以看到内容(content)的各块(block)之间的间隙太小了，而基于最初的设计，内容标题(即)和正文之间的间隙大概是15px，每个段落的间距也大概是15px，所以在css中写入：

#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}

然后需要让content层的四周都空出25px的间隙，这本来是件很简单的事，理论上我们只需在#content的css文件中加入padding: 25px;就行了，但是IE给我们上了"一课",它的固有BUG根本不能按我们的想象表现。解决这个问题有两种办法。第一种办法是区别浏览器写入两种代码(HACK IE),但因为间隙(padding,在Dreamweaver中又叫填充)使用很频繁，所以我们用另一种办法。
我们往需要填充的层中加入padding层，它的功能仅限于显示间隙：

同样的，再往html文件的content层中加入padding层。
由于padding层的功能仅是制造空隙，所以不要设置它的宽度，只需在css中添加:

#sidebar-a {
float: right;
width: 280px;
}
#sidebar-a .padding {
padding: 25px;
}
#content {
margin-right: 280px;
}
#content .padding {
padding: 25px;
}

就像我们之前用的方法一样，我们只选择了类(class)为padding，且父类(parent)为#content或#sidebar-a的元素(element)。
接下来设置行距，content和sidebar-a的行距需要加宽，但在css中是没有行距(leading)这种属性(attribute)的，但是有行高(line-height)属性，因此往css中写入：

#sidebar-a {
float: right;
width: 280px;
line-height: 18px;
}
#content {
margin-right: 280px;
line-height: 18px;
}

现在可以看到标题"about"和"contact us"显得相当突兀，这是因为我们使用的字体并不是一种网页字体，我们需要将其替换为以下图片，并将其存放于/images/headings/文件夹中：

替换方法为，在html文件的标签中写入：

第七步：网站头部图标与logo部分的设计：

为实现设计时的网页头部效果，我们需要以下两幅图：
/images/headers/about.jpg

/http://p.61k.com/cpic/13/61/1cf3623bd8f5c82c47854a9005ea6113.gif

首先我们给#header层添加背景图案：

#header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}

我们使用的背景属性为一些简写的属性名，用其能规定背景的颜色，图案，图案的位置，是否重复以及如何重复。之所以把背景色设为桔黄色，是因为当用户使浏览器屏蔽图片时，网站的头部不会变的一片空白。应该注意到图片的路径是相对于css的存放位置而言的，而不是html文件，因此有"../"。

接着替换掉标签里的"Enlighten Designs":

width="236" height="36" />

注意：细心的你可能会发现我们使用了padding-right而不是margin-right，这是因为IE的怪毛病不少，它会在不定的地方无法正确显示margin-right/left属性，所以使用了padding(间隙,Dreamweaver中又被称为填充)属性。

Jorux提示：希望大家在以后的css编写过程中，尽量使用padding属性，以免造成浏览器调试麻烦。

第八步：页脚信息(版权等)的表现设置：

首先需要控制页脚的文本显示：

#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
}

接着我们需要设置存在链接的文本的显示，在这我们没有改变文本的颜色(仍然为#c9c9c9)，而只是让下划线消失：

#footer a {
color: #c9c9c9;
text-decoration: none;
}

但是我们想让那些存在链接的文本，在鼠标悬停在其上方时变色为#db6d16：

#footer a:hover {
color: #db6d16;
}

然后我们想给页脚加上灰色的上边框，在footer层的四周设置一些间隙，并加大文本的行距：

#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}

最后我们需要做的就是让副导航层(#altnav)向右浮动，需要指出的是，浮动层是必须设置宽度(width)才能正常浮动的，所以我们把#altnav的宽度设置为350px，略宽于文本的长度(为了让副标题的文字显示完全)，然后让文本向右对齐：

#footer #altnav {
width: 350px;
float: right;
text-align: right;
}

如果你按照以上方法，将得到如下图所示的页脚样式：

第九步：导航条的制作(较难)：

Jorux注:导航条之所以放在第九步讲，是因为导航条制作是本教程中最难的部分，自然也是技术含量最高的地方.导航条的制作可易可难，但这里介绍的相对较难，您能坚持到这一步已经很不易，如果你只是有个导航条就满足的话，请参看第八步的副导航条的制作。

先去掉导航条的红色背景，还有就是移除html文件中main-nav层的"class="hidden"",使导航条的内容显示出来。我们实现导航条图片的变换的方法是纯css代码的，不包含任何js或是flash，因此我们所用的图片是4幅分别由三个小图组合而成的图片，如下所示，并将这4幅图保存于/images/nav/文件夹中:

我们实现导航条的动态效果如下图所示：

在网页显示的只是图中红框标出的部分，如果把每幅图分为上，中，下三部分的话，未发生动作时显示上部，当光标悬停时，显示的是中部，被选择时则显示下部。

接下来进入css代码部分，先往css文件中写入：

/* Main Navigation */
#main-nav { height: 50px; }
#main-nav ul { list-style.:none; margin: 0; padding: 0; }

注意：/* Main Navigation */为增加css文件可读性的说明，不会影响表现。
#main-nav的height属性定义了main-nav层的高度；"#main-nav ul" 则定义main-nav层中列表的属性，在这里先定义其margin和padding为0。

根据先前的设计，导航条应该和左边有一定的距离，这就需要设置main-nav层的左边距(padding-left)为11px,但由于IE5和Mac浏览器的BUG，需要加入以下代码：

/* IE5 Mac Hack \*/
#main-nav { padding-left: 11px; }
/*/
#main-nav { padding-left: 11px; overflow: hidden; }
/* End Hack */

现在你可以看到导航列表距左边有11px的距离，但是列表项目是竖排的，将，即列表项目向左对齐就能使其从左到右横向排列：

#main-nav li { float: left; }

为了使列表项目的尺寸和容纳它的层保持一致，并利用浮动属性使列表项目的文本隐藏，写入：

#main-nav li a {
display: block;
height: 0px !important;
height /**/:50px; /* IE 5/Win hack */
padding: 50px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}

接着，要实现当光标悬停于列表项目上时，显示背景图片的中部，因此需要将背景图片向上移动50px，写入：

#main-nav li a:hover {
background-position: 0 -50px;
}

给各个列表项目设置宽度和背景图片的路径：

#main-nav li#about,
#main-nav li#about a { width: 71px; background-image: url(../images/nav/about.gif); }
#main-nav li#services,
#main-nav li#services a { width: 84px; background-image: url(../images/nav/services.gif); }
#main-nav li#portfolio,
#main-nav li#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); }
#main-nav li#contact,
#main-nav li#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }

最后我们要做的就是，当列表项目被选时，显示背景图片的下部。为此我们需要增加一些css代码对原有的css表现作一些修改：

body.about li#about,
body.about li#about a,
body.services li#services,
body.services li#services a,
body.portfolio li#portfolio,
body.portfolio li#portfolio a,
body.contact li#contact,
body.contact li#contact a {
background-position: 0 -100px;
}

以上看似庞大的css选择器可以识别body标签的类(class)，如html中为：

以上css选择器就让li#about,li#about a,的背景向上移动100px，使其显示背景图片的下部。

如果我们希望网站头部背景图片也根据body标签的类进行变换，就需修改css的#header为：

body.about #header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}

至此就完成了"About"网页的制作,依此类推，修改html中body的类为services/portfolio/contact制作相应html文件并分别保存。
在css文件中添加各个网页相应的头部背景图片路径(如services网页的头部背景图片为services.jpg,在css中添加如下代码)：

body.services #header {
height: 150px;
background: #db6d16
url(../images/headers/services.jpg);
}

然后用超级链接将这些网页连接起来，就组成了一个小网站了。

第十步：解决IE浏览器的显示BUG：

要继续此教程需要IE的以前的版本进行测试，你可以在这里下载到。绝大部分中国用户使用的是IE6.0，因此您几乎不需要看下去了。

IE中主要出问题的是IE5和IE5.5,如其不能识别css中margin值为auto，要实现层的中间对齐，需加入：

body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
text-align: center;
}

但是这样设置之后，网站的content层的文本也变成中间对齐了，我们需要让其向左对齐，加入：

#page-container {
width: 760px;
margin: auto;
text-align: left;}

关于页脚的BUG，将版权内容加入新的#copyright层中，在html中加入：

在css文件中加入，并将#footer的padding-top: 13px;移除：

#footer #altnav {
clear: both;
width: 350px;
float: right;
text-align: right;
padding-top: 13px;
}
#footer #copyright {
padding-top: 13px;
}

最后要解决的BUG是当光标在导航条的被选列表项目链接上悬停时(如在about的网页，body的类为about，但我们将光标移到导航条的about图片上时)，背景图片消失了，这就需要加入：

body.about li#about,
body.about li#about a,
body.about li#about a:hover,
body.services li#services,
body.services li#services a,
body.services li#services a:hover,
body.portfolio li#portfolio,
body.portfolio li#portfolio a,
body.portfolio li#portfolio a:hover,
body.contact li#contact,
body.contact li#contact a,
body.contact li#contact a:hover {
background-position: 0 -100px;
}

三 : Div CSS实例教程：页面制作方法全程指导(1)

你对页面制作方法是否了解，这里Div CSS实例教程带你一起来学习，相信通过本文的学习你对页面制作的方法一定会有明确的认识。

Div CSS实例教程：分享非常不错的页面制作方法

做前端也有几年时间了，不敢说能把他看地多透，但是多多少少还是有些自己的东西。就制作而言，我将一张页面分为四层：框架、布局、模块、列表和数据块。

一、Div CSS实例之框架

页面的框架基本上都是：“头”、“主体”、“尾”。但是对于一些页面如Tudou.com，由于布局的需要，还应在“头”的下面还要加个“菜单”。

Div CSS实例教程：页面制作方法全程指导(1)_div css实例教程

二、Div CSS实例之布局（以下用#ID表示页面元素）

#Head和#Foot里的就不说了，具体查看演示页面源码。
布局说的是将#Main里的内容分成几大块。我们看Tudou.com，#Main里典型的左右结构，我们用#Layout_1，#Layout_2表示。如图

Div CSS实例教程：页面制作方法全程指导(1)_div css实例教程

Div CSS实例教程：页面制作方法全程指导(1)_div css实例教程

三、Div CSS实例之模块

布局#Layout_1，#Layout_2里的块就是模块了，
按我的理解，模块至少要有一个ID，Class则要视页面设计，给需要重用的加上。
关于模块的ID名称，要取个有意义的名字，当然偷懒的可以用#Col_1，#Col_2，。。。
模块的Class名称用.cols_1，.cols_2，。。。

Div CSS实例教程：页面制作方法全程指导(1)_div css实例教程

模块内部的如下图

Div CSS实例教程：页面制作方法全程指导(1)_div css实例教程

Div CSS实例教程：页面制作方法全程指导(1)_div css实例教程

四、Div CSS实例之列表和数据块

模块的主体是由列表组成的，而列表里则包含数据块。
按我的理解，页面上的信息其实就是不同类型的列表。我们应将典型的列表方式提取出来，放在公用样式里（public.css）。
以Tudou.com为例，需要定义到public.css里的列表至少要有以下三种：

1..list-v垂直列表方式(图片和文字成垂直排列)

2..list-h水平列表方式(图片和文字成水平排列)

3..list-t文字列表方式

数据块其实是微格式的一个变相应用，给不同的数据元素定义固定的结构。

◆ Tudou.com需要定义的数据块有：

1..mVideo(视频)
2..mList(豆单)
3..mUser(用户)
比如.mVideo应该是这样的：

ExampleSourceCode

<divclassdivclass=“mVideo”>
<divclassdivclass=“p”><ahrefahref=“”title=“”><imgsrcimgsrc=“”alt=“阿联又挂彩有望首发战公牛”/></a></div>
<divclassdivclass=“d”>
<divclassdivclass=“d_name”><ahrefahref=“”title=“”>阿联又挂彩有望首发战公牛</a></div>
<divclassdivclass=“d_user”><ahrefahref=“”title=“”>阿联又挂彩有望首发战公牛</a></div>
<divclassdivclass=“d_length”>06:88</div>
<divclassdivclass=“d_time”>发布时间：<span>2007-10-0814:31</span></div>
<divclassdivclass=“d_intro”>阿联又挂彩阿联又挂彩阿联又挂彩</div>
<divclassdivclass=“d_honor”>荣誉：<span><imgsrcimgsrc=“”alt=“Ç¿”/></span></div>
<divclassdivclass=“d_view”>人气：<span>222</span></div>
<divclassdivclass=“d_comment”>评论：<span>323</span></div>
<divclassdivclass=“d_favorite”>收藏：<span>32</span></div>
<divclassdivclass=“d_type”>类型：<span><ahrefahref=“”title=“”>µçÓ°</a><ahrefahref=“”title=“”>µçÊÓ¾ç</a></span></div>
<divclassdivclass=“d_tag”>标签：<span><ahrefahref=“”title=“”>Twins</a><ahrefahref=“”title=“”>ÑÝ³ª»á</a></span></div>
<divclassdivclass=“d_subject”>专题：<span><ahrefahref=“”title=“”>±¬ÁÏ</a></span></div>
</div>
</div>

最后，附上关键字表，就是一些用于公共定义的ID和Class名称。

ExampleSourceCode

1.#B-*//Body用 
2.#Head,#Main,#Foot//布局用ID 
3.#Message//系统消息用 
4.#Logo,#Toolbar,#Search,#Menu//Head内元素 
5.#Layout_*,#Group_*,#Col_*//Main内元素 
6.#Links,#CopyRight//Foot内元素 
7.#B*//广告位，与class=”b”结合使用 
8.#Plugin//Banner用

Class

ExampleSourceCode

1..txt,.btn,.label_checkbox,.label_input,.handle//表单内元素 
2..meat//模块主体元素 
3..list_*(.list_v,.list_h,.list-t,.list_top,…)//列表元素，详见“列表” 
4..m//更多，可延伸至“绝对定位于右上角”的元素 
5..s1,.s2,…//用于子单元块需各自定义样式的元素，如菜单、排行榜等 
6..s//特殊元素，如果一个元素相对于兄弟节点特殊，则用之 
7..b//广告位 
8..p,.d,.d_*,.h//数据块内元素，分别为图片、详细、详细内元素、操作 
9..handle//操作元素 
10..m_*(.mVideo,.mComment,.mUser,.mSubject,…)//数据块元素 
11..*_fix//*元素的补丁元素 
12..current//当前元素

四 : div+css网页标准布局实例教程

今天学习《十天学会web标准(div+css)》的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的完成,整个流程下来,希望能对各位有所帮助。由于本节内容较多,将分三部分来讲解。
建立站点
结构分析
搭建框架
切割效果图
布局页面——头部和导航
布局页面——侧边栏
布局页面——主体部分
底部和细节调整
相对路径和相对于根目录路径
一、建立站点
前面的课程都是零碎讲解一些相关知识,那么要做一个网站,首先需要建立一个站点。那么什么是站点,为什么要建立一个站点呢?因为网站不同于其它文件,比如一个图片,放到哪个盘哪个目录下都可以访问。而网站是许多文件相互关联的,所以要专门一个目录把它们分门别类存放起来。如果搞过视频编辑的朋友都知道,需要先建立一个工程,把原始的视频文件、图片素材分类放好,也是这个道理。下面以在D盘建立一个jiaocheng文件夹为例,在dreamweaver(简称DW)里创建一个站点指向这个文件夹,然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。
保存后,一个站点就建立起来了,我用的是DW cs5版本,不同版本界面有所不同。如果要连接FTP,需要设置服务器选项(后面会涉及到)。站点建立好后,我们先建立一个images和css文件夹,分别用来存放图片和css文件。直接在windows的资源管理器下建立或者在dw里建立都是可以的;在dw建立需要在文件面板列表的根目录上点击右键,选择新建文件夹后更改名字即可。
二、结构分析
创建完站点后,就需要对页面结构进行分析了,根据效果图,分析页面分为几大块,该怎么布局更合理。下面这个图是我做的一个企业网站的模板,虽然不怎么好看,但目的是把前边学的东西全都给串起来,让大家掌握各种情况的处理方法,先看下效果图及在网页中显示的样式:
在浏览器中打开效果图预览
从图中可以看出整个页面分为头部区域、导航区域、主体部分和底部,其中主体部分又分为左右两列,整个页面居中显示,看明白了这点,下边的框架就好搭建了。整体框架结果图如下:
三、搭建框架
首先在dw里新建一个html文件:
点击创建后会自动生成如下代码的一个html文件,保存为index.html并把无标题文档改为:主页。强调一点,许多同学喜欢把第一行代码删除掉,认为没用,其实这句话的作用大着呢,它标明以何种形式解析文档,如果删除可能会引起样式表失效或其它意想不到的问题。接下来需要插入以上各个块的标签了,以插入header的标签为例,其它的插入方法类同。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>主页</title></head>
<body></body></html>
按照上图的方法依次插入标签,或者直接在代码视图中手工输入,代码如下:(注意main和side在maincontent里包含着呢)
<div id="header">此处显示 id "header" 的内容</div><div id="nav">此处显示 id "nav" 的内容</div><div id="maincontent">? <div id="main">此处显示 id "main" 的内容</div>? <div id="side">此处显示 id "side" 的内容</div></div><div id="footer">此处显示 id "footer" 的内容</div>
从上边的效果图分析得知,整个网页是居中浏览器显示的,按照这样的写法需要把以上的header、nav、maincontent、footer都设置宽度并居中,这样做起来很麻烦,所以再在这些标签外增加一下父标签,设置这个父标签宽度并居中后,是不是所有的标签都居中了呢。增加后的代码如下:
<div id="container"><div id="header">此处显示 id "header" 的内容</div><div id="nav">此处显示 id "nav" 的内容</div><div id="maincontent">? <div id="main">此处显示 id "main" 的内容</div>? <div id="side">此处显示 id "side" 的内容</div></div><div id="footer">此处显示 id "footer" 的内容</div></div>
html框架代码写完后,下边就需要设置css样式表了。先测量下效果图的整体宽度,然后设置container也是这个宽度并居中。说起测量效果图宽度,方法有多种,可以直接查看图片尺寸。如果测量其中某一块的宽度,可以使用测量软件,也可以在ps下测量。本人一般在ps下测量,因为效果图在ps下制作的,所以用ps测量也比较方便。方法是首选项里把ps的单位改为像素,然后用选区选中要测量的部分,在信息面板中就显示出当前选区的宽高了(如果你实在不知道怎么改单位,怎么选区怎么查看的,就要补习一下ps啦)。
测量后得知:整体宽度为900px,main部的宽度为664px,side宽度为228px。把这三个基本的宽度测量后,下面就可以写css代码了。由于本实例是按照实际当中应用来做的,所以css样式表就最好写在单独文件里了,不要再写在文件内部了,这样可以利用代码的重用性,减少很多劳动强度。下面就新建一个css样式表文件:在DW文件菜单选择新建,然后在打开的窗口页面类型中选择css,创建后保存在css文件夹中并命名为layout.css
保存后先设置全局的样式,而后写每一块单独的样式,全局样式如下:
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}ul { list-style:none;}img { border:0px;}a { color:#05a; text-decoration:none;}a:hover { color:#f00;}
全局的样式定义完后,下面定义以上几大块的样式,先设置下#containerr的样式如下:
#container { width:900px; margin:0 auto;}
预览下index.html,发现并没有改变,这是为什么呢?因为刚定义的样式表没有和html文件关联,所以设置的样式当然不能对它生效了,还记得第一天课时讲的几种样式并联方式吗?下面我操作一遍:在css面板中点击附加样式表按钮,然后在弹出的窗口中选择刚才创建的样式表文件,确定,ok了,预览一下,是不是整体已经居中了呢。
如果已经是宽度为900px并居中,说明样式和文件关联好了。这就是为什么要定义一个站点了,因为许多文件要关联在一起才能构成一个完整的网页,所以要把它们放在一起,才能让这个页面找到和它相关的文件在哪里。下面设置内部几大块的样式,为了便于观察,我们把部分块设置了背景色。代码如下:
/*body*/#container { width:900px; margin:0 auto;}
/*header*/#header { height:70px; background:#CCFFCC; margin-bottom:8px;}#nav { height:30px; background:#CCFFCC; margin-bottom:8px;}
/*main*/#maincontent { margin-bottom:8px;}#main { float:left; width:664px; height:500px; background:#FFFF99;}#side { float:right; width:228px; height:500px; background:#FFCC99;}
/*footer*/#footer { height:70px; background:#CCFFCC;}
现在预览一下:在IE6下#maincontent的底部外边距并没有生效,而在IE8下,#footer干脆跑到#maincontent的下边了,这又是怎么回事呢?如果前边几天你都认真学的话,那么这个问题已经不是问题了。这就是之前我们讲的,如果一个容器内的元素都浮动的话,那么它的高度将不会去适应内部元素的高度。解决办法是在#maincontent增加 overflow:auto; zoom:1;,这样就可以让它自动适应内部元素的高度了。
现在再预览一下,是不是都正常了。为了更加保险,建议在header、nav、maincontent、footer之间增加如下一句代码并设置css样式如下,它的作用是清除浮动。
<div class="clearfloat"></div>.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}
提示:可以先修改部分代码后再运行
四、切割效果图
基本框架搭建完毕后,下一步就是要分析每一块该怎么切图了。切图方法有多种,可以使用ps或fireworks自带的切片工具,也可以用QQ的截屏或者创建新文件,把需要的部分复制过来保存都可以,关键看个人喜好了。
用ps的切片工具的话,把需要切割的区域用切片工具切分,如果要设置图片的名称,请使用切片选择工具,然后在切片上双击,会弹出如下窗口,填写名字后确定即可。
切割完后,需要保存图片了,选择文件——存储为web和设备所用格式,在弹出的窗口中点击选中切片,然后在右侧可以设置当前切片的图片格式。这里有个技巧,一般小型色彩单一的图片,采用gif格式,照片类大型图片采用jpg,这样生成的图片既能保证质量,图片体积又小,详细了解可参看:
设置完图片的格式后,就可以存储了,这里选择到images的上一级目录就行了,ps会自动创建images目录并把图片文件放入,如果已存在,直接放入。在格式处选择仅限图像,如果选择html和图像,ps会自动生成一个表格式的网页,这个页面不是我们需要的,就不让它生成了;还有一个需要注意的地方就是选择所有用户切片,这样只把我们手动切割的图片保存下来,其它的就不保存了。保存后的图片如下所示,其中hot_bg.gif这张图片切割时没有隐藏上边的文字,一会儿在ps里再处理一下把文字抹掉。
目前所切的图片只是一部分,并没有把整个页面所需的图片全都切割下来,比如导航部分所用背景图片可以放到一张图片上,下面就用新建文件,然后用QQ截屏,粘贴过去的方法来创建。
分析一下上图的导航部分:1、两端的圆角;2、鼠标划过状态和当前栏目状态宽度应该随着字数的多少而改变;3、二级导航有鼠标划过时的状态。分析完之后,就需要把需要的图片整合到一张图片上了,整合的结果如下图,这个根据自己的需要进行整合。其实完全可以把其它一些小图标都整合在一张,但那样操作起来比较麻烦,所以我们还是归一下类,把相关的图标整合到一起。
接下来整合侧边栏的背景图片,分析发现侧边栏应用同样的样式,只不过高度有所不同,而且是四角都是圆角,所以只用一个通用的就可以满足所有侧边栏块的需求了。那么怎么制作这个通用的背景呢?从下图我们发现,标题的高度都是一样的,只不过是下边的内容高度不同而已,那么我们把下边内容的背景制作的足够长,超过可能出现的最大高度就可以满足需求了。
整合后的效果如上图,如果你现在还不明白为什么要这么做,那么一会儿写完样式表你就明白了。下面把三个图标也给切出来,如下图:
这些完事后,还有联系我们的图片和修饰小图标了。联系我们的图片如下,这里的图片和小图标要背景透明,这样才不会遮盖下面的背景。

五 : css网页切图实例教程

CSS网页切图实例教程

　　(整体效果图)

　　1、分析网页整体结构，如下图所示，我们把网页分为五个部分。

　　2、根据上图先写出HTML代码：

　　如果是初学者建议，在每个DIV先用数字12345进行代表这是第几个。

　　3、编写统一样式代码。因为默认HTML元素是有间距，先让这些间距归0。然后在设置UL列表元素去掉小圆点。包括统一我们文字的大小。以及链接文字的样式

　　CSS代码如下：

　　CSS样式代码解释：

*{
margin:0px;
padding:0px;
}

　　*代表所有HTML元素，我们让其内外边距归0。这是开始时做法。等全部HTML写完，需要把这个地方根据用到HTML换成群组选择符如 body,div,ul,li等。也就是说。我们只需要把使用的HTML进行归0即可。

　　Ul{list-style:none;}

　　让UL没有小圆点

　　A{color:#000;font-size:13px;text-decoration:none;}

　　A:hover{text-decoration:underline;}

　　针对A链接进行设置，首先让A链接的四种状态改变为文字颜色是黑色的，然后文字大小是13PX。去掉A链接的下划线

　　A:hover：当鼠标悬停时，我们使其出现下划线

　　4、我们使用PS测量网页实际宽度为1000像素，然后我们为五个DIV设置统一居中。

　　CSS代码如下：

#header,#banner,#nav,#main,#footer{
margin:0px auto;
width:1000px;
}

　　5、现在开始制作头部HEAD部分，在这个部分我们通过两步去实现。在顶部下方有一个背景。然后是公司LOGO标志

　　首先我们先把背景写出来：

　　代码如下：

#header{
height:102px;
background:url(images/topdi.gif) no-repeat;
}

　　代码解释：LOGO直接放图也可以。从网站优化角度考虑。我们可以使用以图换字方式。然后我们添加HTML代码：

　　放网站的标题

　　H1网页认为最重要的标题。所以我们把LOGO放到H1里面

　　CSS代码：

#header h1{
height:82px;
width:231px;
background:url(images/logo.gif) no-repeat;
text-indent:-999px;
}

　　代码解释：

　　我们为H1先设置宽度与高度。然后添加背景。最后使用text-indent:-999px;让文字从画面缩进走。

　　6、制作网页的BANNER部分。我们这个显示广告的地方一般有两种情况，要么就是使用轮播图，要么放一个动画。但是我们这个地方只需要完成一个背景然后在背景显示我们的广告语。制作过程。先让DIV中显示背景，然后在DIV里放一个段落去显示文字

　　HTML代码如下：

<div id="banner">
<p>
力争行业<span>典</span>范<br/>
STRIVE FOR A MODDEL
</p>
</div>

　　CSS样式如下：

#banner{
height:268px;
background:url(images/banner.jpg) no-repeat;
}
#banner p{
color:#FFF;
padding-top:80px;
padding-left:80px;
font-size:14px;
font-weight:bold;
}

　　解释：1、让这个段落文字颜色为白色

　　2、距顶与距左空一个间隔。

　　3、设置文字大小与文字加粗

#banner p span{
color:#FF0;
font-size:18px;
}

　　解释：段落中某个字需要重点强调。可以在这个字的四周添加一个SPAN(PS：SPAN是无意义的标签，就是为了添加样式方便)。

　　7、导航的制作，是一个典型的ULLI列表。我们先写出HTML代码，而在我们导航列表之间有一个竖线隔开。

　　根据HTML去写CSS样式。

#nav{
height:25px;
background:#000;
}

　　CSS样式代码的解释：

　　导航的父元素DIV设定高度。然后设定背景颜色为黑色

#nav ul{
list-style:none;
padding-left:10px;
}

　　CSS样式代码的解释：

　　让导航UL去掉默认小圆点。让整体UL居左空一定距离。

#nav ul li{
color:#fff;
float:left;
line-height:25px;
}

　　CSS样式代码的解释：

　　让导航中具体项目文字颜色改成白色，因为LI元素是块元素的。所以我们为其设置浮动。这样就能让导航同一行显示。line-height:25px;是为了让LI在导航垂直居中。

#nav ul li a{
color:#FFF;
font-size:13px;
padding:0px 15px;
text-decoration:none;
}

　　CSS样式代码的解释：

　　设置导航的链接状态，为什么设置两次颜色，LI设置白色，最主要是为了竖线用的。而链接只能通过A这个样式进行设置。而且padding:0px 15px;这个属性是针对竖线使其在两个导航文字正中间。

#nav ul li a:hover{
color:#FF0;
}

　　CSS样式代码的解释：

　　设置鼠标悬停时。改变一下链接的颜色

　　8、设置网页主体内容区域：在之前已经分析过了。这是一个典型的两列居中布局。我们是让<div id="main">4</div>先设置宽度，并让其居中。然后在这个DIV中再嵌套DIV。然后让嵌套的DIV两列布局

　　HTML代码：

<div class="sider">
<h4>公司新闻</h4>
<ul>
<li><a href="#">这是新闻标题1</a><span>2015-5-10</span></li>
省略……
</ul>
</div>
<div class="container">
<h4>公司产品</h4>
<dl>
<dt><img src="images/chanpin.jpg"/></dt>
<dd>HD32B68S</dd>
<dd>所属类别: CRT外壳</dd>
<dd>名称： HD32B68S </dd>
<dd>浏览数： 52 次 </dd>
</dl>
<dl>
<dt><img src="images/chanpin.jpg"/></dt>
<dd>HD32B68S</dd>
<dd>所属类别: CRT外壳</dd>
<dd>名称： HD32B68S </dd>
<dd>浏览数： 52 次 </dd>
</dl>
</div>

　　HTML代码解释：

　　1、栏目名称标题。我们采用H4或者H3标记，一方面有利于样式的编写，二方面来说。在网站优化方面，相对比较重要的文字，在这里采用H4

　　2、新闻典型的ULLI列表

　　3、而右侧产品。使用的是DL DT DD叙述式清单。DT往往用于标题。而DD用于描述。这样的话。我们可以认为产品图片是标题。而产品的各个属性是描述。

　　最后进行样式的编写

#main{
clear:both;
padding:20px 0px;
}

　　CSS样式代码的解释：

　　1、 clear:both;表示清除浮动。为什么要写这个。是因为导航的LI元素写浮动了。而且如下图所示：会有一部分空白。这样就会影响下方网页内容。所以在主体内容上要先清除浮动。

　　2、 padding:20px 0px;让主体内容居顶与居顶留一定间隔

#main .sider{
width:370px;
margin:0px 20px;
float:left;
}

　　CSS样式代码的解释：

　　是个两列布局，先让左侧新闻模块。设置宽度，并且float浮动。然后设置与产品模块的间距。

#main .sider h4,#main .container h4{
background:url(images/libiao.jpg) no-repeat;
text-indent:2em;
font-size:14px;
padding-bottom:5px;
}

　　CSS样式代码的解释：

　　1、新闻的栏目名称与产品栏目是一样的，所以用到一个群组选择符

　　2、我们栏目名称小图标做成背景。让文字缩进，再控制一下文字大小即可。

#main .sider ul{
list-style:none;
}
#main .sider ul li {
height:24px;
line-height:24px;
border-bottom:1px dotted #ccc;
}

　　CSS样式代码的解释：

　　让新闻列表设置一定高度，并且垂直居中。在底部加一条虚线（border-bottom:1px dotted #ccc;
）
#main .sider ul li a{
font-size:13px;
text-decoration:none;
color:#666;
}

　　CSS样式代码的解释：

　　控制新闻列表的链接状态：去掉下划线text-decoration:none;设置文字颜色

#main .sider ul li a:hover{
color:#F00;
}
#main .sider ul li span{
font-size:13px;
color:#666;
padding-left:60px;
}
#main .container{
width:570px;
margin:0px 20px 0px 0px;
float:left;
}

　　CSS样式代码的解释：

　　1、设置产品内容区域宽度与浮动

　　2、最后 570PX+20PX+370PX+40PX 正好1000PX。这个地方是典型的盒模型。要理解。这些值都是怎么得来的。

#main .container dl{
width:260px;
float:left;
}

　　CSS样式代码的解释：

　　我们采用DL清单列表，这样的话。我们的产品是并列。只需要让DL浮动一下即可。也有利于后台程序循环输出内容

#main .container dl dt{
float:left;
}

　　CSS样式代码的解释：

　　让DL中的标题DT浮动

#main .container dl dd{
font-size:13px;
color:#333;
text-indent:1em;
height:22px;
}

　　CSS样式代码的解释：

　　最后控制产品描述的文字具体属性就可以。

　　建议大家采用DL DT DD去写

　　大家可以尝试写一下底部信息

　　作者：css教程 www.divcss8.com

本文标题：div css实例教程-CSS结合DIV实现的右侧浮动效果
本文地址： http://www.61k.com/1076299.html

61阅读

div css实例教程-CSS结合DIV实现的右侧浮动效果

网页设计切图教程

div css

为什么呢