版心和布局

最新推荐文章于 2024-11-07 19:41:47 发布
最新推荐文章于 2024-11-07 19:41:47 发布
阅读量521 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/WDengmei/article/details/102637738
本文介绍网页布局中的版心宽度选择及布局流程，包括确定版心、分析页面模块、制作HTML结构、CSS初始化等内容，适用于前端开发人员学习参考。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

版心（可视区） 常见宽度：960px ,980px,1000px,1200px;

布局流程：

  1. 确定版心
  2. 分析页面中行模块以及每个行模块中的列模块
  3. 制作Html结构
  4. Css初始化，用盒子模型，通过div+css布局来控制各个模块

一列固定宽度且居中，两列左窄右宽，通栏平均分布

CSS——网页版心和布局流程
流楚丶格念的博客
07-02 1万+
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。 “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 布局流程 为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下： 1、确定页面的版心（可视区）。 2、分析页面中的行模块，以及每个行模块中的列模块。 3、制作HTML结构 。 4、CSS初
版心和布局流程
陈开心的博客
04-02 719
版心和布局流程 “版心”(可视区) 是指网页中主体内容所在的区域。 一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 布局流程 1、确定页面的版心（可视区）。 2、分析页面中的行模块，以及每个行模块中的列模块。 3、制作HTML结构 。 4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。 一列固定宽...
版心和布局样式
qq_45615778的博客
09-17 954
版心和布局流程 阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。 “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 1.一列固定宽度且居中 2.两列左窄右宽型 3.通栏平均分布型 ...
【web前端(十五)】html_盒模型——版心布局
LED_of_Java的博客
08-08 3529
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>版心布局</title> <style> /*我们可以通过这种方法， 去更好的将浏览页面的设计完善一下。*/ /*属性中参数相同的同一级别的选择器， ...
你知道的版心和你不知道的版心
zmmsdk的博客
09-19 1116
第一天写代码的时候别人就告诉我说无论做什么平台只要是基于原生标签的都要使用版心，谁让浏览器的解析顺序是从上之下 从左至右呢 我们看到的内容在没有人为干预的情况下是基于浏览器左上角对齐的 深入一点的相对定位，基于自己原来的位置进行定位 自己走了还占着原来的位置，对于初级程序员来说简直不可理喻了 版心wapper 简称w 是在base.css文件中预定义的一个属性 你知道的是它的属性值可以设置 ...
写页面几个常见版心构思
牛先森家的博客
05-19 2057
导航栏版块 先看几组企业站导航栏样式图： 发现大部分导航栏无外乎包括有logo、介绍栏、搜索框、登录信息等等 下面我就写一款简单，先了解下这部分在页面中如何书写代码 （注意仅是简单展示方法，暂时不作其他交互效果，以便初学者参考，大佬可忽略。。。） 简单实现原理：这里我用的是 ul>li>a 的方式（有更好的话可以交流，也更方便学习） 用无序列表ul写外围结构 给ul嵌套li和a 样式给li添加浮动 给li添加大小 调整文本大小 html结构 <!-- nav的版心 --&g
移动端WEB开发之响应式布局和bootstrap的介绍
zh_hunan的博客
11-05 631
响应式开发原理 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 响应式布局容器 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。 bootstrap的介绍 Bootstrap框架：顾名思义就...
css 布局版心
最新发布
05-08
### CSS 布局实现版心效果的方法 #### 方法一：传统 `margin` 居中方式 通过设置 `.container` 的宽度并结合 `margin: 0 auto;` 可以实现版心的水平居中。这种方式适用于固定宽度的版心设计。 ```css .container {...
【5-12】《响应式布局》——响应式布局介绍和版心、BootStrap、使用BootStrap步骤、BootStrap入门基础、BootStrap案例
程序媛乐园
10-30 1095
文章目录响应式布局一、介绍和版心二、BootStrap使用bootstrap做轮播图案例完整代码效果图总结 响应式布局 一、介绍和版心 前面已经简单接触过。响应式布局就是代码随着屏幕大小的改变显示不同。 档位划分: 媒体查询：档位划分；市场上默认的划分；三个节点、四个档位 w<768 超小屏幕（xs）（手机，学习rem布局里面的档位划分都是在这个范围） 768<= w <992 小屏设备（sm）（平板） 992<= w <1200 中等屏幕（md）（小显示屏的PC显示器）
单列通栏布局版式示意HTML,整体布局2——页面排版布局
weixin_39969611的博客
06-19 3517
一、页面整体布局说明网页总共由三部分组成页面顶部、页面正文、页面底部。页面顶部和页面底部一旦进行了设计，那么无论是新建网页还是选择系统内页都会是统一的头部和底部，所以我们设计一般是对正文进行布局。如何区分页面的头部和底部、正文部分。如图所示：所以，一般网站首页做了网站头部和底部的设计，内页会直接继承过来，都是统一的头部和底部，内页就只需设计网站正文部分。二、页面布局——容器组件的使用对页面进行布局...
15综合案例之学成在线主页设计
CurryCoder的个人博客
01-03 2344
1.确定版心 这个页面的版心是1200px，每个版心都要水平居中对齐，可以定义版心为公共类：.w { width: 1200px; height: auto; } 2.头部制作 1号是版心盒子header1200*42的盒子，水平居中对齐，上下给一个margin值； 版心盒子里面包含2号盒子logo； 版心盒子里面包含3号盒子nav导航栏； 实际开发中，不会直接用链接...
网页多种版心适应多屏幕技巧
sunshine的博客
01-21 9160
在工作当中，我们难免会遇到这样的适应屏幕需求，宽版以1200px为基准，窄版以1024为基准，版心应该怎么设置呢？而合理运用媒体查询就能非常容易帮我们解决这个问题。/*版心*/ @media screen and (max-width:1200px) and (min-width:1024px){ .w{ width:1024px; margin:0 auto
css+div布局,版心的使用（一）拉伸不会改变布局
热门推荐
xiaoLong2345的博客
09-29 1万+
声明：本人小白一枚，如今是学一点，上传一点，希望自己能够会的越来越多，也希望自己能够帮助其他人。
【CSS】基础笔记——第五天
丧心病狂Loli控的博客
05-16 303
▋ CSS属性书写顺序 ❶ 布局定位属性：display / position / float / clear / visibility / overflow… ❷ 自身属性：width / height / margin / padding / border / background… ❸ 文本属性：color / font / text-decoration / text-align / ve...
布局前一定要了解的！ （版心概念）
tototi的博客
11-07 1080
了解布局前的“版心”的概念
pc显示器分辨率 前端_(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全
weixin_42230607的博客
12-28 703
PC端按屏幕宽度大小排序(主流的用橙色标明)分辨率 比例 | 设备尺寸1024*500 (8.9寸)1024*768 (比例4：3 |10.4寸、12.1寸、14.1寸、15寸; )1280*800(16：10 |15.4寸)1280*1024(比例：5：4 | 14.1寸、15.0寸)1280*854(比例：15：10 | 15.2)1366*768 (比例：16：9 | 不常见)1...
设计-前端设计尺寸与规范
莫莫
06-28 3119
设计尺寸---ios,粗略设计尺寸英寸像素(Pixel---px)---物理分辨率分辨率网点密度(DPI)像素密度(PPI)逻辑分辨率(pt--point),像素倍率前端与设计所用的尺寸设计尺寸的问题-iPhone的pt与px的倍率关系设计的常用尺寸---移动端（ios)设计师规则是用来打破的，不用称为一个个的模板 设计尺寸 英寸 屏幕对角线的长度，一英寸~~3.多厘米 像素(Pixel—px)—物理分辨率 物理分辨率是硬件支持 像素是图像的基本采样单位，是组成位图的最小单元 不是一个具体的量，而是一
web前端版心
qq_40301211的博客
03-19 4147
版心 是约束网页的一个具体的值 为什么要有版心? 因为电脑的屏幕不一样大，为了在不同的电脑上视觉效果一致，我们需要版心作为约束 版心的公共类的设定 .container { width: 1280px; } <div class="container"></div> 特殊情况： 设计师会给你一张很大的图片 1920 * 1000 (是为了适应不同的屏幕)但是版...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值