CSS - 布局流程

最新推荐文章于 2022-12-02 20:20:38 发布
最新推荐文章于 2022-12-02 20:20:38 发布
阅读量251 收藏 1
点赞数
原文链接：http://www.cnblogs.com/allen2333/p/9012471.html
版权

一、为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

1、确定页面的版心（可视区）。例如mi.com的 .container
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML结构 。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

二、 一列固定宽度且居中

最普通的，最常用
1310818-20180509094137122-494520780.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .box {
                /* 版心为900px */
        width: 900px;
        background-color: #eee;
        border: 1px dashed #ccc;
        margin: 0 auto;
    }
    .top {
        height: 80px;   
    }
    .banner {
        height: 120px;
        /*margin: 0 auto;*/
        margin: 5px auto;
    }
    .main {
        height: 500px;
    }
    .footer {
        height: 100px;
        /*margin: 0 auto;
        margin-top:5px;*/ 
        margin: 5px auto 0;
    }
    </style>
</head>
<body>
    <div class="top box">top</div>
    <div class="banner box">banner</div>
    <div class="main box"></div>
    <div class="footer box"></div>
</body>
</html>

三、 两列左窄右宽型

通过float解决div.main里的div.left和div.right的布局
1310818-20180509093951151-621979184.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .top {
        width: 900px;
        height: 80px;
        background-color: pink;
        margin: 0 auto;
    }
    .banner {
        width: 900px;
        height: 150px;
        background-color: purple;
        margin: 0 auto;
    }
    .main {
        width: 900px;
        height: 500px;
        background-color: skyblue;
        margin: 0 auto;
    }

    .left {
        width: 288px;
        height: 500px;
        background-color: yellow;
        float: left;
        border: 1px solid red;
    }
    .right {
        width: 600px;
        height: 500px;
        background-color: deeppink;
        float: right;
        
    }
    .footer {
        width: 900px;
        height: 120px;
        background-color: black;
        margin: 0 auto;
    }

    </style>
</head>
<body>
    <div class="top"></div>
    <div class="banner"></div>
    <div class="main">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer"></div>
</body>
</html>

四、 通栏(Banner)平均分布型

例如锤子官网
1310818-20180509093832938-847289901.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    .top {
        
        height: 80px;
        background-color: pink;
        
    }
    .top-inner {
        width: 900px;
        height: 80px;
        /*background-color: #ababab;*/
        margin: 0 auto;
    }
    .banner {
        width: 900px;
        height: 150px;
        /*background-color: purple;*/
        margin: 0 auto;
    }
    .banner li {
        float: left;
        width: 217px;
        height: 150px;
        margin-right: 10px;
    }
    .one {
        background-color: purple;
    }
    .two {
        background-color: indianred;
    }
    .three {
        background-color: darkgoldenrod;
    }
/*        只写.four的话优先级不够，magrin-right:0不生效*/
    .banner .four {
        background-color: green;
        margin-right: 0;
        float: right; 
    }
    .main {
        width: 900px;
        height: 500px;
        background-color: skyblue;
        margin: 0 auto;
    }

    .left {
        width: 288px;
        height: 500px;
        background-color: yellow;
        float: left;
        border: 1px solid red;
    }
    .right {
        width: 600px;
        height: 500px;
        background-color: deeppink;
        float: right;
        
    }
    .footer {
        width: 900px;
        height: 120px;
        background-color: black;
        margin: 0 auto;
    }

    </style>
</head>
<body>
    <div class="top">
        <div class="top-inner">123</div>
    </div>
    <div class="banner">
        
        <ul>
            <li class="one">1</li>
            <li class="two">2</li>
            <li class="three">3</li>
            <li class="four">4</li>
        </ul>
    </div>
    <div class="main">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer"></div>
</body>
</html>

转载于:https://www.cnblogs.com/allen2333/p/9012471.html

anchenhe9360
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
布局流程
ice_yr的博客
08-01 579
版心 “版心”是指网页中主体内容所在的区域，一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 布局流程 为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，如下： 1.确定页面的版心（可视区） 2.分析页面中的行模块，以及每个行模块中的列模块 2.制作HTML页面，css文件 4.css初始化，然后开始运用盒子模型的原理，通过DIV+CSS...
CSS布局
了凡
07-15 506
CSS布局如何清除浮动如下布局： <section> <img src="images/book1.jpg" alt=""> <p>It's funny float</p> </section> <footer> Here is footer element that across the bottom of the page.
CSS布局方案以及思路
m0_61934949的博客
03-21 1637
前言 在我们前端开发时，经常会遇到不同的场景页面布局问题，页面框架搭建是前端开发基础，也是十分重要的一环。本文先是对页面开发基本流程思路进行了总结，在此基础上对CSS布局常见方案进行梳理，涉及水平垂直居中、单列布局、两栏布局、圣杯布局、双飞翼布局、等高布局以及粘带布局。 全文概要 要点速看 网页开发基本思路：确定版心--》分析行模块--》分析列模块； 如果一行当中有多个模块，一定要放在同一个父模块中； 列模块首先可以先给宽高背景颜色，实例化盒子； 水平居中推荐使用方法：justify-co
浮动与布局流程
weixin_45307185的博客
07-04 120
浮动 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。 在CSS中，通过float属性来定义浮动，其基本语法如下： 属性 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动（默认值） 浮动的目的就是为了让多个块级元素同一行上显示。 布局流程 ...
定位、三大特性
qq_39903918的博客
03-02 328
1. 定位 1.1 概述 如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。定位是我们CSS算是数一数二难点的了，但是，你务必要学好它，我们CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触它，反而要爱上它，它可以让我们工作更加轻松哦！ 1.2 属性 1.3 分类 在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下： 选择器{position:属性值;} position属性的常用值 在这里插入图片描述 1.3.1
CSS布局的一般步骤
weixin_33739523的博客
08-22 625
在开始把设计转换为功能完整的模板时，设计者往往很像马上开始编写页面和处理图像。但是，这样做很快就会遇到麻烦。相反，先做一点儿计划可以避免许多问题。正如俗话说的，三思而后行。要想创建可伸缩且容易维护的CSS系统，首先应该检查设计，寻找重复的模式，这包括结构中的模式或在站点种元素反复出现的方式。在这个阶段，不应该太关注表现方式，而是应该注意结构和意义。我喜欢打印出...
advanced-css-course
04-05
流体布局 媒体查询 响应式图像 正确的单位 桌面优先与移动优先 可维护和可扩展的代码 干净的 容易明白 生长 可重复使用的 如何组织代码 如何命名班级 如何构造HTML 网络性能 更少的HTTP请求 更少的代码 压缩代码 ...
css-guide-example
06-03
**CSS 指南示例** 本指南将深入探讨CSS（Cascading Style Sheets）的基础知识，以及如何...通过探索和运行该项目，你不仅可以学习CSS的基础知识，还能掌握现代CSS布局、构建流程和优化技巧，提升你的前端开发能力。
div+css布局制作横向带箭头步骤流程样式
11-08
`div+css`布局能够实现灵活、可维护的网页设计，对于创建横向带箭头的步骤流程展示尤为适用。以下是制作此类布局的具体步骤和相关知识点： 1. **创建HTML结构**：首先，我们需要用`<div>`元素来表示每个步骤，每个...
html-css-网页模板-美食
11-23
在实际应用中，HTML-CSS网页模板的使用可以极大地简化网站开发流程，尤其是对于非专业开发者来说。模板通常已经预设了响应式设计，能够适应不同设备的屏幕大小，提供良好的用户体验。此外，它们通常也遵循最佳实践，...
推荐网页布局设计流程
aiqixiao2017的博客
05-06 224
其实标准的网制作完成的工作实际是：psd to html，一般情况下，我们会拿到美工的psd,这时候不同的人会有不同的做法： 1.打开fireworks将图片切割导出为html。 2.直接在dreamweaver之类的工具去拖拉布局，导入相关的图片,flash资源。 3.先在ps中完成切图后，在文本编辑器中看着效果图一步步的制作。 以上是大多被采用的方...
前端布局和兼容
这里是前端，是不一样的前端
10-07 201
前言： 版心和布局流程 阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在 制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。 “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为 960px、980px、1000px、1200px等。 一、布局流程 为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下： 1、确定页面的版心（可视区）。 2、分析页面结构。 3、制作HTML结构 。 4、CSS初
CSS页面布局（超详解）
m0_52896041的博客
12-02 2万+
浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档普通流中，所以文档普通流中的块元素表现得就像浮动框不存在一样。HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为盒子模型。
css流程图
qq_45432865的博客
08-04 1704
css3总结流程图 css2总结流程图
CSS+DIV三种布局方式
热门推荐
qq_34283987的博客
09-08 7万+
在学习了盒模型、块级元素和行内元素得到概念后，我们来说一下CSS的一个比较重要的用途：布局。以前我们学过表格可以起到布局页面的作用，比如布局表单，但实际工作表格的布局通常也仅仅是用来布局表单。绝大多数的模具工作是由CSS+DIV来完成的，因为表格布局 复杂页面时需要频繁的嵌套，代码比较复杂、难以维护，而使用CSS+DIV布局，内容和表现可以分离，代码干净整洁、可读性好、便于维护，并且样式代码可以复用
CSS网页的布局方式（标准流/浮动流/定位流）
qq_48858031的博客
07-13 988
网页的布局方式其实是就是指浏览器是如何对网页中的元素进行排版的。1、标准流（文档流/普通流）排版方式：（1）默认的排版方式就是标准流排版方式（2）在CSS中将元素分为三类，分别为块级元素/行内元素/行内块级元素（3）标准流中，垂直排版：块级元素，水平排版：行内元素/行内块级元素 在标准流中，内容的高度可以撑起父元素的高度企业开发中什么时候使用标准流什么时候使用浮动流？垂直方向使用标准流，水平方向使用浮动流。拿到一个很复杂的界面如何下手？1、从上至下布局2、从外向内布局3、水平方向可以先划分为一左一右再对左边
CSS基础——布局
weixin_43207208的博客
06-05 3680
五种不同的布局方式的基本介绍
AngularJs 中的简单益智游戏（带源代码）.zip
最新发布
08-08
项目：使用AngularJs编写的简单 益智游戏（附源代码）  这是一个简单的 javascript 项目。这是一个拼图游戏，也包含一个填字游戏。这个游戏玩起来很棒。有两个不同的版本可以玩这个游戏。你也可以玩填字游戏。 关于游戏 这款游戏的玩法很简单。如上所述，它包含拼图和填字游戏。您可以通过移动图像来玩滑动拼图。您还可以选择要在滑动面板中拥有的列数和网格数。 另一个是填字游戏。在这里你只需要找到浏览器左侧提到的那些单词。 要运行此游戏，您需要在系统上安装浏览器。下载并在代码编辑器中打开此项目。然后有一个 index.html 文件可供您修改。在命令提示符中运行该文件，或者您可以直接运行索引文件。使用 Google Chrome 或 FireFox 可获得更好的用户体验。此外，这是一款多人游戏，双方玩家都是人类。 这个游戏包含很多 JavaScript 验证。这个游戏很有趣，如果你能用一点 CSS 修改它，那就更好了。 总的来说，这个项目使用了很多 javascript 和 javascript 库。如果你可以添加一些具有不同颜色选项的级别，那么你一定可以利用其库来提高你的 javascript 技能。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值