CSS及页面布局

于 2024-09-14 23:45:03 发布
阅读量1.1k 收藏 12
点赞数 7
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/permit7/article/details/142268081
版权

CSS层叠样式表

CSS是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。例如，调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等。
在这里插入图片描述

页面布局

1.1 盒模型

盒模型是CSS布局中的一个核心概念，它描述了HTML元素在页面上的布局方式。每个元素都可以看作一个盒子，这个盒子包含了元素的内容、内边距、边框和外边距。盒模型的主要作用是帮助我们理解和控制元素在页面上的位置和尺寸。

盒模型主要包括以下四个部分：

  1. 内容区域（content）：这是元素实际显示内容的区域，如文本、图片等。内容区域的宽度和高度可以通过 width 和 height 属性来设置。

  2. 内边距（padding）：内边距位于内容区域与边框之间，它的宽度可以通过 padding-top、padding-right、padding-bottom和 padding-left 属性来分别设置。内边距会影响元素的实际尺寸，但不会影响其他元素的布局。

  3. 边框（border）：边框位于内边距与外边距之间，它的宽度、样式和颜色可以通过 border-width、border-style 和 border-color 属性来分别设置。边框会影响元素的实际尺寸，也会影响元素周围的布局。

  4. 外边距（margin）：外边距位于边框与其他元素之间，它的宽度可以通过 margin-top、margin-right、margin-bottom 和 margin-left 属性来分别设置。外边距会影响元素的布局，但不会影响元素的实际尺寸。

在计算元素的实际尺寸时，需要把盒模型的这四个部分都考虑进去。例如，一个元素的实际宽度为：width + padding-left + padding-right + border-left-width + border-right-width。一个元素的实际高度为：height + padding-top + padding-bottom + border-top-width + border-bottom-width。

此外，盒模型还有两种模式：标准盒模型（content-box）和 IE盒模型（border-box）。在标准盒模型中，width 和 height 属性指的是内容区域的宽度和高度；而在IE盒模型中，width和 height 属性指的是内容区域+内边距+边框的宽度和高度。可以通过设置 CSS 的 box-sizing 属性来选择使用哪种盒模型。

案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Box-sizing Demo</title>
   <style>
        .box {
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 10px solid black;
            margin: 20px;
        }

        .content-box {
            box-sizing: content-box;
            background-color: lightblue;
        }

        .border-box {
            box-sizing: border-box;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="box content-box">
        Content-box
    </div>
    <div class="box border-box">
        Border-box
    </div>
</body>
</html>

在这里插入图片描述

1.2 display

display 属性是 CSS 中用于控制元素的显示类型的重要属性。它可以改变元素的默认显示行为，使其在页面上以不同的方式进行布局。以下是 display 属性的一些常见值及其作用：

  1. block：将元素显示为块级元素。块级元素会独占一行，宽度默认为父元素的宽度，可以设置宽度、高度、内外边距等属性。常见的块级元素有<div>、<p>、<h1>等。

  2. inline：将元素显示为行内元素。行内元素不会独占一行，宽度仅为内容的宽度，不能设置宽度、高度、内外边距等属性。常见的行内元素有<span>、<a>、<img>等。

  3. inline-block：将元素显示为行内块元素。行内块元素既不会独占一行，也可以设置宽度、高度、内外边距等属性，类似于块级元素。常见的行内块元素有<input>、<button>等。

  4. none：将元素隐藏，不占据任何空间。通常用于隐藏不需要显示的元素。

  5. flex：将元素显示为弹性盒子。弹性盒子是一种现代布局方式，可以轻松实现响应式布局和自适应对齐。需要注意的是，display: flex 应用于父元素，而不是子元素。

  6. grid：将元素显示为网格容器。网格布局是一种二维布局方式，可以轻松实现复杂的布局需求。需要注意的是，display: grid 应用于父元素，而不是子元素。

以下是一个使用 display 属性的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display Demo</title>
  <style>
        .block {
            display: block;
            background-color: lightblue;
        }

        .inline {
            display: inline;
            background-color: lightgreen;
        }

        .inline-block {
            display: inline-block;
            background-color: lightyellow;
        }

        .none {
            display: none;
        }
    </style>
</head>
<body>
    <div class="block">
        Block element
    </div>
    <span class="inline">
        Inline element
    </span>
    <div class="inline-block">
        Inline-block element
    </div>
    <div class="none">
        Hidden element
    </div>
</body>
</html>

在这里插入图片描述

在这个例子中，我们创建了四个不同显示类型的元素，并分别应用了 block 、inline、inline-block 和 none 属性。通过观察这些元素的布局和显示效果，我们可以更好地理解display属性的作用。

1.3 浮动（float）

float布局

float是CSS中的一个浮动属性，它可以使元素脱离正常的文档流，并根据指定的方向（左或右）浮动到其父元素的边缘。float布局主要用于实现文本环绕图片等效果，但也可以用于布局页面中的其他元素。

以下是float属性的一些常见值及其作用：

  1. left：将元素浮动到其父元素的左边缘，文本和其他元素将围绕该元素排列。
  2. right：将元素浮动到其父元素的右边缘，文本和其他元素将围绕该元素排列。
  3. none：取消元素的浮动效果，使其回到正常的文档流中。

以下是一个使用float布局的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Float Layout Demo</title>
 <style>
        .container {
            width: 100%;
            background-color: lightgray;
        }

        .left {
            float: left;
            width: 30%;
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
        }

        .right {
            float: right;
            width: 30%;
            background-color: lightgreen;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>
            <div class="left">
                <img src="asset/img/ctrl.jpg" alt="ctrl.jpg" height="100%" width="100%">
            </div>

            <div class="right">
                <img src="asset/img/ctrl.jpg" alt="ctrl.jpg" height="100%" width="100%">
            </div>
        </div>
		
        <p>
            只因你太美 baby 只因你太美 baby
            只因你实在是太美 baby
            只因你太美 baby
            迎面走来的你让我如此蠢蠢欲动
            这种感觉我从未有
            Cause I got a crush on you who you
            你是我的我是你的谁
            再多一眼看一眼就会爆炸
            再近一点靠近点快被融化
            想要把你占为己有 baby bae
            不管走到哪里
            都会想起的人是你 you you
            我应该拿你怎样
            Uh 所有人都在看着你
            我的心总是不安
            Oh 我现在已病入膏肓
            Eh oh
            难道真的因你而疯狂吗
            我本来不是这种人
            因你变成奇怪的人
            第一次呀变成这样的我
            不管我怎么去否认
        </p>
    </div>
</body>
</html>

在这里插入图片描述

在这个例子中，我们创建了一个包含两个浮动元素和一个段落的容器。左侧的浮动元素使用 float: left，右侧的浮动元素使用 float: right。段落文本将围绕这两个浮动元素排列。

需要注意的是，float 布局有一些局限性，例如需要清除浮动效果以避免影响后续元素的布局。在现代布局中，更推荐使用 flex 和 grid 布局来实现更简单、直观和响应式的页面布局。

float 塌陷

float 塌陷是指浮动元素的父元素高度不能自动适应浮动元素的高度，导致父元素高度塌陷的现象。这会影响到后续元素的布局，使它们与浮动元素重叠。

解决办法

  1. 清除浮动（clearfix）：清除浮动是最常用的解决方法。我们可以为父元素添加一个伪元素（::after），并设置 clear: both 属性，以清除浮动效果。这样，父元素的高度就能自动适应浮动元素的高度，避免塌陷。

    .clearfix::after {
    content: "";
    clear: both;
    display: block;
}

  2. 使用 overflow 属性：我们可以为父元素设置 overflow 属性（如 overflow: auto 或 overflow: hidden），以创建一个新的块格式化上下文（BFC）。这样，父元素的高度就能自动适应浮动元素的高度，避免塌陷。

    .parent {
    overflow: auto;
}

  3. 使用 Flexbox 或 Grid 布局：现代布局中，我们更推荐使用 Flexbox 或 Grid 布局来替代 float 布局。这些布局方式可以更简单、直观地实现元素的排列和对齐，同时避免了 float 塌陷的问题。

    .parent {
    display: flex;
}

总之，float 布局是 CSS 中的一种浮动布局方式，它可以使元素脱离正常的文档流并根据指定的方向浮动到其父元素的边缘。在实际项目中，使用 float 布局可以实现文本环绕图片等效果，但在现代布局中，更推荐使用 flex 和 grid 布局来实现更简单、直观和响应式的页面布局。

以下是一个 float 塌陷的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float Collapse Example</title>
<style>
        .container {
            background-color: lightgray;
			/* overflow: hidden; */
        }

        .left {
            float: left;
            width: 30%;
            height: 200px;
            background-color: lightblue;
            margin: 10px;
        }

        .right {
            float: right;
            width: 30%;
            height: 300px;
            background-color: lightgreen;
            margin: 10px;
        }
		
		.clearfix::after {
			content: "";
			clear: both;
			display: block;
		}
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="left">
            <img src="asset/img/ctrl.jpg" alt="ctrl.jpg" height="100%" width="100%">
        </div>
        <div class="right">
            <img src="asset/img/kk.jpg" alt="ctrl.jpg" height="100%" width="100%">
        </div>
    </div>
	
	<!-- 不推荐 <div class="clearfix"></div> -->
	
    <p>
        只因你太美 baby 只因你太美 baby
        只因你实在是太美 baby
        只因你太美 baby
        迎面走来的你让我如此蠢蠢欲动
        这种感觉我从未有
        Cause I got a crush on you who you
        你是我的我是你的谁
        再多一眼看一眼就会爆炸
        再近一点靠近点快被融化
        想要把你占为己有 baby bae
        不管走到哪里
        都会想起的人是你 you you
        我应该拿你怎样
        Uh 所有人都在看着你
        我的心总是不安
        Oh 我现在已病入膏肓
        Eh oh
        难道真的因你而疯狂吗
        我本来不是这种人
        因你变成奇怪的人
        第一次呀变成这样的我
        不管我怎么去否认
    </p>
</body>
</html>

在这里插入图片描述

在这个例子中，我们创建了一个包含两个浮动元素（左侧蓝色和右侧绿色）的容器。由于浮动元素脱离了正常的文档流，容器的高度无法自动适应浮动元素的高度，导致容器高度塌陷。这将影响后续元素（如段落）的布局，使其与浮动元素重叠。

为了解决这个问题，我们可以使用清除浮动、设置 overflow 属性或使用Flexbox或Grid布局等方法。在现代布局中，更推荐使用Flexbox或Grid布局来替代 float 布局，以实现更简单、直观和响应式的页面布局。

1.4 弹性布局（Flexbox）

Flex 布局教程：语法篇

弹性布局（Flexbox）是 CSS 中的一种布局模式，它可以让我们更简单、直观地实现元素的排列和对齐。Flexbox 布局主要用于一维布局，即在水平或垂直方向上排列元素。

以下是 Flexbox 布局的一些常见概念和属性：

  1. 容器（Flex Container）：应用了 display: flex 或 display: inline-flex 属性的元素被称为弹性容器。弹性容器内的子元素将按照弹性布局进行排列。

  2. 项目（Flex Item）：弹性容器的子元素被称为弹性项目。它们将按照弹性布局进行排列和对齐。

  3. 主轴（Main Axis）：弹性容器内的项目沿着主轴排列。主轴的方向由 flex-direction 属性决定。

  4. 侧轴（Cross Axis）：弹性容器内的项目沿着侧轴对齐。侧轴的方向与主轴垂直。

  5. flex-direction：用于设置弹性容器的主轴方向。可选值有 row（默认值，水平方向）、row-reverse（水平方向，反向排列）、column（垂直方向）和 column-reverse（垂直方向，反向排列）。

  6. flex-wrap：用于设置弹性容器内的项目是否换行。可选值有 nowrap（默认值，不换行）、wrap（换行）和 wrap-reverse（换行，反向排列）。

  7. justify-content：用于设置弹性容器内的项目在主轴上的对齐方式。可选值有 flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）和 space-around（每个项目两侧的间隔相等）。

  8. align-items：用于设置弹性容器内的项目在侧轴上的对齐方式。可选值有 flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、baseline（基线对齐）和 stretch（默认值，如果项目未设置高度或设为auto，将占满整个容器的高度）。

  9. align-content：用于设置弹性容器内的多行项目在侧轴上的对齐方式。可选值与 align-items 相同。

  10. order：用于设置弹性项目的排列顺序。数值越小，排列越靠前，默认为0。

  11. flex-grow：用于设置弹性项目的放大比例。默认为0，即如果存在剩余空间，也不放大。

  12. flex-shrink：用于设置弹性项目的缩小比例。默认为1，即如果空间不足，该项目将缩小。

  13. flex-basis：用于设置弹性项目在主轴方向上的初始大小。可以是长度值（如 200px）或百分比（如 50%）。

  14. flex：flex-grow、flex-shrink 和 flex-basis 的简写属性。默认值为 0 1 auto。

  15. align-self：用于设置单个弹性项目在侧轴上的对齐方式，覆盖 align-items 属性。可选值与 align-items 相同。

以下是一个使用 Flexbox 布局的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox Example</title><style>
        .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100px;
            background-color: lightgray;
        }

        .item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <img src="asset/img/ctrl.jpg" alt="ctrl.jpg" height="100%" width="100%">
        </div>
        <div class="item">
            <img src="asset/img/ctrl.jpg" alt="ctrl.jpg" height="100%" width="100%">
        </div>
        <div class="item">
            <img src="asset/img/ctrl.jpg" alt="ctrl.jpg" height="100%" width="100%">
        </div>
    </div>
</body>
</html>

在这里插入图片描述

在这个例子中，我们创建了一个包含三个项目的弹性容器。项目在主轴上两端对齐，侧轴上居中对齐。

总之，弹性布局（Flexbox）是 CSS 中的一种布局模式，它可以让我们更简单、直观地实现元素的排列和对齐。Flexbox 布局主要用于一维布局，即在水平或垂直方向上排列元素。在现代布局中，更推荐使用 Flexbox 或 Grid 布局来替代 float 布局，以实现更简单、直观和响应式的页面布局。

1.5 网格布局（Grid Layout）

网格布局（Grid Layout）是CSS中的一种新型布局方式，它允许我们在二维空间中对元素进行精确定位和对齐。网格布局的主要目的是实现复杂的布局需求，使页面的布局更加简单、直观和易于维护。

网格布局主要包括以下几个部分：

  1. 容器（Container）：网格容器是网格布局的最外层元素，它用于包裹整个网格。要将一个元素设置为网格容器，需要将其 display 属性设置为 grid。

  2. 行和列（Rows and Columns）：网格布局中的行和列用于定义网格的结构。行和列的数量和宽度可以通过 grid-template-rows 和 grid-template-columns 属性来设置。

  3. 单元格（Cells）：单元格是网格布局中的基本单位，用于放置实际的内容。单元格的位置和大小由行和列的宽度和数量决定。

  4. 项目（Items）：项目是放置在单元格中的实际内容。项目的位置和对齐可以通过 grid-row、grid-column、justify-self 和 align-self 等属性来设置。

  5. 间距（Gaps）：网格布局中的行和列之间可以设置间距，以便在元素之间留出空白。间距可以通过 grid-row-gap 和 grid-column-gap 属性来设置。

以下是一个简单的网格布局示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Demo</title>
  <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-row-gap: 10px;
            grid-column-gap: 10px;
        }

        .item {
            background-color: lightblue;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">只因你太美</div>
        <div class="item">只因你太美</div>
        <div class="item">只因你太美</div>
        <div class="item">只因你太美</div>
        <div class="item">只因你太美</div>
        <div class="item">只因你太美</div>
        <div class="item">只因你太美</div>
        <div class="item">只因你太美</div>
        <div class="item">只因你太美</div>
    </div>
</body>
</html>

在这里插入图片描述

在这个例子中，我们创建了一个3x3的网格布局，每个单元格的大小和位置由行和列的宽度和数量决定。通过观察这个网格布局的布局效果，我们可以更好地理解网格布局的原理和应用。

在CSS网格布局中，1fr 是一个表示剩余可用空间的单位。fr 是 “fraction” 的缩写，表示一个分数部分。当我们在 grid-template-rows 或 grid-template-columns 属性中使用 fr 单位时，它会根据网格容器的可用空间来分配行和列的宽度。

在上述示例中，我们使用了 repeat(3, 1fr) 来定义网格的行和列。这意味着我们创建了一个 3x3 的网格，每行和每列的宽度都是 1fr。由于我们没有指定网格容器的宽度和高度，它们将自动适应其父元素的大小。因此，1fr 将根据网格容器的可用空间来分配每行和每列的宽度，从而实现均匀分布。

需要注意的是，fr 单位可以与其他长度单位（如 px、em、% 等）混合使用，以实现更复杂的布局需求。例如，我们可以使用 grid-template-columns: 1fr 2fr 1fr 来创建一个 3 列的网格，其中第二列的宽度是第一列和第三列的两倍。

1.6 栅格系统（Grid System）

栅格系统（Grid System）是一种用于布局和排版的设计方法，它将页面划分为等宽的多列，以便在这些列中放置内容。栅格系统的主要目的是实现页面的一致性、可读性和易于维护。在响应式设计中，栅格系统尤为重要，因为它可以帮助我们在不同设备和屏幕尺寸上实现自适应布局。

栅格系统通常由以下几个部分组成：

  1. 容器（Container）：容器是栅格系统的最外层元素，它用于包裹整个页面的内容。容器的宽度可以是固定的（例如1200px）或者是百分比（例如100%），以适应不同设备的屏幕尺寸。

  2. 行（Row）：行是容器内的水平分隔，用于放置列。每一行都包含一定数量的列，列的宽度之和等于100%。

  3. 列（Column）：列是栅格系统的基本单位，用于放置实际的内容。列的宽度是等分的，通常以百分比表示。例如，一个12列的栅格系统中，每个列的宽度为100%/12。

  4. 响应式类（Responsive classes）：栅格系统通常提供一组响应式类，用于在不同设备和屏幕尺寸上调整列的宽度。例如，.col-md-6表示在中等屏幕尺寸（如桌面显示器）上，该列的宽度为50%；.col-sm-12表示在小屏幕尺寸（如平板电脑）上，该列的宽度为100%。

以下是一个简单的栅格系统示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Grid System Demo</title>
   <style>
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
        }

        .col {
            box-sizing: border-box;
            padding: 10px;
        }

        .col-12 {
            width: 100%;
        }

        .col-6 {
            width: 50%;
        }

        .col-4 {
            width: 33.33%;
        }

        .col-3 {
            width: 25%;
        }

        .col-2 {
            width: 16.67%;
        }

        .col-1 {
            width: 8.33%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col col-12" style="background-color: lightblue;">
                整行
            </div>
        </div>
        <div class="row">
            <div class="col col-6" style="background-color: lightgreen;">
                二分之一
            </div>
            <div class="col col-6" style="background-color: lightyellow;">
                二分之一
            </div>
        </div>
        <div class="row">
            <div class="col col-4" style="background-color: lightyellow;">
                三分之一
            </div>
            <div class="col col-4" style="background-color: lightblue;">
                三分之一
            </div>
            <div class="col col-4" style="background-color: lightgreen;">
                三分之一
            </div>
        </div>
        <div class="row">
            <div class="col col-3" style="background-color: lightblue;">
                四分之一
            </div>
            <div class="col col-3" style="background-color: lightgreen;">
                四分之一
            </div>
            <div class="col col-3" style="background-color: lightyellow;">
                四分之一
            </div>
            <div class="col col-3" style="background-color: lightpink;">
                四分之一
            </div>
             
        </div>
    </div>
</body>
</html>

在这里插入图片描述

在这个例子中，我们创建了一个简单的栅格系统，包含一个容器、三个行和不同宽度的列。

云计算练习生X
关注
CSS 网页布局（详解网页的布局构造）
百赢出品，必属精品
04-26 1984
网页布局是将网页内容按照一定的结构和规则进行排版和组织，使得页面具有良好的结构和易读性。它涉及到页面元素的位置、大小、间距等方面的设计。头部区域、菜单导航区域、内容区域、底部区域。了解网格系统的概念和作用，掌握如何设计和实现网格布局，以及如何利用网格系统进行页面排版和元素定位。理解响应式设计的原理和重要性，掌握使用媒体查询、流式布局等技术实现网页在不同设备上的自适应显示。熟悉CSS中的各种布局模型，包括常规文档流、浮动布局、定位布局（相对定位、绝对定位、固定定位）、Flexbox布局和栅格布局等。
DIV+CSS网页布局
DesertOrchid的博客
12-01 985
CSS盒子模型 Margin-right/left/top/bottom:当两个块级元素外边距都设置的时候，相邻的外边距不是叠加关系。而是采用谁大用谁，这种现象叫做“塌陷”。 标准流和div标记 标准流：网页默认的自然排列布局方式，即CSS规定的默认块级元素和行内元素排列方式。 网页元素=块级元素+行内元素 块级元素：h1-h6、p、div ①占据一定矩形区域； ②同级兄弟块依次...
div css页面布局 模板_网页制作Div+CSS的布局与规划
weixin_39926613的博客
10-25 1119
我们在网页制作中，会有许多的术语例如：CSS、HTML、DHTML、XHTML等等。下面开始使用DIV+CSS进行网页布局设计。所有的设计第一步就是构思，构思好了，还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。下面，我们需要根据构思图来规划一下页面的布局，图片大致分为以下几个部分：　　1、顶部部分，其中又包括了LOGO、MEN...
Div+css网页布局（一）
qq_41891425的博客
08-30 1093
Div是网页的块标记（一个div实际就是一行，行有高度height、宽度width、边框线border、背景色background-color等属性） Css文件是样式文件，可用于集中定义各div块的属性。采用css样式文件定义div块的属性，主要是为了方便后期的维护。 发现没有 例１：div+css网页布局之　一列两块。 步骤： 窗口内容大致是这样 编辑：one.css代码，定义两种div块aa和bb的属性 注意：每个属性后面以分号结束，代码中不弄个出现中文标点符号 将One.css，拖到
div+css页面布局
Luqing的专栏
02-23 7632
1、什么是 DIV DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。它是一个容器，DIV的起始标签和结束标签之间所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。 在页面中插入div标签，其代码如下：     内容     在页面上显示为一行的效果。它是一个块状元素，在其中放置页面内容。 因此在 div+cs
div+css常见布局：两列布局、三列布局、圣杯布局和双飞翼布局
icemwj的博客
10-05 1万+
1、两列布局：左边固定，右边自适应 左右两侧，左侧固定宽度 200px，右侧自适应占满。 方法1： 左侧采用 float:left 往左浮动，右侧 margin-left:200px，留出左侧内容的空间 // html 代码 <div class="divBox"> <div class="left">左侧固定200px</div> <div class="right">右侧自适应</div> </div> // C
使用CSS格式化页面布局示例(附图)
12-13
源代码： 复制代码代码如下:<!... <head> <title> New Document </title>...meta name=”Generator” content=”EditPlus”>...meta name=”Author” content=””>...meta name=”
CSS网页布局:网页页面结构化
12-12
你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习： 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义...
CSS网页布局实例 常见的12种网页布局
09-25
本文将详细介绍12种常见的CSS网页布局，这些布局都具有自适应屏幕分辨率的特性，能提供优秀的用户体验。 1. **一列全宽动态布局**：这种布局通常用于简单的单栏内容展示，如博客文章或新闻页面。内容宽度会根据...
CSS网页布局
01-19
CSS能表现网页，以各种格式来显示页面，只需要你修改CSS代码就可以实现，HTML是网页的结构，可以配合CSS来实现制作我们的网页。 CSS 来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只...
自己整理div+css网页标准版式布局(50种布局方式)
12-09
大四了，把之前学的些东西整理整理分享给大家，适合老师网页设计教材及初学者，里面包含了以下内容： 1、固定宽度CSS版式布局 2、自适应(弹性)宽度CSS版式布局 3、标准布局常见问题及解决办法 像素问题及解决办法 上边容器浮动后，下边的容器跟着浮动，造成页面错乱 当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？ 相对定位与绝对定位 IE6双倍边距bug 4、盒模型层次平面示意图和3D示意图
利用CSS+DIV进行网页布局
F2022697486的博客
03-25 1万+
网页布局是网页设计开发工作的重要组成部分，通过合理的网页布局能够实现网页页功能的精准定位，增强网页展示效果，使用户能够在较短的时间内找到目标元素。此外，合理的功能布局、图像搭配可以增强网页视觉表现力，给用户带来强烈的视觉感受，DIV+CSS布局技术可以让用户像编辑Word文档一样调整网页中的元素，同时还可以精准定位网页中的位置，不但降低了网页维护的难度，而且还提高了网页在服务器中的下载速率及其在网络中的传输速率。
CSS和div布局页面
m0_51528800的博客
05-16 7588
CSS和div布局页面 CSS和div布局页面一、什么是布局网页布局页面元素定位机制二、布局属性浮动清除浮动定位绝对定位相对定位固定定位 一、什么是布局 网页实质是块与块之间的位置，块挨着块，块嵌套块，块叠着块。css网页布局指的是利用css对网页内容的布局进行规划，将主次内容进行归纳和区分；以最适合浏览的方式，将图片、文字等内容遵循一定的原则，放置到页面不同的位量给用户良好的浏览阅读体验。DIV+CSS布局就是网页html通过DIV标签+CSS样式表代码开发制作的（html）网页的统称。 网页布局 进行
DIV 和 CSS 网页布局总结
bruceslash的专栏
04-28 985
最近两个月在创业团队写了前端网页及Javascript脚本，个人算是有一点学习心得吧！【晚上还要加班写与后端服务器交互的代码，苦逼=-=】 现在总结下关于网页布局及样式的一些个人浅见。 好了，废话不多说，开写。 ================================================== 1、HTML标签： HTML是超文本标记语言，顾名思义是以标记的形式布局网
DIV+CSS三种页面布局
最新发布
weixin_65137412的博客
04-08 1278
【代码】DIV+CSS三种页面布局。
DIV+CSS网页布局（新手必备)
热门推荐
Darlingmi的博客
04-20 3万+
文章目录一：网页布局的目的二：如何布局（1）：确定“版心”（2）：分析模块三：页面元素的定位机制（1）流式布局（2）浮动-float（3）绝对定位(position:absolute)(4)相对定位(position:relative)四：布局中的常用属性(1)浮动属性(float)(2)清除属性(clear)(3)溢出属性(overflow)五：元素的定位六：偏移量七：层叠属性八：语义标签九：命名规范 一：网页布局的目的 通过网页布局，可以使网页的内容更加清晰，有条理，同时更加易读。 二：如何布局 （1）
网页设计（二）——DIV+CSS布局1
初学者
07-11 1万+
前言：好久没更新过CSDN博客了，现在从原来的OI，变成了一个科研工作者。最近打算把原来的一些资料整理一下，作为经验公开分享，希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入门培训时的一些讲稿，有关HTML+CSS框架的编程，比较基础。当时为了给入门的同学更多感性认识，提供了很多小实例，这里也都给出来了。 DIV+CSS布局 DIV+CSS布局概念 DIV+CSS布局方式并不是一种新的语言或者体系，它就是html语言中的一部分。 简单来说就是把标签中的样式...
DIV+CSS布局
XUYIGE的博客
11-13 1895
DIV+CSS布局方法 DIV+CSS的网页标准化设计是web标准中的一种新的布局方式，正逐渐代替传统的表格（Table）布局。尤其适合内容信息量大、板块多且经常进行版面更新的大型门户网站使用。DIV+CSS构建网页，采用层（DIV）布局，并且使用层叠样式表（CSS）来实现页面的外观，给网站浏览者更好的体验。 DIV+CSS布局的优势： 1、表现和内容分离，便于站点重构页面 DIV+CSS模式具有...
DIV＋CSS布局
zg0601的博客
10-17 1万+
DIV+CSS布局
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值