企业官网静态页基础结构如何搭

新站点不要从空白 html 写起。先按这套目录把文件归位,内页骨架用横幅、面包屑、栏目标题、分页四块,头尾单独文件,避免每个页面复制一份导航。

css、js、图片各放哪个目录

第三方不进 js/,公共头尾不进业务页中间。入口是 index.html。链接和按钮在 base.css 里已加手型,业务样式里 hover 颜色按设计补。提示用 Layui 的 layer.msg,不要用 alert。表单提交时把字段取全,用 console.log 核对参数,校验规则按需求来。

页面标题、关键词和网站图标如何写

head 里三件套:title、description、keywords,再加网站图标。title 写成「当前栏目-企业名称」。图标路径指到 images 里的文件。lang 用 zh-CN。

文案、关键词换成客户提供的。漏掉 description,搜索结果里摘要会乱。这坑我见过不止一次。

公共样式和第三方库如何引入

脚本先引 jQuery,再工具、fixPower.js、动画和轮播库、Layui、Bootstrap;样式再跟 Bootstrap、Layui、Swiper、AOS,最后才是 base.css、font_size.css、publicStyle.css。业务 css 放最后,才能盖住组件默认样。

非响应式站点可不引 Bootstrap。IE9 以下才需要 html5shiv、respond;IE10 以下轮播用 swiper2。版心类名在 publicStyle.css:大屏 width1500、width1200 等,小屏在媒体查询里改成 100%。字号用 fontSize_16 这类类名,和 font_size.css 对应。

横幅、面包屑、栏目标题和分页如何排

中间四块从上到下:.public_banner、.crumbs_tabs、.public_titles、.pages_container。横幅 PC、手机各一张图,用 hidden-xs / visible-xs 切换。面包屑只在 PC 显示。栏目标题中间是中文名,两侧装饰图,上面一行英文。分页 PC 是数字加左右箭头,当前页给 a 加 on;手机只保留上一页、下一页。

图路径改成项目切图。分页箭头两套图叠在一起,hover 时切换,样式在 publicStyle.css。正文区块插在栏目标题和分页之间。

页头页脚如何接到各个内页

页头 include/top.html,页脚 include/bottom.html。业务页只留空节点,进入后 load 进去,导航改一处即可。

头尾必须用 http 打开(本地服务或同域页面),直接双击文件时 load 常会被浏览器拦住。移动端菜单在 top.html 里用 on 委托点 .mobile_menuBtn。栏目 html 文件名和导航 href 对齐,例如产品中心对应 productCenter.html。AOS 在页面末尾引 js/aosInit.js,需要进场动画的块再加 data-aos。

相关推荐
桔筐1 小时前
Vue中DOM的data-*自定义属性(dataset)与Vue data响应式变量区别详解
前端·javascript·vue.js
damoluomu1 小时前
静态站点生成器怎么选:Node.js 生态里常用的五个(番外一)
javascript·css·typescript·node.js·html
程序员大阳1 小时前
副队长HTML+CSS博客网站实战 (1)–项目介绍与整体规划
css·html·实战·教程·博客网站·规划
程序员大阳1 小时前
副队长HTML+CSS博客网站实战 (3)–首页主体:Grid 文章卡片 + 侧边栏布局
css·html·侧边栏·博客网站·首页·文章卡片
西索斯coding2 小时前
Claude Code 工具调用返回空怎么办?claude-opus-5.5 的 input_schema 校验踩坑记录与修复方案
服务器·前端·javascript·ai
程序员Sunday2 小时前
Flex 和 Grid 有什么区别?一维布局、二维布局怎么选?
前端·css·面试
Jlzn88882 小时前
华南PACK线自动化率怎么统计才靠谱
前端·javascript·自动化
Hilaku2 小时前
ERP选型时不问MCP,等于默认三年后再付一次集成费!
前端·javascript·程序员
爱喝水的小周2 小时前
实验十一 Vuex 实现王者荣耀后台比赛管理系统
前端·css·html