简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

HTML、CSS中的网页页面布局问题_html/css_WEB-ITnose

WBOY
发布： 2016-06-24 11:50:00
原创
1017 人浏览过

要写一个HTML页面，其中有6个

，用CSS实现其中
元素布局，格式如下所示：



那么在CSS中应该怎么写了？？求高手指教


回复讨论(解决方案)

<div class="d1"></div><div class="dc"><div class="d2"></div><div class="d3"></div></div><div class="dc"><div class="d4"></div><div class="d5"></div></div><div class="d6"></div><style>  *{margin:0px;padding:0px;}  div{border:5px solid #000;margin-top:10px;}  .dc{border:none;}  .d1,.d6{width:500px;height:80px;}  .dc div{float:left;width:200px;height:100px;}  .d3,.d5{margin-left:90px;}  .dc:after{display: block;content: '';clear: both;visibility: hidden; }</style>
登录后复制

经过测试，在IE7下，楼上的代码显示如图

修改如下： 

<html><head>	<style>	  *{margin:0px;padding:0px;}	  div{border:5px solid #000;margin-top:10px;}	  .dc{border:none;width:600px;}	  .d1,.d6{width:500px;height:50px;}	  .dc div{float:left;width:200px;height:100px;}	  .d3{margin-left:90px;}	  .dc .d4,.dc .d5{width:220px;}	  .d5{margin-left:50px;}	  .dc:after{display: block;content: '';clear: both;visibility: hidden; }	</style></head><body><div class="d1">div_01</div><div class="dc">	<div class="d2">div_02</div>	<div class="d3">div_03</div></div><div class="dc">	<div class="d4">div_04</div>	<div class="d5">div_05</div></div><div class="d6">div_06</div></body></html>
登录后复制

这个很简单吧

相关标签：
HTML、CSS中的网页页面布局问题
来源：php.cn
上一篇：一段代码弄清楚CSS属性display和visibility的差别_html/css_WEB-ITnose 下一篇：如何根据不同的屏幕分辨率来显示不同的图片？_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
来自于 2024-04-06 21:58:04
0
1
800
OAuth 2.0 配置设置 我使用phpmailer通过smtp.google.com服务器发送邮件，但现在它无法正常工作，因为他们说使用OAuth2.0配置。我参考了一些示例并使用使用PhpMailer和G...
来自于 2024-04-06 11:12:57
0
1
408
强制刷新是Next.js中访问未定义路径或错误页面的后果 访问未定义的路径或错误页面会导致Next.js进行硬刷新，从而导致我的上下文回到默认状态（即存储在userProfile状态变量中的值变为null）我有一个布局，使用{stuctu...
来自于 2024-04-05 08:32:46
0
1
400
CSS中无法显示和移除根节点中的列表项符号（<ul>和<ol>），同时也无法移除overflow-x: hidden的问题 我当前正在处理网页，但我的列表项遇到了问题。通常出现在每个列表项旁边的点和数字没有显示。另外，当我删除overflow-x:hidden;时在我的CSS属性中，列表项数字和点立即显...
来自于 2024-04-04 16:38:22
0
1
3617
三.JS 3D模型已添加但不可见 我正在尝试将3D模型添加到我的网站。我正在使用三个.js。我尽了一切努力，但无法使3D模型可见。在开发者工具的网络选项卡中，我可以看到MTL和OBJ文件已加载，但页面只是空白。我尝...
来自于 2024-04-03 19:06:13
0
1
264
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！