一、首先分析布局,可以把页面分成3个部分
(1)第一行 只有一个单元格,里面只有一张图片
(2)第二行 只有一个单元格 一个p标签里包含了4个超链接
(3)第三行 两个单元格
主要是第三行 第二列的表格比较复杂,我的思想就是一行一行看,设置rowspan,并把它一列其他被合并的删除掉
二、修饰
第一行 图片距离左边有距离
第二行 和页面布局一思想接近就直接贴代码了 主要是结构伪类选择器的应用
第三行通过PS测量得知表格是居中的,所以设置表格宽度和居中,然后设置每个td的宽度,和表格之间的距离
第三行 第一列 设置常见问题这个h3的一些属性
设置p标签的大小颜色 以及距离
然后设置 H3距离下方文字的距离,p标签距离下方和左边的距离
设置第三行第二列div的宽高和背景和Input框距离div左边的距离
设置 配送服务收费标 一、配送服务收费标准
设置第三行第二列表格中的 每一列的宽度,其实,只需要设置,th宽度就可以,设置文本大小,居中对齐,以及表格距离左边的距离
设置最后的p的属性
这时候看到和原图有出入,貌似第三行第二列表格高度 设置一下 基本就完成了
时间: 2024-10-20 20:12:47