【小练习03】CSS-表格（table）--天气预报
表格基础知识链接：http://blog.csdn.net/baidu_37107022/article/details/71713281
练习要求实现如下效果图：
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background: #ebeff7;
}
/*清除表格默认样式*/
table{
border-collapse: collapse;
}
th,td{
padding: 0;
}
table{
width: 640px;
margin: 0 auto;
}
th,td{
border: 1px solid #99b0da;
text-align: center;
}
th{
font: 14px/30px "微软雅黑";
background: #dbe3fa;
}
td{
font: 12px/28px "微软雅黑";
background: #fff;
}
.bg{
background: #f4f7fc;
}
img{
vertical-align: middle;
}
.high{
color: #e54600;
}
.low{
color: #7171d1;
}
.space{
height: 4px;
border: none;
background: #ebeff7;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">日期</th>
<th colspan="2">天气现象</th>
<th>气温</th>
<th>风向</th>
<th>风力</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" class="bg">22日星期五</td>
<td class="bg">白天</td>
<td><img src="img/img_01.gif"/></td>
<td>晴间多云</td>
<td class="high">高温7C</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
<tr>
<td class="bg">夜间</td>
<td><img src="img/img_02.gif"/></td>
<td>晴</td>
<td class="low">低温-4C</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
<tr><td colspan="7" class="space"></td></tr>
<tr>
<td rowspan="2" class="bg">22日星期五</td>
<td class="bg">白天</td>
<td><img src="img/img_01.gif"/></td>
<td>晴间多云</td>
<td class="high">高温7C</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
<tr>
<td class="bg">夜间</td>
<td><img src="img/img_02.gif"/></td>
<td>晴</td>
<td class="low">低温-4C</td>
<td>无持续风向</td>
<td>微风</td>
</tr>
</tbody>
</table>
</body>
</html>
【小练习03】CSS-表格（table）--天气预报的更多相关文章
- css如何让表格table的边框为1像素呢
在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素. 那么我们怎么用css让table的边框为 ...
- BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- amazeui学习笔记--css（HTML元素5）--表格Table
amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名 <table class="am-table"& ...
- Css制作table细线表格
制作细线表格,我想应该是最基本的css知识了,记录下来巩固下. 推荐: table{ border-collapse:collapse; border: 1px solid #000000; } td ...
- 初探css -11 Table表格
CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkiste Maria Anders Germany Bergl ...
- css列表list、表格table
列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式 ...
- 前端03 /css简绍/css选择器
前端03 /css简绍/css选择器 目录 前端03 /css简绍/css选择器 昨日内容回顾 html标签 常用标签 table标签:表格标签 input标签 select下拉框 textarea多 ...
- 0005 表格table
第01阶段.前端基础.表格 表格 table 目标: 理解: 能说出表格用来做什么的 表格的基本结构组成 应用: 能够熟练写出n行n列的表格 能简单的合并单元格 表格作用: 存在即是合理的. 表格 ...
- 2020年12月-第01阶段-前端基础-表格 table
表格 table(会使用) 为了让我们页面显示的更加整齐,我们需要学习三个表(表格.表单.列表) 理解: 能说出表格用来做什么的 表格的基本结构组成 表格作用: 存在即是合理的. 表格的现在还是较为常 ...
- 第 18 章 CSS 表格与列表
学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式 表格有五 ...
随机推荐
- USACO Section 1.1-1 Your Ride Is Here
USACO 1.1-1 Your Ride Is Here 你的飞碟在这儿 众所周知,在每一个彗星后都有一只UFO.这些UFO时常来收集地球上的忠诚支持者.不幸的是,他们的飞碟每次出行都只能带上一组支 ...
- Why we don’t recommend using List<T> in public APIs
不推荐List<T>做API原因有如下两点:1.首先List<T> 设计之初就没有设计成可扩展的,我们不能重新其任何方法.这就意味着,我们操作List<T>的时候却 ...
- less的基本操作
less的四大特性及示例 1.特性一(变量) less写法 @color:#ffffff: body{background-color:@color:} 生成的css body{background- ...
- JavaScript获取html元素的实际宽度和高度
一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offs ...
- cmd中关闭windows2008错误弹窗
net stop sharedaccess reg add HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Windows /v ErrorMode / ...
- 使用ioctl向linux内核传递参数的方法实例
该篇实例是摘自网络(无法追根溯源倒低是哪位"前"辈写的了) 一.应用层 uint16 data16; if ((fd = socket(AF_INET, SOCK_STREAM, ...
- apache配置多个站点
序:这次项目主要是为了给微信客户端添加一个地址,在微信公众号里面添加一个可以访问的app下载页面,说起来很简单,但总不能为了这么小的一个网站新建一个web服务器吧! 现在开始配置,首先必须确认已经在L ...
- openlayers应用“四”：百度地图纠偏续
续前一篇,上一篇提到百度地图纠偏的基本思路,经过经过一天的努力,实现了百度地图坐标偏移参数的提取,步骤以及实现效果如下: 1.数据来源:四川省的省道矢量数据 2.提取坐标偏移参数的过程如下: A.将四 ...
- JDK内置日志系统
1.Java应用中的日志功能 ================= 一般的Java应用程序中都有记录日志的需求,目前主流的记录日志的方法是在应用程序中引入log4j,用log4j来生成日志.其实,JDK ...
- （知识点）JS获取网页高度
网页可见区域的宽:document.body.clientWidth 网页可见区域的高:document.body.clientHeight 网页可见区域的宽:document.body.offset ...