43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程

简介:

在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的。请把”DIV+CSS”这个词从脑子中删除,用”xHTML+CSS”替代吧!

今天向大家推荐43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程,在国外也可以叫做PSD2XHTML。如果你是以为网页设计师,可能会对将自己的效果图实现成语义化的xHTML页面感到头痛,还有一些CSS初学者对于xHTML+CSS处于懵懂状态,希望大家通过这43个”DIV+CSS”实例教程学习到语义化xHTML+CSS布局的精髓,即使你已经成为高手,我也相信其中有你值得学习的地方。

1.将 PSD 源文件转换 XHTML 教程

DIV+CSS教程

2.教你如何创建水平滚动网站布局

xHTML+CSS教程

3.从PSD到xHTML,按部就班教你创建DIV+CSS布局

DIV+CSS实例教程

4.从零开始创建CSS布局

xHTML+CSS实例

5.从零开始教您创建一个华丽高档的网页-xHTML+CSS教程

感兴趣的话也可以看看这个实例的设计教程,已译成中文
网页设计教程:使用Photoshop设计一个高档时尚的网页
DIV-CSS

6.4个简单的教程教你将PSD制作成CSS HTML

DIV+CSS教程

7.使用Drupal创建Killer乐队网站:6篇系列教程

这是个非常棒的关于使用Illustrator制作页面,Drupal(世界最著名的CMS系统之一)编码,符合标准的xHTML+CSS

完整教程索引:
第一部分:使用Illustrator设计页面
第二部分:使用Illustrator切图
第三部分:写xHTML
第四部分:Drupal主题模板
第五部分:Drupal管理
第六部分:总结和一些附加资源

xHTML+CSS教程

8.教你如何使用CSS创建性感的按钮

DIV+CSS实例教程

9.很酷的水平菜单悬停变大效果

xHTML+CSS实例

10.CSS模板教程

DIV-CSS

11.控制文本渐变效果CSS教程

DIV+CSS教程

12.CSS超大背景教程

xHTML+CSS教程

13.将PSD效果图转换成HTML

DIV+CSS实例教程

14.PSD切图和页面的实现

xHTML+CSS实例

15.模糊背景效果

DIV-CSS

16.使用CSS Sprites(将图片集合在一张图片中) 技术教程

DIV+CSS教程

17.手绘风格CSS导航按钮

xHTML+CSS教程

18.创建类似Crazy Egg价格列表效果的表格列高亮效果

DIV+CSS实例教程

19.CSS菜单教程

xHTML+CSS实例

20.Photoshop教程+切片+CSS编码

这个教程将教你使用Photoshop制作简洁的纵向菜单。

DIV-CSS

21.为网页模版切片并用CSS编码

DIV+CSS教程

22.为你的第一个PSD网页效果图编码教程

xHTML+CSS教程

23.使用简单的操作完成复杂的CSS布局实例

DIV+CSS实例教程

24.使用CSS来让你的页脚固定

xHTML+CSS实例

25.教你如何将PSD转换成xHTML-视频教程

DIV-CSS

26.高级CSS导航实例教程

DIV+CSS教程

27.教程:为你的DIV+CSS布局编码

xHTML+CSS教程

28.教你如何为网页变换样式

DIV+CSS实例教程

29.浮动教程

xHTML+CSS实例

30.CSS切片教程:选择正确的布局

DIV-CSS

31.使用Prototype和Scriptaculous创建简单、智能的手风琴效果

DIV+CSS教程

32.CSS Sprites + 圆角

xHTML+CSS教程

33.简单3步制作圆角布局

DIV+CSS实例教程

34.CSS样式教程

xHTML+CSS实例

35.转换Photoshop效果图

DIV-CSS

36.制作CSS纵向菜单

DIV+CSS教程

37.使用CSS固定页脚背景图

xHTML+CSS教程

38.一个简单的散列布局启蒙教程

DIV+CSS实例教程

39.两列布局CSS教程

xHTML+CSS实例

40.CSS布局技巧:完成100%高度

DIV-CSS

41.附带一个’behavior’文件的纵向CSS菜单

DIV+CSS教程

42.光滑的设计,HTML实例

xHTML+CSS教程

43.DIV+CSS布局教程

DIV+CSS实例教程

如果你能把这些xHTML+CSS(DIV+CSS)实例教程看一遍的话,我相信你一定会拥有扎实的基础来使用符合Web标准的xHTML+CSS实现更加高级的布局。


本文转自寒意博客园博客,原文链接:http://www.cnblogs.com/hnyei/archive/2011/09/21/2183272.html,如需转载请自行联系原作者

相关文章
|
13天前
|
前端开发 UED
【专栏:HTML与CSS实战项目篇】创建一个具有复杂布局的电商详情页
【4月更文挑战第30天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先规划顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。在样式设计上,注重色彩搭配、字体选择、布局与间距及图片处理。交互效果包括图片放大、添加到购物车按钮、滚动监听和评论互动,以提升用户体验。实际开发中需考虑跨设备兼容性和用户体验优化。
|
13天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
13天前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
|
13天前
|
前端开发 UED
【专栏:工具与技巧篇】CSS Sprites 与图标字体:优化网页图标加载
【4月更文挑战第30天】本文探讨了网页图标优化的两种方法:CSS Sprites和图标字体。CSS Sprites通过合并图标减少HTTP请求,提高加载速度,但维护复杂;图标字体则提供良好扩展性和定制性,易于调整大小和颜色。两者各有优劣,适用于不同场景。在实际应用中,应结合使用,根据项目需求灵活选择,以实现最佳性能优化和用户体验。
|
13天前
|
移动开发 缓存 前端开发
【专栏:HTML与CSS实践篇】网页性能优化:CSS与HTML的最佳实践
【4月更文挑战第30天】本文探讨了优化CSS和HTML以提升网页性能的最佳实践。HTML优化包括:精简结构、压缩代码、异步加载脚本和利用缓存。CSS优化则涉及:精简代码、合并文件、使用CSS Sprite、善用CSS3属性、避免@import及响应式设计。这些方法能加快加载速度,改善用户体验。
|
13天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 实践篇】网页图标与字体图标的使用
【4月更文挑战第30天】本文探讨了网页设计中两种主要图标形式——传统图标和字体图标。传统图标(PNG, JPEG, GIF)视觉效果丰富但文件大,易影响加载速度且维护不便。字体图标占用空间小,易于维护和定制,但视觉效果相对简单,选择有限。实际应用中,两者可结合使用,以导航栏、操作按钮和提示信息为例说明了图标的重要性。设计师需注意兼容性、清晰度和性能优化问题,根据项目需求选择合适图标类型,以提升网页质量和用户体验。
|
13天前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
|
13天前
|
前端开发 UED 容器
【专栏:CSS进阶篇】CSS Grid布局:构建复杂的二维布局
【4月更文挑战第30天】CSS Grid布局是二维布局系统,适用于复杂页面结构,如页眉、主体和侧边栏。通过定义网格线和单元格,能轻松创建行和列。基本语法包括设置容器为grid容器,定义`grid-template-rows`和`grid-template-columns`。高级特性包括命名网格线、网格区域、网格间隙、重复网格线和自动填充。在实际应用中,CSS Grid能有效提升开发效率和用户体验,尤其在响应式设计和复杂布局场景下。
|
13天前
|
前端开发 开发者 容器
【专栏:CSS进阶篇】CSS Flexbox布局:实现灵活的响应式设计
【4月更文挑战第30天】CSS Flexbox是现代网页设计中创建响应式布局的关键工具,它提供了一种一维布局模型,使元素能灵活适应各种屏幕尺寸。通过设置容器的`display`属性为`flex`,开发者可以利用主轴和交叉轴调整元素排列和对齐方式。核心概念包括弹性项、伸缩性、空间分配和对齐。通过实例,如导航栏、卡片布局、图片画廊和响应式表单,展示了Flexbox在实现响应式设计中的应用。尽管需要注意浏览器兼容性,但掌握Flexbox能帮助开发者构建出功能强大且适应性强的界面。
|
13天前
|
前端开发 开发者 容器
【专栏:CSS基础篇】CSS定位与布局:从静态到浮动、定位
【4月更文挑战第30天】本文介绍了CSS定位与布局的基础,包括静态、相对、绝对、固定定位以及浮动。静态定位遵循HTML顺序,相对定位可在正常位置基础上偏移,不占用额外空间。绝对定位基于最近已定位祖先元素定位,脱离文档流。固定定位相对于浏览器窗口定位,无视页面滚动。浮动用于文字环绕图片等,可能导致父元素高度塌陷。Flexbox布局提供更灵活的元素排列和对齐方式,适配各种复杂布局需求。理解并掌握这些布局技术能提升网页设计的灵活性和响应性。