【小练习03】CSS-表格（table）--天气预报

时间：2022-10-23 17:12:27

表格基础知识链接：http://blog.csdn.net/baidu_37107022/article/details/71713281

练习要求实现如下效果图：

【小练习03】CSS-表格（table）--天气预报

代码演示

<!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>

源码地址：http://download.csdn.net/detail/baidu_37107022/9840533

【小练习03】CSS-表格（table）--天气预报的更多相关文章

  1. css如何让表格table的边框为1像素呢

    在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素. 那么我们怎么用css让table的边框为 ...

  2. BootStrap入门教程 &lpar;二&rpar; ：BASE CSS（排版&lpar;Typography&rpar;&comma;表格&lpar;Table&rpar;&comma;表单&lpar;Forms&rpar;&comma;按钮&lpar;Buttons&rpar;）

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  3. amazeui学习笔记--css（HTML元素5）--表格Table

    amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名  <table class="am-table"& ...

  4. Css制作table细线表格

    制作细线表格,我想应该是最基本的css知识了,记录下来巩固下. 推荐: table{ border-collapse:collapse; border: 1px solid #000000; } td ...

  5. 初探css -11 Table表格

    CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkiste Maria Anders Germany Bergl ...

  6. css列表list、表格table

    列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式 ...

  7. 前端03 &sol;css简绍&sol;css选择器

    前端03 /css简绍/css选择器 目录 前端03 /css简绍/css选择器 昨日内容回顾 html标签 常用标签 table标签:表格标签 input标签 select下拉框 textarea多 ...

  8. 0005 表格table

    第01阶段.前端基础.表格 表格 table 目标: 理解: 能说出表格用来做什么的 表格的基本结构组成 应用: 能够熟练写出n行n列的表格 能简单的合并单元格 ​ 表格作用: 存在即是合理的. 表格 ...

  9. 2020年12月-第01阶段-前端基础-表格 table

    表格 table(会使用) 为了让我们页面显示的更加整齐,我们需要学习三个表(表格.表单.列表) 理解: 能说出表格用来做什么的 表格的基本结构组成 表格作用: 存在即是合理的. 表格的现在还是较为常 ...

  10. 第 18 章 CSS 表格与列表

    学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式 表格有五 ...

随机推荐

  1. SAS学习笔记&lt&semi;一&gt&semi;

    三个周末的SAS课程宣告结束, 总结下来 第一周的统计原理简介 第二周/第三周讲解SAS的基本操作. 总体下来,对自己的知识结构有了一个新的梳理,对比大学时期,某个老师一上来就教我们SAS编程,而未考 ...

  2. MYSQL数据类型和where条件判断

    MySQL中常见的数据类型 一.字符型 ① CHAR(N):固定N个字符长度的字符串,如果长度不够自动空格补齐; N的范围 0~255 ② VARCHAR(N): 存储可变长度的字符串,最常用 ③ T ...

  3. Java核心-多线程-并发控制器-Semaphore信号量

    Semaphore是非常有用的一个多线程并发控制组件(Java还有CountDownLatch.CyclicBarrier.Exchanger多线程组件),它相当于是一个并发控制器,是用于管理信号量的 ...

  4. Spark新手入门——2&period;Hadoop集群&lpar;伪分布模式&rpar;安装

    主要包括以下三部分,本文为第二部分: 一. Scala环境准备 查看 二. Hadoop集群(伪分布模式)安装 三. Spark集群(standalone模式)安装 查看 Hadoop集群(伪分布模式 ...

  5. ubuntu修改时区

    1.网上大部分解决办法是命令tzselect,然后选择亚洲-->中国->上海,但很遗憾,一点效果没有: 2.后找到解决办法,运行命令dpkg-reconfigure tzdata,选择As ...

  6. android--获取屏幕高宽度工具类

    //获得屏幕相关的辅助类 public class ScreenUtils { private ScreenUtils() { /* cannot be instantiated */ throw n ...

  7. &OpenCurlyDoubleQuote;Hello World&excl;”团队第七周召开的第六次会议

    博客内容: 一.会议时间 二.会议地点 三.会议成员 四.会议内容 五.todo list 六.会议照片 七.燃尽图 八 .功能说明书 一.会议时间 2017年12月6日  11:20-12:00 二 ...

  8. CentOS6安装各种大数据软件 第八章：Hive安装和配置

    相关文章链接 CentOS6安装各种大数据软件 第一章:各个软件版本介绍 CentOS6安装各种大数据软件 第二章:Linux各个软件启动命令 CentOS6安装各种大数据软件 第三章:Linux基础 ...

  9. 欢迎来怼第二周Scrum会议六（总第十三次）

    一.小组信息 队名:欢迎来怼小组成员队长:田继平成员:李圆圆,葛美义,王伟东,姜珊,邵朔,冉华 小组照片 二.开会信息 时间:2017/10/25  17:19~17:35(总计16min).地点:东 ...

  10. java-四则运算-五-网页版--with刘童格

    <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncodin ...

相关文章