zoukankan      html  css  js  c++  java
  • 作业练习:从菜谱跳转到课程表

    菜谱:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>菜谱跳转练习</title>
    </head>
    <body>
    <table border="1px" cellspacing="0px" style="border-color: red" align="left">
        <caption>菜谱跳转练习,我是table的标题</caption>
        <tr>
            <th colspan="3">星期一菜单</th>
        </tr>
        <tr>
            <td rowspan="2">素菜</td>
            <td>青草茄子</td>
            <td>花椒扁豆</td>
        </tr>
        <tr>
            <td>小葱豆腐</td>
            <td>炒白菜</td>
        </tr>
        <tr>
            <td rowspan="2">荤菜</td>
            <td>油焖大虾</td>
            <td>海参鱼翅</td>
        </tr>
        <tr>
            <td>红烧肉
                <a href="课程表.html" target="_blank"><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2846773786,1909168706&fm=58" alt="红烧肉" title="红烧肉" width="150px" height="150px"></a>
            </td>
            <td>烤全羊</td>
        </tr>
    </table>
    
    </body>
    </html>

    效果是:

    菜谱跳转练习,我是table的标题
    星期一菜单
    素菜 青草茄子 花椒扁豆
    小葱豆腐 炒白菜
    荤菜 油焖大虾 海参鱼翅
    红烧肉 红烧肉 烤全羊

    点击图片,跳转到课程表:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>课程表</title>
    </head>
    <body>
        <table id="kechengbiao" border="1px" cellspacing="5px" cellpadding="10px" style="border-color: blue"  >
            <caption>课程表</caption>
            <tr >
                   <th>项目</th>
                   <th colspan="6" align="center">上课</th>
                   <th>休息</th>
            </tr>
            <tr>
                <th>星期</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
                <th>星期日</th>
            </tr>
            <tr>
                <td rowspan="4">上午</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>物理</td>
                <td>化学</td>
                <td>生物</td>
                <td rowspan="4">休息</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>英语</td>
                <td>物理</td>
                <td>化学</td>
                <td>生物</td>
                <td>语文</td>
            </tr>
            <tr>
                <td>英语</td>
                <td>物理</td>
                <td>化学</td>
                <td>生物</td>
                <td>语文</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>物理</td>
                <td>化学</td>
                <td>生物</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>物理</td>
                <td>化学</td>
                <td>生物</td>
                <td rowspan="2">休息</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>英语</td>
                <td>物理</td>
                <td>化学</td>
                <td>生物</td>
                <td>语文</td>
            </tr>
        </table>
    </body>
    </html>
    课程表
    项目上课休息
    星期星期一星期二星期三星期四星期五星期六星期日
    上午 语文 数学 英语 物理 化学 生物 休息
    数学 英语 物理 化学 生物 语文
    英语 物理 化学 生物 语文 数学
    物理 化学 生物 语文 数学 英语
    下午 语文 数学 英语 物理 化学 生物 休息
    数学 英语 物理 化学 生物 语文
  • 相关阅读:
    js全选 反选 不选 代码示例。
    前端超级好用a标签跳转带锚点效果
    10分钟倒计时简易
    点赞投票+1简单jq代码
    登录注册密码可见与不可见jquery简易效果开发
    JS调用函数内部变量有以下两种方法:
    关于clipboard.js复制图片以及文本的随笔
    这是我的第一个博客,我叫小白菜!
    前端之路(一)之W3C是什么?
    知识普及
  • 原文地址:https://www.cnblogs.com/litzhiai/p/8268338.html
Copyright © 2011-2022 走看看