`

css固定宽度布局

    博客分类：
  • Css
css 
阅读更多
1. css固定宽度布局   

1) css布局

2) 绝对定位法 

<style type="text/css">
    body{
        text-align: center;
    }
    #head,#container,#content,#side,#foot{
        margin:20px auto 20px auto;
        padding:20px 0px 20px 0px;
        border: 1px solid red;
    }
    #head,#container,#foot{
        width: 900px;
    }
    #container{
        border:0px;
        position: relative;
        height: 250px;
    }
    #content{
        position: absolute;
        width: 700px;
        height: 200px;
    }
    #side{
        margin-left: 750px;
        height: 100px;
    }
</style>
</head>
<body>
<div id="head">head</div>
<div id="container">
    <div id="content">content</div>
    <div id="side">side</div>
</div>
<div id="foot">foot</div>
</body>


3) 浮动法 

<style type="text/css">
    body{
        text-align: center;
    }
    #head,#container,#content,#side,#foot{
        margin:20px auto 20px auto;
        padding:20px 0px 20px 0px;
        border: 1px solid red;
    }
    #head,#container,#foot{
        width: 900px;
    }
    #container{
        border:0px;
    }
    #content{
        float:left;
        width: 700px;
        height: 200px;
    }
    #side{
        float:right;
        width: 180px;
        margin-left: 10px;
        height: 100px;
    }
    #foot{
        clear: both;
    }
</style>
</head>
<body>
<div id="head">head</div>
<div id="container">
    <div id="content">content</div>
    <div id="side">side</div>
</div>
<div id="foot">foot</div>
</body>
分享到：
| css列表样式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css实现中间固定宽度两边自适应布局

    使用css实现的三列布局，中间一列宽度固定大小，两边宽度要自适应。

    div+css 网页模板布局 固定宽度右窄左宽

    本知识点主要围绕"div+css 网页模板布局 固定宽度右窄左宽"这一主题展开，我们将探讨如何构建一个左侧宽、右侧窄的网页布局。 1. **基本概念**： - `&lt;div&gt;`元素：HTML中的`&lt;div&gt;`元素是块级元素，它可以容纳其他...

    div+css菜单导航布局自适应宽度

    3. **流体布局**：流体布局是指使用百分比而不是固定像素来设置元素宽度，这样元素的大小可以根据父元素或浏览器窗口的大小自动调整。在导航菜单中，我们可以将整个菜单容器的宽度设为100%，并将菜单项的宽度设为一...

    css 固定 流体 弹性布局

    "CSS 固定、流体、弹性布局"是三种常见的布局模式，它们各自有着独特的特性和应用场景。本文将深入探讨这三种布局方式，并结合源码和工具，帮助你更好地理解和运用它们。 首先，固定布局（Fixed Layout）是最基础的...

    CSS自适应宽度按钮

    综上所述，“CSS自适应宽度按钮”涉及到CSS布局、盒模型、响应式设计以及媒体查询等核心概念。通过灵活运用这些技术，设计师可以创建出在各种设备上都能良好展示的自适应按钮，提升网页的可用性和美观度。在提供的...

    CSS网页布局入门教程1：一列固定宽度

    CSS网页布局入门教程1：一列固定宽度知识点总结 一列固定宽度是CSS网页布局的基础，理解了一列固定宽度的概念和实现方法，对于初学者学习CSS网页布局非常重要。本教程将从基本概念开始，逐步进阶到高级知识点，並...

    固定宽度表格布局设定宽度问题

    总结起来，固定宽度的表格布局通过设定`&lt;table&gt;`的`width`属性和使用CSS的`table-layout: fixed`、`overflow: hidden`等属性来实现。在实际应用中，还需要关注跨浏览器兼容性和响应式设计，以确保在各种环境下都能...

    DIV+CSS初学者布局教程

    4. **二列固定宽度布局**：`CSS网页布局入门教程4：二列固定宽度.doc`和`CSS网页布局入门教程7：二列固定宽度居中.doc`涵盖了两种不同的二列布局。一种是两侧宽度固定，中间内容自适应；另一种是整体居中，两列都有...

    CSS中固定宽度布局的详细教程

    在CSS中，固定宽度布局是一种常见的网页设计方式，意味着网页的布局尺寸在不同屏幕和分辨率下不会发生变化。这种布局方式对于开发者来说，可以精确控制网页元素的显示位置，使得网页在不同设备上呈现一致的布局效果...

    css层布局宽度自动适应

    "css层布局宽度自动适应"这一主题聚焦于如何利用CSS来创建灵活的、能够根据用户设备屏幕大小自动调整宽度的布局。这种响应式设计是现代网页开发的关键，确保了网站在不同设备上都能提供良好的用户体验。 首先，我们...

    CSS布局实例[绝对定位:一栏固定,一栏自适应]

    本实例聚焦于一种常见的布局模式：一栏固定宽度，另一栏自适应宽度，通常应用于内容展示和侧边栏导航等场景。这种布局通过CSS的绝对定位技术来实现，下面我们将详细探讨这一技术。 首先，我们了解基本的CSS布局模型...

    CSS标准网页布局开发指南（光盘）源码

    流体布局使页面元素宽度根据浏览器窗口大小自动调整，适合大屏幕和小屏幕设备。固定布局则设定元素尺寸为固定值，适用于内容较少、设计固定的网页。而响应式布局则是当前的主流，通过媒体查询等技术，使页面在不同...

    CSS网页布局,html布局

    一、固定宽度布局 在第一章中，我们学习了如何创建一列固定宽度的布局。这种布局适用于内容宽度固定且不随窗口大小变化的情况。通过设置元素的`width`属性，我们可以确保内容始终占据一定的空间，无论浏览器窗口大小...

    前端开发-css布局

    本文将深入探讨五种主要的CSS布局模式：固定宽度布局、流式布局（自适应式布局）、弹性布局，以及栅格化布局和可变固定宽度布局。 首先，固定宽度布局是最基础的布局方式，它的特点是设置一个固定的容器宽度，通常...

    CSS网页布局入门教程4：二列固定宽度

    在学习了单列固定宽度的布局后，接下来将深入了解如何利用CSS创建一个由两列组成的固定宽度布局。这种布局方式广泛应用于现代网页设计中，尤其是在需要划分主要内容区域与辅助信息区域的情况下。本文将详细介绍二列...

    div+CSS布局

    在CSS+DIV布局中，基本布局的种类主要包括固定宽度布局和宽度自适应布局这两种主要方式。 固定宽度布局，顾名思义，指的是布局宽度固定不变，不随浏览器窗口大小变化而自动调整。这种布局通常用于需要精确控制页面...

    Div+Css网页版式布局

    3. **固定宽度布局**：固定宽度布局是指网页的宽度被设定为一个固定的像素值。这种布局方式适用于需要一致视觉效果的网站，如企业官网。CSS中可以通过设置`width`属性来实现，例如：`body { width: 960px; margin: 0...

    首页CSS+DIV布局模板

    在CSS中，我们可以定义各种规则，如选择器（如类选择器、ID选择器、元素选择器）、盒模型（包括内容、内边距、边框和外边距）、定位（如相对定位、绝对定位和固定定位）等，以实现对网页元素的精确控制。 在“首页...

    精确控制文本布局：在HTML中创建固定宽度文本

    固定宽度的文本可以用于创建具有特定布局的页面元素，如导航栏、侧边栏、模态窗口等。本文将详细介绍如何在HTML中创建固定宽度的文本，包括使用内联样式、内部CSS、外部CSS文件，以及响应式设计中的固定宽度文本。 ...

Magicbox
Global site tag (gtag.js) - Google Analytics