码迷,mamicode.com
首页 > 其他好文 > 详细

页面布局二

时间:2016-08-07 18:46:52      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

一、首先分析布局,可以把页面分成3个部分

技术分享

技术分享

(1)第一行  只有一个单元格,里面只有一张图片

技术分享

(2)第二行  只有一个单元格 一个p标签里包含了4个超链接

技术分享

(3)第三行 两个单元格

技术分享

技术分享

技术分享

主要是第三行 第二列的表格比较复杂,我的思想就是一行一行看,设置rowspan,并把它一列其他被合并的删除掉

二、修饰

第一行 图片距离左边有距离

技术分享

第二行 和页面布局一思想接近就直接贴代码了  主要是结构伪类选择器的应用

技术分享

第三行通过PS测量得知表格是居中的,所以设置表格宽度和居中,然后设置每个td的宽度,和表格之间的距离

技术分享

技术分享

第三行 第一列 设置常见问题这个h3的一些属性

技术分享

设置p标签的大小颜色 以及距离

技术分享

然后设置 H3距离下方文字的距离,p标签距离下方和左边的距离

技术分享

设置第三行第二列div的宽高和背景和Input框距离div左边的距离

技术分享

设置 配送服务收费标   一、配送服务收费标准

技术分享

设置第三行第二列表格中的 每一列的宽度,其实,只需要设置,th宽度就可以,设置文本大小,居中对齐,以及表格距离左边的距离

技术分享

设置最后的p的属性

技术分享

这时候看到和原图有出入,貌似第三行第二列表格高度 设置一下  基本就完成了

技术分享

技术分享

页面布局二

标签:

原文地址:http://www.cnblogs.com/lp-1763501916/p/5746786.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!