css layout ?人的?梯

php中文网

发布时间：2016-06-24 12:27:33

1437人浏览过

来源于php中文网

原创

div 常用

absolute:??定位

relative:相?定位，?absolute配搭，?定relative通常是父的概念

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=big5" /> 5 <meta http-equiv="Content-Style-Type" content="text/css" /> 6 <title>三?式版面</title> 7 <style type="text/css"> 8 #wrapper { 9     width: 100%; /* ?定???度 */10 }11 #header {12     background-color: #DDDDDD;13     height: 50px;14 }15 #container {16     position: relative;17     margin: 10px 0;18     width: 100%;19 }20 #primary {21     margin: 0 200px; /* ?定左右?界155px */22     background-color: #C7D5ED;23 }24 #secondary {25     position: absolute;26     left: 0px;27     top: 0px;28     width: 145px; /* ?定???度 */29     background-color: #F9CFBA;30 }31 #advertisement {32     position: absolute; /* ?配置方式值指定?absolute */33     right: 0px; /* 指定???右?的距? */34     top: 0px; /* 指定???上方的距? */35     width: 145px; /* ?定???度 */36     background-color: #E5C7ED;37 }38 #footer {39     background-color: #DDDDDD;40     height: 50px;41 }42 </style>43 </head>44 45 <body>46 <div id="wrapper">47     <div id="header"><br /></div>48     <div id="container">49         <div id="primary"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>50         <div id="secondary"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>51         <div id="advertisement"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>52     </div>53     <div id="footer"><br /></div>54 </div>55 </body>56 </html>

float: div若是?定者??性，後面的文字?文??，下面的clear上面的float就?正常，?定float就必?要?定 width?性

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=big5" /> 5 <meta http-equiv="Content-Style-Type" content="text/css" /> 6 <title>?作涵?其它??的Box</title> 7 <style type="text/css"> 8 #wrapper { 9     width: 760px;10 }11 #header {12     background-color: #DDDDDD;13     height: 50px;14 }15 #container {16     float: left; /* 指定??向左浮? */17     width: 605px; /* 指定???度 */18 }19 #primary {20     float: right; /* 指定??向右浮? */21     width: 450px;22     margin: 10px 0;23     background-color: #C7D5ED;24 }25 #secondary {26     float: left;27     width: 145px;28     margin: 10px 0 10px 0px; /* 只修改上、下?界的值 */29     background-color: #F9CFBA;30 }31 #advertisement {32     float: right;33     width: 145px;34     margin: 10px 0;35     background-color: #E5C7ED;36 }37 #footer {38     clear: both;39     background-color: #DDDDDD;40     height: 50px;41 }42 </style>43 </head>44 45 <body>46 <div id="wrapper">47     <div id="header"><br /></div>48     <div id="container">49         <div id="primary"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>50         <div id="secondary"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>51     </div>52     <div id="advertisement"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>53     <div id="footer"><br /></div>54 </div>55 </body>56 </html>

立即学习“前端免费学习笔记（深入）”；

margin:容器?的差距，?容器?定width 100%的?候，margin??的，代表容器??有?距到後面的容器?到上一?容器的?值上

SeoShop

SeoShop网店系统全站纯静态html生成更符合搜索引擎优化，并修改了以前许多js代码，取消了连接地址的js代码更换为纯div+css格式，并且所有文件可自定义url和文件名，自定义内部连接，自定义外部连接，等多个符合SEO搜索引擎优化的设置，让您的网店更容易让搜索引擎收录. 简单易用极速网店真正做到以人为本、以用户体验为中心，能使您快速搭建网上购物网站。后台管理操作简单，一目了然，没有夹杂多

下载

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=big5" /> 5 <meta http-equiv="Content-Style-Type" content="text/css" /> 6 <title>以??界?作可自??整?度的??</title> 7 <style type="text/css"> 8 #wrapper { 9     width: 100%; /* 修改??的?度?定 */10 }11 #header {12     background-color: #DDDDDD;13     height: 50px;14 }15 #container {16     float: left;17     width: 100%; /* 修改??的?度?定 */18     margin-right: -145px; /* ?定右?界的值??值 */19 }20 #primary {21     float: right;22     width: 100%; /* 修改??的?度?定 */23     margin: 10px 0 10px -145px; /* ?定左?界的值??值 */24     background-color: #C7D5ED;25 }26 #content {27     margin: 0 155px; /* ?定左右?界 */28     background-color: #CAEDC7;29 }30 #secondary {31     float: left;32     width: 145px;33     margin: 10px 0 10px 0px;34     background-color: #F9CFBA;35 }36 #advertisement {37     float: right;38     width: 145px;39     margin: 10px 0;40     background-color: #E5C7ED;41 }42 #footer {43     clear: both;44     background-color: #DDDDDD;45     height: 50px;46 }47 </style>48 </head>49 50 <body>51 <div id="wrapper">52     <div id="header"><br /></div>53     <div id="container">54         <div id="primary">55             <div id="content"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>56         </div>57         <div id="secondary"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>58     </div>59     <div id="advertisement"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>60     <div id="footer"><br /></div>61 </div>62 </body>63 </html>

立即学习“前端免费学习笔记（深入）”；

出自:css layout ?人的?梯

如何使用HTML和CSS创建一个响应式商品展示布局

如何使用HTML和CSS创建动画横幅链接

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：DIV+CSS布局兼容性问题_html/css_WEB-ITnose 下一篇：上下左右布局（DIV+CSS）_html/css_WEB-ITnose

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI编程开发 AI聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI编程开发 AI文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI编程开发 AI文本写作

智谱清言 - 免费全能的AI助手

AI编程开发 Agent智能体

相关专题

Golang 测试体系与代码质量保障：工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链（如go test）、单元测试、集成测试及端到端测试实践，结合代码覆盖率分析、静态代码扫描（如go vet）和动态分析工具，建立全链路质量监控机制。通过自动化测试框架、持续集成（CI）流水线配置及代码审查规范，实现测试用例管理、缺陷追踪与质量门禁控制，确保代码健壮性与可维护性，为高可靠性工程系统提供质量保障。

2026.02.28

Golang 工程化架构设计：可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则，涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术，帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

2026.02.28

Golang 性能分析与运行时机制：构建高性能程序

Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面，深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略，并结合实际案例剖析 Go 程序的运行时行为，帮助开发者掌握构建高性能应用的关键技能。

2026.02.28