__x__(42)0910第六天__表格布局 老旧的布局方法
table 布局
不易于维护，耦合太严重了。
不利于搜索引擎检索。
效果图：
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title> <link rel="stylesheet" type="text/css" href="css/tableweb.css" />
</head> <body>
Hello Web!` <br />
table 是<b>块元素</b>，独占一行 <table id="myweb">
<tbody>
<tr>
<td id="myhead"></td>
</tr> <tr>
<td>
<table id="mybody">
<tbody>
<tr>
<td id="leftside"></td>
<td id="rightcontent"></td>
</tr>
</tbody>
</table>
</td>
</tr> <tr>
<td id="myfoot"></td>
</tr>
</tbody>
</table>
</body>
</html>
css代码：
@charset "utf-8";
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #3e4e54;
}
#myweb{
margin: 0px auto;
width: 100%;
height: 700px;
/* 单元格之间的距离。*/
border-spacing: 0px;
/* 表格的边框合并。设置以后 border-spacing 自动失效*/
border-collapse: collapse;
}
#myweb th,td{
border: 1px yellow solid;
}
#myhead,#myfoot{
width: 100%;
height: 150px;
}
#mybody{
margin: 0px auto;
width: 100%;
height: 100%;
/* 单元格之间的距离。*/
border-spacing: 0px;
/* 表格的边框合并。设置以后 border-spacing 自动失效*/
border-collapse: collapse;
}
#leftside{
width: 20%;
}
#rightcontent{
width: 80%;
}
__x__(42)0910第六天__表格布局 老旧的布局方法的更多相关文章
- __x__(44)0910第六天__表单
form表单: form必须属性:action,指定一个服务器地址. 若希望表单中的数据发送给服务器,必须设置name属性. 用户填写的信息,将会追加在url地址?后面,以查询字符串的形式发送给服务器 ...
- __x__(45)0910第六天__各种表单
效果图: html代码: <!doctype html> <html> <head> <meta charset="utf-8" /> ...
- __x__(46)0910第六天__框架集
框架集frameset 和 内联框架iframe 的作用类似: 在一个页面中,引入其他的外部html页面. 框架集可以同时引入多个页面. 在 html5 中,推荐使用框架集,而不推荐使用iframe ...
- __x__(49)0910第六天__命名规范
id class 命名规范: 小驼峰命名法: aaaBbbCcc,helloWorld 大驼峰命名法: AaaBbbCcc,HelloWorld 匈牙利命名法: 类型+描述 formUserName, ...
- __x__(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷
<div class="box1"> <tabl></table> <div class="box2">< ...
- __x__(47)0910第六天__IE6到IE11对于包含中文路径的png显示问题
问题:IE6额外地除了中文路径外,对于png24的支持度不高,以致于无法透明. 解决方法1,png8 替换: png8 比 png24 小,质量较低,但是在这里可以替代,以解决问题. 使用 ps 打开 ...
- __x__(48)0910第六天__CSS Hack
CSS Hack: 不到万不得已,不要使用.不易于维护. 有一些情况,需要一段特殊代码在遇到特殊浏览器环境才执行,而在其他条件下,不执行. 此时,CSS Hack 就能实现. CSS Hack 实际上 ...
- 浅谈分析表格布局与Div+CSS布局的区别
(1)表格布局 表格布局容易掌握,布局方便.但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距,这样布局的网页中表格会生成大量难以阅读和维护的代码:而且表格布局的网页要等整个表 ...
- Bootstrap -- 表格样式、表单布局
Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...
随机推荐
- HTML（九）HTML 条件注释规范
HTML 条件注释(hack常用) IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句,作用是可以灵活的为不同IE版本浏览器导入不同html元素.很显然这种方法的最大好处就在于属于微软官方给出的 ...
- Linux输入法问题
本篇博文简单介绍一下介绍Linux输入相关问题及解决方案 关于Invalid UTF-8参见https://www.baidu.com/link?url=QDh2Fa1uJcmyiaKZBzAFkNn ...
- Mysql MGR架构误操作引发的问题处理
[背景介绍] 故障方描述:一次用户刷权限的时候不小心把数据库用户表记录删掉了,执行之后发现不对后重建用户,杀掉进程后重新MGR启动报错. [报错信息] 2018-06-13T12:47:41.4055 ...
- [物理学与PDEs]第1章习题3 常场强下电势的定解问题
在一场强为 ${\bf E}_0$ (${\bf E}_0$ 为常向量) 的电场中, 置入一个半径为 $R$ 的导电球体, 试导出球外电势所满足的方程及相应的定解条件. 解答: 设导电球体为 $B_R ...
- 第29月第2天 charles
1. https://www.jianshu.com/p/55a8c84e0f24
- rest_framework框架的认识
它是基于Django的,帮助我们快速开发符合RESTful规范的接口框架. 一 路由 可以通过路由as_view()传参 根据请求方式的不同执行对应不同的方法 在routers模块下 封装了很多关于 ...
- 007_wireshark分析TCP的三次握手和四次断开
要想进行抓包分析,必须先了解TCP的原理.这里介绍了TCP的建立连接的三次握手和断开连接的四次握手. 一.前言:介绍三次握手之前,先介绍TCP层的几个FLAGS字段,这个字段有如下的几种标示 SYN表 ...
- 51nod--1079 中国剩余定理
题目: 1079 中国剩余定理 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 一个正整数K,给出K Mod 一些质数的结果,求符合条件的最小的K.例如,K ...
- ESP8266交叉编译器xtensa-lx106-elf 在Linux下编译与生成
原作者:杭州_燕十三 来源:CSDN 原文:https://blog.csdn.net/flyingcys/article/details/71357261 版权声明:本文为博主原创文章,转载请附上博 ...
- ansible的tests
Ansible的tests : 路径 /usr/lib/python2.7/site-packages/ansible/plugins/test core.py # failure testing ' ...