作业与练习

7.20 练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body><h1>今日搜索热词</h1>
  <hr>
   <h3> 1、阿卡贝拉</h3>
    <p>阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,
    当时的教会音乐只以人声清唱,并不应用乐器。<a href="music.mp3" >音频示例: 阿
      卡贝拉《千与千寻》</a></p>
    
    <h3>2、翻唱</h3>
    <p> “翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱,包括重新填词
    ,编曲。现在已有不少明星,都在翻唱他人的歌,不断在翻唱中突破自己,给大家
    带来不一样的风格。
  <a href="video.mp4"  >视频示例: 有一种悲伤(翻唱)-《A Kind of Sorrow》</a></p>
</body>
</html>

结果:

 作业

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form action="#">
  账户:<input type="test" name="username">
  <br>
  密码:<input type="password" name="one">
  <br>
  性别:
  <input type="radio" name="r1" value="女">女
  <input type="radio" name="r1" value="男">男
  <br>      
  爱好:
  <input type="checkbox" name="habit" value="smoking">抽烟
  <input type="checkbox" name="habit" value="drink">喝酒
  <input type="checkbox" name="habit" value="perm">烫头
  <br>
  其他:<textarea name="其他" id="qita" cols="30px" rows="10px"></textarea>
  <option selected disabled></option>
  籍贯:<select>
  <option value="sc">四川省</option>
  <option value="yn">云南省</option>
  <option value="gd">广东省</option>
  
     </select>
    
  <br> 
    <button>确认</button><input  type="reset"><button>检测账户是否被注册</button>
  </form>
</body>
</html>

结果

 7.21日练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body align="center">
  <h3 >用户注册</h3>
  <form action="#">
      用户名:<input type="test" name="userName"  >
      <br><br>
      密码:<input type="password" name="pwd">
      <br> <br>
      性别:
      <input type="radio" name="r1" value="男">男
      <input type="radio" name="r1" value="女">女
      <br><br>
      爱好:
      <input type="checkbox" name="唱" value="sing">唱
      <input type="checkbox" name="跳" value="dance">跳
      <input type="checkbox" name="rap" value="rap">rap
      <input type="checkbox" name="打篮球" value="basktabale">打篮球
      <br><br>
      邮箱:
     <input type="emali"  name="email" value="请输入你的邮箱">
      <br><br>
      用户头像:
      <input type="file" name="文件">
      <br><br>
      家庭住址:
      <select name="下拉"  >
          <option value="">请选择你的住址</option> </select>
      <br><br><br><br>
      收货地址
      <select name="shouhuo" id="">
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="重庆">重庆</option>
      <option value="南京">南京</option>
      </select>
      <br><br>
      建议或意见:
      <textarea name="其他" id="qita" cols="30" rows="1">你的建议或意见</textarea>
      <br><br>
      你喜欢的颜色:
      <input type="color">
      注册时间:
      <input type="datetime-local">
      <br><br>
      <button>注册</button>
      <input type="reset">





  </form>
</body>
</html>

结果

作业
<!-- 用外部样式 -->
<!-- 选取主标题(<h1>)将颜色改成粉色。
    选取所有列表项(<li>)。
        选取第一个列表项。背景颜色改为红
        选取最后一个列表项。背景颜色改为绿
        选取容器内带有"class"为"text"的段落。
        选取容器内的第一个盒子。
        选取所有带有"class"为"text"的元素(无论其在容器内还是容器外)。 -->
 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./作业2.1的外部样式.css">
</head>
<body>
  
  <h1>主标题</h1>
  <br>
  <ul>
    <li>项目1</li>
    <li class="text">项目2</li>
    <li>项目3</li>
  </ul>
  <br>
  这是一个段落
  <br>
  <br>
  <div class="container">
    <div>盒子1</div>
    <div class="text">盒子2</div>
  </div>


  <br>
  另一个在容器外的段落
</body>
</html>

h1{
  color: pink;
}

ul li{
}

ul>li:nth-child(1){
  background-color: red;
}


ul>li:nth-last-child(1){
  background-color:green;
}

.container div:first-child{
  
}


input[type="class"]{

}

  .container div:first-child{
  

}

 
.text{

}

结果

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值