网页布局方式

最新推荐文章于 2023-09-12 21:00:03 发布
最新推荐文章于 2023-09-12 21:00:03 发布
阅读量402 收藏 10
点赞数 2
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Miracle_ze/article/details/117885235
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

布局方式

一、盒子布局

盒子布局结构如图：
在这里插入图片描述
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子布局</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.box
	{
		width: 100px;
		height: 100px;
		border: 1px solid black;
		background-color: red;
	}
	</style>
</head>
<body>
	<div class="box">
		这是一个div
	</div>
</body>
</html>

结果：
在这里插入图片描述

通过上例简单了解盒子布局上图，你可以通过增改style里的设置改变形状。

二、css元素的分类

1.display 属性

在运用块级元素与内联元素之前要了解display属性
display 属性是用于控制布局的最重要的 CSS 属性

display 属性:
display 属性规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。
详细见网站：display属性

1.1 Display: none;

display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。

默认情况下，<script> 元素使用 display: none;。

1.2 覆盖默认的 Display 值

每个元素都有一个默认 display 值。但是，您可以覆盖它。

将行内元素更改为块元素，反之亦然，对于使页面以特定方式显示同时仍遵循 Web 标准很有用。

2.css元素中的块级元素与内联元素

块级元素（display:block）

div p hn 等 属于块级元素
可以设置宽和高，独占一行

块级元素的一些例子：

<div> <hn> <p> <form> <header> <footer> <section>

内联元素(display:inline)

设置宽和高的时候是不起作用的，不影响换行
span a

行内元素的一些例子：

<span> <a> <img>

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>块级元素，内联元素</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.box
	{
		width: 100px;
		height: 100px;
		border: 1px solid black;
		background-color: red;
		/* display: inline; 转化为内联元素*/
	}
	.box1
	{
		width: 100px;
		height: 100px;
		border: 1px solid black;
		background-color: green;
		/* display: inline; 转化为内联元素*/
		padding: 50px;
		/* 以高宽100px形成的基础上，四周各加50px */
	}
	.box2
	{
		/* width: 0px;
		height:0px;
		宽高为0可以隐藏元素 */

/* display: none; 可以隐藏元素*/
		width: 100px;
		height: 100px;
		border: 1px solid black;
		background-color: blue;
		/* display: inline; 转化为内联元素*/
	}
	a{
		width: 100px;
		height: 100px;
		/* display: block; 转化为块级元素 */
	}
	</style>
</head>
<!-- 块级元素 独占一行 -->
<!-- 内联元素设置高宽无效 -->
<body>

	<div class="box">
		这是一个div
	</div>
	<div class="box1">
		这是一个div
	</div>

	<div class="box2" >
		这是一个div
	</div>
	<a href="#">第一个标签</a>
	<a href="#">第一个标签</a>
	<a href="#">第一个标签</a>
	<!-- 这三个不独占一行，他们不会换行 -->

</body>
</html>

结果：
在这里插入图片描述

大家也通过改变代码padding可以体现盒子布局！

3.块级元素和内联元素之间相互转换

通过display的取值

注意：
display:none-------- 隐藏元素
隐藏元素也可以通过width:0 height:0

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>块级元素，内联元素</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.box
	{
		width: 100px;
		height: 100px;
		border: 1px solid black;
		background-color: red;
		display: inline; 
	}
	.box1
	{
		width: 100px;
		height: 100px;
		border: 1px solid black;
		background-color: green;
		display: inline; 

	}
	.box2
	{
		width: 100px;
		height: 100px;
		border: 1px solid black;
		background-color: blue;
		 display: inline; 
	}
	a{
		width: 100px;
		height: 100px;
		display: block; 
	}
	</style>
</head>
<!-- 块级元素 独占一行 -->
<!-- 内联元素设置高宽无效 -->
<body>

	<div class="box">
		这是一个div
	</div>
	<div class="box1">
		这是一个div
	</div>

	<div class="box2" >
		这是一个div
	</div>
	<a href="#">第一个标签</a>
	<a href="#">第一个标签</a>
	<a href="#">第一个标签</a>
</body>
</html>

结果：
在这里插入图片描述

结果相比上一个程序：块级元素添加了display: inline;转换为内联元素
                                    内联元素添加了display: block; 转化为块级元素

三.浮动布局-

3.1float属性

浮动布局通过flot进行设置

float: left;

float属性：

属性作用
none不浮动
left左浮动，会对后面的元素产生影响
right右浮动

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动布局</title>
	<style type="text/css">
	.one
	{
		width: 100px;
		height: 100px;
		background-color: red;
		float: left;
	}
	.two
	{
		width: 100px;
		height: 100px;
		background-color: green;
		float: left;
	}
	.three
	{
		width: 100px;
		height: 100px;
		background-color: blue;
		float: left;
	}
	}
	</style>
</head>
<body>
	<div class="one">
		1
	</div>
	<div class="two">
		2
	</div>
	<div class="three">
		3
	</div>
</body>
</html>

结果：
加float：left;之前：
加float：left；之后：加在这里插入图片描述

3.2 float浮动布局——布局错乱的现象

现象说明

代用上述3.1代码
在使用 float: left; 时
只是1左浮动会覆盖2导致布局错乱，进行选择下一个会是3.
可以理解为1 left 但是2上去了，那么1 就覆盖了2
如果全部左浮动就会排在一起 123

解决方案 使用clear属性

属性作用
none默认值，允许两边有浮动
left不允许左边有浮动（清除左浮动）
right不允许右边有浮动
both不允许两边有浮动

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动布局</title>
	<style type="text/css">
	.one
	{
		width: 100px;
		height: 100px;
		background-color: red;
		float: left;
	}
	.two
	{
		width: 100px;
		height: 100px;
		background-color: green;
		float: left;
	}
	.three
	{
		width: 100px;
		height: 100px;
		background-color: blue;
		clear: left;
	}
	</style>
</head>
<body>
	<div class="one">
		1
	</div>
	<div class="two">
		2
	</div>
	<div class="three">
		3
	</div>
</body>
</html>

结果：

加clear: left;之前在这里插入图片描述
加clear: left;之后
在这里插入图片描述

四.定位布局

1.position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：
static
relative
fixed
absolute
sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

2.静态定位——static

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：
代码如下（示例）：

3.绝对定位——absolute

将对象从文档流分离出来，通过设置top、left、right、bottom这四个
方向的值进行定位（相较于父级的定位），如果没有这样的父级，默认的父级是bod

4.相对定位——relative

对象不从文档流里面分离，通过设置top、left、right、bottom这四个方向
的值进行定位（相较于自身的定位）

5.应用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位布局</title>
	<!-- 
	总要要点
	属性：position
	static ：（默认）静态定位——根据每个元素的默认值
	absolute ：绝对定位 —— 元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
	relative：相对定位   -->

	<style type="text/css">
	.main
	{
		width: 600px;
		height: 600px;
		border:1px solid black;

		margin: 200px;
		/* position: relative; */
		/* 相对定位，这样大边框换位置会跟大边框相对位置改变位置 */
	}
	.box
	{
		width: 100px;
		height: 100px;
		border:1px solid black;
		background-color: red;
		position: absolute;
		/* 绝对定位 将对象从文档流分离出来，通过设置top、left、right、bottom这四个
方向的值进行定位（相较于父级的定位），如果没有这样的父级，默认的父级是body*/
		top: 100px;
		/* top: -50px;负值就往外顶 */
		left: 100px;
	}
	.box1
	{
		width: 150px;
		height: 150px;
		border:1px solid black;
		background-color: red;

		position: absolute;
		left: -20px;
		
	}
	.box2
	{
		width: 150px;
		height: 150px;
		border:1px solid black;
		background-color: red;
		
	}
	.box3
	{
		width: 150px;
		height: 150px;
		border:1px solid black;
		background-color: red;
		
		position: relative;
		left: 100px;
		
	}
	</style>
</head>
<body>
	<div class="main">
	<div class="box">
	这是一个div
	</div>
	<div class="box1">
	这是一个div 1
	</div>
	<div class="box2">
	这是一个div 2
	</div>
	<div class="box3">
	这是一个div 3
	</div>
	</div>
</body>
</html>

结果：
在这里插入图片描述

五.其他属性

5.1 溢出——overflow

属性描述
visible默认。溢出没有被剪裁。内容在元素框外渲染
hidden溢出被剪裁，其余内容将不可见
scroll溢出被剪裁，同时添加滚动条以查看其余内容
auto与 scroll 类似，但仅在必要时添加滚动条（总是显示滚动条）

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>溢出</title>
	<style type="text/css">
	#box
	{
		width: 100px;
		height: 100px;
		border:1px solid black;
		/* overflow: hidden;剪切多的 */
		
		overflow: auto;
		/* background: url(../image/1.jpg);这个地方给图片为图片背景，不会生成滚动条 */
	}
	</style>
</head>
<body>
	<div id="box">
		<img src="../image/1.jpg"> 
	</div>
</body>
</html>

结果：
在这里插入图片描述

注意在style里设置图片的时候
background: url(…/image/1.jpg);这个地方给图片为图片背景，不会生成滚动条

5.2缩放—— zoom

对对象进行放大（数值大于1）缩小（数值小于1大于0）

zoom : number 百分比

代码如下（示例）:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>zoom</title>
	<style type="text/css">
	#box
	{
		width: 100px;
		height: 100px;
		border:1px solid black;
	}
	img
	{
		zoom:2;
		/* 放大倍数 */
	}
	</style>
</head>
<body>
	<div id="box">
		<img src="../image/1.jpg"> 
	</div>
</body>
</html>

结果：
放大前：在这里插入图片描述
放大后：在这里插入图片描述

六.弹性盒子

1.整体介绍

通过dispaly ------- flex

属性描述
flex-direction指定了弹性盒子（弹性容器）中子元素的排列方式
flex-wrap指定了弹性盒子（弹性容器）中子元素的换行方式
flex-flowflex-direction和flex-wrap的简写
justify-content修改了flex-wrap属性的行为，类似align-items,但不是设置子元素的对齐，而是设置行对齐
align-items设置了弹性盒子子元素在侧轴的（纵轴）的对齐方式
align-content设置了弹性盒子子元素在主轴的（横轴）的对齐方式

2.flex-direction——子元素的排列方式

属性效果
flex-direction:column从上到下
flex-direction:column-reverse;从下到上
row默认：从左往右
row-reverse从右往左

代码如下（示例）:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性盒子</title>
	<!-- 通过display属性取值取flex -->
	<!-- flex-direction:从上到下排列 -->
	<!-- 弹性布局中必须有一个 display 属性设置为 flex 的父元素。
	
	弹性容器的直接子元素会自动成为弹性项目。 -->
	<style type="text/css">
	.main
	{


		display: flex; 
		/* 可以把块级元素放在一行 */
		flex-direction:row-reverse;
		/* 如同实现浮动功能
		 */

		width: 500px;
		height: 500px;
		border:1px solid black;
	}
	.one
	{
		width: 100px;
		height: 100px;
		background-color: red;

	}
	.two
	{
		width: 100px;
		height: 100px;
		background-color: blue;
	}
	.three
	{
		width: 100px;
		height: 100px;
		background-color: green;
	}
	</style>
</head>
<body>
	<div class="main">
		<div class="one">这是第一个div</div>
		<div class="two">这是第二个div</div>
		<div class="three">这是第三个div</div>
		
	</div>
</body>
</html>

结果：
在这里插入图片描述

3.flex-wrap——子元素的换行方式

属性作用
flex-wrap: wrap;必要的时候换行
flex-wrap: nowrap;默认值，不换行
wrap-reverse值规定如有必要，弹性项目将以相反的顺序换行：

代码如下（示例）:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性盒子</title>
	<!-- 通过display属性取值取flex -->
	<!-- flex-direction:从上到下排列 -->
	<style type="text/css">
	.main
	{
		display: flex; 
		/* 可以把块级元素放在一行，不会换行 */
		flex-wrap: nowrap;
		/* 不换行 */
		width: 500px;
		height: 500px;
		border:1px solid black;
	}
	.main>div
	{
		width: 100px;
		height: 100px;
		background-color: red;
		border:1px solid black;
	}
	</style>
</head>
<body>
	<div class="main ">
		<div >1</div>
		<div >2</div>
		<div >3</div>
		<div >5</div>
		<div >6</div>
		<div >7</div>
		<div >8</div>
		<div >9</div>
		<div >10</div>
	</div>
</body>
</html>

结果：
在这里插入图片描述

上述代码使用flex-wrap: nowrap;：不换行

4.justify-content——设置行对齐

属性作用
center居中对齐
flex-start默认值，左对齐，弹性容器（弹性盒子）开头对齐
flex-end弹性容器（弹性盒子）末端对齐
space-around显示行（子元素）之前、之间和之后带有空格
space-between显示行（子元素）之间有空格

代码如下（示例）:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性盒子</title>
	<!-- 通过display属性取值取flex -->
	<!-- flex-direction:从上到下排列 -->
	<style type="text/css">
	.main
	{
		display: flex; 
		/* 可以把块级元素放在一行，不会换行 */
		 justify-content:center; 
		/* justify-content: flex-start; */
		/* justify-content:flex-end; */
		/* justify-content: space-around; */
		/* 中间比两边宽是因为：中那个包含了前一个的后面和后一个的前 */
		/* justify-content: space-between; */
		width: 500px;
		height: 500px;
		border:1px solid black;
	}
	.main>div
	{
		width: 50px;
		height: 50px;
		background-color: red;
		border:1px solid black;
	}
	</style>
</head>
<body>
	<div class="main ">
		<div >1</div>
		<div >2</div>
		<div >3</div>
	
	</div>
</body>
</html>

结果：
在这里插入图片描述

5.align-items——子元素在侧轴的（纵轴）的对齐方式

属性作用
center垂直方向的居中
flex-start顶部对齐
flex-end底部对齐
stretch子元素会拉伸占用剩余的空间（子元素不设置高度）

代码如下（示例）:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性盒子</title>
	<!-- 通过display属性取值取flex -->
	<!-- flex-direction:从上到下排列 -->
	<style type="text/css">
	.main
	{
		display: flex; 
		/* 可以把块级元素放在一行，不会换行 */
		/*  align-items: center; */
		/*  垂直方向居中 */
		/* align-items: flex-start; */
		/* 顶部对齐 */
		align-items: flex-end;
		/* 底部对齐 */
		 /* align-items: stretch; */
		 /* 拉伸 ,要拉伸子元素不能设置高度。不然跟设置高度，不会拉伸*/
		width: 500px;
		height: 500px;
		border:1px solid black;
	}
	.main>div
	{
		width: 50px;
		height: 50px;
		background-color: red;
		border:1px solid black;
	}
	</style>
</head>
<body>
	<div class="main ">
		<div >1</div>
		<div >2</div>
		<div >3</div>
		
	</div>
</body>
</html>

结果：
在这里插入图片描述

6.align-content——子元素在主轴的（横轴）的对齐方式

属性作用
stretch默认（子元素不设置高度的时候会拉伸）。各行将会伸展以占用剩余的空间。
flex-start各行向弹性盒容器的起始位置堆叠。
flex-end各行向弹性盒容器的结束位置堆叠。
center各行向弹性盒容器的中间位置堆叠。
space-between各行在弹性盒容器中平均分布。
space-around各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小 的一半

代码如下（示例）:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>弹性盒子</title>
	<!-- 通过display属性取值取flex -->
	<!-- flex-direction:从上到下排列 -->
	<style type="text/css">
	.main
	{
		display: flex; 
		/* 可以把块级元素放在一行，不会换行 */
		/*  flex-wrap:wrap; 
		align-content: space-between; */
		/* 加了flex-wrap:wrap;使上下填满 */
		flex-wrap: wrap;
  		align-content: space-around;
		width: 500px;
		height: 500px;
		border:1px solid black;
	}
	.main>div
	{
		width:100px;
		height: 50px;
		background-color: red;
		border:1px solid black;
	}
	</style>
</head>
<body>
	<div class="main ">
		<div >1</div>
		<div >2</div>
		<div >3</div>
		<div >5</div>
		<div >6</div>
		<div >7</div>
		<div >8</div>
		<div >9</div>
		<div >10</div>
	</div>
</body>
</html>

结果：
在这里插入图片描述

7.扩展

子元素的属性
order ------可以改变子元素的顺序
flex-grow-------规定某个子元素相对于其余子元素将增长多少
flex-shrink-----规定某个子元素相对于其余子元素将缩短多少
flex-basis-----给某个子元素设置初始的长度
flex ------- flex-grow、flex-shrink 和 flex-basis 属性的简写属性
align-self ------- 相对弹性盒子（弹性容器）的对齐方式 center flex-start flex-end

flex-grow-------规定某个 子元素相对于其余子元素将增长多少

Miracle_ze
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
21.5 CSS 网页布局方式
09-07
配套资源
实现常见的网页布局
榕城候佳人的博客
03-22 160
height:300px width:237px float:left margin-right:10px （最后一个为0）height:200px margin-top:10px width:100%（或者不写，默认是和浏览器一样宽）前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~height:50px width:100%（或者不写，默认是和浏览器一样宽）本篇文章实现上面常见的网页布局，其中一共分为4个部分，下面为数据。
页面布局有哪些技巧？前端页面怎么写？
a158559681的博客
04-02 1295
同学们在学习完HTML+CSS之后就摩拳擦掌的想要尝试写一个静态页面了，但真正上手的时候就不知道该怎么做了，今天小千就来教大家页面布局的技巧，帮助大家开发一个静态页面。 我们通过一个具体的案例来给大家说一下布局的一些技巧： 假设，这是我们要布局的一个首页： 第一步：看 拿到一个网页或一个整站的网页后，我们应该大致浏览一遍，做到心里有数（例如网页的复杂程度，交互效果等） 第二步：找出网页的版心部分 第三步：划分网页的版块 思路：运用我们最熟悉的div标签将最大的版块划分出来 第四步：在大板块里面划分小版
十条设计原则教你学会如何设计网页布局
we
07-17 2167
为了达到划分版块又不转移用户注意力的目的，在排版时可以将界面上不同区域的元素通过空白进行分组，用上不同的背景色，将文字对齐方式进行统一，还有就是为不同区域设置不同的样式。要传达这样一个好的界面，你就需要将可点击的元素（比如连接，按钮），可选择的元素（比如单选多选框）以及普通的文字明显区分开来。可以在很多方面下功夫来实现一个一致的界面，包括颜色，方向，元素的表现形式，位置，大小，形状等。是的，单列滚动的长页面是不错的，但是我们应该适当地设置一些小节，并且环环相扣，来提高用户的兴趣使其继续阅读。...
几种网页布局
weixin_71437031的博客
07-26 4845
网站布局是一种定义网站结构的模式(或框架)。它具有为网站所有者和用户构造网站上存在的信息的作用。它为网页内的导航提供了清晰的路径，并将网站的最重要元素置于网站的正面和中心。
如何利用css写出左边是标签右边内容，并且内容换行不能在标签的下面
肖肖肖丽珠的博客
09-10 569
实现的效果是这样的。 这样第一感觉是给左边的内容加个高度。然后右边就不会换行到左边了。但是在内容的高度不确定的情况下是没办法写高度的啊。 <div class="analysis"> [分析] <div ><p>[分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析][分析]..
CSS两列布局实现方式总结
01-21
两列布局大概是最经典的一种网页布局方式了，本博客就是采用的这种布局。两列布局中，以主列(main)是自适应宽度，子列(sidebar)是固定宽度的情形最为常见。今天就来好好探讨一下如何实现这种定宽+自适应的两列布局。...
C#窗体布局方式详解
12-26
DataGridView： 显示数据表 后台数据绑定： List<xxx> list = new List(); dataGridView1.DataSource = list; ...//设置不自动生成列，此属性在属性面板中没有 ...dataGridView1.AutoGenerateColumns = false;...
04 网页布局.PPT
07-23
掌握： 类选择器，标签选择器与ID选择器分别适用什么场合？ 超链接的伪类有哪四种?...样式表的三种应用方式有哪些？ 能使用框架对页面进行整体布局 能使用DIV层技术进行页面整体布局 能使用表格进行图文内容的布局
CSS 网页布局网页制作技巧总结
09-27
CSS网页布局开发中，会有很多小技巧，这之类相关的文章在webjx.com有许多介绍，这里再扩展一下您所想要得到的知识，相信您会有很多收获！ 一、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。 二、...
CSS中最全的换行处理方式
热门推荐
苁蕶開始
05-31 3万+
在Web页面上常常可以看到某个元素内部有一个很长的单词，元素的宽度不足以容纳它。一个常见的现象就是有一个很长的URL。这会发生什么呢？这取决于CSS，那么CSS如何控制布局，以及CSS如何让文本更合理的方式展示。比如下图的一种效果，在Web中是很常见的：由于URL文本过长，已经超出容器的宽度，影响了整个视觉效果，甚至很多时候还会影响Web页面的布局效果。最暴力的做法就是在容器上添加overflow...
css：布局。左边图标右边文字（文字超出自动换行）
qq_36413371的博客
11-13 3958
图标绝对定位通过top,left调整位置。右边文字div包裹（text-indent来调整与左边图标的距离）
CSS文本靠右显示换行后靠左显示；vant van-col文本靠右显示换行后靠左显示
qq_39517116的博客
04-01 3477
实现效果：文本靠右显示，换行后靠左显示 <template #label> <van-row class="primary_info_label_div"> <van-row class="primary_info_label_div_row"> <van-col> 维修原因：</van-col> <van-col clas
常见的网页布局结构
qq_73599840的博客
11-19 9720
整理了一些适合网页设计初学者的网页布局结构，掌握几个页面布局结构将会让网页变得更加美观，并且大大提升设计效率。
前端开发常见的几种布局方式
weixin_65921319的博客
07-02 916
响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比，而不是固定宽度。不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时展示，而且展示的方式像水流一样，一部分一部分的加载，静态的就是采用固定宽度。不管浏览器尺寸具体是多少，网页布局始终按照最初代码的布局来显示。
CSS学习（六）
weixin_45463877的博客
02-29 562
定位 为什么需要定位？ 提问: 以下情况使用标准流或者浮动能实现吗? 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。 所以: 浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以...
网页布局常用的8种布局方式
最新发布
七小嗨少的博客
09-12 1270
网页布局在整个网页设计中起着至关重要的作用。不同的网页布局设计会产生不同的视觉效果，直接影响浏览者对网页的第一印象。网页布局在很大程度上决定了网站用户如何与网页内容互动。好的网页设计具有很强的实用性和适应性，所以在布局上要选择合适的设计，让用户满意。本文介绍8种常见的网页布局设计方法。
springboot生成html页面怎么显示_Word文档怎么在页面左侧显示导航目录？一键定位内容超轻松...
weixin_39640195的博客
12-05 515
　　平时我们在使用Word编辑文字内容时，如果文字内容很多，导致页数很长，那么此时给文档加上页面导航目录，不仅可以让我们自己快速的找到所需要查看或修改的地方，也可以让别人在阅读文档的时候，阅读感受更好，通过导航就能够快速的看到想要看的地方。　　但是，WPS的Word文档在创建的时候，默认是隐藏了导航目录的，所以如果你不怎么熟悉WPS的使用技巧的话，那么文档查看起来就会有些麻烦的。那么Word文档到...
网页布局 —— 基础篇
qq_36627117的博客
08-24 2527
制作网站中的静态网页最重要的是什么呢？很多人肯定知道，当然是布局了。那什么是布局呢？页面布局是对页面的文字、图像或表格进行格式化版式排列。想制作出好看的网页，就必须要弄懂网页布局所用到的知识，那么需要用到哪些知识?对于初学者而言，可能比较陌生，对网页布局这块可能还不能很好的掌握，布局最主要是就是css样式，要制作好看的网页，这是最基础的部分。所以就要灵活运用css，一般css都是配合div（块元素）使用，来实现好看的页面，所以大家可以看看一些网页中常见的布局方式。 网页布局一般分为一列布局，二列布局，三.
html网页图片排版布局
05-30
在HTML网页中，图片排版布局有多种方式，以下是几种常用的方式： ...可以使用colspan和rowspan属性来合并单元格，从而创建更复杂的...以上是几种常用的图片排版布局方式，开发者可以根据实际需求选择适合自己的布局方式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值