寒假提升｜ Day7 CSS 第五部分 #637

2022-12-20T03:24:45Z

giscus[bot]
bot Dec 20, 2022

寒假提升｜ Day7 CSS 第五部分

Coding Blog

https://icodeq.com/2022/2da58fb3ae43/

zkeq · 2022-12-20T11:47:37Z

zkeq
Dec 20, 2022 — with giscus
Maintainer

今日打卡

# Day07 作业布置

## 一. 完成课堂所有的代码

## 二. 自己查一个列表并且完成

## 三. 完成table的作业内容
![作业](https://tva1.sinaimg.cn/large/e6c9d24egy1h0vps9hqn6j21cb0j0di4.jpg)
图片见下方

## 四. 说出表单元素什么情况下使用 `name` 和 `value` ？

## 五. 说出form提交时的属性作用
* action
* method
* target

0 replies

Aueve · 2022-12-20T15:35:44Z

Aueve
Dec 20, 2022 — with giscus

Day07 作业布置

一. 完成课堂所有的代码

二. 自己查一个列表并且完成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <!-- 
    1->先完成结构
    2->重置样式（body/a/ul）
    3->先整体，后局部
    *顺序从外往里，从上往下
    4->去除重复的代码（css）
      * 将重复的代码放到一个单独的class中
      * 不同的代码放到不同的class中
   -->
  <style>

    ul > li {
      margin-top: 15px;
    }

    ul > li > a{
      text-decoration: none;
      color: #333;
      font-weight: 400;
    }
    ul > li > a:hover{
      color: #f00;
    }
    /* 局部 */
    ul > li > .renking{
      display: inline-block;
      width: 24px;
      height: 24px;
      margin-right: 2px;
      text-align: center;
      line-height: 24px;
      font-weight: 700;
      color: #999;
    }

    ul > li .icon{
      position: relative;
      top: 3px;
      left: 10px;
      display: inline-block;
      width: 16px;
      height: 16px;
      text-align: center;
    }

    ul > li .new{
      background-image: url(../图片资源/new.svg);
    }

    ul > li .hot{
      background-image: url(../图片资源/hot.svg);
    }


    /* 伪类：结构伪类 */
    ul > li:nth-child(1) .renking{
      color: #f00;
    }
    ul > li:nth-child(2) .renking{
      color: #00f;
    }
    ul > li:nth-child(3) .renking{
      color: #0f0;
    }


  </style>
</head>
<body>
  <ul>
    <li class="item">
      <span class="renking">1</span>
      <a class="content" href="#">打疫苗不如感染新冠疫苗？官方回应</a>
      <i class="icon new"></i>
    </li>
    <li class="item">
      <span class="renking">2</span>
      <a class="content" href="#">这是感染了放屁株吗？</a>
      <i class="icon hot"></i>
    </li>
    <li class="item">
      <span class="renking">3</span>
      <a class="content" href="#">打疫苗不如感染新冠疫苗？官方回应</a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <span class="renking">4</span>
      <a class="content" href="#">官方：抗原可能出现假阴假阳</a>
      <i class="icon new"></i>
    </li>
    <li class="item">
      <span class="renking">5</span>
      <a class="content" href="#">调毒株产生抗体靠谱吗？砖家解答</a>
      <i class="icon hot"></i>
    </li>
    <li class="item">
      <span class="renking">6</span>
      <a class="content" href="#">这是一条新闻</a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <span class="renking">7</span>
      <a class="content" href="#">这也是一条新闻</a>
      <i class="icon"></i>
    </li>
  </ul>
</body>
</html>

三. 完成table的作业内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    a.item1{
      display: inline-block;
      width: 100px;
      height: 28px;
      text-decoration: none;
      color: #fff;
      background-color: #f00;
      border-radius: 8px
    }
    table{
      text-align: center;
      border-collapse: collapse;
    }
    td{
      
      width: 200px;
      height: 36px;
      padding: 20px;
    }
    .album1{
      background-color: #008c8c;
      font-size: 20px;
    }
    .album2{
      background-color: #316255;
    }
    div{
      color: #999;
    }

  </style>
</head>
<body>
  <table>
    <tr class="album1">
      <td>放映时间</td>
      <td>语言版本</td>
      <td>放映厅</td>
      <td>售价(元)</td>
      <td>选座购票</td>
    </tr>
    <tr class="album2">
      <td rowspan="2">13：15
        <div class="content">15:00散场</div>
      </td>
      <td rowspan="2">国语3D</td>
      <td rowspan="2">2号厅</td>
      <td rowspan="2">￥48.5</td>
      <td rowspan="2">
        <a class="item1" href="#">选座购票</a>
      </td>
    </tr>
    <tr>

    </tr>
    <tr class="album1">
      <td rowspan="2">13:15
        <div class="content">15:00散场</div>
      </td>
      <td rowspan="2">国语3D</td>
      <td rowspan="2">2号厅</td>
      <td rowspan="2">￥48.5</td>
      <td rowspan="2">
        <a class="item1" href="#">选座购票</a>
      </td>
    </tr>
    <tr>

    </tr>
    <tr class="album2">
      <td rowspan="2">13:15
        <div class="content">15:00散场</div>
      </td>
      <td rowspan="2">国语3D</td>
      <td rowspan="2">2号厅</td>
      <td rowspan="2">￥48.5</td>
      <td rowspan="2">
        <a class="item1" href="#">选座购票</a>
      </td>
    </tr>
    <tr>

    </tr>
    <tr class="album1">
      <td rowspan="2">13:15
        <div class="content">15:00散场</div>
      </td>
      <td rowspan="2">国语3D</td>
      <td rowspan="2">2号厅</td>
      <td rowspan="2">￥48.5</td>
      <td rowspan="2">
        <a class="item1" href="#">选座购票</a>
      </td>
    <tr>

    </tr>
    <tr class="album2">
      <td rowspan="2">13:15
        <div class="content">15:00散场</div>
      </td>
      <td rowspan="2">国语3D</td>
      <td rowspan="2">2号厅</td>
      <td rowspan="2">￥48.5</td>
      <td rowspan="2">
        <a class="item1" href="#">选座购票</a>
      </td>
    </tr>
    <tr>

    </tr>
  </table>
</body>
</html>

四. 说出表单元素什么情况下使用name和value？

name：名字在提交数据给服务器时，可用于区分数据类型
- 如果不对name进行写入浏览器无法将所写内容发送给服务器进行储存和编译
value：取值

五. 说出form提交时的属性作用

action
- 用于提交表单数据的请求URL
method
- 请求方法（get和post），默认是get
target
- 在什么地方打开URL（参考a元素的target）

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

好棒！加油很详细 well done !

penndu · 2022-12-20T15:44:47Z

penndu
Dec 20, 2022 — with giscus

我又来打卡了！

1 reply

zkeq Dec 20, 2022 — with giscus
Maintainer

来了来了

wslsy12 · 2022-12-21T07:39:03Z

wslsy12
Dec 21, 2022 — with giscus

Day07 作业布置

一. 完成课堂所有的代码

《水平居中总结》

ul>li .content{

display:inline;

}

ul>li .icon{

display:inline-block;

weight:16px;

height:16px;

blackground-image:...}

1
萧门风骨当如凛凛霜前竹

三. 完成table的作业内容

影院电影放映列表
放映时间	语言版本	放映厅	售价(元)	选座购票
13:15 15:00散场	国语三D	2号厅	￥48.5
13:15 15:00散场	国语三D	2号厅	￥48.5
13:15 15:00散场	国语三D	2号厅	￥48.5
13:15 15:00散场	国语三D	2号厅	￥48.5
13:15 15:00散场	国语三D	2号厅	￥48.5

四. 说出表单元素什么情况下使用name和value？

name元素的作用是后台接收数据时使用的键值对中的键(key) 随着表单的提交而一起提交表单中不可或缺的元素一个form表单中该元素的名称对应不同类型的input是不同的
value是后台接收数据时使用的键值对中的值(value) value可以有默认值

五. 说出form提交时的属性作用

action
- 处理表单提交的URL 一般项目中填写的是用于表单提交时对应的文件路径名
method
- 用于提交方法是get(默认方法)还是post或是其他方法
target
- 在当前页面跳转还是新开页面进行跳转链接有四个值
  - _blank 新开页面
  - _self 当前页面跳转
  - _parent 当前父级页面跳转
  - _top 当前顶层页面跳转

0 replies

W-princess · 2022-12-27T01:44:11Z

W-princess
Dec 27, 2022 — with giscus

二.自己查一个列表并且完成

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
        <style>
            table{
                 text-align: center;
        border-collapse: collapse;
            }
            table tr:first-child{
                font-weight:700;
                font-size:24px;
            }
            table tr:first-child td {
        padding: 20px 0;
      }

      td {
        width: 140px;
        height: 30px;
      }
      table tr:nth-child(n + 3) {
        background-color: rgb(222, 225, 226);
      }
      table tr:nth-child(2n) {
        background-color: rgb(141, 155, 165);
      }

      table tr:nth-child(2) {
        color: #fff;
        background-color: rgb(38, 145, 221);
      }
        </style>
        
    </head>
    <body>
        <table>
            <tr>
            <td colspan="6">场内股票ETF涨幅榜</td>
            </tr>
             <tr>
        <td>序</td>
        <td>代码</td>
        <td>基金场内简称</td>
        <td>涨跌幅(%)</td>
        <td>场内申赎份额</td>
        <td>成交额(万元)</td>
      </tr>
      <tr>
        <td>1</td>
        <td>517960.SH</td>
        <td>AHETF</td>
        <td>5.81</td>
        <td>0</td>
        <td>680</td>
      </tr>

      <tr>
        <td>2</td>
        <td>517960.SH</td>
        <td>AHETF</td>
        <td>5.81</td>
        <td>0</td>
        <td>680</td>
      </tr>
      <tr>
        <td>3</td>
        <td>517960.SH</td>
        <td>AHETF</td>
        <td>5.81</td>
        <td>0</td>
        <td>680</td>
      </tr>
      <tr>
        <td>4</td>
        <td>517960.SH</td>
        <td>AHETF</td>
        <td>5.81</td>
        <td>0</td>
        <td>680</td>
      </tr>
      <tr>
        <td>5</td>
        <td>517960.SH</td>
        <td>AHETF</td>
        <td>5.81</td>
        <td>0</td>
        <td>680</td>
      </tr>
            
        </table>
    </body>
</html>

三.完成table的作业内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        margin: 0;
        padding: 0;
      }
      table {
        text-align: center;
        border-collapse: collapse;
      }

      table tr:nth-child(1) td {
        padding: 10px 0;
        font-size: 24px;
        font-weight: 700;
      }

      table tr:nth-of-type(2n + 2) {
        background-color: rgb(239, 219, 223);
      }

      table tr:nth-of-type(2n + 3) {
        background-color: rgb(235, 183, 193);
      }

      table tr:nth-child(2) {
        font-weight: 700;
      }

      table tr:nth-child(n + 3) td:nth-of-type(4) {
        color: red;
      }

      table td > input {
        padding: 10px;
        font-size: 14px;
        color: #fff;
        background-color: rgb(240, 72, 72);
        border-radius: 13px;
        border: 0;
      }
      td {
        width: 140px;
        height: 60px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="5">影院电影放映列表</td>
      </tr>
      <tr>
        <td>放映时间</td>
        <td>语言版本</td>
        <td>放映厅</td>
        <td>售价(元)</td>
        <td>选座购票</td>
      </tr>
      <tr>
        <td>
          <p>13:15</p>
          <p>15:00散场</p>
        </td>
        <td>国语三D</td>
        <td>2号厅</td>
        <td class="price">￥48.5</td>
        <td>
          <input type="button" value="选座购票" />
        </td>
      </tr>
      <tr>
        <td>
          <p>13:15</p>
          <p>15:00散场</p>
        </td>
        <td>国语三D</td>
        <td>2号厅</td>
        <td>￥48.5</td>
        <td>
          <input type="button" value="选座购票" />
        </td>
      </tr>
      <tr>
        <td>
          <p>13:15</p>
          <p>15:00散场</p>
        </td>
        <td>国语三D</td>
        <td>2号厅</td>
        <td>￥48.5</td>
        <td>
          <input type="button" value="选座购票" />
        </td>
      </tr>
      <tr>
        <td>
          <p>13:15</p>
          <p>15:00散场</p>
        </td>
        <td>国语三D</td>
        <td>2号厅</td>
        <td>￥48.5</td>
        <td>
          <input type="button" value="选座购票" />
        </td>
      </tr>
      <tr>
        <td>
          <p>13:15</p>
          <p>15:00散场</p>
        </td>
        <td>国语三D</td>
        <td>2号厅</td>
        <td>￥48.5</td>
        <td>
          <input type="button" value="选座购票" />
        </td>
      </tr>
    </table>
  </body>
</html>

四。说出表单元素什么情况下使用 name 和 value？

name 元素的作用是后台接收数据时使用的键值对中的键 (key) 随着表单的提交而一起提交表单中不可或缺的元素一个 form 表单中该元素的名称对应不同类型的 input 是不同的
value 是后台接收数据时使用的键值对中的值 (value) value 可以有默认值

五。说出 form 提交时的属性作用

action
- 处理表单提交的 URL 一般项目中填写的是用于表单提交时对应的文件路径名
method
- 用于提交方法是 get (默认方法) 还是 post 或是其他方法
target
- 在当前页面跳转还是新开页面进行跳转链接有四个值
  - _blank 新开页面
  - _self 当前页面跳转
  - _parent 当前父级页面跳转
  - _top 当前顶层页面跳转

0 replies

Beeyll · 2022-12-30T09:03:49Z

Beeyll
Dec 30, 2022 — with giscus

一. 完成课堂所有的代码

二. 自己查一个列表并且完成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ol,li{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    a{
      text-decoration: none;
    }
    a:visited{
      color: darkgrey;
    }
      </style>
    </head>
    <body>
      <h4>特色主题</h4>
    <ol>
    <li>
      <a href="#"> 新品首发</a></li>
    <li> <a href="#"> 台湾售</a></li>
    <li> <a href="#"> 港澳售</a></li>
    <li> <a href="#"> 闪购</a></li>
    <li> <a href="#"> 出海招商</a></li>
    </ol>
</body>
</html>

三. 完成table的作业内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
caption{
  font-size: 30px;
  
}
   table{
       text-align: center;
       border-collapse: collapse;
    }
 td{
        width: 150px;
        height: 40px;
}
input{
        padding: 10px;
        font-size: 14px;
        color: white;
        border: 0;
        background-color: red;
       border-radius: 15px;
}
.price{
  color: red;
}
p{
  margin: 0;
  padding: 10px;
}
table tr{
  background-color: rgb(235, 183, 193);
}
.color{
  background-color: rgb(252, 194, 205);
}
  </style>
</head>
<body>
 
  <table>
     <caption>影院电影放映列表</caption>
    <tr>
      <td>放映时间</td>
      <td>语言版本</td>
      <td>放映厅</td>
      <td>售价(元)</td>
      <td>选座购票</td>
    </tr>
    <tr class="color">
      <td>
        <p>13:15</p>
        <p>15:00散场</p>
      </td>
      <td>国语三D</td>
      <td>2号厅</td>
      <td class="price">￥48.5</td>
      <td>
        <input type="button" value="选座购票" />
      </td>
    </tr>
    <tr>
      <td>
        <p>13:15</p>
        <p>15:00散场</p>
      </td>
      <td>国语三D</td>
      <td>2号厅</td>
      <td class="price">￥48.5</td>
      <td>
        <input type="button" value="选座购票" />
      </td>
    </tr>
    <tr class="color">
      <td>
        <p>13:15</p>
        <p>15:00散场</p>
      </td>
      <td>国语三D</td>
      <td>2号厅</td>
      <td class="price">￥48.5</td>
      <td>
        <input type="button" value="选座购票" />
      </td>
    </tr>
    <tr>
      <td>
        <p>13:15</p>
        <p>15:00散场</p>
      </td>
      <td>国语三D</td>
      <td>2号厅</td>
      <td class="price">￥48.5</td>
      <td>
        <input type="button" value="选座购票" />
      </td>
    </tr>
    <tr class="color">
      <td>
        <p>13:15</p>
        <p>15:00散场</p>
      </td>
      <td>国语三D</td>
      <td>2号厅</td>
      <td class="price">￥48.5</td>
      <td>
        <input type="button" value="选座购票" />
      </td>
    </tr>
  </table>
</body>
</html>

四. 说出表单元素什么情况下使用name和value？

name

用于指定表单的名称，而表单控件中具有name属性的元素会将用户填写的内容提交给服务器（在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效）。

value

是input控件中的默认文本值

五. 说出form提交时的属性作用

action

用于指定接受并处理表单数据的服务器程序的url地址

method

用于设置表单数据的提交方式，其取值为post或get

target

用于选择在当前页面跳转还是新开页面跳转

-blank新开页面
-self当前页面
-parent当前父级页面跳转
-top当前顶层页面跳转

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

寒假提升｜ Day7 CSS 第五部分 #637

{{title}}

Replies: 5 comments 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

寒假提升 ｜ Day7 CSS 第五部分 #637

giscus[bot] bot Dec 20, 2022

寒假提升 ｜ Day7 CSS 第五部分

Replies: 5 comments · 2 replies

zkeq Dec 20, 2022 — with giscus Maintainer

Aueve Dec 20, 2022 — with giscus

Day07 作业布置

一. 完成课堂所有的代码

二. 自己查一个列表并且完成

三. 完成table的作业内容

四. 说出表单元素什么情况下使用name和value？

五. 说出form提交时的属性作用

zkeq Dec 20, 2022 — with giscus Maintainer

penndu Dec 20, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus Maintainer

wslsy12 Dec 21, 2022 — with giscus

Day07 作业布置

一. 完成课堂所有的代码

三. 完成table的作业内容

四. 说出表单元素什么情况下使用name和value？

五. 说出form提交时的属性作用

W-princess Dec 27, 2022 — with giscus

二.自己查一个列表并且完成

三.完成table的作业内容

四。说出表单元素什么情况下使用 name 和 value？

五。说出 form 提交时的属性作用

Beeyll Dec 30, 2022 — with giscus

一. 完成课堂所有的代码

二. 自己查一个列表并且完成

三. 完成table的作业内容

四. 说出表单元素什么情况下使用name和value？

五. 说出form提交时的属性作用

寒假提升｜ Day7 CSS 第五部分 #637

giscus[bot]
bot Dec 20, 2022

寒假提升｜ Day7 CSS 第五部分

Replies: 5 comments 2 replies

zkeq
Dec 20, 2022 — with giscus
Maintainer

Aueve
Dec 20, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

penndu
Dec 20, 2022 — with giscus

zkeq Dec 20, 2022 — with giscus
Maintainer

wslsy12
Dec 21, 2022 — with giscus

W-princess
Dec 27, 2022 — with giscus

Beeyll
Dec 30, 2022 — with giscus