<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>固定定位布局-三列</title>
<link rel="stylesheet" type="text/css" href="style2.css"/>
</head>
<body>
<div id="header"><h1>这里是标题</h1></div>
<div id="body">
<div id="navl">左导航</div>
<div id="main">中内容</div>
<div id="navr">右导航</div>
</div>
<div id="footer"><p>版权所有，违法必究。</p></div></div>
</body>
</html>
/* CSS Document */
*{
margin:0;
padding:0;
}
body{
margin:10px;
}
#header{
width:600px;
height:60px;
line-height:60px;
text-align:center;
margin:0 auto;
border:1px solid black;
background:#ccc;
margin-bottom:10px;
}
#header h1{
font-size:16px;
}
#body{
margin:0 auto;
border:1px solid red;
width:600px;
height:500px;
position:relative;
margin-bottom:10px;
}
#body #navl{
width:150px;
height:500px;
border:1px solid black;
background:lightcyan;
}
#body #main{
width:300px;
height:500px;
border:1px solid black;
background:lightblue;
position:absolute;
top:0;
left:150px;
}
#body #navr{
width:150px;
height:500px;
border:1px solid black;
background:lightcyan;
position:absolute;
top:0;
left:450px;
}
#footer{
margin:0 auto;
width:600px;
height:30px;
border:1px solid black;
background:#ccc;
}
#footer p{
height:30px;
line-height:30px;
text-align:center;
word-sapcing:10px;
}
效果如下：
- 大小: 20.9 KB
分享到：
相关推荐
4. **定位机制**：CSS提供了多种定位机制，包括静态定位、相对定位、绝对定位和固定定位。静态定位是元素的默认定位，其他三种定位则允许开发者精确控制元素的位置。 5. **浮动布局**：在早期的Web开发中，浮动布局...
在描述中提到的“table布局网页转换为div+CSS布局的转换软件”能够快速高效地完成这一转变，无论是对于简化网页代码，还是提升网页性能，都有显著效果。 软件支持绝对定位和流定位，这意味着它可以处理复杂的布局...
总结一下，`div+css`布局制作箭头的步骤流程包括：创建`div`元素、定义边框、调整角度、定位箭头以及可能的复杂形状实现。这不仅有助于提升网页设计技能，也有助于理解CSS的灵活性和强大性。对于志峰创业室这样的...
在网页设计领域，Div+CSS布局是现代网页开发的基础，它极大地提升了网页的可维护性和易用性。这个“Div+CSS布局入门+实例教程”是为初学者设计的，旨在帮助他们掌握这一核心技术。 Div（Division）是HTML中的一个...
5. **增强可访问性**：对于无障碍浏览（Accessibility）来说，Div+CSS布局往往优于Table布局，因为它能更好地遵循WCAG（Web Content Accessibility Guidelines）指南。 在实际操作中，使用Table2CSS3.0.0工具时，...
在网页设计中，`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`<div>`元素作为容器来组织内容，并利用CSS（层叠样式表）来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...
【Div+CSS布局入门教程详解】 ...记得巩固HTML基础知识，熟悉CSS选择器、盒模型、定位等概念，这些都是Div+CSS布局的基础。同时，多参考优秀的网页设计，学习并借鉴其布局技巧，将有助于提升你的设计水平。
### div+css布局实例——淘宝网首页分析 #### 一、引言 随着互联网技术的不断发展，网站设计已经从简单的图文混排发展到了更加注重用户体验和交互性的阶段。在这个过程中，div+css布局作为一种灵活且高效的网页...
这表明文档主要围绕Div和CSS布局技巧展开，且强调了项目表现层（即前端展示层）的重要性。标签“Div+CSS 布局大全.pdf”与标题一致，进一步确认了文档的分类和主要内容。在核心内容的摘录中，我们可以看到文档的结构...
这个压缩包文件"DIV+CSS布局练习"显然旨在帮助初学者通过实践掌握这一基础技能。以下是关于`DIV+CSS`布局的一些详细知识点： 1. **DIV元素**：`<div>`（division）是HTML中的一个通用容器元素，用于组织页面内容。...
DIV+CSS网站布局从入门到精通 源代码 朱印宏 邓艳超 编著 北京希望电子出版社 2011年1月 本教程介绍了商业类型的网页设计，以及目前流行的DIV+CSS标准布局方法和实战技法。通过对十个经典案例进行分析，分别从不同...
Div+CSS布局是现代网页设计中最常用的布局方式之一。它利用HTML中的`<div>`标签结合CSS（Cascading Style Sheets）样式来实现网页的布局与美化。这种方式不仅能够提高网页的加载速度，还能够更好地实现内容与表现的...
描述中的关键词如"div+css"、"web标准"、"div+css布局"、"div+css实例"、"div+css模板"揭示了这些模板遵循Web开发的最佳实践，旨在实现结构与表现的分离，提高网页的可维护性和可访问性。Web标准通常指的是W3C制定的...
8. **响应式设计**：Div+CSS布局的核心之一就是响应式设计，即页面可以根据用户设备的屏幕大小和方向自动调整布局。通过媒体查询，我们可以为不同的设备提供定制的样式。 9. **CSS预处理器**：为了简化CSS编写，...
一小时搞定DIV+CSS布局-固定页面开度布局
知识目标包括理解和掌握DIV+CSS布局方式和定位方法；技能目标是能独立使用CSS定位网页元素以及运用DIV+CSS进行布局；情感目标则是培养团队合作精神和提高职业素养。 教学重点在于理解并运用DIV+CSS布局，难点则在于...
在Div+CSS布局中，图像不仅可以作为内容的一部分，还可以作为背景图，通过CSS的background-image属性进行设置，实现背景平铺、裁剪、定位等效果。 学习Div+CSS，首先要熟悉HTML的基本结构和Div元素的用法，然后掌握...
本篇文章将重点围绕Div和CSS布局展开，探讨相关知识点。 首先，Div是HTML中的一个块级元素，全称为“division”，意为“分隔”或“分区”。在网页设计中，Div常被用作容器，用于组织和管理页面内容。通过设置Div的...