两个div+css整站的例子资源-CSDN文库资源-CSDN文库

共68个文件

gif：64个

css：2个

htm：2个

5星 · 超过95%的资源需积分: 9 110 浏览量 2007-09-07 12:51:56 上传评论收藏 167KB RAR 举报

在网页设计领域，Div（Division）和CSS（Cascading Style Sheets）是构建现代网站布局不可或缺的元素。本文将深入探讨“两个div+css整站的例子”，帮助你全面理解如何利用这两个工具创建美观且功能完善的网站。 Div是HTML中的一个块级元素，它允许我们将网页内容划分为多个独立的区域或“分区”。通过设置不同的Div，我们可以更好地组织和控制网页的布局。在案例中，可能会有两个主要的Div，分别用于主要内容和侧边栏，或者头部、主体和底部等不同部分。 CSS则负责定义这些Div的样式，包括颜色、字体、大小、位置等。它的优势在于分离了内容和表现，使得代码更易于管理和维护。在“两个div+css整站的例子”中，你将看到如何使用CSS选择器来选中特定的Div，并为其应用样式规则。例如，你可以用`.main-content`和`.sidebar`这样的类选择器，或者`#header`这样的ID选择器，为每个Div赋予独特的样式。 1. **浮动布局**：在早期的网页设计中，浮动布局（float）常被用来实现两列布局。其中一个Div（如主要内容）可能设置为`float: left;`，另一个Div（如侧边栏）设置为`float: right;`。这样，两个Div就会并排显示，直到其中一栏的内容填满其容器，然后另一栏才会在其下方继续排列。 2. **定位布局**：除了浮动，还可以使用绝对定位（absolute positioning）或相对定位（relative positioning）来控制Div的位置。通过设置`position`属性，可以精确地调整Div相对于其父元素或文档的坐标。 3. **响应式设计**：在当前的Web开发中，响应式设计是必不可少的，它确保网站在不同设备上都能有良好的展示。可以使用媒体查询（media queries）来针对不同屏幕尺寸应用不同的CSS规则，实现灵活的布局。 4. **Flexbox布局**：随着CSS3的引入，Flexbox提供了一种更为强大的方式来处理复杂的布局。在例子中，可能会使用`display: flex;`来创建一个弹性容器，然后通过`flex-direction`、`justify-content`和`align-items`等属性来调整子元素的排列和对齐方式。 5. **Grid布局**：网格布局（Grid）是另一种新的布局模式，尤其适合创建多列布局。通过设定行和列的大小，以及单元格的间距，可以轻松创建出整齐有序的网格系统。在学习这个例子时，你还会接触到其他CSS特性，比如盒模型（box model）、边距（margin）和填充（padding），以及颜色、背景、边框等基本样式。此外，还可以了解到如何优化CSS性能，比如减少选择器的复杂性，合并重复的样式，以及使用外部CSS文件进行代码分离。总结起来，“两个div+css整站的例子”是一个理想的实践平台，它将帮助你深入理解Div和CSS在构建网站时的作用，以及如何通过它们创造出既美观又实用的网页。通过实际操作，你可以掌握网页布局的多种技巧，提升自己的前端开发技能。

资源推荐

资源详情

资源评论

收起资源包目录

div+css整站的例子.rar （68个子文件）

两个div+css整站的例子

cssdiv-0002

css

style.css 10KB

images

skin1

linebg.gif 114B

s_leftbg01.gif 3KB

btn1.gif 1KB

onbt03.gif 2KB

onbt01_2.gif 1KB

bg02.gif 279B

left03.gif 998B

left02.gif 2KB

viewbtn.gif 436B

right03.gif 998B

menu10bg.gif 153B

onbt04.gif 2KB

right01.gif 753B

btn2.gif 1KB

left01.gif 706B

ad_right.gif 2KB

np18.gif 69B

p1.gif 328B

np27.gif 151B

logo.gif 2KB

s_music.gif 1KB

right02.gif 3KB

np23.gif 995B

onbt02.gif 2KB

onbt05.gif 2KB

np26.gif 692B

wnew.gif 605B

linebg1.gif 56B

line03bg.gif 50B

li.gif 59B

ttt.gif 101B

np25.gif 696B

menu11bg.gif 144B

index.htm 17KB

cssdiv-0001

index.htm 13KB

style

001.css 14KB

images

style01

kszd.gif 4KB

go.gif 214B

hotnews.gif 4KB

top_bg.gif 885B

gen_menu.gif 1KB

newsguide.gif 4KB

bico.gif 62B

jbtx.gif 3KB

copyrightbg.gif 700B

ad5.gif 3KB

menu_bg.gif 148B

logo.gif 5KB

at_ico.gif 826B

ad4.gif 5KB

pp.gif 4KB

use_menu.gif 1KB

hotbloger.gif 3KB

bloght.gif 4KB

wytd.gif 4KB

atmore.gif 1KB

ad3.gif 20KB

ad2.gif 6KB

ymzt.gif 4KB

sqrm.gif 3KB

lxxz.gif 4KB

li.gif 59B

ad1.gif 18KB

club.gif 6KB

articel_title_bg.gif 578B

hwsh.gif 4KB

yxzl.gif 4KB

<!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" lang="gb2312"> <head> <title>IQ星座网【iqoo.com】,星座资讯,名人星座,星座配对,血型资讯,星座壁纸,星座交友,星座测试,每日运程,运程测试</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Pragma" content="no-cache" /> <meta name="description" content="IQ星座网,星座资讯,名人星座,星座配对,血型资讯,星座壁纸,星座交友,星座测试,每日运程,运程测试" /> <meta name="Designer,Programmer" content="dodo" /> <meta name="keywords" content="iqoo,iqoo.com,星座网,12星座资讯,名人星座,12星座配对,血型资讯,12星座壁纸,12星座交友,12星座测试,每日运程,运程测试,12星座资料,婚姻测试,生日资料" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> </head> <body> <div id="iqoo"> <div id="title"> <div id="title_l"></div> <div id="title_m"></div> <div id="title_r"></div> </div> </div> <div id="line"> <div id="menu"> <div class="left"><img src="images/skin1/pix.gif" height="1" width="1" alt="" /></div> <div class="middle"><img src="images/skin1/pix.gif" height="1" width="1" alt="" /></div> <div class="right"><img src="images/skin1/pix.gif" height="1" width="1" alt="" /></div> </div> <div id="menu1"> <div class="left0"></div> <div class="left"></div> <div class="middle"> <div class="middle1"><ul><li class="usebtn"><a href="#">星座占卜</a></li><li><a href="#">音乐MP3</a></li><li><a href="#">星座Blogs</a></li><li><a href="#">壁纸图库</a></li><li><a href="#">资源下载</a></li></ul></div> <div class="middle2"><div class="middle3_l"></div><div class="middle3"></div><div class="middle3_r"></div></div> <div id="sfrom"><form action="" method="post"><select style="width:100px"><option>选择检索</option></select> <input type="text" size="50" /> <input type="submit" value="确定" /></form></div> </div> <div class="right"><div class="music" onclick="javascript:document.links[0].style.behavior='url(#default#homepage)'; document.links[0].setHomePage('http://www.iqoo.com');"></div><div class="adright"><a href="http://www.tigtag.com" target="_blank"><img src="images/skin1/ad_right.gif" alt="滴答出国资讯" border="0" /></a></div></div> </div> <div id="line03"> <div id="line03_l"><img src="images/skin1/pix.gif" height="1" width="1" alt="" /></div> <div id="line03_m"><img src="images/skin1/pix.gif" height="1" width="1" alt="" /></div> <div id="line03_r"><img src="images/skin1/pix.gif" height="1" width="1" alt="" /></div> </div> <div id="line04"> <div id="line04_l"><img src="images/skin1/pix.gif" height="1" width="1" alt="" /></div> <div id="line04_m"><img src="images/skin1/p1.gif" alt="" align="middle" /> 采用DIV+CSS标准实现网站重构--网页设计师阿捷www.w3cn.org</div> <div id="line04_m1"><img src="images/skin1/p1.gif" align="middle" alt="" /> 农历万年历 | 在线塔罗牌 | 婚配测试 | 在线测字 | 在线星盘</div> <div id="line04_r"><img src="images/skin1/pix.gif" height="1" width="1" alt="" align="middle" /></div> </div> </div> <div id="content1"> <div id="astro1"><div class="star"> <img src="images/skin1/wnew.gif" alt="" />十二星座详细资料</div> <ul> <li >白羊座</li><li>金牛座</li><li>双子座</li><li>巨蟹座</li><li>狮子座</li><li>处女座</li> <li >天秤座</li><li>天蝎座</li><li>射手座</li><li>摩羯座</li><li>水瓶座</li><li>双鱼座</li> </ul> <div id="yuncheng"> <form name="lucky" method="post" action="lucky.asp" >十二星座运程： <select name="astro" size="1"> <option selected="selected" value="水瓶座">水瓶座 01.20-02.18</option> <option value="双鱼座">双鱼座 02.19-03.20</option> <option value="白羊座">白羊座 03.21-04.20</option> <option value="金牛座">金牛座 04.21-05.20</option> <option value="双子座">双子座 05.21-06.21</option> <option value="巨蟹座">巨蟹座 06.22-07.22</option> <option value="狮子座">狮子座 07.23-08.22</option> <option value="处女座">处女座 08.23-09.22</option> <option value="天秤座">天秤座 09.23-10.22</option> <option value="天蝎座">天蝎座 10.23-11.22</option> <option value="射手座">射手座 11.23-12.21</option> <option value="魔羯座">魔羯座 12.22-01.19</option> </select><br /> <select name="luckytype" style="width:80px"> <option value="all">全年运程</option> <option value="1to6">1-6月运程</option> <option value="7to12">7-12月运程</option> </select><br /><input type="checkbox" name="chart" />性格<input type="checkbox" name="life" />情感<input type="hidden" name="astrochart" /><input type="hidden" name="astrolife" /> <input type="image" src="images/skin1/viewbtn.gif" onclick="astrolucky()" /> </form> </div> </div> <div id="astro2"><div class="new"> <img src="images/skin1/wnew.gif" alt="" />热门文章</div><ul> <li>十二星座赖床记~(07-04) [1350] </li> <li>向十二星座推荐的特色粽子(06-23) [520] </li> <li>毕业前夕的十二星座(06-23) [1126] </li> <li>十二星座老爸的父亲节暗示(06-20) [347] </li> <li>十二星座面对论坛趣帖的个性回复(06-11) [857] </li> <li>十二星座音乐mp3下载，听听属于...(06-08) [2654] </li> <li>十二星座赖床记~(07-04) [1350] </li> <li>向十二星座推荐的特色粽子(06-23) [520] </li> <li>毕业前夕的十二星座(06-23) [1126] </li> <li>十二星座老爸的父亲节暗示(06-20) [347] </li> </ul> </div> <div id="c1l"> <div class="new"> <img src="images/skin1/ttt.gif" alt="" /> 星座测试</div> <form action="horoday.asp" method="post" >生日星座： <select name="month"> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> <option value="4">4月</option> <option value="5">5月</option> <option value="6">6月</option> <option value="7">7月</option> <option value="8">8月</option> <option value="9">9月</option> <option value="10">10月</option> <option value="11">11月</option> <option value="12">12月</option> </select> <select name="day"> <option value="1">1日</option> <option value="2">2日</option> <option value="3">3日</option> <option value="4">4日</option> <option value="5">5日</option> <option value="6">6日</option> <option value="7">7日</option> <option value="8">8日</option> <option value="9">9日</option> <option value="10">10日</option> <option value="11">11日</option> <option value="12">12日</option> <option value="13">13日</option> <option value="14">14日</option> <option value="15">15日</option> <option value="16">16日</option> <option value="17">17日</option> <option value="18">18日</option> <option value="19">19日</option> <option value="20">20日</option> <option value="21">21日</option> <option value="22">22日</option> <option value="23">23日</option> <option value="24">24日</option> <option value="25">25日</option> <option value="26">26日</option> <option value="27">27日</option> <option value="28">28日</option> <option value="29">29日</option> <option value="30">30日</option> <option value="31">31日</option> </select> <input type="image" src="images/skin1/viewbtn.gif" /> </form><hr class="hr" /> <form method="post" name="peiduiform" onsubmit="return peidui(this)" action=""> 星座配对：<select name="my" size="1"> <option selected="selected" value="水瓶座">水瓶座</option> <option value="双鱼座">双鱼座</option> <option value="白羊座">白羊座</option> <option value="金牛座">金牛座</option> <option value="双子座">双子座</option> <option value="巨蟹座">巨蟹座</option> <option value="狮子座">狮子座</option> <option value="处女座">处女座</option> <option value="天秤座">天秤座</option> <option value="天蝎座">天蝎座</option> <option value="射手座">射手座</option> <option value="魔羯座">魔羯座</option> </select>-<select name="to" size="1"> <option selected="selected" value="水瓶座">水瓶座</option> <option value="双鱼座">双鱼座</option> <option value="白羊座">白羊座</option> <option value="金牛座">金牛座</option> <option value="双子座">双子座</option> <option value="巨蟹座">巨蟹座</option> <option value="狮子座">狮子座</option> <option value="处女座">处女座</option> <option value="天秤座">天秤座

评论收藏

内容反馈