在做作业过程中遇到的一些问题和我的总结

1.作业中给出了一张背景图,并让我在背景图中一片区域写内容

我的思路是将一个div放在这片区域,那么问题就是如何定义div的位置和大小

查阅资料后发现并不复杂,只需要用css定义div的各个属性,那么div就可以以任何大小显示在任何位置

首先定义指定div的id

<div id=123>内容</div>

然后是用css定义div的属性

<style>

#123 {

position:absolute;<!-- 将div设置为绝对位置显示,这样才可以定义left和top属性  -->

left:100px;top:100px;<!-- 意思是div离左边和顶部的距离,也可以看作是坐标,这样div就可以出现在任何位置上 -->

z-index:100;<!-- div可以覆盖div,该值大的覆盖该值小的 -->

width:200px;height:200px; <!-- 设置长和宽 -->

background-color:white; <!-- 设置背景颜色 -->

}

另外在做表格时,发现做出来的表格不整齐,容易因内容而变形,很不好看

将所有td单元格大小统一,同样可以用css解决

<style>

td{

width:150px;height:50px;

bgcolor:green;

}

</style>

需要注意的是,虽然可以定义所有td单元格的大小,但是依然受到table表格大小的限制,若td单元格加起来的大小超过了table的大小,将优先以table的大小显示,表格依然不会整齐。

2016/7/30 div位置设置,表格大小统一的更多相关文章

  1. div位置设置

    div居中显示 margin:0 auto div中的内容居中显示 text-algin:center div靠右显示 float:right 设置div元素的右外边距 margin-right:10 ...

  2. Position a child div relative to parent container in CSS: [设置 子DIV位置 跟 父DIV相关联]

    最近调DIV的位置比较头疼,各种position: relative / absolute google到一篇好文章[http://www.webdevdoor.com/html-css/css-po ...

  3. 黄聪:phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护

    首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把class ...

  4. phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护

    转:http://www.cnblogs.com/huangcong/p/3687665.html 首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包 ...

  5. 获取DOM元素位置和尺寸大小

    JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...

  6. 巧妙使用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

  7. DIV+CSS设置及问题总结

    HTML 中有用的字符实体 注释:实体名称对大小写敏感! 显示结果 描述 实体名称 实体编号   空格     < 小于号 < < > 大于号 > > & ...

  8. 问题:table 可否实现对角线;结果:用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

  9. PHPExcel探索之旅---阶段二 设置表格样式

    1.设置表格的默认样式为水平居中.垂直居中 getDefaultStyle()函数用来设置默认样式 由活动sheet对象来调用,setVertical()函数和setHorizontal()函数分别用 ...

随机推荐

  1. js TAb

    有点乱,用到了自定义getByClass函数.sibling函数 <!DOCTYPE html> <html lang="en"> <head> ...

  2. chrome浏览器下页面顶部出现一条空白解决

    最近遇到页面在chrome浏览器下,顶部会出现一条空白的问题.后来知道是bom头的问题. 1.什么是bom头? BOM签名的意思就是告诉编辑器当前文件采用何种编码,方便编辑器识别,但是BOM虽然在编辑 ...

  3. python知识总结

    LIST:Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素,用[]包裹.例如 classmates = ['Michael', 'Bob', 'T ...

  4. 你不知道的JavaScript--值得你挑战的JavaScript面试题(45题)

    1,以下表达式的运行结果是: ["1","2","3"].map(parseInt) A.["1","2&qu ...

  5. 20145236 《Java程序设计》实验二实验报告

    北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1452 指导教师:娄嘉鹏 实验日期:2016.04.08 实验名称: Java面向对象程序设计 实验内容: 初步掌握单元测试和T ...

  6. 分享一个快速的Json(反)序列化开源项目 Jil

    我们不缺少JSON的序列化库,但我们缺少一个性能非常好的库,这对于网站来说非常重要.今天我发现了Jil. 他是开源的代码: https://github.com/kevin-montrose/Jil ...

  7. JS比较好用的一些方法搜集

    JS比较好用的一些方法搜集 Math.ceil(x) -- 返回大于等于数字参数的最小整数(取整函数),对数字进行上舍入 Math.floor(x)--返回小于等于数字参数的最大整数,对数字进行下舍入 ...

  8. 449. Serialize and Deserialize BST——几乎所有树的面试题目都会回到BFS或者DFS,使用BFS,None节点存#

    Serialization is the process of converting a data structure or object into a sequence of bits so tha ...

  9. PDF 补丁丁 0.4.1.728 测试版发布

    书签编辑器新增预览界面,可查看书签所连接到文档的页数. 该功能将继续完善,请各位关注.

  10. 快速配置 Samba 将 Linux 目录映射为 Windows 驱动器,用于跨平台编程

    一.局域网内的 Linux 服务器上操作步骤: 1.安装samba(CentOS Linux): yum install samba system-config-samba samba-client ...