版心和布局

最新推荐文章于 2022-11-14 16:41:50 发布
原创 最新推荐文章于 2022-11-14 16:41:50 发布 · 568 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍网页布局中的版心宽度选择及布局流程，包括确定版心、分析页面模块、制作HTML结构、CSS初始化等内容，适用于前端开发人员学习参考。

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

布局流程：

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

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

day13 - 布局版心、CSS常见命名、样式重置
u010544438的博客
08-09 129
本文主要介绍了网页布局中的版心设计、CSS命名规范、默认样式重置等核心内容。在版心布局方面，阐述了固定宽度设计在不同显示器上的适配问题，以及响应式布局对传统版心概念的弱化。文章详细整理了网页布局常用命名规范，包括主体结构、导航、功能模块等命名方式。针对默认样式问题，分析比较了通配符、reset.css和Normalize.css三种解决方案的优缺点，建议初学者使用reset.css。最后提供了实践作业，帮助巩固所学知识。全文系统性地梳理了网页布局的基础知识与实用技巧。
版心和布局样式
qq_45615778的博客
09-17 965
版心和布局流程 阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。 “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 1.一列固定宽度且居中 2.两列左窄右宽型 3.通栏平均分布型 ...
【web前端(十五)】html_盒模型——版心布局
LED_of_Java的博客
08-08 3540
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>版心布局</title> <style> /*我们可以通过这种方法， 去更好的将浏览页面的设计完善一下。*/ /*属性中参数相同的同一级别的选择器， ...
移动端WEB开发之响应式布局和bootstrap的介绍
zh_hunan的博客
11-05 655
响应式开发原理 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 响应式布局容器 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。 bootstrap的介绍 Bootstrap框架：顾名思义就...
你知道的版心和你不知道的版心
zmmsdk的博客
09-19 1137
第一天写代码的时候别人就告诉我说无论做什么平台只要是基于原生标签的都要使用版心，谁让浏览器的解析顺序是从上之下 从左至右呢 我们看到的内容在没有人为干预的情况下是基于浏览器左上角对齐的 深入一点的相对定位，基于自己原来的位置进行定位 自己走了还占着原来的位置，对于初级程序员来说简直不可理喻了 版心wapper 简称w 是在base.css文件中预定义的一个属性 你知道的是它的属性值可以设置 ...
写页面几个常见版心构思
牛先森家的博客
05-19 2074
导航栏版块 先看几组企业站导航栏样式图： 发现大部分导航栏无外乎包括有logo、介绍栏、搜索框、登录信息等等 下面我就写一款简单，先了解下这部分在页面中如何书写代码 （注意仅是简单展示方法，暂时不作其他交互效果，以便初学者参考，大佬可忽略。。。） 简单实现原理：这里我用的是 ul>li>a 的方式（有更好的话可以交流，也更方便学习） 用无序列表ul写外围结构 给ul嵌套li和a 样式给li添加浮动 给li添加大小 调整文本大小 html结构 <!-- nav的版心 --&g
CSS——网页版心和布局流程
热门推荐
流楚丶格念的博客
07-02 1万+
阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。 “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 布局流程 为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下： 1、确定页面的版心（可视区）。 2、分析页面中的行模块，以及每个行模块中的列模块。 3、制作HTML结构 。 4、CSS初
版心和布局流程
陈开心的博客
04-02 759
版心和布局流程 “版心”(可视区) 是指网页中主体内容所在的区域。 一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 布局流程 1、确定页面的版心（可视区）。 2、分析页面中的行模块，以及每个行模块中的列模块。 3、制作HTML结构 。 4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。 一列固定宽...
css 布局版心
最新发布
05-08
### CSS 布局实现版心效果的方法 #### 方法一：传统 `margin` 居中方式 通过设置 `.container` 的宽度并结合 `margin: 0 auto;` 可以实现版心的水平居中。这种方式适用于固定宽度的版心设计。 ```css .container {...
【5-12】《响应式布局》——响应式布局介绍和版心、BootStrap、使用BootStrap步骤、BootStrap入门基础、BootStrap案例
程序媛乐园
10-30 1119
文章目录响应式布局一、介绍和版心二、BootStrap使用bootstrap做轮播图案例完整代码效果图总结 响应式布局 一、介绍和版心 前面已经简单接触过。响应式布局就是代码随着屏幕大小的改变显示不同。 档位划分: 媒体查询：档位划分；市场上默认的划分；三个节点、四个档位 w<768 超小屏幕（xs）（手机，学习rem布局里面的档位划分都是在这个范围） 768<= w <992 小屏设备（sm）（平板） 992<= w <1200 中等屏幕（md）（小显示屏的PC显示器）
15综合案例之学成在线主页设计
CurryCoder的个人博客
01-03 2381
1.确定版心 这个页面的版心是1200px，每个版心都要水平居中对齐，可以定义版心为公共类：.w { width: 1200px; height: auto; } 2.头部制作 1号是版心盒子header1200*42的盒子，水平居中对齐，上下给一个margin值； 版心盒子里面包含2号盒子logo； 版心盒子里面包含3号盒子nav导航栏； 实际开发中，不会直接用链接...
2020.03.23知识总结
weixin_46579829的博客
03-23 288
知识总结 一、版心： 设计图： 版式宽度1920/1680 版心宽度960/1200 结构规划： ID名称：网页外围结构 Pc端 版心宽度不能用百分比!!! 版心左右居中：margin：0 auto； 二、研究列表符号： 1：（了解） List-style-type: Circle 空心圆 Square 实心方块 None 清除列表符号 2：（了解） List-style-image: 把图...
前端学习之版心和布局流程
no pains,no gains
04-09 9026
什么是版心？ “版心”（可视区）是指网页中主体内容所在的区域。一般在浏览器窗口水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 布局流程 为了提高网页制作的效率，布局时通常需要遵守一定的布局流程。具体如下： 确定页面的版心（可视区） 分析页面的行模块，以及每个行模块中的列模块。 制作html结构 css初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来...
页面的版心html,关于PC端网页版心及网页自适应问题
weixin_39946274的博客
06-04 6463
通常设计师在设计PC端网页时会将页面主要的信息内容置于页面中间的1200px范围内，这1200px也就是俗称的版心了。这是网页设计的规则之一，目的是帮助前端制作PC端的页面自适应。目前市面上主流的屏幕分辨率是1920*1080，此外还有1440*900以及1680*1050等等。而设计师一般给出的设计图都是1920*1080版的。如果完全将网页完全按设计图还原，不做自适应，遇到小屏时就会出现网页显...
"版心"和布局流程
匿名攻城狮
07-09 2546
(1)版心 版心(可视区)是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 (2)布局流程 为了提高网页制作的效率，布局时通常要遵循一定的布局流程： 确定页面的版心(可视区) 分析页面中的行模块,以及每个行模块中的行列表。 制作HTML结构。 CSS初始化，然后开始运用和种子模型的原理，通过DIV+CSS布局来控制...
【Web】CSS（No.23）版心和布局流程
Sherry带你学Web
06-12 1007
版心和布局流程 需要素材点击图片联系我或私信、评论 阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。 “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 布局流程 为了提高网页制作的效率，布局...
公共课-版心与布局流程
Antg的博客
04-10 526
文章目录1、版心2、布局流程（1）一列固定宽度且居中（2）两列左窄右型（3）通栏平均分布型 1、版心 版心：是指网页中主体内容所在的区域 一般尺寸为： 960 980 1000 1200 1190 2、布局流程 由外到内，由大到小 （1）一列固定宽度且居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>一列固定宽度且居中</
Web前端105天-day13-BOOT
qq_52810836的博客
11-14 866
day13学习开始，进入bootstrap的学习
网页多种版心适应多屏幕技巧
sunshine的博客
01-21 9194
在工作当中，我们难免会遇到这样的适应屏幕需求，宽版以1200px为基准，窄版以1024为基准，版心应该怎么设置呢？而合理运用媒体查询就能非常容易帮我们解决这个问题。/*版心*/ @media screen and (max-width:1200px) and (min-width:1024px){ .w{ width:1024px; margin:0 auto
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值