企业官网建设流程全解析

有设计师做的装修效果图的网站,建设银行官网首页,免费资料库大全,去除wordpress相册1.浮动 本意#xff1a; 浮动最初的设计目的是为了实现文本环绕图片的效果#xff0c;类似于报纸或杂志中常见的排版方式。通过给图片应用 float: left; 或 float: right;#xff0c;可以使文字围绕图片排列。 优点#xff1a; 简单实现文本环绕效果#xff1a;这是浮动…1.浮动本意浮动最初的设计目的是为了实现文本环绕图片的效果类似于报纸或杂志中常见的排版方式。通过给图片应用 float: left; 或 float: right;可以使文字围绕图片排列。优点简单实现文本环绕效果这是浮动最原始且有效的用途。布局灵活性1.当元素需要支持宽高的时候并横向排列的时候就可以用浮动2.当元素一左一右进行排列用浮动会比较方便早期缺点破坏文档流使用浮动后元素会脱离正常的文档流导致父级元素的高度塌陷问题需要额外清除浮动如使用 clear:both; 或者 overflow 属性设置为 hidden 等方法。维护复杂性增加随着页面复杂度的增加管理多个浮动元素变得困难容易出现意外的布局行为。不适合复杂的响应式设计浮动对于现代响应式设计的支持不够友好难以处理不同屏幕尺寸下的自适应需求。实现代码如下float left 左浮动 right 右浮动 none 不浮动清浮动不是把浮动清掉是用来处理浮动元素脱离文档流造成父级高度为0页面蹿行的问题的操作就是清浮动。 理解父级的高度由于是利用子级的高度撑开的如果子级浮动脱离文档流会造成父级高度为0下面的元素会由于正 常文档流的原因造成蹿行。清浮动方式1.父级也浮动 弊端左右居中会失效通篇全是浮动 可以理解为父级如果有浮动子级不需要做清浮动的操作 2.父级加display:inline-block 弊端左右居中会失效 可以理解为父级如果有display:inline-block子级不需要做清浮动的操作 3.给父级加高度 弊端不利于扩展 可以理解为父级如果有固定高度并且万年不变子级不需要做清浮动的操作 4.给父级加overflow:hidden; 弊端裁刀子级超出的部分会被干掉 overflow hidden 溢出隐藏 auto 出现滚动条 scroll 出现滚动条 5.伪类清浮动 弊端代码太长需要封装重复调用 clear: 就是表示元素的某一侧不允许出现浮动元素。 left 左边不许有 right 右边不许有 both 两边不许有 none 没有用 结构 样式 行为 三者分离 :after 表示也标签的后面插入一个内容 1.第一步 在标签后面插入一个内容 #box1:after{ content:; } 2.第二步 把这个空字符变成块类型 #box1:after{ content:; display:block; } 3.第三步: 通过clear:both;来清浮动 #box1:after{ content:; display:block; clear:both; }目前浮动布局已经被淘汰尽量不要再项目中使用浮动2.定位定位是一种更加高级的布局手段通过定位可以把元素放到页面的任意位置 使用position属性来设置定位 可选值static默认值元素静止不开启定位relative开启元素的相对定位 absolute开启元素的绝对定位 fixed开启元素的固定定位sticky开启元素的粘滞定位优点精准控制可以非常精确地放置元素适用于创建固定头部、侧边栏等需要精确定位的组件。支持层叠上下文通过 z-index 属性能够控制元素之间的堆叠顺序这对于构建层次丰富的界面至关重要。局部调整相对定位不会改变元素在文档流中的位置但允许对其进行微调适合用于局部修正布局。缺点过度依赖可能导致布局僵硬如果滥用绝对定位可能会导致页面布局失去流动性难以适应不同的屏幕尺寸和设备类型。影响可访问性某些情况下绝对定位可能会影响内容的实际阅读顺序从而对可访问性和搜索引擎优化产生负面影响。维护成本较高当页面结构发生变化时基于定位的布局可能需要大量修改才能保持正确的显示效果。下面我们细致讲一下区别元素层级z-index只在“定位元素”即position值为relative、absolute、fixed或sticky的元素上生效。值越大越先显示父元素的层级再高也不会盖住子元素偏移量当元素开启定位以后我们可以通过偏移量来设置元素位置top定位元素和定位位置上边的距离bottom: 定位元素和定位位置下边的距离定位元素垂直方向的位置由top和bottom两个属性来控制top值越大定位元素越往下移动bottom值越大元素越往上移动left定位元素和定位位置左侧的距离right定位元素和定位位置右侧的距离定位元素水平方向的位置由left和right两个属性控制left值越大定位元素越靠右right值越大定位元素越靠左top和bottom通常只用一个left和right通常也只用一个2.1相对定位1.元素开启相对定位后如果不设置偏移量元素不会发生任何改变2.相对定位是参照元素在文档流中的位置进行定位的3.相对定位会提升元素的层级4.相对定位不会脱离文档流5.相对定位不会改变元素的性质块还是块行内还是行内效果图如下2.2绝对定位开发中常用子绝父相 来进行页面布局 子类使用绝对定位父类使用相对定位1.开启绝对定位后若不设置偏移量元素的位置不会发生任何改变2.开启绝对定位后元素会从文档流中脱离3.绝对定位会提高元素的层级4.绝对定位会改变元素的性质行内变成块高度由内容撑开5.绝对元素是相对于其包含块进行定位的包含块正常情况下包含块就是当前元素最近的祖先块元素绝对定位元素的包含块就是离它开启了定位的祖先元素若所有的祖先元素都没有开启定位则相对于根元素进行定位效果图如下有父元素开启定位无父元素开启定位2.3固定定位1.固定定位也是一种绝对定位所以固定定位的大部分特点与绝对定位一样2.唯一不同的是固定定位永远相对于浏览器的视口进行定位3.视口是固定不动的根元素会根据滚动条的滑动而滑动4.固定定位不会跟随页面的移动而移动一般用于返回顶部按钮、悬浮客服、固定导航栏示例代码如下2.4粘贴定位粘滞定位与相对定位的特点基本一致 不同的是粘滞定位可以在元素到达某个位置时将其固定示例代码如下3.弹性布局flex布局弹性布局 用来为盒状模型提供最大的灵活性 任何一个容器都可以指定为flex布局 当我们为父盒子设置为flex布局以后 子元素的float clear 和vertical-align属性将会失效伸缩布局 弹性布局 伸缩盒布局 弹性盒布局 flex布局在flex布局中是分为主轴和侧轴两个方向同样的叫法有行和列、x轴和y轴默认主轴方向就是x轴方向水平向右默认侧轴方向就是y轴方向水平向下注意当父元素开启弹性布局之后直接子元素提升为“弹性项目flex items行内元素状态改变可以支持盒模型样式但并不是变成块状元素示例代码如下常用属性如下类别属性常用值作用说明典型使用场景容器父元素displayflexinline-flex启用弹性布局所有 Flex 布局的起点flex-directionrow默认row-reversecolumncolumn-reverse设置主轴方向子项排列方向水平导航栏row垂直菜单columnjustify-contentflex-start默认flex-endcenterspace-betweenspace-aroundspace-evenly主轴对齐方式水平/垂直取决于主轴居中按钮center两端对齐导航space-betweenalign-itemsstretch默认flex-startflex-endcenterbaseline侧轴单行对齐方式垂直居中center等高卡片stretchflex-wrapnowrap默认wrapwrap-reverse是否允许换行响应式标签列表wrapalign-contentflex-startcenterspace-betweenstretch默认多行在侧轴上的分布仅当flex-wrap: wrap时有效多行项目整体居中项目子元素flex0 1 auto默认11 1 0%0 0 200px缩写flex-grow flex-shrink flex-basis控制伸缩与基础尺寸自适应内容区flex: 1固定侧边栏flex: 0 0 200pxalign-selfauto默认flex-startcenterflex-end单个项目覆盖align-items的对齐方式聊天消息左右错位order整数默认0改变显示顺序数值越小越靠前特殊排序需求慎用3.1 flex-direction 设置主轴方向flex-direction属性决定主轴的方向即项目的排列方向注意主轴和侧轴是会变化的就看flex-direction设置谁为主轴剩下的就是侧轴。而我们的子元素是跟着主轴来排列的默认值row 默认从左往右row-reverse 从右往左column 从上到下column-reverse 从下到上3.2 justify-content : 设置主轴上的子元素的排列方式默认flex-start 从头部开始 如果主轴是x轴 则从左到右flex-end 从尾部开始排列center 在主轴居中对齐(如果主轴是x轴 则水平居中)space-around 平分剩余空间space-between 先两边贴边 再平分剩余空间3.3flex-wrap : 设置子元素是否换行默认情况下 项目都排在轴线上 flex-wra属性默认是不换行的 当子元素宽度排列大于父元素宽度时默认不换行,而是缩小每个子元素来达到适应父元素的宽度nowrap 默认 不换行wrap: 换行换行了但是中间有空格因为flex容器高度固定两行内容总高度只有 200px每行 100px剩余 空间 被平均分配到两行之间的空白区域使得第二行看起来“上下等距”。3.4align-items : 设置侧轴上的子元素的排列方式(单行)该属性是控制子项在侧轴默认是y轴上的排列方式在子项为单项单行的时候使用flex-start : 默认 从上到下flex-end : 从下到上center 居中stretch : 拉伸 注意在使用时子元素不要设置高度3.5align-content : 设置侧轴上的子元素的排列方式(多行)设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况多行在单行下是没有效果的flex-start : 默认 在侧轴的头部开始排列flex-end : 在侧轴的尾部开始排列center : 在侧轴中间显示space-around : 子项在侧轴平分剩余空间space-between : 子项在侧轴先贴在两头 再平分剩余空间3.6 flex-flow复合属性相当于同时设置了 flex-direction 和 flex-wrap3.7 flex : 子项目占的份数flex:1 等价于 flex:1 1 0%复合属性如下部分含义值flex-grow放大比例如何分配容器剩余空间1flex-shrink缩小比例空间不足时如何压缩1flex-basis基准尺寸在分配空间前的初始大小0%3.8 align-self : 控制子项自己在侧轴的排列方式align-self 属性允许单个项目有与其他项目不一样的对齐方式可覆盖align-items属性。默认值为auto表示继承父元素的align-items属性3.9 order : 定义子项的排列顺序 (前后顺序)数值越小可以为负数排列越靠前默认为0。注意和z-index 不一样。4.二维布局grid布局Grid布局是CSS中一种强大的二维布局系统允许开发者在行和列两个维度上精确控制元素的位置和大小。与Flexbox一维布局不同Grid适用于复杂布局需求如网页整体结构、仪表盘等。常用属性如下类别属性作用说明常用值 含义典型使用场景容器父元素display启用 Grid 布局grid块级网格inline-grid行内网格所有 Grid 布局起点grid-template-columns定义列的数量和宽度100px 200px固定列宽1fr 2fr弹性分配剩余空间repeat(3, 1fr)重复3列等宽repeat(auto-fill, minmax(150px, 1fr))响应式卡片布局多列布局、侧边栏主内容、响应式网格grid-template-rows定义行的数量和高度80px auto 1fr头部固定、中间自适应repeat(2, 200px)两行等高页面分区header/main/footergap或row-gap/column-gap设置行列之间的间距gap: 16px行列同间距gap: 10px 20px行10px列20px卡片/图片网格间距替代 marginjustify-items控制所有项目在单元格内的水平对齐start左center居中end右stretch拉伸默认让所有卡片内容水平居中align-items控制所有项目在单元格内的垂直对齐start上center居中end下stretch拉伸默认让所有卡片内容垂直居中justify-content当网格总宽 容器宽时整体网格水平对齐center整体居中space-between两端对齐start靠左默认项目少时让网格居中显示align-content当网格总高 容器高时整体网格垂直对齐center垂直居中space-around上下等间距高度固定容器中垂直居中网格grid-template-areas通过命名区域定义布局结构header header nav main.表示空单元格清晰表达页面结构如博客、后台项目子元素grid-column控制项目跨列范围2 / 4从第2线到第4线跨2列span 3向右跨3列1 / -1通栏占满整行横幅、标题跨多列grid-row控制项目跨行范围1 / 3跨2行span 2向下跨2行侧边栏纵向延伸grid-area两种用途1. 放入命名区域2. 简写行列范围grid-area: main;配合命名区域grid-area: 1 / 2 / 3 / 4; row 1-3, col 2-4快速定位或实现复杂跨区justify-self单个项目在单元格内水平对齐覆盖justify-itemscenter,end,stretch等特殊按钮靠右对齐align-self单个项目在单元格内垂直对齐覆盖align-itemsstart,center,end等某个卡片顶部对齐光看文字还是乏力下面代码演示4.1grid-template-column定义列的数量和宽度grid-template-column可以填写px像素 fr比例等分,auto(自适应) 等单位4.2grid-template-rows设置行列之间的间距4.3justify-content水平对齐和align-content垂直对齐