企业官网建设流程全解析

国土分局网站建设方案,wordpress用户二级域名,做网站联系方式,电子商务网站建设策划说小白前端速成#xff1a;CSS3文本样式属性全搞定#xff08;附避坑指南#xff09;小白前端速成#xff1a;CSS3文本样式属性全搞定#xff08;附避坑指南#xff09;先整点能跑的代码#xff0c;热热场子font-weight#xff1a;别只会写 bold#xff0c;数字才是亲儿…小白前端速成CSS3文本样式属性全搞定附避坑指南小白前端速成CSS3文本样式属性全搞定附避坑指南先整点能跑的代码热热场子font-weight别只会写 bold数字才是亲儿子line-height1.5 和 150% 真不是一个爹text-align-last冷门却是“两端对齐”大救星white-space空格、换行、不折行的总闸text-decoration-skip-ink下划线别再戳 g 的屁股了text-shadow低端安卓消失术word-break 与 overflow-wrap英文单词断头台双子星实战组合拳 1验证码输入框四位分开高亮实战组合拳 2商品标题两行多余省略鼠标悬浮看全文实战组合拳 3移动端新闻列表时间戳右对齐标题自适应排查口诀字糊、字歪、字出去三步走彩蛋几个让同事喊“卧槽”的小骚操作收个尾别把文本样式当“边角料”小白前端速成CSS3文本样式属性全搞定附避坑指南——“哥字又歪了”——“别急先把line-height调成 1.5再请我喝杯奶茶。”这篇文章的诞生源于某个深夜测试小姐姐在群里甩了一张截图“为什么这段文字在 iPhone 12 上像被雷劈过一样行高忽大忽小英文还溢出”我盯着屏幕仿佛听见 CSS 在耳边冷笑“兄弟你连用word-break和overflow-wrap都分不清怪我咯”于是就有了这篇——不装、不端、不拽英文术语纯当在死党群里语音转文字。咱们把 CSS3 里“天天用、总记混、一踩就炸”的文本样式属性一次性唠明白。代码管饱注释管够坑点直接标红。看完还不懂那就把文章转发到群里让同事请你喝喜茶就当交学费。先整点能跑的代码热热场子“ talk is cheap ”的老规矩先甩一个万能文本样式片段以后每开新页面直接复制粘贴再按需删改省得来回翻 MDN。/* 万能文本初始化 - 2026 年还能继续抄 */*{/* 1. 先让盒子说话算话 */box-sizing:border-box;}body{/* 2. 系统字体栈又快又省流量 */font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji;/* 3. 基础字号 16px 是底线别瞎缩小心 40 岁产品经理放大网页 */font-size:16px;/* 4. 1.5 倍行高读屏舒适区 */line-height:1.5;/* 5. 抗锯齿让字在 mac 别发虚 */-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;/* 6. 自动换行英文单词断头台 */overflow-wrap:break-word;}上面这段放项目全局样式里能屏蔽 80% 的“字怎么又出去了”的 bug。剩下的 20%咱们挨个属性拆弹。font-weight别只会写 bold数字才是亲儿子很多人以为font-weight只有normal和bold俩值其实人家是正儿八经的九级阶梯100~900。设计师给的 500 semibold你要是直接写成 bold人家分分钟在 Figma 里把你头像 P 成绿头苍蝇。/* 举个真·电商标题例子 */.price{/* semibold 对应 600别手抖写成 500 */font-weight:600;color:#ff4142;/* 再配个斜体促销那味儿有了 */font-style:italic;}避坑中文网页想用到 100~300 的细体必须确保字体文件里有对应字重否则浏览器直接回退到 normal看着像“伪瘦身”。安卓低端机对font-weight: 500以下支持拉胯表现跟 400 没差提前跟 UI 说好别死磕。line-height1.5 和 150% 真不是一个爹先上代码再讲故事.box{font-size:20px;line-height:1.5;/* 无单位子元素继承的是“比例” */}.child{font-size:40px;/* 子元素变大行高 40 * 1.5 60px */}.box-percent{font-size:20px;line-height:150%;/* 带单位先算成 30px再继承给子元素 */}.child-percent{font-size:40px;/* 子元素行高仍是 30px直接挤爆 */}一句话总结无单位是“活的”带单位是“死的”。做多级嵌套列表、组件库封装时想让孩子自由呼吸就写无单位想一把锁死写 px 或 %。text-align-last冷门却是“两端对齐”大救星产品经理“标题要两端对齐大气”你text-align: justify;一写发现最后一行纹丝不动还是左对齐瞬间尴尬。/* 让最后一行也两端对齐关键在这行 */.justify-fix{text-align:justify;text-align-last:justify;/* IE 9 、安卓 4.4 都认 */}如果还要兼容 IE8那就用“伪元素垫片”老套路.justify-legacy:after{content:;display:inline-block;width:100%;height:0;overflow:hidden;}white-space空格、换行、不折行的总闸前端群里隔三岔五就有人问“为啥复制粘贴的代码前面老有空格”99% 是white-space没搞清。把下面的表格背下来下次面试能救命值换行符空格自动折行场景normal✅合并✅普通段落pre✅保留❌代码块nowrap❌合并❌单行省略pre-wrap✅保留✅微信聊天气泡pre-line✅合并✅用户评论/* 代码高亮块必备 pre-wrap既能保留缩进又能自动换行 */pre.code{white-space:pre-wrap;word-break:break-all;/* 英文路径太长时砍断 */}text-decoration-skip-ink下划线别再戳 g 的屁股了下划线穿过小写 g、j、y 的时候视觉上就像一把刀看着难受。CSS3 直接给了“避让”方案a{text-decoration:underline;text-decoration-skip-ink:auto;/* 自动跳过下行字母 */text-underline-offset:0.2em;/* 再往下挪一丢丢呼吸感 */}可惜 IE 全家桶不支持老项目记得加supports判断supports(text-decoration-skip-ink:auto){a{text-decoration-skip-ink:auto;}}text-shadow低端安卓消失术text-shadow 看着香一上低端机就翻车——原因部分 4.4 以下 WebView 把 shadow 当透明直接不画阴影颜色如果用了 rgba 透明值GPU 合成层会掉帧。保命写法.title-shadow{/* 先写一层实体色兜底再叠一层好看但可消失的 */text-shadow:0 1px 0 #000,0 2px 4pxrgba(0,0,0,.3);}上线前拿微信 X5 内核 小米 6 真机跑一遍别问我是怎么知道的。word-break 与 overflow-wrap英文单词断头台双子星这俩货经常一起出现但分工不同overflow-wrap: break-word—— 只在单词整行放不下的极端情况才拆词word-break: break-all—— 不管三七二十一随时拆连“i”都能单独成行。/* 商品标题两行省略英文别溢出 */.goods-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;/* 优先用温柔的 */word-break:normal;/* 别把单词拆太碎 */}如果后台接口偶尔返回“超长德文”那就升级成word-break:break-word;/* 旧的非标准写法但安卓 4.4 认 */实战组合拳 1验证码输入框四位分开高亮UI 要求四个框输入一位自动跳下一个字体大粗红还要居中。直接上 flex 大数字体 letter-spacingdivclasssms-codeinputmaxlength1inputmaxlength1inputmaxlength1inputmaxlength1/div.sms-code{display:flex;gap:8px;}.sms-code input{width:48px;height:48px;font-size:28px;font-weight:700;color:#ff4142;text-align:center;line-height:48px;/* 让光标垂直居中 */border:1px solid #ddd;border-radius:4px;}/* 去掉选中时的蓝色背景 */.sms-code input:focus{outline:none;border-color:#ff4142;}JS 自动跳转逻辑一行document.querySelectorAll(.sms-code input).forEach((el,idx,arr){el.addEventListener(input,e{if(e.target.value)arr[idx1]?.focus();});});实战组合拳 2商品标题两行多余省略鼠标悬浮看全文.multi-ellipsis{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;/* 兜底 */line-height:1.4;/* 行高太小省略号会被截 */cursor:pointer;}/* 悬浮时展开 */.multi-ellipsis:hover{display:block;-webkit-line-clamp:unset;}坑如果父容器用了overflow: hidden悬浮展开时依旧会被裁记得把overflow移到更外层或者加title属性做兜底。实战组合拳 3移动端新闻列表时间戳右对齐标题自适应liclassnews-itemspanclasstitle震惊CSS 居然能这样写/spantimeclasstime03-21/time/li.news-item{display:flex;align-items:baseline;/* 文字基线对齐视觉更整齐 */font-size:15px;line-height:1.4;}.title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px;}.time{color:#999;font-size:13px;white-space:nowrap;/* 禁止时间换行 */}排查口诀字糊、字歪、字出去三步走字糊先开 devtools → Rendering → 查看图层是否 GPU 加速关一次-webkit-font-smoothing对比排除抗锯齿策略再确认是不是设计师把 PingFang-SC-Light 当 bold 用字体文件没加载。字歪看行高继承是不是父级写了固定 px看 vertical-align图片或 inline-block 把基线撑歪看是否用了transform: scale()放大导致像素不对齐。字出去先检查white-space: nowrap与overflow: hidden是否共存再看英文切到word-break: break-all测试最后看是不是padding把可用宽度挤没了。彩蛋几个让同事喊“卧槽”的小骚操作text-indent 隐藏 placeholder想做“聚焦时 placeholder 位移”效果又不想让 placeholder 占空间input{text-indent:-500px;transition:text-indent .3s;}input:focus{text-indent:0;}currentColor 图标联动图标颜色跟随文字改一处即可.icon-arrow{fill:currentColor;/* SVG 图标 */}.btn-primary{color:#ff4142;}.btn-primary:hover{color:blue;}-webkit-text-stroke 描边字装逼利器.stroke-title{font-size:48px;color:transparent;-webkit-text-stroke:1px #000;text-shadow:3px 3px 0 #ff4142;/* 双层装逼 */}收个尾别把文本样式当“边角料”很多初学者觉得文本样式不如动画、布局高大上其实线上 80% 的 bug 都跟字有关行高挤爆、英文溢出、省略号失踪、字体发虚……你把这篇文章提到的属性写进小抄贴到工位一周之内UI 再也挑不出你像素级的毛病。下次再听到“字有点糊”别慌先喝一口奶茶再甩一句“哥我 text-rendering 都 optimizeLegibility 了要不再换个显示器”欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐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等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进