社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > html教程 > HTML布局_html/css_WEB-ITnose

HTML布局_html/css_WEB-ITnose

WBOY
发布： 2016-06-24 11:18:38
原创
1454 人浏览过

一、使用

元素布局 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>div布局</title>    <style type="text/css">        body{            margin:0px;        }        #container{            width:100%;            height:950px;            background-color:darkgray;        }        #heading{            width:100%;            height:10%;            background-color:aqua;        }        #content_menu{            width:30%;            height:80%;            background-color:aquamarine;            float:left;        }        #content_body{            width:70%;            height:80%;            background-color:blueviolet;            float:left;        }        #footing{            width: 100%;            height: 10%;            background-color: black;            clear: both;        }    </style></head><body>    <div id="container">        <div id="heading">头部</div>        <div id="content_menu">内容菜单</div>        <div id="content_body">内容主体</div>        <div id="footing">底部</div>    </div></body></html>
登录后复制


二、使用

元素布局

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>table布局</title>    <style type="text/css">        body{            margin:0px;        }        #container{            width:100%;            height:950px;            background-color:darkgray;        }        #heading{            width:100%;            height:10%;            background-color:aqua;        }        #content_menu{            width:30%;            height:80%;            background-color:aquamarine;            float:left;        }        #content_body{            width:70%;            height:80%;            background-color:blueviolet;            float:left;        }        #footing{            width: 100%;            height: 10%;            background-color: black;            clear: both;        }    </style></head><body>    <table width="100%" height="950px" style="background-color: darkgray">        <tr>            <td colspan="2" width="100%" height="10%" style="background-color:aqua">这是头部</td>        </tr>        <tr>            <td width="30%" height="80%" style="background-color:blue">左菜单</td>            <td width="70%" height="80%" style="background-color:blueviolet">主体</td>        </tr>        <tr>            <td width="100%" height="10%" colspan="2" style="background-color: darkcyan">这是底部</td>        </tr>    </table></body></html>
登录后复制



相关标签：
html布局
来源：php.cn
上一篇：class命名的时候 item-group和item_group有什么区别？这里面有没有什么讲究？_html/css_WEB-ITnose 下一篇：css渐变/背景_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
使用网格创建此特定设计：分步指南 我正在尝试创建一个类似于此图像的布局，我尝试过使用此网格但无法实现。<ulclass="container"><liclass="f...
来自于 2024-04-06 20:29:08
0
2
492
修改 nginx proxy_pass 设置后我的 React 应用程序无法加载 我有ReactappNodeJS后端和nginx。我已经获得证书并通过Certbot安装它。我的应用程序发出获取和发布请求，但为此我需要设置proxy_pass设置。我的服务器块文...
来自于 2024-04-05 11:53:10
0
1
316
强制刷新是Next.js中访问未定义路径或错误页面的后果 访问未定义的路径或错误页面会导致Next.js进行硬刷新，从而导致我的上下文回到默认状态（即存储在userProfile状态变量中的值变为null）我有一个布局，使用{stuctu...
来自于 2024-04-05 08:32:46
0
1
400
css中网格布局中的盒子协议 我希望前两个框以最大宽度向上，第二个框以最大宽度向下，这是代码。这是CSS代码：/*StartServices*/.services{padding-top:var(--secti...
来自于 2024-04-03 16:36:04
0
2
334
使用单个网格或 Flex 创建多样化的卡片布局：实用指南 我正在尝试制作如图所示的响应式卡片布局。目前我正在做的是分别为计算机、平板电脑和移动设备创建布局。然后在media查询的帮助下，我将其他两个视图的显示属性设置为display:no...
来自于 2024-04-02 21:07:36
0
2
377
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板