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

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. Web打印使用printThis.js

    <script src="~/Content/JQueryTools/printThis/printThis.js"></script>

  2. Spring框架的反序列化远程代码执行漏洞分析(转)

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  3. 【软件使用】TortoiseSVN版本管理软件使用简单说明

    TortoiseSVN版本管理软件使用简单说明 很多时候在写一个小的项目不想使用github等工具,只想简单在本地搭建一个版本管理器.那么TortoiseSVN就非常适合. 第一步:下载Tortois ...

  4. this(C# 参考)

    原文地址:https://msdn.microsoft.com/zh-cn/library/dk1507sz.aspx this 关键字引用类的当前实例,还可用作扩展方法的第一个参数的修饰符. 注意 ...

  5. Qt之QSS(QDarkStyleSheet)

    简述 关于样式,前面介绍了很多内容,下面分享一个深色样式表,很值得借鉴! 简述 效果 QSS 更多参考 效果 QSS /* * The MIT License (MIT) * * Copyright ...

  6. iOS项目的目录结构和开发流程

    转自无网不剩的博客 网上相关的资源不多,开源的且质量还不错的iOS项目也是少之又少,最近正好跟同事合作了一个iOS项目,来说说自己的一些想法.   目录结构 AppDelegate Models Ma ...

  7. 51nod 1050 循环数组最大子段和

    题目链接:51nod 1050 循环数组最大子段和 #include<stdio.h> #include<algorithm> using namespace std; ; l ...

  8. hdu5883 The Best Path(欧拉路)

    题目链接:hdu5883 The Best Path 比赛第一遍做的时候没有考虑回路要枚举起点的情况导致WA了一发orz 节点 i 的贡献为((du[i] / 2) % 2)* a[i] 欧拉回路的起 ...

  9. Linux 中 10 个有用的命令行补全例子

    在 Linux 系统中,当你输入一个命令,再按两次 TAB 键,就会列出所有以你输入字符开头的可用命令.这并不新鲜,可能你已经知道了.这个功能被称作命令行补全bash completion.默认情况下 ...

  10. sql 查询强制使用HASH连接性能测试比较

    HASH JOIN 散列连接 hash join是CBO 做大数据集连接时的常用方式.优化器扫描小表(或数据源),利用连接键(也就是根据连接字段计算hash 值)在内存中建立hash表,然后扫描大表, ...