【代码片段】混合布局

最新推荐文章于 2022-08-25 12:15:25 发布
最新推荐文章于 2022-08-25 12:15:25 发布
阅读量459 收藏 1
点赞数
分类专栏： 学习记录-html/css 文章标签： 混合布局 css 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>   //一列+两列
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.head{ height:100px;background:#9CF}
.left{ width:20%; height:600px; background:#ccc; float:left}
.right{ width:80%; height:600px;background:#FCC; float:right}
</style>
</head>
<body>
<div class="head">head</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>

</pre><pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>  //固定宽度的一列+两列
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.head, .main, .footer{ width:960px; margin:0 auto}
.head{ height:100px;background:#9CF}
.left{ width:240px; height:600px; background:#ccc; float:left}
.right{ width:720px; height:600px;background:#FCC; float:right}
.footer{ height:50px; background:#9F9; clear:both}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>

</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>   //一列+三列布局（本是两列，右边列再被分为两列）
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.head, .main, .footer{ width:960px; margin:0 auto}
.head{ height:100px;background:#9CF}
.left{ width:220px; height:600px; background:#ccc; float:left}
.right{ width:740px; height:600px;background:#FCC; float:right}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right}
.footer{ height:50px; background:#9F9; clear:both}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">
    <div class="left">left</div>
    <div class="right">
    	<div class="r_sub_left">sub_left
        </div>
        <div class=" r_sub_right">sub_right
        </div>
    </div>
</div>
<div class="footer">footer</div>
</body>
</html>

清除浮动有两种方法：1.clear:both    2.overflow:hidden，常用于footer</span><pre>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>  //main是left和right的下面底色
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:100px;background:#ccc;}
.main{background:red;position:relative;height:500px;}
.left{width:200px;height:500px;background:blue;position:absolute;top:0;}
.right{margin:0 0 50px 210px;background:#9C9;height:500px;}
.foot{height:50px;background:#f63;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
    <div class="right">right</div>
    <div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>


叶炀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【openGL4.x手册11】片段着色器
gongdiwudu的专栏
03-27 2107
片段着色器是着色器阶段，用于将光栅化生成的片段处理成一组颜色和单个深度值。片段着色器是基元栅格化后的 OpenGL 管道阶段。对于基元覆盖的每个像素样本，都会生成一个“片段”。每个片段都有一个窗口空间位置和一些其他值，并且它包含上一个顶点处理阶段的所有插值每个顶点输出值。
CSS 混合布局
weixin_34409703的博客
09-10 137
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">...
html 混合布局
ITzhongzi的博客
07-11 560
直接上代码：： body{margin: 0;padding: 0;} .top{height: 100px; background: blue;} .head{height: 100px; width: 800px; background: #f60; margin: 0 auto; } .main{width: 800px; height: 600px; bac
各种布局（一列，二列，三列，混合布局）
oHayHay的博客
07-13 748
<!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>一列布局</title> <style type="text/css"> body{margin:0; padding: 0} .head{height: 80px;background-color: red;} .ma
css布局之混合布局（用得最多）
staringOrz的博客
11-04 426
混合布局 body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .top{ height:100px;background:#9CF} .head,.main{ width:960px; margin:0 auto;} .head{ height
混合布局的实现方法
jxq1994的博客
04-01 1944
有的时候在应用中，我们可能需要两种不同的布局，比如上面是GridView，下面是ListView的样式；在上一篇的 RecyclerView:实现带header的grid中，提供了一种方法，但是这种方法并不够好用，非常之不建议使用。仅仅作为了解ViewType的用法。 今天介绍一种比较合理的方式来实现这个需求，需要用到的就是RecyclerView的header。在RecyclerView添加He
uniapp代码片段分享以及基础组件分享
08-10
【uniapp代码片段分享以及基础组件分享】 uni-app是一个由DCloud(海豚浏览器团队)推出的多端开发框架，它允许开发者使用Vue.js语法编写一次代码，就能在iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小...
Pieces:有用的标记代码片段
07-14
《Pieces：实用的标记代码片段》 在编程和前端开发领域，代码片段是提升效率的重要工具。Pieces项目，正如其标题所示，是一个汇集了各种有用标记代码片段的资源库，特别关注JavaScript技术。这个项目旨在为开发者...
每位设计师都应该拥有的50个CSS代码片段 sublime text代码片段
06-18
8. **CSS预处理器支持**：如果这个压缩包还包含了Sass或Less代码片段，那么可能有变量、嵌套规则、混合、函数等预处理器特性的快捷输入。 9. **Flexbox布局**：`flex-direction`，`justify-content`，`align-items`...
Intell-FYP:来自Intell FYP的小片段代码
05-21
【Intell-FYP:来自Intell FYP的小片段代码】是一个与Intell Final Year Project相关的项目，其中包含了一些代码片段。这个项目可能是一个学生或研究人员在进行毕业设计或研究项目时创建的，用来展示他们在技术领域的...
html 1上 2 下左右 自适应 布局 系统布局 示例
银河系天城知识宝库_技术专家蒋浩宇
07-22 424
目录 介绍 样式 代码 介绍 1.设置上方 2.设置下方 3设置左边 4.设置右边 5.2的地方高采用计算得出 6.4右边才有计算得出宽度 在有需要的时候可以采用计算最小值， 也就是最小支持大小即可 样式 代码 <html> <head> <title>系统布局</title> <meta name="Ge...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...
weixin_30430169的博客
07-21 1142
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 声明了文档的根元素是 html，它在公共...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org
yehui186之中期回顾
09-27 1962
1. &lt;!DOCTYPE&gt; 声明位于文档中的最前面的位置，处于 &lt;html&gt; 标签之前。 2. 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 所以，楼主的这个声明： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/...
HTML ＜！DOCTYPE＞标记
wuxiaopengnihao1的博客
08-25 2029
本文章向大家介绍HTML 标记，主要内容包括DOCTYPE语法、浏览器兼容性及DOCTYPE使用实例。具体内容请阅读文章全文。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
iufin的博客
06-26 1万+
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/"> 用dreamweaver新建一个html页面，打开代码视图，会看到默认就已经有一些内容，很多做网页设计或网站开发的人都不知道，图中红框所示的三句话有什么用。我也是因为不懂，然后查了些资料，终于知道这到底是干什么用
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm
galaxy的博客
09-21 1万+
1. &lt;!DOCTYPE&gt; 声明位于文档中的最前面的位置，处于 &lt;html&gt; 标签之前。 2. 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 所以，楼主的这个声明： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1...
css混合布局
KING
01-07 1048
单列加中间双列自适应 body{ margin:0; padding:0; } .top{ height:500px; background:black; } .main{ width:800px; height:500px; background:pink; margin:0 auto;
关于<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
热门推荐
学吧
08-08 14万+
关于  1,在TD里面设一个样式,普通时背景XX.jpg.当鼠标经过时背景为XX2.jpg,(用最简单的样式控制做的一个导航,导航文字不变)但是用用dw设计网页时,代码最前面总要出现一个下面的东东， "http://www.w3.org/tr/html4/loose.dtd"> 这个是dw自动在网页文件页增加了dtd信息.可以删. 删除后，浏览器会使用的默认dtd. docty
C与汇编混合编程：函数名定义与存储结构解析
这时，可以使用C语言的extern关键字声明汇编函数，或者使用inline汇编来插入特定的汇编代码片段。同时，对于特定的硬件操作，如中断服务子程序，可能需要在汇编中编写，并且在C代码中调用。 C和汇编的混合编程需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值