用CSS进行网页布局

最新推荐文章于 2024-07-18 17:34:14 发布
最新推荐文章于 2024-07-18 17:34:14 发布
阅读量365 收藏
点赞数
分类专栏： 感悟 文章标签： css 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vickyyyya/article/details/72805808
版权

  经过两个月的颓废，前端没有怎么用功看，端午长假来温习一下

  网页布局其实也是块与块的关系，可以分为三种：块挨着块、块嵌套着块、块叠压着块。

紧挨：float 
嵌套：父子关系
叠加：z-index

分栏又称分列，常见的布局有：一列，二列，三列，混合布局。

一列用margin：0 auto；
二列用float：left；
三列用：左右用position：absolute；left:0;中间用margin：0 300 200；别忘记同高

Vickyyyya
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用CSS进行网页布局~
coralinelee的专栏
06-02 520
今天花了一小点的时间大致浏览了yixia
使用css样式设计一个简单的html登陆界面
adyyda的博客
09-05 2万+
利用DIV+CSS布局来制作一个登录页面 login.html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <!--引入字体图标库--> ...
使用div+css进行页面布局
lizepeng201021的专栏
07-11 1747
本人不是做网页前端开发的，由于之前有学过网页的技术，如html标签，css样式，javascript等。。在今年的公司做维护，该网站采用的是div+css，所以难免要会理解div+css.凭着我的爱好，开始学习了div+css的布局，div+css的布局，只是区别于table的布
CSS页面布局及排版
热门推荐
Ranchonono的博客
03-29 3万+
一、CSS盒子模型 CSS将每个元素看成是一个矩形盒子，占据一定空间。 盒子模型两方面理解：1.独立的盒子内部结构；2.多个盒子之间的香菇关系。 1.盒子模型概念 独立盒子模型由：内容、border、padding、margin四部分组成。详见之前的文章内容。 盒子的实际宽（高）= 内容（width/height）+padding（两边）+border（两边）+margin（两边）
关于css元素的布局-设计一个登陆界面
lemon1999123的博客
09-11 2024
.content{ width: 1500px; height: 800px; margin: 0px; background: #FF99CC; } .content h1{ font-size: 50px; padding-top: 200px; text-align: center; color: aquamarine; } ...
玩转CSS3(一)----CSS3实现页面布局
weixin_30312659的博客
06-06 170
请珍惜小编劳动成果，该文章为小编原创，转载请注明出处。 摘要： CSS3相对CSS2增加了一些新的布局方式：多栏布局和盒子布局。在这篇文章中，将对CSS2的布局进行简单的回忆，并总结CSS3的布局方式。 DIV+CSS其实是错误的叫法 关于当前的页面布局，很多人都习惯于叫做DIV+CSS,其实这是一种错误的叫法，标准叫法应该叫做XHTML+CSS....
使用CSS进行简单的网页布局
lucahan的博客
08-30 934
Web页面是由块元素组成的，正常情况下块元素一个个按垂直方向排布，构成了页面。但是这种基本的布局方式绝大多时候不能满足我们的需求，所以各种布局方式应运而生，所以，本文来介绍最简单的几种网页布局方法。 一、一列布局 一列布局一般就是从上到下，采用固定的宽度或者一定的比例，一列布局类似与百度的这种形式。 一列布局 body{margi
如何用CSS进行网页布局
sarycai的博客
12-21 439
网页布局 一列布局 用法 清除默认样式 二列布局 三列布局 混合布局网页布局1：网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性的化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。 网页设计特点（相对纸媒来说） 1、网页可以自适应宽度 2、网页的长度理论上可以无限延长 3：页面为：头部，主体部分，底部。 分栏又称为分列：一
网页布局入门教程 如何用CSS进行网页布局
09-27
主要为大家分享了网页布局入门教程，如何用CSS进行网页布局，介绍了绝对定位布局、混合布局及结构与表现原则，感兴趣的小伙伴们可以参考一下
CSS网页布局使用表格可以吗？
09-27
首先，我们需要明确CSS网页布局的目的。CSS布局的目的是为了创建清晰、结构良好的文档，通过使用诸如`<div>`、`<header>`、`<footer>`、`<section>`等语义化的HTML标签，将内容和样式分开管理。这样可以提高代码的...
CSS 网页布局排版实例
09-25
本实例主要讲解了如何利用CSS实现多列排版布局，这对于初学者掌握div+css布局技巧是非常有价值的。下面我们将详细解析这个实例中的关键知识点。 1. **CSS 基础** - `margin`: 控制元素的外边距，`margin:0px` 用于...
通过html和css页面布局来做一个登陆页面，实例？
XXLoveSHT的博客
06-19 5183
效果如图：代码如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;用户登录&lt;/title&gt; &lt;style type="text/css"&gt; *{margin: 0; pad
CSS3与页面布局学习总结——页面布局大全（推荐）
Kevinvcc200的博客
10-18 1395
链接：https://cloud.tencent.com/developer/article/1012775
CSS实现从上往下过渡效果
最新发布
Rverdoser的博客
07-18 148
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 117
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1282
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
css-grid布局(栅格布局)
YogaMiller的博客
07-15 808
* 数字和命名搭配搭配也可, 1 / t 注意如果是一个位置的话可省略, 比如 1 / 2 2 / 3 这里的2 3就可以省略*//* [d]150px 100px;搞不懂为什么加个命名就变小了.... *//* 目前喜欢这种的方式, 比较直观 . 表示这个位置空着 */grid 一个比flex更强大的布局,适合做整体布局。/* g-r-start g-r-end 的简称 *//* 相同的名字 代表相同的区域 */fr 只能放在第二个参数。
HTML5+CSS3小实例：纯CSS实现奥运五环
艾恩小灰灰的博客
07-15 1884
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。
css 混合模式 mix-blend-mode属性
Br不二
07-15 288
属性类型是一个 CSS 属性。作用：控制元素内容的颜色与其背景或其他元素内容的颜色混合方式。继承性是非继承性属性，即子元素不会自动继承父元素的值。
Web标准布局实践：DIV+CSS网页设计
"网页布局课程，重点讲解DIV+CSS布局技术" 在网页设计领域，"DIV+CSS"布局是一种广泛采用的现代网页布局方法，它强调内容与表现的分离，提高了网页的可维护性和效率。本课程大纲详细介绍了从传统布局到CSS布局的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值