设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 没时间了
返回列表 发新帖
查看: 4171|回复: 2

[已解决]没时间了

[复制链接]
张悦颖
发表于 2017-11-26 15:42:54 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
写一个这样的web界面 html css
最佳答案
月排行榜 / 总排行榜
不二如是
2017-11-26 21:18:10
本帖最后由 不二如是 于 2017-11-26 21:19 编辑

时间总会有的，别慌～


Snip20171126_181.png



代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>FishC</title>

  7.     <style>
  8.         h1{
  9.             text-align: center;
  10.         }
  11.         .table{
  12.             margin: 0 auto;
  13.             text-align: center;
  14.             /*背景图尺寸、路径自己调整
  15.             默认是平铺*/
  16.             background:url("FishC.png");
  17.         }
  18.         /*按需添加类即可完成颜色适配
  19.         实现见下方代码*/
  20.         .targetFontBlue{
  21.             color: blue;
  22.         }
  23.         .targetFontRed{
  24.             color: red;
  25.         }

  27.     </style>
  28. </head>
  29. <body>
  30. <!--colspan用来指定单元格横向跨越的列数：colspan就是合并"列"的，colspan=2的话就是合并两列。-->
  31. <!--rowspan用来指定单元格纵向跨越的行数:rowspan就是用来合并"行"的，比如rowspan=2就是合并两行。-->
  32. <h1>表1 第一学期成绩表</h1>
  33. <table border="1"cellpadding="20px" class="table"  >
  34.     <tr>
  35.         <th colspan="8">鱼C工作室（自己想办法去吧）</th>
  36.     </tr>
  37.     <tr class="targetFontBlue">
  38.         <!--纵向合并两行-->
  39.         <th rowspan="2">序号</th>
  40.         <th rowspan="2">学号</th>
  41.         <th rowspan="2">姓名</th>
  42.         <!--横线合并5列-->
  43.         <th colspan="5">第一学期成绩</th>
  44.     </tr>

  46.     <tr class="targetFontBlue">
  47.         <!--前三个被合并了，所有自动从第四位开始-->
  48.         <th>英语</th>
  49.         <th>高数</th>
  50.         <th>学科导论</th>
  51.         <th>就业</th>
  52.         <th>总分</th>
  53.     </tr>

  55.     <tr>
  56.         <td>1</td>
  57.         <td>1019200101</td>
  58.         <td>小甲鱼</td>
  59.         <td>100</td>
  60.         <td class="targetFontRed">100</td>
  61.         <td>100</td>
  62.         <td>100</td>
  63.         <td>400</td>
  64.     </tr>

  66.     <tr>
  67.         <td>2</td>
  68.         <td>1019200101</td>
  69.         <td>？</td>
  70.         <td>0</td>
  71.         <td>0</td>
  72.         <td>0</td>
  73.         <td>0</td>
  74.         <td>0</td>
  75.     </tr>
  76.     <tr>
  77.         <td colspan="3" class="targetFontBlue">课程平均分</td>
  78.         <td>0</td>
  79.         <td>0</td>
  80.         <td>0</td>
  81.         <td>0</td>
  82.         <td>0</td>
  83.     </tr>
  84. </table>


  87. </body>
  88. </html>
复制代码


以防万一的源码： chart.zip (2.02 MB, 下载次数: 12, 售价: 6 鱼币)
图片1.png
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

不二如是
发表于 2017-11-26 21:18:10 | 显示全部楼层    本楼为最佳答案   
本帖最后由 不二如是 于 2017-11-26 21:19 编辑

时间总会有的，别慌～


Snip20171126_181.png



代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>FishC</title>

  7.     <style>
  8.         h1{
  9.             text-align: center;
  10.         }
  11.         .table{
  12.             margin: 0 auto;
  13.             text-align: center;
  14.             /*背景图尺寸、路径自己调整
  15.             默认是平铺*/
  16.             background:url("FishC.png");
  17.         }
  18.         /*按需添加类即可完成颜色适配
  19.         实现见下方代码*/
  20.         .targetFontBlue{
  21.             color: blue;
  22.         }
  23.         .targetFontRed{
  24.             color: red;
  25.         }

  27.     </style>
  28. </head>
  29. <body>
  30. <!--colspan用来指定单元格横向跨越的列数：colspan就是合并"列"的，colspan=2的话就是合并两列。-->
  31. <!--rowspan用来指定单元格纵向跨越的行数:rowspan就是用来合并"行"的，比如rowspan=2就是合并两行。-->
  32. <h1>表1 第一学期成绩表</h1>
  33. <table border="1"cellpadding="20px" class="table"  >
  34.     <tr>
  35.         <th colspan="8">鱼C工作室（自己想办法去吧）</th>
  36.     </tr>
  37.     <tr class="targetFontBlue">
  38.         <!--纵向合并两行-->
  39.         <th rowspan="2">序号</th>
  40.         <th rowspan="2">学号</th>
  41.         <th rowspan="2">姓名</th>
  42.         <!--横线合并5列-->
  43.         <th colspan="5">第一学期成绩</th>
  44.     </tr>

  46.     <tr class="targetFontBlue">
  47.         <!--前三个被合并了，所有自动从第四位开始-->
  48.         <th>英语</th>
  49.         <th>高数</th>
  50.         <th>学科导论</th>
  51.         <th>就业</th>
  52.         <th>总分</th>
  53.     </tr>

  55.     <tr>
  56.         <td>1</td>
  57.         <td>1019200101</td>
  58.         <td>小甲鱼</td>
  59.         <td>100</td>
  60.         <td class="targetFontRed">100</td>
  61.         <td>100</td>
  62.         <td>100</td>
  63.         <td>400</td>
  64.     </tr>

  66.     <tr>
  67.         <td>2</td>
  68.         <td>1019200101</td>
  69.         <td>？</td>
  70.         <td>0</td>
  71.         <td>0</td>
  72.         <td>0</td>
  73.         <td>0</td>
  74.         <td>0</td>
  75.     </tr>
  76.     <tr>
  77.         <td colspan="3" class="targetFontBlue">课程平均分</td>
  78.         <td>0</td>
  79.         <td>0</td>
  80.         <td>0</td>
  81.         <td>0</td>
  82.         <td>0</td>
  83.     </tr>
  84. </table>


  87. </body>
  88. </html>
复制代码


以防万一的源码： chart.zip (2.02 MB, 下载次数: 12, 售价: 6 鱼币)
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

张悦颖
 楼主| 发表于 2017-11-26 21:26:20 | 显示全部楼层
谢谢了我自己写出来了其实
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-7 14:35

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表