CSS布局-有头有尾左中右三分

最新推荐文章于 2023-05-24 15:50:48 发布
最新推荐文章于 2023-05-24 15:50:48 发布
阅读量147 收藏
点赞数
文章标签： xhtml javascript ViewUI

要实现一个类似框架结构，有头有尾，中间部分要分菜单、分隔条和内容三部分。

写好的效果图如下：

 

 

下面是实现代码：（CSS和HTML放一个文件了）

 

 

ContractedBlock.gif ExpandedBlockStart.gif Code
<!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>
    <title>Untitled</title>
    <script src="jquery.js" type="text/javascript"></script>
<!--STYLE-->
ExpandedBlockStart.gifContractedBlock.gif<style>
div
ExpandedSubBlockStart.gifContractedSubBlock.gif{}{
    margin: 0px;
}
ExpandedSubBlockStart.gifContractedSubBlock.gif.divWrap{}{
height:100%;
background:#ccc;
margin-left:205px;
}
ExpandedSubBlockStart.gifContractedSubBlock.gif.divWrap .divleft{}{
    float:left;
    background:#FF7400;
    height:100%;
    width:205px;
    margin-left:-205px;
ExpandedSubBlockStart.gifContractedSubBlock.gif    display:inline;    /**//*下面这两行解决IE6双倍Margin的问题*/
    position:relative;
}

ExpandedSubBlockStart.gifContractedSubBlock.gif.divWrap .divright{}{
    float:right;
    background:#fefefe;
    height:100%;
    width:100%;
}

.divWrap .divright .divInnerWrap
ExpandedSubBlockStart.gifContractedSubBlock.gif{}{
    height:100%;
    margin-left:10px;
}
.divWrap .divright .divInnerWrap .divInnerLeft
ExpandedSubBlockStart.gifContractedSubBlock.gif{}{
    position:relative;
    float:left;
    background:red;
    height:100%;
    width:10px;
    margin-left:-10px;
    border:solid 1px red;
}
.divWrap .divright .divInnerWrap .divInnerRight
ExpandedSubBlockStart.gifContractedSubBlock.gif{}{
    float:right;
    background:white;
    height:100%;
    width:100%;
}
.divWrap .divright .divInnerWrap .divInnerRight .divContainer
ExpandedSubBlockStart.gifContractedSubBlock.gif{}{
    margin 0px;
ExpandedSubBlockStart.gifContractedSubBlock.gif    /**//*color:blue;*/
}
ExpandedSubBlockStart.gifContractedSubBlock.gif.dheader{}{
background:#eee;
height:50px;
}
ExpandedSubBlockStart.gifContractedSubBlock.gif.dfooter{}{
background:#eee;
height:50px;
}

body
ExpandedSubBlockStart.gifContractedSubBlock.gif{}{
    margin: 0px;
}

a.line
ExpandedSubBlockStart.gifContractedSubBlock.gif{}{
    color:blue;
    cursor:hand;
}

</style>

</head>

<body>
<!--HTML--> 
<div id="all" >
    <div class="dheader">header
    </div>
    <div class="divWrap">
        <div class="divleft">我是左边<br><br><br><br><br></div>
        <div class="divright">
            <div class="divInnerWrap">
                <div class="divInnerLeft"><a href="#" class="line">&gt;</a></div>
                <div class="divInnerright">
                    <div class="divContainer">
                        这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀这里是内容呀
                    </div>
                </div>
                <div style="clear:both"></div>
            </div>
        </div>
        <div style="clear:both"></div>
    </div>
    <div class="dfooter">footer
    </div>
</div>
 
<!--JS-->
ExpandedBlockStart.gifContractedBlock.gif<script stype="text/javascript">
    var height = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    height = height - 100;
    $("#all").css("height",height + 'px');
</script>


</body>
</html>

 

 

weixin_34097242
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
西餐厅网页作业 有头有尾.zip
03-31
在本项目中，“西餐厅网页作业 有头有尾.zip”是一个包含前端网页设计作业的压缩包文件。这个作业可能是一个学生或者初学者为了学习和练习网页开发技能而完成的。从描述“只是前端网页作业 有图有代码...”我们可以...
HTML+CSS+JS基础知识
01-08
CSS 1、思维导图 2、引入样式的四种方式 3、选择器（本章重点） 3.1基本选择器（三个） 3.2层次选择器（四个） 3.3、伪类选择器 3.4、属性选择器   HTML 1.基本概述 对于学习html的学习，更多的就是记住这些标签的...
css如何选择相同class下的第一个class元素和最后一个元素?
热门推荐
hh1197787867的博客
08-29 13万+
如图，如果像选择类名为  class=exerciseInfo  中的第一个和最后一个div，做法如下： 选择第一个类名： .exerciseInfo: nth-of-type(1) { ... }; 选择最后一个类名： .exerciseInfo: last-child { ... }; 选择其中一个指定的类名：.exerciseInfo: nth-of-type(x) { ... }...
css表示第一个元素和最后一个元素,CSS第一个和最后一个子元素
weixin_42365401的博客
08-04 1832
我在一个div中渲染2个按钮，并且想要向左和向右浮动一个按钮。CSS第一个和最后一个子元素我以为我可以使用：第一，孩子最后：子元素，但似乎对CSS的：第一胎运行，并且然后在写的：最后一子标签我还使用尝试：第n个孩子(1)选择编辑：正确的工作代码，感谢所有：OnOff/* CSS used here will be applied after bootstrap.css */.container {...
css 选择器获取同名class 第一个或者最后一个元素（区分class）
qq_36904182的博客
05-24 1万+
在子元素有多个不同的class的情况下，父元素获取同一个class的子元素的第一个或者最后一个元素。
CSS实现左中右三栏布局，中间自适应的三种方法
xYY_X_xYY的博客
08-25 1602
文章目录认识margin1. margin纵向重叠2. margin负值圣杯布局和双飞翼布局圣杯布局双飞翼布局flex实现三栏布局 认识margin 1. margin纵向重叠 相邻元素的margin-top、margin-bottom会重叠 空白的<p><p/>也会重叠 2. margin负值 margin-top踹自己，margin-bottom踹别的盒子 margin-left踹自己，margin-right踹别的盒子 上下关系的盒子，当上盒子设置margin-to
vue学习教程之带你一步步详细解析vue-cli
01-19
处于有头有尾的目的，还是几句话草草了事。步骤如下： 安装vue-cli npm install vue-cli -g 以webpack模版安装目录 vue init webapck webpack-template 这样之后，我们就可以使用IDE打开目录了。
Homework-1
03-26
作业1可能涉及创建这样的结构，并通过CSS来控制布局和样式。 【HTML与CSS的结合】 虽然HTML专注于内容结构，但为了美化页面，我们需要CSS（Cascading Style Sheets）。CSS允许我们定义颜色、字体、布局等视觉样式...
工作总结PPT-7.pptx
最新发布
05-09
- **故事化叙述**：将项目过程编织成一个有头有尾的故事，更容易引起共鸣。 #### 注意事项： - 确保所展示的信息真实可靠，避免夸大其词。 - 保持内容结构的逻辑性和连贯性。 - 适时地提出未来的发展方向或改进建议...
问题：使用css怎么设置单行文字居右，多行文字居左/居中显示？
never。❀的博客
04-28 4241
遇到的问题： 在编写页面的过程中，不知道大家有没有碰到过这样的一个情况：页面整体分为左右布局，右侧文字会出现以下情况：1、单行文字居右显示； 2、多行文字居左/居中显示？ 那么这种情况，我们要怎么用css来实现呢？ 解决办法： <div class="wrap"> <span>标题</span> <div class="cont"> <p>测试标题</p> </div> &l
css实现左侧固定，右侧自适应布局，比例1:2:3
qq_44818085的博客
02-17 714
css实现左侧固定，右侧比例1:2:3布局 注意: flex 由该三个属性结合 flex-grow flex-shrink flex-basis <!-- 弹性布局 --> <style> .container{ height: 100px; border: 1px solid blue; display: flex; } .container>div{
CSS 左中右三列布局5种方式
卡卡西：一个擅长拷贝的前端程序员
06-20 4362
CSS 左中右三列布局左右固定宽度，固定位置，中间自适应的5种方式 上中下三行布局，上下固定高度，中间自适应的4种方式
CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
dxy1128的博客
11-03 3608
写在前面：博主最近在转头复习最前面学的CSS，整理一下CSS三栏布局的笔记，正好也捋顺自己的逻辑思路。解析我尽量按照思路详细的写了，代码均可正确运行，留给需要的小伙伴进行参考，如有不足，欢迎在评论区补充。
html+css实现三列布局的4种方式
u013455430的专栏
01-14 9271
面试问到一个问题,要设计左右两边固定100px，中间自动填充，总长度为100%的一个页面 刚开始我说用栅格，实践上确实不行，所以去百度下如何实现，自己去实现了4种方式分别是：BFC块级布局，flex布局，table布局,css计算宽度布局 由于不懂BFC布局，所以在实现布局的时候走了很多弯路，一直复现失败，但后调整了html中的div顺序解决了问题，直到现在我还是不能理解这个问题，等我看懂了再...
【css】css实现布局： 左：200px，右：30%，中：自适应
AC_greener的博客
11-18 803
第一种方法：浮动布局 &amp;lt;style&amp;gt; body { padding:50px; } * { box-sizing: border-box; } .clearfix::after { content: ''; display: block; clear: both } ....
五种CSS方式实现三栏布局的方法
xiaoweids的博客
06-29 582
转自：微点阅读 https://www.weidianyuedu.com在网页布局中，三栏布局是一种常见的布局方式，尤其在 PC 端。如下图所示。三栏布局从上到下由页头、内容和页脚组成，内容由左、中、右三列组成，其中左右两列的宽度固定，中间一列自适应。假设左右宽度是 100px，header 和 footer 的高度是 60px。下面介绍五种方式，分别是：浮动、绝对定位、 和 和表格布局。HTML 骨架如下： 浮动布局 使用浮动需要把 HTML 骨架调整一下，将三个 的顺序调整为： 代码如下
CSS 三栏布局
Bambi12的博客
03-21 355
1、浮动布局 float <style> .container{ width:100%; height:100px; } .left{ width:250px; height:100%; background:red; float:left; } .right{ width:250px; height:100%; background:pink; float...
css等比例分割父级容器（完美三等分）
xiaobing_hope的专栏
04-30 7万+
css等比例分割父级容器（完美三等分）          父级容器的宽度一定，要实现子元素等比例完美均分父级宽度，实现方式有哪些？ html部分代码： 方法一： 浮动布局+百分比  （将子元素依次左浮动，根据子元素的个数，设定每个子元素的宽度百分比） 方法二：行内元素（inline-block）+百分比 方法三： 父元素  display:t
JAVA集合类详解：Set, List, Map
"JAVA中集合类的总结" 在Java编程中，集合类是处理对象存储和操作的核心工具。本文将深入探讨Java中集合类的概念、特点以及主要类型：集（Set）、列表（List）和映射（Map）。 首先，我们要明白为何需要使用集合类...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值