页面布局一

先分析做题思路

一、布局

1.因为刚刚学到表格布局,所以首先把页面划分为几个部分

2.经过观察,发现这个表格可以分为6行,先把table和tr弄好

3、把每一行的元素写上

(1)第一行 可以分为两列

第一列:一张图片

第二列:一行超链接(我用p包含),自动换行后,一个输入框,一个普通按钮

(2)第二行 是一个单元格

先是一个<hr/>标签

下面一行里面6个超链接,在一行,我自己的思路总习惯用p标签包着

(3)第三行  是一张图片

(4)第四行  在td里面再加一个table 他分为3列(不直接设为3列的原因,是因为合并单元格有难度,第一行我已经设置成2列,可以自己脑补一下合并时候的怪异)

4.1 第一个单元格:有一个标题和图片

4.2 第二个单元格:明显看出标题和文字(文字每个我都用p的话,间距太大,所以就用了换行,因为还没学到ul li列表)

下面的文字都是超链接,因为要设置超链接中汉字和时间的距离,所以加了span

4.3 第三个单元格:明显 标题下面是一个table 4行2列  然后写上对应的内容

(5)第5行

在标题之后,有一个table,5个单元格内容基本相似  都是一个图片  换行,一个标题,一段文字。

(6)第6行

一个单元格,里面两段文字

二 样式

(1)  合并单元格  只有第一行是两列,其余的都是一列,需要在第2,3,4,5,6列写上

(2)  设置第一行第二个td的内容右排列

(3)  设置hr的颜色和宽度

(4)设置第二行p标签宽度,高度,背景颜色 (记得给p标签加上class)

(5)p标签里面 超链接的大小,颜色,下划线 设置超链接之间的间距

(6)设置超链接字体加粗

(7)设置第一个超链接左边的距离 ,用到结构伪类选择器

(8)第四行中,设置标题中文字和图片之间的距离(PS测量得到的)

(9)我发现所有内容挤在一起,是因为没给table加宽度,默认内容撑开宽度,另外默认表格为垂直居中对齐,由于这3列高度不同,所以居中后也是对不齐的,所以让他们向上对齐

在让所有列垂直居上对齐时,我选择的子类选择器,只选择子辈的td让他们垂直居上对齐

(10) 设置超链接中新闻和时间之间的距离,我给时间用span包起来用了margin-left。

(11)设置第三列,文字大小 颜色 给表格加了 class  tab2

(12)设置第三列表格之间的距离

(13)修饰完之后,发现和原图有出入标题和图片应该再向右边一点点,我采用的办法是,给每个td加宽,然后水平居中对齐

(14)这时候标题也居中了,把他拉回来

(15) 图片和超链接之间的距离

(16)  设置项目设置的大小

(17)  设置h4的字体大小

(18)  设置p的文字颜色和大小

(19)为了设置单元格之间的空白,给单元格设置宽度

(20)设置项目设置和表格距离左边的margin

(21)设置最后一单元格,高度,背景颜色,内容居中,字体大小

然后就完成了

时间: 2024-07-29 16:51:33

页面布局一的相关文章

微信小程序页面布局

页面布局: wcml: <view class="page"> <view class="page_hd"> </view> <view class="page_bd"> <view class="section_nav"> <view class="left border_right"> 酒店 </view> <vi

jquery-easyui实现页面布局和增删改查操作(SSH2框架支持)转载

http://blessht.iteye.com/blog/1069749/ 已注册:ooip 关联的csdn 前几天心血来潮用jquery-easyui+spring.struts2.hibernate实现了一个系统的一小部分功能,下面给大家分享一下. 首先看运行效果: [图一:登录页] [图二:页面布局] [图三:用户编辑层] [图四:确认弹出框] 准备 easyui插件简介在这就不赘述了,大家可以在iteye上找到很多该插件的相关消息. 如果页面需要使用easyui插件,需要引进一下js和

HTML页面布局

接下来的下面代码,只是给了一个大的前端编写布局,如果你已经是牛人了,就当没看到,如果是一些初学者,不妨拿去用用,里面也写了一些常用的css样式,现在虽然有很多牛逼的前段框架,用起来也非常得心应手,但是如果你要对自己很多定制化需求,最后肯定是要自己来编写前端页面的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--网页标题-->

关于页面布局

常见的页面布局有好几种,要做一个页面,首先要知道一个页面的大小,拉的第一个div标签的时候切记要定一个具体数值,最好不要用100%来表示, 会影响到整个页面,当你在拉动视口的时候,页面的内容也会随之发生变化.在使用margin改变页面布局的时候一定要注意页面发生的变化,可能一个小细节就可能造成页面混乱. 在使用的浮动的时候要注意浮动的几大特性:浮动会脱离文档流,影响别的元素.浮动的包裹性.子级浮动会造成父级高度塌陷.元素浮动不会穿过padding区域.

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

蓝懿IOS页面布局AuToLayou

今天接触了页面布局的东西,刘国斌老师详细的用图形编程的方式和代码都将解了一遍.代码和stroyboard感觉都比较麻烦,而且逻辑思维要求比较高. Editor菜单上有一个Resolve Auto Layout Issues子菜单.从这个菜单中,选中Update Constraints.就我这个情况来说,这会告诉Interface Builder需要将约束变大64点,像这样: 很好,T-bars又变蓝了,布局是有效的.在Document Outline中,你可以看到Horizontal Space

css基础css页面布局基础

样式可以在HTML中定义,也可以在一个单独的外部样式文件中定义.样式可以分为嵌入式样式表,外部样式表,内联样式表. 外部样式表:首先要建一个后缀为.css的样式表文件,然后在web文档中的<head>段使用<link>标记,这样就可以将一个外部样式表文件链接到文档中. 语法:<link rel="stylesheet" type="text/css" href="样式表的url"/> 嵌入式样式表:在web文档

CSS3页面布局方案

Web页面中的布局,在css3之前,主要使用float属性或者position属性进行页面中的简单布局,但是使用它们也存在一些缺点,比如两栏或者多栏中如果元素的内容高度不一致,则有底部很难对齐的问题.因此在css3中追加了一些新的布局方式,使用这些新的布局方式,除了可以修改之前存在的问题之外,还可以进行更为便捷,更为复杂的页面布局. 我们可以先来看看传统使用float或者position属性布局页面:如下HTML代码: <div style="width:100%;overflow:hid

页面布局和webpart

页面布局和webpart 分类: SharePoint入门2014-10-14 00:13 269人阅读 评论(0) 收藏 举报 SharePointpage layoutwebpart 所有工作都做完毕之后,就可以把Webpart加到主页上了. 为了使主页分布合理,先修改一下Layout.点击右上角的小齿轮,Edit page,页面进入到编辑模式,点击Ribbon上的Text Layout,可以看到SharePoint已经内置了一些layout. 这里选择带有头部和三列的layout: 然后把

Web页面布局方式小结

事实上,本文是在Peter Jerde的How much information can be stored by ordering 52 playing cards文章基础上翻译.改编和扩展而来的.当然这是经过Jerde本人首肯的. 注意本文方法并非最优,也没有完全利用所有的信息空间,只是简单的尝试. 有数字的地方就有信息.所以扑克牌中保存信息不是什么新鲜事. PDF文档点这里:下载 原文(英文)点这里:访问 这里有两个DEMO. 编码DEMO,解码DEMO 首先是"DEEP IN SHALL