企业官网建设流程全解析

网站建设课程ppt模板,竞价托管服务公司,wordpress更改,如何在互联网推广自己的产品现代网页布局 一、CSS布局概述 CSS布局是网页设计的核心技术之一#xff0c;用于控制元素在页面中的排列方式#xff0c;主要包含正常布局流(normal) 、模式转换布局(display)、浮动布局(float)、弹性布局(flexbox)、定位布局(grid)、网格布局(position)、多列布局(column) 七…现代网页布局一、CSS布局概述CSS布局是网页设计的核心技术之一用于控制元素在页面中的排列方式主要包含正常布局流(normal)、模式转换布局(display)、浮动布局(float)、弹性布局(flexbox)、定位布局(grid)、网格布局(position)、多列布局(column)七种核心技术。每种技术各有优缺点、相互辅助适配不同场景简单布局优先使用 Flexbox一维或 Grid二维复杂响应式布局Grid 媒体查询文本内容分栏多列布局column-count兼容旧浏览器浮动布局或 Flexbox 降级方案趋势CSS Grid 逐渐成为主流支持更复杂布局场景二、正常布局流normal flow正常布局流是浏览器默认的 HTML 布局方式又称标准流是 CSS 布局的基石。1. 元素分类及特性元素类型核心特性示例标签区块元素block独占一行宽度默认撑满父容器垂直方向排列可设置宽高div、p、h1-h6 等行内元素inline水平方向依次排列容器宽度不足时换行宽高由内容决定无法直接设置span、img、strong 等2. 文档流方向默认从上到下、从左到右排列。三、模式转换display 属性通过display属性可更改元素默认显示方式解决「块级元素需一行显示」「行内元素需设置宽高」等需求。1. 核心属性值及特性属性值是否独占一行能否设置宽高默认宽度display: block (常用)是是撑满父容器宽度display: inline 罕见否否由内容决定display: inline-block (较少)否是由内容决定可覆盖2. 关键说明表单元素默认inline-block其他元素需手动设置该属性实现转换使用场景① 让块级盒子一行显示② 让行内盒子具备宽高设置能力注意事项行内块元素中间会有空白缝隙给父元素设置font-size: 0可消除因为“空白间隙”本质上是一个空格字符而空格的宽度是由字体大小font-size决定的把 font-size 设为 0 导致 空格宽度 变为0 → 间隙消失仅适用于对间距要求不高的场景精细布局建议使用 Flex 或 Grid四、浮动布局float现代开发不怎么用1. 核心概念浮动最早用于实现文字环绕效果可让元素脱离文档流向左或向右浮动直到碰到父容器边缘或其他浮动元素。2. 浮动属性值属性值作用示例代码left元素向左浮动float: left;right元素向右浮动float: right;none默认值不浮动float: none;3. 浮动的影响父盒子失去高度很多情况下不能给父亲指定高度靠子元素撑开子元素脱离文档流不占据原位置影响其他盒子的正常布局4. 清除浮动闭合浮动核心目标让浮动元素控制在父盒子内不影响其他布局主要有四种方式清除方式实现方式额外标签法在浮动元素末尾新增块级标签添加属性clear: both;单伪元素法父元素添加伪元素.clearfix:after { visibility: hidden; clear: both; display: block; content: .; height: 0; }如京东使用双伪元素法父元素添加双伪元素.clearfix:after, .clearfix:before { content: ; display: table; } .clearfix:after { clear: both; }如小米使用overflow 法父元素添加overflow: hidden;简单高效五、弹性盒子布局FlexboxFlexbox 是 CSS 弹性盒子布局模块的缩写可快速实现元素的对齐、分布和空间分配核心是父控子(父盒子控制子盒子如何排布)和主轴与交叉轴。1. 核心概念父盒子(容器)设置display: flex;后成为弹性容器,可以让子盒子依照主轴方向排列子盒子有大小则按照给定大小显示子盒子没有大小则拉伸充满父容器子盒子总宽度超过容器宽度默认会压缩子元素子盒子(项目)弹性容器的直接子元素自动成为弹性项目主轴与交叉轴主轴默认水平方向从左到右可通过flex-direction更改交叉轴默认垂直方向从上到下与主轴垂直开发中大部分情况,父容器设置 display:flex子元素设定大小。2. 容器父盒子属性属性作用示例代码display定义元素为弹性容器.container { display: flex; }flex-direction定义主轴方向项目排列方向.container { flex-direction: row; }flex-wrap控制项目是否换行.container { flex-wrap: wrap; }justify-content定义主轴上的对齐方式整体分布.container { justify-content: center; }align-items定义交叉轴上的对齐方式单行时整体对齐.container { align-items: center; }align-content定义多行时交叉轴上的对齐方式仅 flex-wrap: wrap 且换行时生效.container { align-content: space-between; }1flex-direction 主轴方向取值属性值描述示例效果row默认水平主轴从左到右ABC横向排列row-reverse水平主轴从右到左CBA反向横向column垂直主轴从上到下ABC 纵向排列column-reverse垂直主轴从下到上CBA反向纵向2justify-content 主轴对齐方式属性值效果描述flex-start左对齐默认flex-end右对齐center居中对齐space-between两端对齐首尾贴边中间均分间隙space-around项目两侧间隔相等首尾间隙为中间的一半space-evenly项目间隔均匀分布所有间隙相等3align-items 交叉轴对齐方式单行属性值效果描述flex-start交叉轴起点对齐默认flex-end交叉轴终点对齐center交叉轴居中对齐stretch项目拉伸填充容器高度子项目无固定高度时4flex-wrap 换行控制属性值效果描述nowrap默认不换行空间不足时压缩项目wrap换行第一行在上第二行在下wrap-reverse反向换行第一行在下第二行在上了解3. 项目子盒子属性属性作用示例代码order定义项目排列顺序默认 0数值越小越靠前.item { order: -1; }flex-grow定义项目放大比例默认 0不放大正整数表示占比.item { flex-grow: 1; }flex-shrink定义项目缩小比例默认 1空间不足时缩小0 表示不缩小.item { flex-shrink: 0; }flex-basis定义项目在主轴上的初始大小优先级高于 width/height默认 auto.item { flex-basis: 200px; }flex简写flex-grow flex-shrink flex-basisflex:1 等价于 1 1 0% flex: 2 等价于 2 1 0 %.item { flex: 1; }align-self覆盖容器的 align-items单独定义某个项目的交叉轴对齐方式.item { align-self: center; }flex:1;剩余空间占1份并且可以伸缩盒子大小 数字表示剩余空间所占次数(正整数)[等比放大/缩小初始无基准尺寸]4. 间距控制gap 属性作用设置弹性项目之间的行与列间隙不影响项目与容器边缘的距离语法gap: 20px;行和列间距均为 20pxgap: 20px 30px;行间距 20px列间距 30px注意需写在弹性容器父元素上5. 垂直对齐vertical-align补充用于解决行内元素/行内块元素如图片与文字的对齐问题尤其可消除图片底部空白缝隙。属性值效果描述baseline默认基线对齐导致图片底部空白top顶部对齐middle中部对齐bottom底部对齐解决方案① 图片设置display: block;② 图片设置vertical-align: top/middle/bottom;六、定位布局position定位布局用于控制元素在页面中的精确位置支持元素脱离文档流、层叠、固定在特定位置等效果.(定位跟位置有关)1. 定位类型及核心特性定位类型脱离文档流定位基准层叠控制典型场景static默认否正常文档流无普通元素布局relative否自身正常位置支持微调元素、作为绝对定位的父容器子绝父相absolute是最近的已定位祖先元素非 static无则视口支持弹窗、下拉菜单、悬浮元素、子绝父相fixed是浏览器视口滚动时位置不变支持固定导航栏、返回顶部按钮sticky否视口或滚动祖先滚动到指定位置后固定支持吸顶导航栏、表格表头固定2. 核心语法与规则基础语法position: 定位类型;配合偏移属性top/right/bottom/left控制位置偏移优先级同时设置top/bottom 时仅 top 生效同时设置left/right 时仅 left 生效层叠控制z-index: 数值;整数数值越大层级越高仅对定位元素生效3. 核心技巧子绝父相1原理子元素position: absolute;脱离文档流可悬浮不影响其他元素父元素position: relative;不脱离文档流保留原位置作为子元素定位基准2适用场景弹出菜单/下拉框鼠标悬停显示元素悬浮效果如商品标签、悬浮按钮精确控制子元素在父容器内的位置3补充技巧定位盒子垂直居中​top: 50%; margin-top: -自身高度一半;需知道子元素高度.box {//水平和垂直居中 position: absolute; top: 50%; left: 50%; //优点不需要知道盒子自身宽高 transform: translate(-50%, -50%);//单独使用top: 50% translateY(-50%) }阴影替代边框避免边框影响布局(产生抖动)可使用box-shadow: 0 0 4px rgba(255,255,255,0.5);4.固定定位CSS 固定定位是一种脱离文档流的布局技术元素始终相对于浏览器视口当前可见区域 定位页面滚动时位置保持不变。特性元素脱离正常文档流不占据原空间其他元素会忽略它的存在进行布局。定位基准是浏览器视口不受父元素或页面滚动的影响。通过top/bottom/left/right控制偏移若同时设置topbottom仅top生效leftright仅left生效。典型应用场景固定导航栏页面滚动时导航栏始终固定在视口顶部如多数网站的顶部导航。页面广告 / 悬浮组件如页面侧边的悬浮广告、回到顶部按钮等始终显示在视口固定位置。选择器{position:fixed;/* 开启固定定位 */top:0;/* 相对于视口顶部的距离可结合bottom/left/right */left:0;/* 相对于视口左侧的距离 */}5.粘性定位定义一种混合定位模式结合了相对定位relative和固定定位fixed的特性。典型应用场景吸顶效果元素滚动到指定位置后固定如页面导航栏滚动到顶部后吸顶。表格表头固定长表格滚动时表头始终保持可见。选择器{position:sticky;/* 开启粘性定位 */top:0;/* 必须指定top/right/bottom/left之一才会生效 */}特性滚动到指定位置前元素是相对定位不脱离文档流。滚动到指定位置后元素转为固定定位相对于视口。限制条件父容器的overflow需为visible否则粘性定位会失效。(position: sticky 是“相对于最近的可滚动容器”生效的.只要祖先元素创建了滚动上下文overflow ≠ visible粘性定位就被限制在这个容器内部)6.层叠顺序(z-index)控制元素在Z 轴方向的层叠顺序当元素重叠时决定哪个元素显示在最上层。规则值类型整数正数、负数、零或auto数值越大层级越高。默认值auto等同于未设置后出现的元素会覆盖前者。生效条件仅对position值为relative/absolute/fixed/sticky的定位元素有效。七、网格布局Grid基础Grid 是二维布局模型可同时控制行和列的排列适合构建复杂页面框架,如多列或者响应式常与 Flexbox 混用**Flexbox 侧重一维布局Grid 侧重二维布局**。核心创建好网格并放入各类元素1. 核心概念容器父盒子设置display: grid;块级或display: inline-grid;行内项目子盒子容器的直接子元素网格轨道行轨道row tracks和列轨道column tracks决定网格结构网格线划分网格的线条列线从左到右编号行线从上到下编号单元格网格线交叉形成的最小区域2. 容器核心属性1网格轨道定义属性作用示例代码grid-template-columns定义列轨道列宽/列数.container { grid-template-columns: 100px 1fr auto; }grid-template-columns:200px 200px 200px;//定义三列每列宽度200pxgrid-template-rows定义行轨道行高/行数.container { grid-template-rows: 100px 200px; }2轨道尺寸取值取值类型说明示例固定长度px、em 等精确控制尺寸grid-template-columns: 100px 200px;百分比按容器宽度比例分配grid-template-columns: 30% 70%;fr 单位分配剩余空间的比例1fr 表示 1 份grid-template-columns: 1fr 2fr;auto由内容或容器自动撑开grid-template-columns: auto 100px;repeat() 函数简化重复定义格式repeat(次数/自动填充, 尺寸)grid-template-columns: repeat(3, 1fr);minmax() 函数定义尺寸范围最小值最大值grid-template-columns: minmax(100px, 1fr);3轨道对齐方式属性作用取值同 Flexbox 的 justify-content/align-contentjustify-content列轨道水平分布start、end、center、space-around、space-between、space-evenlyalign-content行轨道垂直分布同上4网格间距gap作用设置行与列之间的间隙不影响轨道与容器边缘语法gap: 20px;行和列间距均为 20pxgap: 20px 30px;行间距 20px列间距 30px分开写row-gap: 20px; column-gap: 30px;5网格填充方式grid-auto-flow属性值效果描述row默认先行后列填充优先填满一行再换行column先列后行填充优先填满一列再换列补充object-fit6项目对齐方式在 CSS Grid 布局中用于控制网格项目在其单元格内的对齐方式包含水平、垂直两个方向需给父容器网格容器添加。属性名控制方向说明简化写法justify-items水平方向行轴控制项目在单元格内的水平对齐-align-items垂直方向列轴控制项目在单元格内的垂直对齐-place-items水平 垂直方向合并写法先垂直后水平place-items: 垂直值 水平值属性值水平方向效果垂直方向效果代码示例以justify-items为例start对齐单元格起始边缘左对齐对齐单元格起始边缘顶部对齐.container { justify-items: start; }end对齐单元格结束边缘右对齐对齐单元格结束边缘底部对齐.container { justify-items: end; }center水平居中对齐垂直居中对齐.container { justify-items: center; }stretch拉伸填满单元格宽度默认值拉伸填满单元格高度默认值.container { justify-items: stretch; }3. 项目核心属性网格线相关用于控制项目跨越多个单元格属性作用示例代码grid-column跨列开始列线/结束列线 或 开始列线/span 跨列数.item { grid-column: 1/3; } 或 .item { grid-column: 1/span 2; }grid-row跨行同上.item { grid-row: 1/3; } 或 .item { grid-row: 1/span 2; }4. 响应式布局核心技巧自动填充列grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));auto-fill尽可能多地创建列容器空间充足时留空白auto-fit拉伸列填满容器无空白八、多列布局column基础1. 核心作用将元素内容自动分割为指定数量的垂直列适用于长文章分栏、图片瀑布流等场景。2. 核心属性属性作用示例代码column-count定义列数自动分配列宽.box { column-count: 3; }column-gap定义列之间的间距默认 1em.box { column-gap: 20px; }column-rule定义列间分隔线宽度样式颜色.box { column-rule: 1px solid #ccc; }3. 注意事项问题底部子元素可能被跨列切断解决方案给子元素添加break-inside: avoid-column;强制元素不跨列分割九、鼠标样式cursor 属性用于控制鼠标指针在元素上的显示样式提升交互体验属性值描述适用场景default默认箭头普通元素pointer手型指尖朝下可点击元素链接、按钮textI 型竖线可编辑文本区域wait等待旋转圆圈/沙漏加载中、操作执行中help带问号的箭头提示信息区域not-allowed禁止圆圈带斜线禁用的按钮/操作grab抓取手型可拖动元素grabbing抓取中手型正在拖动元素zoom-in放大号图片预览放大操作zoom-out缩小-号图片预览缩小操作十、CSS 书写顺序规范遵循「布局→盒模型→视觉→交互→其他」逻辑提升代码可读性和维护性顺序常见属性列表布局相关display、visibility、position、top/right/bottom/left、float、clear、overflow、z-index盒模型box-sizing、width/min-width/max-width、height/min-height/max-height、margin、padding、border视觉样式color、background、font、font-size、font-family、line-height、text-align、text-indent交互与动画cursor、opacity、transition、animation、transform其他(特殊/低频)filter、clip-path、backdrop-filter、scroll-behavior