【免费】div+css网页布局入门+XHTML与CSS基础资源-CSDN文库

共32个文件

gif：16个

jpg：11个

css：3个

需积分: 0 49 浏览量 2008-09-29 16:31:06 上传评论收藏 258KB RAR 举报

在网页设计领域，`div+css`布局是构建现代网页的标准技术之一，它极大地提高了页面的可维护性和表现力。本教程将引导你入门`div+css`网页布局，并深入理解`XHTML`与`CSS`的基础知识。我们来了解一下`div`元素。`div`（Division）是HTML中的一个块级元素，用于组织和分隔页面内容。通过使用`div`，我们可以创建逻辑上的区域，并用CSS样式来控制这些区域的外观和布局。`div`元素本身没有特定的语义，但通过CSS，我们可以将其转化为各种复杂的布局结构，如两栏、三栏布局甚至是响应式设计。 `CSS`（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现。CSS定义了如何在媒体（如屏幕、打印机）上展示元素。通过使用CSS，我们可以实现字体、颜色、间距、布局等视觉效果的控制，使网页设计更具灵活性和个性化。在`XHTML`（eXtensible HyperText Markup Language）方面，它是HTML的一个严格版本，结合了HTML的易用性和XML的严谨性。`XHTML`语法要求所有元素都正确闭合，这对代码的规范化和可读性有很大帮助。`XHTML`与`CSS`的结合使用，可以实现内容与表现的分离，提高网页的可访问性和搜索引擎优化。学习`div+css`布局，你需要掌握以下关键点： 1. **盒模型**：理解CSS的盒模型，包括内容（content）、内边距（padding）、边框（border）和外边距（margin），这是布局的基础。 2. **定位机制**：熟悉静态定位、相对定位、绝对定位和固定定位，以及`z-index`属性在层叠上下文中的作用。 3. **浮动布局**：了解`float`属性如何让元素脱离正常文档流并影响周围元素，以及如何清除浮动避免父元素高度塌陷。 4. **Flexbox弹性盒模型**：现代布局解决方案，能轻松实现一维布局（如行或列），如主轴对齐、侧轴对齐、弹性分配空间等。 5. **Grid布局**：适用于二维布局，如网格系统，能够精确控制元素的行和列位置。 6. **选择器**：熟练使用类选择器、ID选择器、元素选择器、后代选择器、子元素选择器等，以便更精准地应用样式。 7. **响应式设计**：利用媒体查询（media queries）实现不同设备和屏幕尺寸下的适配，确保网页在手机、平板电脑和桌面电脑上的良好显示。 8. **浏览器兼容性**：了解不同浏览器对CSS特性的支持情况，学习如何使用polyfill或前缀解决兼容问题。在“第二课素材”中，可能包含了进一步讲解这些概念的示例代码、图片或练习项目。通过实践这些素材，你可以更好地掌握`div+css`布局和`XHTML`与`CSS`的基础，为创建专业且美观的网页打下坚实基础。

资源详情

资源评论

资源推荐

收起资源包目录

div+css网页布局入门(二) XHTML与CSS基础.rar （32个子文件）

第二课素材

photo

new_06.jpg 6KB

new_03.jpg 5KB

recom_01.jpg 6KB

new_04.jpg 7KB

new_02.jpg 4KB

new_05.jpg 7KB

new_01.jpg 7KB

ad_2_temp1.gif 2KB

ad_1_temp2.jpg 21KB

ad_1_temp1.jpg 21KB

recom_02.jpg 7KB

img

b_02.gif 56B

info_h1.gif 3KB

body_bg.gif 48B

nav_bg_left.gif 669B

new_h1.gif 4KB

box_bg.gif 92B

recommend_h1.gif 4KB

sort_h_1.gif 3KB

b_01.gif 265B

sort_h_2.gif 3KB

logo_bg.gif 38KB

footer_bg.gif 254B

nav_bg_right.gif 2KB

login_bg.jpg 3KB

rank_h1.gif 3KB

new_bg.gif 541B

media

logo.swf 98KB

index.html 9KB

style

basic.css 2KB

main.css 2KB

link.css 1KB

<!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> <meta name="keywords" content="商城,首饰,珠宝,饰品,金,银,钻石,玉,珍珠,钟表" /> <meta name="description" content="流行首饰专卖，各种珠宝、钟表、饰品等。" /> <link href="style/basic.css" rel="stylesheet" type="text/css" /> <link href="style/link.css" rel="stylesheet" type="text/css" media="screen" /> <style type="text/css" media="all"> @import url("style/main.css"); </style> </head> <body> <div id="box"> <div id="logo"> <object data="media/logo.swf" type="application/x-shockwave-flash" width="766" height="148"> <param name="movie" value="media/logo.swf" /> <param name="SCALE" value="exactfit" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> </object> </div> <div id="nav"> <ul> <li><a href="#"><span>首页</span></a></li> <li><a href="#"><span>金饰</span></a></li> <li><a href="#"><span>钻石</span></a></li> <li><a href="#"><span>925银饰</span></a></li> <li><a href="#"><span>流行饰品</span></a></li> <li><a href="#"><span>珍珠</span></a></li> <li><a href="#"><span>品牌专卖</span></a></li> <li><a href="#"><span>订制</span></a></li> <li><a href="#"><span class="last">优惠券</span></a></li> </ul> </div> <div id="link"> <div id="login"> <form id="f_login" name="f_login" method="post" action=""> <fieldset> <legend>用户登陆</legend> <label for="f_login_name">用户名：</label> <input type="text" name="f_login_name" tabindex="1" id="f_login_name" /> <label for="f_login_pass">密　码：</label> <input type="password" name="f_login_pass" tabindex="2" id="f_login_pass" /> <input name="f_login_ok" type="submit" class="btn" id="f_login_ok" tabindex="3" value="确定" /> <input name="f_login_reset" type="reset" class="btn" id="f_login_reset" tabindex="4" value="重填" /> </fieldset> <ul> <li><a href="#">免费注册</a></li> <li><a href="#">忘记密码</a></li> </ul> </form> </div> <div id="sort"> <h1 id="sort_h_1">按珠宝用途分类</h1> <ul> <li><a href="#">耳饰 Earrings</a></li> <li><a href="#"> 项链 Necklaces</a></li> <li><a href="#">手镯 Bracelets</a></li> <li><a href="#">戒指 Finger ring</a></li> <li><a href="#">胸饰 Brooches</a></li> <li><a href="#">头饰 Headwear</a></li> <li><a href="#">摆件 Ornament</a></li> <li><a href="#">钟表 Horologe</a></li> <li><a href="#">其他 Other</a></li> </ul> <h1 id="sort_h_2">按珠宝性质分类</h1> <ul> <li><a href="#">钻石 Diamond</a></li> <li><a href="#">翡翠 Emerald</a></li> <li><a href="#">白玉 Jade</a></li> <li><a href="#">珊瑚 Coral</a></li> <li><a href="#">水晶 Crystal</a></li> <li><a href="#">珍珠 Pearl</a></li> <li><a href="#">红宝石 Ruby</a></li> <li><a href="#">蓝宝石 Sapphire</a></li> <li><a href="#">贝壳 Conch</a></li> <li><a href="#">黄金 Gold</a></li> <li><a href="#">其他 Other</a></li> </ul> </div> <div id="ad_2"> <ul> <li><img src="photo/ad_2_temp1.gif" title="广告位招租" alt="广告" width="150" height="50" /></li> <li><img src="photo/ad_2_temp1.gif" title="广告位招租" alt="广告" width="150" height="50" /></li> </ul> </div>  </div> <div id="main"> <div id="ad_1"> <ul> <li><a href="#"><img src="photo/ad_1_temp1.jpg" title="点击欣赏[超可爱精巧花戒]" alt="主广告1" width="293" height="175" border="0" /></a></li><li><a href="#"><img src="photo/ad_1_temp2.jpg" title="点击欣赏[古埃及珍宝展]" alt="主广告2" width="293" height="175" border="0" /></a></li> </ul> </div>  <div id="recommend"> <h1>本周推荐</h1> <ol> <li> <dl> <dt><img src="photo/recom_01.jpg" alt="商品图片" /></dt> <dd class="title recom_title recom">紫水晶吊坠</dd> <dd class="memo recom">紫色，充满诱惑，美丽的小花在美丽的颈边悄悄绽放。谁会忍心说不？</dd> <dd class="price recom">原　价：￥128元</dd> <dd class="net_price recom"> 折扣价：￥108元</dd> <dd class="select"> <ul> <li class="btn buy"><a href="#" title="点击购买此商品">购买</a></li> <li class="btn favorite"><a href="#" title="点击将商品加入收藏夹">收藏</a></li> </ul> </dd> </dl> </li> <li> <dl> <dt><img src="photo/recom_02.jpg" alt="商品图片" /></dt> <dd class="title recom_title recom"> 紫水晶吊坠</dd> <dd class="memo recom">紫色，充满诱惑，美丽的小花在美丽的颈边悄悄绽放。谁会忍心说不？</dd> <dd class="price recom">原　价：￥128元</dd> <dd class="net_price recom">折扣价：￥108元</dd> <dd class="select"> <ul> <li class="btn buy"><a href="#" title="点击购买此商品">购买</a></li> <li class="btn favorite"><a href="#" title="点击将商品加入收藏夹">收藏</a></li> </ul> </dd> </dl> </li> </ol> </div>  <div id="new"> <h1>新品上架</h1> <ol> <li> <dl> <dt><img src="photo/new_01.jpg" alt="商品图片" /></dt> <dd class="title">紫水晶吊坠</dd> <dd class="price">原　价：￥128元</dd> <dd class="net_price">折扣价：￥108元</dd> <dd class="select new_btn"> <ul> <li class="btn buy"><a href="#" title="点击购买此商品">购买</a></li> <li class="btn favorite"><a href="#" title="点击将商品加入收藏夹">收藏</a></li> </ul> </dd> </dl> </li> <li> <dl> <dt><img src="photo/new_02.jpg" alt="商品图片" /></dt> <dd>紫水晶吊坠</dd> <dd class="price">原　价：￥128元</dd> <dd class="net_price">折扣价：￥108元</dd> <dd class="select new_btn"> <ul> <li class="btn buy"><a href="#" title="点击购买此商品">购买</a></li> <li class="btn favorite"><a href="#" title="点击将商品加入收藏夹">收藏</a></li> </ul> </dd> </dl> </li> <li> <dl> <dt><img src="photo/new_03.jpg" alt="商品图片" /></dt> <dd>紫水晶吊坠</dd> <dd class="price">原　价：￥128元</dd> <dd class="net_price">折扣价：￥108元</dd> <dd class="select new_btn"> <ul> <li class="btn buy"><a href="#" title="点击购买此商品">购买</a></li> <li class="btn favorite"><a href="#" title="点击将商品加入收藏夹">收藏</a></li> </ul> </dd> </dl> </li> <li> <dl> <dt><img src="photo/new_04.jpg" alt="商品图片" /></dt> <dd>紫水晶吊坠</dd> <dd class="price">原　价：￥128元</dd> <dd class="net_price">折扣价：￥108元</dd> <dd class="select new_btn"> <ul> <li class="btn buy"><a href="#" title="点击购买此商品">购买</a></li> <li class="btn favorite"><a href="#" title="点击将商品加入收藏夹">收藏</a></li> </ul> </dd> </dl> </li> <li> <dl> <dt><img src="photo/new_05.jpg" alt="商品图片" /></dt> <dd>紫水晶吊坠</dd> <dd class="price">原　价：￥128元</dd> <dd class="net_price">折扣价：￥108元</dd> <dd class="select new_btn"> <ul> <li class="btn buy"><a href="#" title="点击购买此商品">购买</a></li> <li class="btn favorite"><a href="#" title="点击将商品加入收藏夹">收藏</a></li> </ul> </dd> </dl> </li> <li> <dl> <dt><img src="photo/new_06.jpg" alt="商品图片" /></dt> <dd>紫水晶吊坠</dd> <dd cl