文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > html教程 > 正文

简单的div+css布局之一_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:31:01
原创
979人浏览过

简单的div+css的实例布局，利用图片进行布局，首先要准备5张图片。

left-top.gif                    right-top.gif

right.gif                          left-bottom.gif

right-bottom.gif

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

p1

实例1代码：



固定宽度  相对定位

 



 
 

  

 

 

Page Content


   

     


         这是一行文本，这里作为样例，显示在布局框中

            这是一行文本，这里作为样例,显示在布局框中
           


           

           

           


             查看详细信息
               


           

           

 

           

 

 

Page Content1


   

     


         这是一行文本，这里作为样例，显示在布局框中

            这是一行文本，这里作为样例,显示在布局框中
           


           

           

           


             查看详细信息
               


           

           

 

   
   
         
 
  

   

   

Page Side


      

     


         这是一行文本，这里作为样例，显示在布局框中

            这是一行文本，这里作为样例,显示在布局框中
           


           

           

           


             查看详细信息
               


           

           

           
           

 

 

Page Side


   

     


         这是一行文本，这里作为样例，显示在布局框中

            这是一行文本，这里作为样例,显示在布局框中
           


           

           

           


             查看详细信息
               


           

           

           
 

 

 

        

p2

实例2 代码：

 



固定宽度  相对定位

 



 

 

  


  

 

 

Page Content


   

     


         这是一行文本，这里作为样例，显示在布局框中

            这是一行文本，这里作为样例,显示在布局框中
           


           

           

           


             查看详细信息
               


           

           

 

           

 

 

Page Content1


   

     


         这是一行文本，这里作为样例，显示在布局框中

            这是一行文本，这里作为样例,显示在布局框中
           


           

           

           


             查看详细信息
               


           

           

 

   
   
         
 
  

   

   

Page Side


      

     


         这是一行文本，这里作为样例，显示在布局框中

            这是一行文本，这里作为样例,显示在布局框中
           


           

           

           


             查看详细信息
               


           

           

           
           

 

 

Page Side


   

     


         这是一行文本，这里作为样例，显示在布局框中

            这是一行文本，这里作为样例,显示在布局框中
           


           

           

           


             查看详细信息
               


           

           

           
 

 

 

        

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome方法_html/css_WEB-ITnose 下一篇：div+css 你知道多少？值得一看_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
HTML如何设置页面标题？title标签放在哪里？ 网页标题通过HTML的标签设置，需置于区域中。1.必须放在HTML文档的部分，即之后、之前；2.标题不仅显示在浏览器标签页，还影响SEO和社交分享；3.设置时需注意控制字符长度在50~60字以内，关键词靠前且每页唯一，避免滥用特殊符号。正确使用标题标签有助于提升用户体验和网站推广效果。
2025-06-13 21:27:01
323
HTML如何实现进度动画？progress标签怎么配合CSS？ 实现进度动画的核心方法是使用HTML的标签配合CSS和JavaScript，1.使用创建基础结构，设置value和max属性；2.通过CSS重写样式并添加transition或@keyframes实现动画效果；3.利用JavaScript动态更新value值以驱动进度变化；4.结合关键帧动画实现更复杂的视觉效果，如流动渐变。整个过程需注意浏览器样式兼容性，并可通过JS控制动画的启停。
2025-06-13 21:24:01
416
怎么添加锚点链接？页面导航小白步骤 添加锚点链接的方法是：1.在目标位置设置唯一id作为锚点；2.创建以#开头指向该id的链接。它能提高页面导航效率、增强内容可访问性、改善移动端体验。若失效需检查id是否正确唯一、元素是否存在、CSS是否影响滚动。锚点链接虽不直接影响SEO，但能通过改善用户体验、增加页面深度、生成富摘要间接提升SEO效果。
2025-06-13 20:42:01
947
html中各种标签的作用 常用html标签功能速查手册 HTML常用标签及其功能包括：1.是网页根元素；2.和定义头部信息和主体内容；3.设置网页标题；4.到为标题标签；5.和用于段落和换行；6.、和用于列表；7.创建链接；8.、、和构建表格；9.、、、和用于表单；10.、和嵌入多媒体；11.和用于布局和样式化，这些标签帮助构建结构清晰的网页。
2025-06-13 20:18:01
654
html中如何设置文本斜体？斜体字体实现方法 在HTML中设置文本斜体主要有三种方法：使用标签、标签或CSS的font-style属性。其中，用于无语义的纯斜体，用于强调内容，而CSS方式更灵活且推荐用于现代开发。此外需注意字体支持、避免滥用标签，并可结合其他字体属性控制效果。
2025-06-13 20:00:02
598
html中body标签的作用 文档主体body的3大功能 body标签的3大功能是：1)展示内容，2)处理用户交互，3)实现动态效果。body标签承载网页的基本内容，包括文本、图片和多媒体元素；通过表单和JavaScript增强用户互动；利用JavaScript和CSS创建动态效果，提升用户体验。
2025-06-13 19:54:01
270
HTML如何实现下拉菜单？dropdown怎么用HTML制作？ 下拉菜单的实现需结合HTML、CSS和JavaScript。首先用HTML搭建结构，包含触发按钮和菜单项；再通过CSS设置默认隐藏及悬停或点击时的显示样式；最后用JavaScript增强交互，如点击切换显示状态及点击外部关闭菜单；同时注意定位、移动端适配及细节优化以提升体验。
2025-06-13 19:21:01
931
html中怎么设置段落首行缩进 text-indent缩进属性详解 在HTML中设置段落首行缩进使用CSS的text-indent属性。1）设置首行缩进，如text-indent:2em;。2）使用负值实现悬挂缩进，如text-indent:-1em;。3）与padding和margin结合，提升排版效果。4）通过媒体查询调整缩进，适应不同设备。5）避免过度使用，确保页面整洁。
2025-06-13 19:18:01
387
html怎么嵌入YouTube视频？外链视频插入教程 要在网页中嵌入YouTube视频，首先打开YouTube找到目标视频，点击“分享”并选择“嵌入”，复制提供的代码；接着将该代码粘贴到HTML文件的指定位置；最后可通过添加URL参数如?autoplay=1或?mute=1来自定义播放行为，并通过调整CSS实现响应式布局。
2025-06-13 18:57:01
147
html中div标签用法大全 div标签的12种经典用法示范 div标签在HTML中有12种经典用法：1.基础布局容器，2.响应式设计，3.网格布局，4.弹性盒子布局，5.模态框，6.导航菜单，7.轮播图，8.表单布局，9.卡片式布局，10.标签页，11.悬浮提示，12.动画效果，这些用法结合CSS可以实现多种效果，但需注意性能和用户体验。
2025-06-13 18:54:01
867
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部