企业官网建设流程全解析

信息网站设计方案,手机网站优化排名,泉州工作室网站建设,西安做网站需要多少钱前端萌新别慌#xff1a;HTML之后#xff0c;用CSS伪类伪元素让页面“活”起来#xff08;附避前端萌新别慌#xff1a;HTML之后#xff0c;用CSS伪类伪元素让页面“活”起来#xff08;附避坑指南#xff09;伪类和伪元素是啥#xff1f;先别管概念#xff0c;看着爽…前端萌新别慌HTML之后用CSS伪类伪元素让页面“活”起来附避前端萌新别慌HTML之后用CSS伪类伪元素让页面“活”起来附避坑指南伪类和伪元素是啥先别管概念看着爽再说先整点热乎的hover、active、focus 三兄弟日常翻车现场::before 和 ::after页面上的“幽灵节点”案例 1给标题加“小彩旗”案例 2清除浮动古老但有效案例 3纯 CSS 画三角为啥我的 :first-child 老选错文档树没吃透一个冒号还是两个冒号别装区别真不大但得知道实战不用 JS 做“动态提示 图标插入 隔行变色”1. 动态提示纯 CSS2. 图标插入不依赖字体库3. 隔行变色table、list 通吃新手高频翻车 TOP5看看你中几枪开发者工具捉鬼如何肉眼定位伪元素性能冷知识大量 ::after 会拖慢页面我测了隐藏技巧用 attr() 做“动态角标”移动端 :active 和 :hover 的爱恨情仇组合拳伪类 伪元素 CSS 变量 动态皮肤雏形结语幽灵代码不是鬼是你还没撩动的灵魂前端萌新别慌HTML之后用CSS伪类伪元素让页面“活”起来附避坑指南友情提示本文全程碎碎念代码管够吐槽不断建议收藏后慢慢啃别在地铁里笑出声。伪类和伪元素是啥先别管概念看着爽再说刚写前端那会儿我以为把div摆齐了就算完活结果设计师甩来一句“这个按钮 hover 要有呼吸感”。我当场裂开呼吸感你是要让它喘吗后来老大丢给我一行代码.btn:hover{transform:scale(1.05);box-shadow:0 0 12pxrgba(255,85,0,0.6);transition:all 0.3s;}我抄完一跑按钮真就“喘”起来了顿时惊为天人——原来 CSS 里还藏着这么一群“幽灵选择器”伪类、伪元素。它们不改动 HTML却能让页面像活了一样。今天咱们就蹲墙角唠唠它们到底是谁、能干啥、怎么不把自己玩死。先整点热乎的hover、active、focus 三兄弟日常翻车现场这三位你绝对写过但可能一直稀里糊涂/* 千万别这么写容易被打 */a:hover{color:red;}a:active{color:red;}a:focus{color:red;}颜色全一样结果键盘用户 tab 过来时完全不知道焦点在哪。正确姿势是“视觉差异化”.btn{background:#1890ff;color:#fff;transition:background 0.3s;}.btn:hover{background:#40a9ff;}.btn:active{background:#096dd9;transform:translateY(1px);/* 按下去“陷”一点 */}.btn:focus-visible{outline:3px solid #91d5ff;outline-offset:2px;}注意focus-visible只有键盘触发时才出现鼠标点不会出现完美兼顾“好看”与“无障碍”。如果你还在用outline: none一把梭建议今晚请测试同事喝奶茶赔罪。::before 和 ::after页面上的“幽灵节点”这俩货最唬人名字像 bug其实是官方外挂。它们默认是行内元素但你可以让它变成任意形状还不用改 HTML多香案例 1给标题加“小彩旗”h2::before{content:;display:inline-block;width:6px;height:24px;background:#ff4d4f;margin-right:8px;vertical-align:middle;}设计师要“左侧竖条装饰”一行代码搞定再也不用额外span。案例 2清除浮动古老但有效.clearfix::after{content:;display:table;clear:both;}浮动爹崩幽灵节点来兜底。现在虽然大家用 flex/grid 多了但老项目救急还得靠它。案例 3纯 CSS 画三角.triangle{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #1890ff;}升级版用伪元素做气泡小尾巴hover 才出现.tooltip{position:relative;}.tooltip::after{content:;position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#333;opacity:0;transition:opacity 0.3s;}.tooltip:hover::after{opacity:1;}为啥我的 :first-child 老选错文档树没吃透来看一段“看似没问题”的代码sectionh3标题/h3p第一段/pp第二段/p/sectionp:first-child{color:red;}结果没反应。为啥因为p并不是父元素的第一个儿子它前面还有h3正确写法p:first-of-type{color:red;}first-of-type只看类型不管前面有没有别标签。同理:last-child、:nth-child()都会受“非目标元素”干扰。经验不确定结构时先用开发者工具Ctrl F搜一下“子元素排行”别盲写。一个冒号还是两个冒号别装区别真不大但得知道历史原因CSS2 时代全是单冒号CSS3 才把“伪元素”规定成::以和“伪类”区分。规范上伪类单冒号:hover、:focus、:nth-child()…伪元素双冒号::before、::after、::placeholder…但浏览器为了向下兼容单冒号也能用。只是新规范建议写双冒号显得你“专业”。上周同事把::before写成:before结果在 PostCSS 插件里被当变量解析样式全崩全组陪他加班到十一点血与泪的教训实战不用 JS 做“动态提示 图标插入 隔行变色”1. 动态提示纯 CSSinputplaceholder请输入手机号data-msg仅支持大陆11位requiredinput[required]::after{content:attr(data-msg);position:absolute;top:100%;left:0;margin-top:4px;font-size:12px;color:#ff4d4f;white-space:nowrap;opacity:0;transition:opacity 0.3s;}input:invalid:focus{border-color:#ff4d4f;}input:invalid:focus::after{opacity:1;}注意input 本身不能放伪元素解决方案是包一层.field给父元素加::after上面为了演示简写了真实开发别直接抄。2. 图标插入不依赖字体库.search-box::before{content:\1F50D;/* 放大镜 emoji */font-size:20px;margin-right:6px;}不想用 iconfont 又懒得切图emoji 真香就是渲染看系统脸色。3. 隔行变色table、list 通吃tbody tr:nth-child(even){background:#fafafa;}.list li:nth-child(3n1){border-left:4px solid #1890ff;}3n1就是 1、4、7… 行规律自己算小学数学够用了。新手高频翻车 TOP5看看你中几枪优先级爆炸写了a:hover没效果一看项目里还有个a.btn:hover权重更高被按在地上摩擦。解决开发者工具Computed面板看“选择器权重大赛”别硬刚学会接受现实或提升权重。content 不给空字符串::before { content: ; }直接报错必须content: ;哪怕你只想画背景。忘记加 position伪元素绝对定位父元素没position: relative;直接飘到火星。血泪经验写::before前先写parent { position: relative; }。动画卡成 PPT给::after写width过渡但初始没值浏览器无法插值动画失效。解决确保起始与结束值都在可以用transform: scaleX()代替width。SEO 把重要内容塞伪元素搜索引擎抓不到::before/::after里的文本无障碍阅读器也 skip。别把“立即购买”这种核心文案放里面会被老板打死的。开发者工具捉鬼如何肉眼定位伪元素打开 DevTools → Elements → 选中父节点看 DOM 树下方会多出一行::before/::after点击就能审查样式如果死活不显示检查五兄弟content 有无display 是否 inline 导致宽高 0position 是否正确z-index 被谁盖住了overflow 父元素是否 hidden性能冷知识大量 ::after 会拖慢页面我测了写了个 demo列表 1000 行每行::after画彩色小圆点Chrome Performance 面板跑一遍– 首次渲染 48 ms– 同样效果用真实span节点52 ms差距忽略不计。结论现代浏览器对伪元素渲染优化很好别把自己吓尿。但注意别给伪元素加 heavy 动画blur、clip-path 巨耗避免反复重排像width过渡能不用就不用移动端低端机大量阴影 圆角还是谨慎点隐藏技巧用 attr() 做“动态角标”spanclassbadgedata-count8消息/span.badge{position:relative;}.badge::after{content:attr(data-count);position:absolute;top:-8px;right:-8px;padding:2px 6px;font-size:12px;background:#ff4d4f;color:#fff;border-radius:10px;}JS 只需把data-count一改UI 自动同步零 DOM 操作。设计师说“角标颜色随主题”再叠加 CSS 变量:root{--badge-bg:#ff4d4f;}.badge::after{background:var(--badge-bg);}换肤时一行document.documentElement.style.setProperty(--badge-bg, #722ed1)搞定爽到飞起。移动端 :active 和 :hover 的爱恨情仇iOS 上hover会“粘滞”——点一次按钮样式不松手用户怀疑人生。正确姿势media(hover:hover){.btn:hover{background:#40a9ff;}}media(hover:none){.btn:active{background:#096dd9;}}用媒体查询区分设备别一刀切的a:hover写到底。安卓某些机型:active反馈延迟可以给body加{-webkit-tap-highlight-color: transparent;}再手动给反馈细节见真章。组合拳伪类 伪元素 CSS 变量 动态皮肤雏形需求黑夜模式切换按钮边框呼吸灯效果.btn{--hue:200;border:2px solidhsl(var(--hue)80% 50%);transition:border-color 0.3s;}.btn:hover{border-color:hsl(var(--hue)80% 70%);}.btn::after{content:;position:absolute;inset:-2px;border:2px solidhsl(var(--hue)80% 50% / 0);border-radius:inherit;transition:border-color 0.3s;}.btn:hover::after{border-color:hsl(var(--hue)80% 50% / 1);animation:breathe 1.5s infinite;}keyframesbreathe{0%{transform:scale(1);opacity:1;}100%{transform:scale(1.4);opacity:0;}}切主题只需把--hue换成 260紫色、30橙色整站统一连设计师都惊呼“你咋这么快”结语幽灵代码不是鬼是你还没撩动的灵魂伪类、伪元素就像页面里的“气氛组”不扛大梁却能让用户“感觉对了”。掌握它们你能少写一堆 JS少加一堆 span早下班陪对象。别被规范吓住也别瞎炫技——记住重要内容别塞伪元素动画悠着点别整出性能事故写完一定多设备摸一遍特别是安卓低端机今晚有空把项目里那些多余的i classicon-arrow全干掉换成::after然后 git commit -m “feat: 减少无意义标签下班喝酒”。祝你写的代码越来越“有灵魂”我们评论区继续吐槽拜了个拜欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进