企业官网建设流程全解析

汇鑫网站建设方便,网站导航字体,网站建设的流程分析,合肥网站建设政务区盒子模型基础概念 所有 HTML 元素都被 “盒子” 包裹#xff0c;是网页精准布局、处理元素排列的核心#xff1b;主要分为 ** 区块盒子#xff08;block#xff09;和行内盒子#xff08;inline#xff09;** 两类#xff0c;且盒模型整体适用于区块盒子。 盒子类型及…盒子模型基础概念所有 HTML 元素都被 “盒子” 包裹是网页精准布局、处理元素排列的核心主要分为 ** 区块盒子block和行内盒子inline** 两类且盒模型整体适用于区块盒子。盒子类型及特点类型核心特点常见元素区块盒子block1. 会自动换行2.width/height属性生效3. 不设宽度默认占父元素 100%4. 内边距、外边距、边框会撑大元素div、p、h、ul、table行内盒子inline1. 不会换行同行显示2.width/height属性不生效3. 垂直方向内边距、外边距不生效仅水平方向有效span、em、a、strong盒子模型的组成共 4 部分CSS 盒模型包含以下 4 层从内到外盒子内容显示内容的区域大小由内容或width/height决定内边距padding内容与边框之间的距离边框border包裹内容和内边距的线条外边距margin盒子与其他元素之间的距离。边框border的属性用法1. 边框缩写属性语法border: 边框粗细 边框样式 边框颜色;三部分用空格分隔顺序可调整边框样式必填示例border: 1px solid #f1f1f1;1 像素、实线、浅灰色边框常用边框样式dotted点状边框圆点虚线dashed虚线边框短横线虚线solid实线边框单一线条2. 单方向边框按方位设置语法border-方位: 粗细 样式 颜色;方位可选top/bottom/left/right示例border-bottom: 1px solid pink;仅底部加边框适用场景四个边框样式 / 颜色不同单独加某一边框如底部加线做分割线。圆角基本作用border-radius用于设置元素外边框的圆角效果是盒子模型中美化元素的常用属性。使用场景普通场景给盒子添加圆角提升视觉美观度将正方形盒子 / 图片设置为正圆形。特殊场景胶囊圆角长方形元素的圆角效果部分角带圆角如淘宝侧边栏仅左上角、右下角有圆角其余角无。属性用法1. 基础语法cssborder-radius: 属性值; /* 属性值支持数字如px、百分比 */2. 多参数写法顺时针顺序左上 → 右上 → 右下 → 左下不同参数数量对应不同角的圆角分配写法示例作用效果border-radius: 10px;四个角圆角均为 10pxborder-radius: 10px 20px;左上 / 右下 10px右上 / 左下 20pxborder-radius: 10px 20px 30px;左上 10px右上 / 左下 20px右下 30pxborder-radius: 10px 20px 30px 40px;左上 10px、右上 20px、右下 30px、左下 40px3. 特殊场景实现胶囊圆角长方形元素设border-radius: 高度的一半;例高度 40px 的元素设20px圆形正方形元素设border-radius: 50%;或border-radius: 高度的一半;部分角圆角不需要圆角的角设为0例仅左上、右下圆角border-radius: 12px 0 0 12px;。圆角原理border-radius的值对应 “圆角的半径”因此正方形元素设border-radius: 50%;时会形成正圆形半径为元素宽 / 高的一半。内边距基本定义内边距padding是元素边框与内容区域之间的距离属于盒子模型的核心组成部分。使用场景让盒子的内容与边框之间保留一定空白间距避免内容紧贴边框提升页面布局的美观度。写法规则1. 多值缩写顺时针顺序上 → 右 → 下 → 左通过不同数量的参数批量设置多个方向的内边距写法示例作用效果padding: 10px;上下左右 4 个方向的内边距均为 10pxpadding: 10px 20px;上下内边距 10px左右内边距 20pxpadding: 10px 20px 30px;上内边距 10px左右内边距 20px下内边距 30pxpadding: 10px 20px 30px 40px;上 10px、右 20px、下 30px、左 40px严格顺时针2. 单边设置单独控制某一方向通过 “方位名词 padding” 的属性单独设置某一个方向的内边距csspadding-top: 10px; /* 仅上内边距 */ padding-right: 10px; /* 仅右内边距 */ padding-bottom: 10px; /* 仅下内边距 */ padding-left: 10px; /* 仅左内边距 */外边距基本定义与使用场景定义外边距margin是盒子周围的空白空间作用是将其他元素 “推开”属于盒子模型的外层部分。场景让元素之间保留一定间距提升布局美观度。写法规则1. 多值缩写顺时针顺序上 → 右 → 下 → 左通过不同数量的参数批量设置多个方向的外边距写法示例作用效果margin: 10px;上下左右 4 个方向外边距均为 10pxmargin: 10px 20px;上下外边距 10px左右外边距 20pxmargin: 10px 20px 30px;上 10px、左右 20px、下 30pxmargin: 10px 20px 30px 40px;上 10px、右 20px、下 30px、左 40px2. 单边设置单独控制某一方向通过 “方位名词 margin” 的属性单独设置单方向外边距cssmargin-top: 10px; /* 仅上外边距 */ margin-right: 10px; /* 仅右外边距 */ margin-bottom: 10px; /* 仅下外边距 */ margin-left: 10px; /* 仅左外边距 */注意事项行内元素限制行内元素如span、a的margin存在以下限制仅左右外边距生效上下外边距无效同时行内元素设置width/height也无效。实用技巧区块元素水平居中给有宽度的区块元素设置margin: auto;或margin-left: auto; margin-right: auto;可实现水平居中网页布局常用技巧如小米、京东的容器居中css.container { width: 1200px; /* 必须设置宽度 */ margin: auto; /* 水平居中 */ }特殊问题 1外边距折叠兄弟元素情况并列兄弟关系的区块元素上下外边距会发生合并折叠。表现两个元素的上下外边距会合并为 “其中较大的那个值”例A 盒margin-bottom:100pxB 盒margin-top:50px最终间距为 100px。解决只需给其中一个元素设置上下外边距即可避免同时给兄弟元素设置上下 margin。六、特殊问题 2外边距塌陷父子元素情况嵌套父子关系的区块元素给子元素设置上下外边距时会带动父元素一起移动而非子元素在父元素内产生间距。解决方案三选一给父元素添加上边框如border-top: 1px solid transparent;给父元素添加上内边距如padding-top: 1px;给父元素添加overflow: hidden;属性。盒子模型 - 尺寸计算默认尺寸计算的问题在 CSS 盒子模型的默认规则中元素的width/height仅表示内容区域的大小padding内边距和border边框会额外 “撑大” 盒子的实际尺寸。例设置width:200pxborder:5pxpadding:10px盒子实际宽度为200 5×2 10×2 230px这种计算方式会增加布局的复杂度。box-sizing属性控制尺寸计算方式box-sizing用于定义盒子的尺寸计算规则解决 “padding/border 撑大盒子” 的问题核心是控制width/height是否包含padding和border。语法cssbox-sizing: 属性值;两个核心属性值属性值描述width/height的包含范围content-box默认值。仅包含内容区域不包含padding和border即默认撑大盒子的规则。border-box包含内容区域 padding border。设置width:200px后即使加了 padding 和 border盒子实际尺寸仍为 200pxpadding 和 border 会从内容区域的空间里 “扣除”。实际开发建议为了简化布局计算推荐全局设置border-box写法示例css/* 让页面所有元素包括伪元素都使用border-box计算尺寸 */ body *, body *::before, body *::after { box-sizing: border-box; }盒子背景background 属性的基本定义background是 CSS 中用于设置元素背景相关属性的综合属性可控制背景颜色、背景图片、背景位置、背景重复方式等样式。使用场景给盒子添加精美背景图片提升视觉效果给列表添加小图标作为装饰元素给页面添加大幅背景图增强页面氛围感纯 CSS 实现背景渐变效果。核心子属性详情属性名作用常用值示例代码background-color设置元素背景颜色颜色名称、十六进制、RGB、透明度background-color: #0f0f0f;background-image设置背景图片url(图片路径)background-image: url(bg.png);background-repeat控制背景图是否重复repeat默认、no-repeat、repeat-x、repeat-ybackground-repeat: no-repeat;background-position定位背景图的位置x y如center top、px 单位、% 单位background-position: center;background-size调整背景图的尺寸auto默认、cover覆盖容器、contain完整包含、px/%background-size: cover;background-attachment设置背景是否随页面滚动scroll默认随页面滚动、fixed固定不滚动background-attachment: fixed;背景渐变基本定义在 CSS 中可通过linear-gradient线性渐变和radial-gradient径向渐变两种方法为元素添加渐变背景效果。使用场景给文字添加渐变底色让文字更生动吸睛给盒子添加渐变背景提升视觉美观度。两种渐变类型详情方法 / 属性描述核心参数说明示例代码linear-gradient()线性渐变方向可控1. 方向支持方位名词如to right或角度如90deg2. 色标可指定颜色及渐变位置可选cssbackground: linear-gradient(to right, #ff6b6b, #4ecdc4);/* 或带角度 色标位置 */background-image: linear-gradient(90deg, #ff6b6b 30%, #4ecdc4 70%);|| radial-gradient() | 径向渐变形状、位置可控| 1. 形状如circle圆形br2. 色标指定渐变颜色 | css radial-gradient(circle, #ff9a9e, #fad0c4); |盒子阴影box-shadow基本定义CSS 的box-shadow属性用于给元素框架添加阴影效果。使用场景给盒子加阴影增强立体效果鼠标 hover 元素时显示阴影突出目标元素。语法与参数cssbox-shadow: X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 [inset];核心要点X/Y 轴偏移量是必填项其余参数可选取默认值默认是外阴影加inset可改为内阴影示例cssnav li { box-shadow: 0 15px 30px rgba(0,0,0,.1); }过渡transition基本定义过渡效果Transition用于让元素的属性值变化时平滑过渡而非瞬间切换。使用场景鼠标 hover 图片时图片平滑放大表单获得焦点时输入框样式平滑变化。语法csstransition: 过渡属性 过渡时间;核心要点过渡属性若所有属性都要过渡可写all过渡时间单位为秒s如0.3s示例cssinput:hover { transition: all 0.3s; }样式初始化核心原因不同浏览器对 HTML 元素的默认样式如margin、padding、font-size存在差异会导致跨浏览器兼容性问题。初始化目的统一浏览器默认样式消除差异减少后续开发的冗余代码提高代码可维护性。最佳实践小型项目新手简单重置css/* 清除所有元素的默认margin、padding统一盒模型 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 重置列表默认样式去掉黑点/数字 */ ul, ol { list-style: none; } /* 重置链接默认样式去掉下划线 */ a { text-decoration: none; }中大型项目推荐 Normalize.css引入方式在 HTML 中添加链接标签引入文件html预览link relstylesheet href./css/Normalize.css下载地址https://necolas.github.io/normalize.css/Vue 官网等项目也常用此方案。字体图标Icon Font1. 基本定义是一种将图标以字体形式嵌入网页的技术可像文字一样通过 CSS 控制图标的颜色、大小、阴影等样式。2. 使用场景导航菜单的功能图标按钮的操作类图标如 “搜索”“收藏”结合动画实现动态图标效果。3. 核心优势矢量缩放无损放大 / 缩小不会模糊样式灵活通过 CSS 直接修改颜色、大小、阴影等属性减少请求一个字体文件包含多个图标比多张小图片更高效兼容性强支持所有现代浏览器部分旧浏览器也适配。4. 常用图标库图标库名特点官网链接Font Awesome图标最全支持免费版和 Pro 付费版fontawesome.comBootstrap IconsBootstrap 生态图标简单易用icons.getbootstrap.comIcoMoon最早的自定义图标字体生成器icomoon.ioiconfont阿里字体库含淘宝 / 阿里妈妈图标免费http://www.iconfont.cn/5. 使用步骤以 iconfont 为例下载从图标库 / 设计师处获取字体图标文件保存到项目目录引入在 HTML 中通过link引入对应的 CSS 文件使用通过标签调用对应图标再用 CSS 调整样式颜色、大小等。精灵图CSS Sprite1. 基本定义CSS Sprites 是将多个小图标 / 图像合并到一张大图通过调整background-position属性显示图片中特定区域的技术。2. 使用场景导航菜单的功能图标按钮的操作类图标复杂彩色小图标更适合精灵图。3. 核心优势减少 HTTP 请求多图标合并为一张图仅需一次请求提升性能减少网络开销避免移动 / 低带宽场景的加载问题统一管理便于维护图标集避免文件分散。4. 实现原理给目标盒子添加合并后的大图作为背景图通过background-position属性调整坐标定位到需要显示的图标区域注意网页坐标的规则与常规坐标有差异。