CSS学习11--版心和布局流程以及几种分布的例子

版心和布局流程

  • 一、版心
  • 二、布局流程
  • 三、一列固定宽度且居中
  • 四、两列左窄右宽
  • 五、通栏平均分布型

一、版心

版心:是指网页主题内容所在的区域。一般在浏览器窗口水平居中位置,常见的宽度值为960px、980px、1000px、1200px等。

二、布局流程

为了提高网页制作的效率,布局时需要遵守一定的布局流程,具体如下:

  • 确定页面版心
  • 分析页面中的行模块,以及每个行模块中的列模块
  • 制作HTML结构
  • CSS初始化,然后开始运用盒子模型的原理,通过CID+CSS布局来控制网页的各个模块

三、一列固定宽度且居中

<html><head><style>* {padding: 0;margin: 0;}.top,.banner,.main,.footer {width: 960px;margin: 10px auto;text-align: center;}.top {height: 100px;background-color: pink;}.banner {height: 120px;background-color: skyblue;}.main {height: 500px;background-color: red;}.footer {height: 150px;background-color: #ccc;}</style></head><body><div class="top">top</div><div class="banner">banner</div><div class="main">main</div><div class="footer">footer</div></body>
</html>

四、两列左窄右宽

<html><head><style>* {padding: 0;margin: 0;}.top,.banner,.main,.footer {width: 960px;margin: 10px auto;text-align: center;}.top {height: 100px;background-color: pink;}.banner {height: 120px;background-color: skyblue;}.main {height: 500px;background-color: red;}.footer {height: 150px;background-color: #ccc;}.main .left {width: 360px;height: 500px;float: left;background-color: white;}.main .right {width: 590px;height: 500px;margin-left: 10px;float: left;background-color: white;}</style></head><body><div class="top">top</div><div class="banner">banner</div><div class="main"><div class="left">left</div><div class="right">right</div></div><div class="footer">footer</div></body>
</html>

五、通栏平均分布型

<html><head><style>* {padding: 0;margin: 0;}ul {list-style: none;}.top,.banner,.main,.footer {width: 960px;margin: 10px auto;text-align: center;}.top {height: 100px;background-color: pink;}.banner {height: 120px;background-color: skyblue;}.main {height: 500px;background-color: red;}.footer {height: 150px;background-color: #ccc;}.main ul li:nth-child(odd) {width: 240px;height: 240px;background-color: deeppink;float: left;}.main ul li:nth-child(even) {width: 240px;height: 240px;background-color: hotpink;float: left;}</style></head><body><div class="top">top</div><div class="banner">banner</div><div class="main"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><div class="footer">footer</div></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/878914.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索EasyCVR与AI技术深度融合:视频汇聚平台的新增长点

随着5G、AI、边缘计算、物联网&#xff08;IoT&#xff09;、云计算等技术的快速发展&#xff0c;万物互联已经从概念逐渐转变为现实&#xff0c;AIoT&#xff08;物联网人工智能&#xff09;的新时代正在加速到来。在这一背景下&#xff0c;视频技术作为信息传输和交互的重要手…

SpringMVC使用:类型转换数据格式化数据验证

01-类型转换器 先在pom.xml里面导入依赖&#xff0c;一个是mvc框架的依赖&#xff0c;一个是junit依赖 然后在web.xml里面导入以下配置&#xff08;配置的详细说明和用法我在前面文章中有写到&#xff09; 创建此测试类的方法用于测试springmvc是具备自动类型转换功能的 user属…

Linux驱动.之字符设备驱动框架,新内核框架,设备树(二)

第一篇比较长&#xff0c;第二篇&#xff0c;继续写&#xff0c;内容有重复 一、字符设备驱动框架 在用户空间中调用open&#xff0c;打开一个字符设备&#xff0c;执行流程如下&#xff1a;最终会执行chrdev中的ops对应的open函数。

Kafka3.6.0 linux 安装,非zk模式

1.下载 到kafka官网下载 2.上传到服务器指定位置 3.解压到指定目录&#xff0c;这里我放到/opt下 tar -xzvf kafka_2.13-3.6.0.tgz -C /opt/ 4.修改配置 因为我们不使用zookeeper&#xff0c;所以来到kafka装根目录的下的/config/kraft/ cd /opt/kafka_2.13-3.6.0/config…

C++复习day05

类和对象 1. 面向对象和面向过程的区别是什么&#xff1f;&#xff08;开放性问题&#xff09; 1. **抽象级别**&#xff1a;- **面向对象**&#xff1a;以对象&#xff08;数据和方法的集合&#xff09;为中心&#xff0c;强调的是数据和行为的封装。- **面向过程**&#xf…

爆改YOLOv8|利用图像分割网络UNetV2改进yolov8主干-即插即用

1&#xff0c;本文介绍 U-Net v2 通过引入创新的跳跃连接设计来提升医学图像分割的精度。这一版本专注于更有效地融合不同层级的特征&#xff0c;包括高级特征中的语义信息和低级特征中的细节信息。通过这种优化&#xff0c;U-Net v2 能够在低级特征中注入丰富的语义&#xff…

AI 与大模型:物流行业的变革力量

一、物流行业的现状与挑战 物流行业在现代经济中扮演着至关重要的角色&#xff0c;但目前也面临着诸多挑战。 在效率方面&#xff0c;交通拥堵是一个突出问题。许多城市道路容量不足&#xff0c;无法满足日益增长的货物运输需求&#xff0c;导致运输时间延长。例如&#xff0…

使用3DUNet训练自己的数据集(pytorch)— 医疗影像分割

代码:lee-zq/3DUNet-Pytorch: 3DUNet implemented with pytorch (github.com) 文章<cicek16miccai.pdf (uni-freiburg.de)3D U-Net: Learning Dense Volumetric Segmentation

高清4K短视频素材网站有哪些?推荐8个高清4K短视频素材网站

是不是还在为找不到合适的4K高清素材而苦恼&#xff1f;别急&#xff01;今天我为大家精心挑选了8个超级优秀的4K高清短视频素材网站&#xff0c;不仅能让你的视频质量爆表&#xff0c;还能大大提高账号的互动率和曝光度&#xff01;每一个推荐都是精心筛选过的&#xff0c;每一…

2409wtl,切换视图

原文 介绍 我从一个基于SDI(单文档接口)WTL向导的应用开始,添加了一些从控件继承的窗口和一些对话框窗口(表单视图),然后才发现我必须,使SDI框架动态加载和卸载子窗口. 本文演示了两个可用来完成的技术:在SDI应用中的视图间动态切换.这是我使用的两个. 技术 1技术:第一个方…

三维最小球覆盖(模拟退火)

地址&#xff1a;https://codeforces.com/gym/101981/attachments 代码: #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #include <cstring> #include <cmath> #include <ctime> #include <algorithm> #inclu…

[物理专题]经典浮力题目的Fh图像绘制

这段代码用于绘制物体在液体中受到的浮力变化的图像&#xff0c;它有多个好处&#xff1a; 直观展示数据&#xff1a;通过图形化展示&#xff0c;可以直观地看到物体在液体中浸入深度与受到的浮力之间的关系。 教育和学习工具&#xff1a;这种类型的图像常用于教育目的&#x…

基于canal的Redis缓存双写

canal地址&#xff1a;alibaba/canal: 阿里巴巴 MySQL binlog 增量订阅&消费组件 (github.com)https://github.com/alibaba/canal 1. 准备 1.1 MySQL 查看主机二进制日志 show master status 查看binlog是否开启 show variables like log_bin 授权canal连接MySQL账号 …

Ubuntu创建一个虚拟摄像头

假如你目前没有摄像头&#xff0c;想在ubuntu下创建一个虚拟的摄像头&#xff0c;不妨参考以下方法&#xff1a; 安装 v4l2loopback sudo apt install v4l2loopback-dkms # 安装 v4l2loopback sudo modprobe v4l2loopback # 加载 v4l2loopback 模块 创建虚拟摄…

flutter开发多端平台应用的探索 下 (跨模块、跨语言通信之平台通道)

前文 Flutter 是一个跨平台的开发框架&#xff0c;它允许开发者使用相同的代码库来构建 iOS、Android、Web 和桌面应用程序。 上文flutter开发多端平台应用的探索 上&#xff08;基本操作&#xff09;-CSDN博客列举了一些特定平台的case&#xff08;桌面端菜单&#xff0c;鼠…

【OpenCV3】图像的翻转、图像的旋转、仿射变换之图像平移、仿射变换之获取变换矩阵、透视变换

1 图像的放大与缩小 2 图像的翻转 3 图像的旋转 4 仿射变换之图像平移 5 仿射变换之获取变换矩阵 6 透视变换 1 图像的放大与缩小 resize(src, dsize[, dst[, fx[, fy[, interpolation]]]]) src: 要缩放的图片dsize: 缩放之后的图片大小, 元组和列表表示均可.dst: 可选参数, 缩…

【无标题】XSS安全防护:responseBody (输入流可重复读) 配置

接上文:配置XSS过滤器 XXS 安全防护:拦截器+注解实现校验-CSDN博客XSS(跨站脚本)攻击是一种网络安全威胁,允许攻击者注入恶意脚本到看似安全的网站。当用户浏览这些被注入恶意代码的网页时,恶意脚本会在用户的浏览器环境中执行,这可能导致多种安全问题,如窃取敏感数据、…

将添加功能的抽屉剥离,在父组件调用思路

一、新建组件 新建AddRoleEditerDrawer.vue<template><div><el-drawer v-model"dialog" title"添加角色" :before-close"handleClose" direction"rtl" colse"cancelForm"class"demo-drawer" moda…

「数学::质数」试除法 / Luogu P5736(C++)

概述 在质数的第一节我们来讲解试除法。 质数是指在大于1的自然数中只能被1和它自己整除的数。 我们可以利用这一除法性质对质数进行判定。 Luogu P5736&#xff1a; 输入 n 个不大于 10^5 的正整数。要求全部储存在数组中&#xff0c;去除掉不是质数的数字&#xff0c;依…

装修找人做“私活”有哪些风险?

装修过程中&#xff0c;有的业主为了节省开支&#xff0c;绕开装修公司与装修人员个人订立合同做“私活”&#xff0c;而“私活”进展却往往不尽如人意&#xff0c;有的业主也遭遇了“私活”师傅没有完成装修事项、新居无法入住的窘境。找装修师傅做“私活”的做法是否可取&…