DIV+CSS制作仿天猫首页

射手座的程序媛

已于 2023-12-13 10:10:30 修改

阅读量592

点赞数 19

文章标签： css 前端 javascript

于 2023-12-13 09:51:05 首次发布

本文链接：https://blog.csdn.net/ly121862/article/details/134963633

版权

效果图

经过一段时间给学生讲课,发现个问题就是单独做案例都可以制作出来,但当制作个大页面时,会发现他们会遇到各种各样的问题,在解决这些问题过程中发现学生对整体布局没有宏观认识,因此发布这篇文章给css初学者。

css

css是层叠样式表,html就是裸妆的美女,但是现在美女出来就需要彩妆,此时css就发挥了自己的作用,充当了html的彩妆师.

css中大部分的内容很简单,并不是很难,但盒子模型,浮动,定位,这些是必须搞清楚的,否则在大页面布局时会发生各种各样的问题,

盒子模型

它包括：margin（外边距）、border（边框）、padding（内边距）、content（内容）

content 涉及宽度与高度, 内外边距,边框都是四个方向上右下左

浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

定位

CSS 中的 position 属性用来设置元素在页面中的位置，通过该属性您可以把任何属性放置在任何您认为合适的位置。position 属性有 5 个可选值，分别对应 5 种不同的定位方式，如下所示：

取值说明
static 默认值，静态定位，表示没有定位，元素会按照正常的位置显示，此时 top、bottom、left 和 right 4 个定位属性也不会被应用。
relative 相对定位，即相对于元素的正常位置进行定位，您可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。
absolute 绝对定位，相对于第一个非 static 定位的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。
fixed 固定定位，相对于浏览器的创建进行定位，可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。
sticky 粘性定位，它是 relative 和 fixed 的结合体，能够实线类似吸附的效果，当滚动页面时它的效果与 relative 相同，当要滚动到屏幕之外时则会自动变成 fixed 的效果。

取值	说明
static	默认值，静态定位，表示没有定位，元素会按照正常的位置显示，此时 top、bottom、left 和 right 4 个定位属性也不会被应用。
relative	相对定位，即相对于元素的正常位置进行定位，您可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。
absolute	绝对定位，相对于第一个非 static 定位的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。
fixed	固定定位，相对于浏览器的创建进行定位，可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。
sticky	粘性定位，它是 relative 和 fixed 的结合体，能够实线类似吸附的效果，当滚动页面时它的效果与 relative 相同，当要滚动到屏幕之外时则会自动变成 fixed 的效果。