目录一、案例一小广告实现1.1 实现效果及要求​编辑1.2 完整代码实现二、案例二百度热榜实现2.1 预期效果与测量准备2.2 测量结果2.3 实现提示2.4 完整代码实现2.5 实际实现效果在网页开发中精准还原设计稿是一项核心技能。本文将通过两个具体案例——小广告模块和百度热榜实现详细展示如何从测量界面尺寸、颜色到最终编写HTML与CSS代码的全过程。一、案例一小广告实现1.1 实现效果及要求根据测量结果小广告模块的具体参数如下整个区域308 * 204边框颜色 d8dad8实心背景 fcfffc标题区域高度 40px下边框为圆点 e8ebe8文字大小 18px颜色 9e9d9a距离左侧 20px正文部分文字大小 16px颜色 898b76距离左侧 25px行高 28px上方边距 10px1.2 完整代码实现!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style .box { width: 308px; height: 204px; border: 2px solid #d8dad8; background-color: #fcfffc; } .title { height: 40px; border-bottom: 2px dotted #e8ebe8; font-size: 18px; padding-left: 20px; } .item { font-size: 16px; color: #898b76; padding-left: 25px; line-height: 28px; padding-top: 10px; } /style /head body div classbox div classtitle广告板/div div classcontent div classitem赔钱清仓甩卖全场一律八折优惠/div div classitem赔钱清仓甩卖全场一律八折优惠/div div classitem赔钱清仓甩卖全场一律八折优惠/div div classitem赔钱清仓甩卖全场一律八折优惠/div /div /div /body /html二、案例二百度热榜实现2.1 预期效果与测量准备2.2 测量结果整个盒子大小536px宽度标题字体框20px加粗纯黑换一换字体大小 20px颜色 0055db刷新图标需要保存内容字体18px行高40px下边框实心 2px 颜色 f3f3f3宽度大概占 80%序号20px大小字体颜色 ffff3背景颜色 1 为 f545452 为 ff85473 为 ffac38其他为 8eb9f5序号和正文中间有 8 像素边距2.3 实现提示使用表格进行布局表格要使用 cellspacing 属性把单元格之间的空隙干掉从百度页面上可以把刷新按钮的图标扒下来使用 vertical-align: bottom; 设置刷新图标否则刷新图标会和文字垂直方向不对齐tr 没有独立的边框td 和 table 才有边框2.4 完整代码实现!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 title百度热榜/title style a { color: blue; text-decoration: none; } a:hover { text-decoration: underline; } table { width: 536px; } .title .col-1 { font-size: 20px; font-weight: bolder; } .col-1 { width: 80%; text-align: left; } .col-2 { font-size: 20px; color: #0055db; width: 20%; text-align: center; } .icon { background-image: url(../个人信息.png); width: 24px; height: 24px; background-size: 100% 100%; display: inline-block; vertical-align: bottom; } .content { font-size: 18px; line-height: 40px; } .content .col-1, .content .col-2 { border-bottom: 2px solid #f3f3f3; } .num { font-size: 20px; color: #fffff3; } .first { background-color: #f54545; padding-right: 8px; } .second { background-color: #ff8547; padding-right: 8px; } .third { background-color: #ffac38; padding-right: 8px; } .other { background-color: #8eb9f5; padding-right: 8px; } /style /head body table cellspacing0px th classtitle col-1百度热榜/th th classtitle col-2a href#换一换span classicon/span/a/th tr classcontent td classcol-1span classnum first1/spana href#浙大回应不开除强奸犯学生/a/td td classcol-2474万/td /tr tr classcontent td classcol-1span classnum second2/spana href#浙大回应不开除强奸犯学生/a/td td classcol-2474万/td /tr tr classcontent td classcol-1span classnum third3/spana href#浙大回应不开除强奸犯学生/a/td td classcol-2474万/td /tr tr classcontent td classcol-1span classnum other4/spana href#浙大回应不开除强奸犯学生/a/td td classcol-2474万/td /tr /table /body /html2.5 实际实现效果