CSS版心和布局

最新推荐文章于 2024-05-17 07:28:12 发布
最新推荐文章于 2024-05-17 07:28:12 发布
阅读量4.9k 收藏 32
点赞数 10
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42132959/article/details/104789583
版权

版心是网页布局中非常重要的概念，（可视区）指网页中的主体内容区域。

一般在浏览器中居中显示，显示宽度常见960px,980px,1000px,1200px等。

布局流程

  • 确定页面版心
  • 分析页面中的行模块，以及每一个行模块中的列模块
  • 制作HTML结构
  • CSS初始化，然后通过盒子模型远离，通过DIV+CSS布局来控制网页每个模块

一列固定宽度且居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一行固定宽度且居中</title>
		<style type="text/css">
			*{
				margin:0px;
				padding: 0px;
				
			}
			.container{
				width: 1200px;
				margin: 0 auto;
			}
			div .top{
				background-color: rgb(152,252,254);
				
				height: 100px;
				margin-bottom: 10px;
				
			}
			div .banner{
				background-color: rgb(152,252,254);
				
				height: 300px;
				margin-bottom: 10px;
				
			}
			div .main{
				background-color: rgb(152,252,254);
				height: 400px;
				margin-bottom: 10px;
			}
			
			div .footer{
				background-color: rgb(152,252,254);
				height: 80px;
				
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="top"></div>
			<div class="banner"></div>
			<div class="main"></div>
			<div class="footer"></div>
		</div>
	</body>
</html>

一行固定宽度且居中

左右型结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>左右型结构</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.whole{
				width: 1000px;
				margin: 0 auto;
			}
			div .top{
				height: 80px;
				background-color: rgb(152,252,254);
				margin-bottom: 10px;
			}
			div .banner{
				height: 150px;
				background-color: rgb(152,252,254);
				margin-bottom: 10px;
			}
			div .main{
				/*用来清除浮动*/
				overflow: hidden; 
				margin-bottom: 10px;
				
			}
			div .left{
				float:left;
				width: 400px;
				height: 400px;
				background-color: rgb(152,252,254);
				margin-right: 10px;
			}
			div .right{
				float:left;
				width: 590px;
				height: 400px;
				background-color: red;
			}
			div .footer{
				height: 80px;
				background-color: rgb(152,252,254);
			}
		</style>
	</head>
	<body>
		<div class="whole">
			<div class="top"></div>
			<div class="banner"></div>
			<div class="main">
				<div class="left">
					
				</div>
				<div class="right"></div>
			</div>
			<div class="footer"></div>
		</div>
	</body>
</html>

左右型结构截图

通栏平均分布型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通栏平均分布型</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.whole{
				width: 100%;
			}
			div .top{
				
				background-color: rgb(151,248,254);
				margin-bottom: 5px;
			}
			
			div .top .topSmall{
				width: 960px;
				height: 60px;
				margin: 0 auto;
				background-color: rgb(73,72,58);
			}
			div .content{
			}
			
			div .content .top{
				width: 960px;
				height: 300px;
				margin: 0 auto;
				background-color: rgb(151,248,254);
			}
			div .content .bottom{
				width: 960px;
				height: 500px;
				margin: 0 auto;
				background-color: rgb(73,72,58);
			}
			div .content .bottom ul li{
				height: 500px;
				width:225px;
				float:left;
				margin-right: 20px;
				list-style: none;
			}
			div .content .bottom .div1{
				
				
				background-color: rgb(231,170,81);
				
			}
			div .content .bottom .div2{
				
				
				background-color: rgb(238,197,202);
				
			}
			div .content .bottom .div3{
				
				
				background-color: rgb(193,243,172);
				
			}
			div .content .bottom .div4{
				
				margin-right: 0px;
				background-color: rgb(107,37,120);
				
			}
			div .footer{
				width: 100%;
				height: 60px;
				background-color: rgb(153,248,252);
			}
		</style>
	</head>
	<body>
		<div class="whole">
			<div class="top">
				<div class="topSmall"></div>
			</div>
			<div class="content">
				<div class="top">
					
				</div>
				<div class="bottom">
					<ul>
						<li class="div1"></li>
						<li class="div2"></li>
						<li class="div3"></li>
						<li class="div4"></li>
					</ul>
					
				</div>
			</div>
			<div class="footer">
				
			</div>
			
		</div>
	</body>
</html>

通栏截图

一个重要的概念：

banner:
banner是一种宣传广告图，主要用于网站、活动宣传广告、报纸杂志中。最常用于的就是网站。
banner一般会占据访问页面的一半框架区域，能吸引客户第一时间注意到大图所宣传的内容，所以banner图对网站来说作用是非常大的一部分。一般作为轮播图

前端阿呆
关注
  • 10
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css的布局与版心布局
liatajkd的博客
08-16 48
css版心布局 1、css中的布局有： 常见的布局方式：固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding 2、多种等高布局 a. 假等高列：使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像 b. 给容器div使用单独的背景色(固定布局)(流体布局)：用元素中的最大高度撑大其他的容器高度 c. 创建带边框的两列等高布局：用border...
CSS学习8
aneyal的博客
03-16 1167
版心和布局流程、清除浮动
HTML+CSS页面布局
最新发布
2301_78986604的博客
05-17 1068
通过网页布局，可以使网页的内容更加清晰，有条理，同时更加易读。
css基础_布局版心、布局常用类名和重置默认样式
qq_57226103的博客
03-30 231
【代码】css_布局版心、布局常用类名和重置默认样式。
web前端版心
qq_40301211的博客
03-19 4009
版心 是约束网页的一个具体的值 为什么要有版心? 因为电脑的屏幕不一样大，为了在不同的电脑上视觉效果一致，我们需要版心作为约束 版心的公共类的设定 .container { width: 1280px; } <div class="container"></div> 特殊情况： 设计师会给你一张很大的图片 1920 * 1000 (是为了适应不同的屏幕)但是版...
04-CSS核心属性
保持好奇
10-02 391
html-css核心属性，浮动、盒模型、文本属性、背景属性
页面的版心html,关于PC端网页版心及网页自适应问题
weixin_39946274的博客
06-04 5927
通常设计师在设计PC端网页时会将页面主要的信息内容置于页面中间的1200px范围内，这1200px也就是俗称的版心了。这是网页设计的规则之一，目的是帮助前端制作PC端的页面自适应。目前市面上主流的屏幕分辨率是1920*1080，此外还有1440*900以及1680*1050等等。而设计师一般给出的设计图都是1920*1080版的。如果完全将网页完全按设计图还原，不做自适应，遇到小屏时就会出现网页显...
WEB前端学习:CSS学习_CSS布局
01-08
CSS布局 文章目录CSS布局一、display二、标准三、浮动四、多列浮动布局1. 两列布局2. 三列布局3.浮动元素的特性五、清除浮动解决方法六、定位1. 边偏移2. 定位模式2.1、静态定位 static2.2、相对定位 relative2.3、...
使用HTML开发商业网站-DIV+CSS布局布局及常用属性课件.pptx
07-10
布局及常用属性 布局概述 为什么要应用布局？ 布局概述 阅读报纸时会发现，虽然报纸中的内容很多，但 是经过合理地排版，版面依然清晰、易读。 1.确定版心 什么是版心？以某教育网站首页为例： 布局概述 布局概述 2....
css实现右侧固定宽度 左侧宽度自适应
01-19
一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧？ 要实现这种布局，也算比较简单。我们先给出html结构： 固定宽度区 自适应区 <div id=...
学成在线-版心区域源码+素材.zip
08-12
版心区域是网页设计中的核心部分，通常指的是页面主要内容的容器，包括导航、主体内容、侧边栏等元素，它的布局和设计直接影响着用户的浏览体验。 【描述】"学成在线素材+源码" 指出这个压缩包不仅包含了源代码，...
CSS梅兰商城项目实战基础视频教程-video
12-21
本套CSS项目实战课程为制作梅兰商城首页，以网页布局定位的基础知识为依托，灵活运用CSS的全部知识和小技巧，带你深入剖析经典网页的制作过程，同时涉及到了CSS样式的初始化、版心控制、精灵图的使用、搜索引擎优化...
【Web】CSS（No.23）版心和布局流程
Sherry带你学Web
06-12 839
版心和布局流程 需要素材点击图片联系我或私信、评论 阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。 “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 布局流程 为了提高网页制作的效率，布局...
pc端常见的几种布局：分栏布局，通栏布局，版心布局，版心布局
panliyou的博客
01-17 4697
pc端常见的几种布局：分栏布局，通栏布局，版心布局，版心布局 1分栏布局: float 2 通栏布局: 在页面中不设置宽度，让默认宽度和浏览器等宽的布局 3.版心布局: 内容始终出现在整个浏览器版面的中心固定的版心宽度+margin: 0 auto;心布局: 内容始终出现在整个浏览器版面的中心固定的版心宽度+margin: 0 auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
css的版心布局，隐藏和现实，溢出，背景
hdj0511的博客
05-24 195
oracle爱心代码,纯css写出爱心版加载效果的示例代码
weixin_34552443的博客
04-10 229
本文介绍了纯css写出爱心版加载效果的示例代码，分享给大家，具体如下：爱心等待效果如下：现在互联网时代网站何其多，各有各得风格，但是什么样的风格能留住用户的停留观看呢？就从加载来说，很多加载效果都是同一种风格可能用户经常逛网站早已经习惯，要是你的加载时间比其他网站时间长，效果还是一样的，可能就会关掉你的网站去其他网站观看，但是如果你的加载效果别具一格，有特点，可能用户看你加载效果的时候你的网站就打...
网页版心，CSS背景，CSS边框，盒模型（今天主要说一下padding）等
u013849242的博客
03-23 958
今天是学习HTML的第六天，今天主要学习了：网页版心，CSS背景，CSS边框，盒模型（今天主要学习padding）等，以下是今天的笔记以及部分练习（有不足之处希望小伙伴们多多留言哦） 3.23日笔记： 1.页面布局： 1）设计图： 版式宽度：1920 1680 … 网页的版心：960 - 1200 2）结构规划： id名称：网页外围结构 pc端 版心宽度不能用百分比！！！ 3—）让版心左右...
前端基础布局
rhyme1213的博客
10-12 1098
三种基础布局：一列固定宽度且居中，两列左窄右宽型，通栏平均分布型
Web前端学习笔记——CSS版心和布局流程、清除浮动
唯恋殊雨的博客
09-20 5847
版心和布局流程 阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。 “版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 布局流程 为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如...
怎么设置版心
06-02
设置版心需要具体针对你所使用的网站或软件进行操作。一般情况下，设置版心通常是通过CSS代码来实现的。你可以在CSS文件中使用"margin"属性来设置版心的宽度，例如将页面内容的宽度限制在800像素内，可以使用以下代码： ``` body { margin: 0 auto; max-width: 800px; } ``` 这样设置后，页面内容就会在浏览器窗口中居中显示，并且最大宽度不会超过800像素。当然，具体的设置方法还需要根据你所使用的网站或软件进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值