HTML-练习4

愚人钊呀

已于 2023-05-06 14:08:24 修改

阅读量206

点赞数

分类专栏： HTML 文章标签： html

于 2023-05-05 16:08:41 首次发布

本文链接：https://blog.csdn.net/qq_44114187/article/details/130493100

版权

HTML 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.望庐山瀑布

代码：

<!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>望庐山瀑布</title>
    <style>
      p {
        font-size: 14px;
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>望庐山瀑布</h1>
    <p>日照香炉生紫烟，</p>
    <p>遥看瀑布挂前川。</p>
    <p>飞流直下三千尺，</p>
    <p>疑是银河落九天。</p>
  </body>
</html>

2.影视简介

<!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>选择器</title>
    <style>
        h2 {
            color: #003580;
        }

        p {
            font-size: 14px;
            color: #000033;
        }

        .gongsi {
            color: #f00;
            text-decoration: underline;
        }

        .name1 {
            color: #1f87cc;
        }

        .name2 {
            color: #faa53b;
        }

        .name3 {
            color: #0d7114;
        }

        .img1 {
            width: 100px;
            height: 160px;
        }

        .img2 {
            width: 200px;
            height: 130px;
        }
    </style>
</head>

<body>
    <h2>花千骨</h2>
    <p>
        《花千骨》是由
        <text class="gongsi">慈文传媒集团</text>制作并发行，
        <text class="name1">林玉芬、高林豹、梁胜权联合执导，霍建华、赵丽颖 </text>领衔主演，
        <text class="name2">蒋欣、杨烁</text>特别出演，
        <text class="name3">张丹峰、李纯、马可、鲍天琦、安悦溪、徐海乔</text>等主演的古装玄幻仙侠剧。
        该剧改编自fresh果果同名小说，讲述少女花千骨与长留上仙白子画之间关于责任、成长、取舍的纯爱虐恋[1]。
        该剧于2014年5月6日开机，9月15日杀青，8月12日发布中文及英文版的预告片[2]。该剧于2015年6月9日起每周二、周三晚10点在
        <text class="name2">湖南卫视</text>的钻石独播剧场播出。[3]2015年7月5日起，该剧播放时间已经改为每周日、周一晚10点。当天零点在爱奇艺同步更新。[4]
    </p>
    <img class="img1" src="/TP04/04 上机练习素材/01 上机练习素材/练习2：制作影视简介/img/1.jpg" />
    <h2>主要演员</h2>
    <img class="img2" src="/TP04/04 上机练习素材/01 上机练习素材/练习2：制作影视简介/img/2.jpg" />
    <img class="img2" src="/TP04/04 上机练习素材/01 上机练习素材/练习2：制作影视简介/img/3.jpg" />
</body>

</html>

3.游戏

<!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="../TP04/3.开心餐厅.css" >
</head>

<body>
    <img src="../TP04/04 上机练习素材/01 上机练习素材/练习3：制作开心餐厅页面/图片素材/game01.jpg"/>
    <p>
        <img src="../TP04/04 上机练习素材/01 上机练习素材/练习3：制作开心餐厅页面/图片素材/game02.jpg" />
        <br>
        开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。 <br/>
        烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。 <br>
        步步精心经营，细心打理，我们都能成为餐饮大亨哦。 <br>
    </p>
    <p>
    <img src="../TP04/04 上机练习素材/01 上机练习素材/练习3：制作开心餐厅页面/图片素材/game03.jpg">
    <h2 class="f1">如何做菜？</h2>
    <p>1.点击餐厅中的炉灶，打开菜谱，选择自己要做的食物后，进行烹饪。不断点击炉灶，直到食物进入自动烹饪阶段； <br>
        2.每道菜所需要制作的步骤和烹饪的时间不一样，你可以根据自己的时间和偏好来进行选择，还会有各地特色食物供应哦； <br>
        3.烹饪完毕的食物要及时端到餐台上，否则过一段时间会腐坏； <br>
        4.食物放在餐台上后，服务员会自动端给顾客，顾客吃完后会付钱给你。</p>
    <h2>如何经营餐厅？</h2>
    <p>1.自己做老板，当大厨，雇佣好友来做服务员为你打工。心情越好的员工效率越高。员工兼职的份数越少，工作的时间越短心情越好；好友间亲密度越高，可雇用的时间越长； <br>
        2.随着等级的升高，可雇佣的员工、可购买的炉灶、餐台、经营面积都会随之增加； <br>
        3.餐桌椅的摆放位置也很有讲究，它会影响顾客和服务员行走路程。</p>
    <h2> 如何吸引顾客？</h2>
    <p> 1.美誉度决定了餐厅的客流量，美誉度高的时候来餐厅的顾客多，美誉度低的时候来餐厅的顾客少； <br>
        2.如果不需要等待，就能及时享用到食物，顾客就会满意地增加餐厅美誉度；与之相反，如果没有吃到食物就离开的顾客会降低美誉度； <br>
        3.总而言之，储备充足的食物、及时的服务、足够的餐桌椅是必不可少的！</p>
    <h2>如何和好友互动？</h2>
    <p> 1.不忍眼睁睁看好友餐厅的食物腐坏，那就帮忙端到餐台吧！自己还可以获得经验值奖励； <br>
        2.仓库里的东西可以赠送给好友，直接拖拽到礼物即可赠送；拖拽到收银即可出售。注意哦，每个级别能收到礼物的总价值是有上限的； <br>
        3.系统的额外食物奖励可和好友分享，把分享消息发布到开心网动态上，让朋友们一起感受快乐！每天最多可以从5位好友的餐厅领取免费食物，食物将被放入仓库的冷藏室里，可出售给系统，也可以拖到餐台上卖给顾客； <br>
        4.在好友需要帮助的时候，给予帮忙，当然啦，你也可以给好友捣捣乱、使使坏。作为奖励，你也会获得经验值和现金。 <br></p>


    </p>
    <p> <img src="../TP04/04 上机练习素材/01 上机练习素材/练习3：制作开心餐厅页面/图片素材/game04.jpg"><br>
        开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。 <br>
        烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。 <br>
        步步精心经营，细心打理，我们都能成为餐饮大亨哦。</p>

</body>

</html>

css:

p {
  font-size: 14px;
}
body h2 {
  font-size: 16px;
}
.f1 {
  color: red;
}
.f1 ~ h2 {
  color: blue;
}
body > img {
  width: 887px;
  height: 439px;
}

4.奇异

<!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="/TP04/4.爱奇艺.css" />
  </head>
  <body>
    <h2>热播</h2>
    <ul>
      <li>
        <img
          src="./04 上机练习素材/01 上机练习素材/练习4：制作爱奇异视频播放列表/image/img1.png"
        />
        <h3>神武赵子龙</h3>
        <p>怒，林更新不抱网红抱女神</p>
        <p>点击次数：242445次</p>
      </li>

      <li>
        <img
          src="./04 上机练习素材/01 上机练习素材/练习4：制作爱奇异视频播放列表/image/img2.png"
        />
        <h3>旋风十一人</h3>
        <p>胡歌变教练在撩前女友</p>
        <p>点击次数：242445次</p>
      </li>

      <li>
        <img
          src="./04 上机练习素材/01 上机练习素材/练习4：制作爱奇异视频播放列表/image/img3.png"
        />
        <h3>太阳的后裔</h3>
        <p>宋慧乔吃嫩草</p>
        <p>点击次数：242445次</p>
      </li>

      <li>
        <img
          src="./04 上机练习素材/01 上机练习素材/练习4：制作爱奇异视频播放列表/image/img4.png"
        />
        <h3>山海经之赤影传说</h3>
        <p>娜扎张翰再度联手</p>
        <p>点击次数：242445次</p>
      </li>
    </ul>
  </body>
</html>

css：

* {
  list-style: none;
}
li {
  float: left;
  width: 25%;
}

/* li > h3 {
  font-size: 16px;
  color: #4d4d4d;
} */

h3:first-of-type {
  font-size: 16px;
  color: red;
}

p:first-of-type {
  font-size: 14px;
  color: #640000;
}
p:last-of-type {
  font-size: 12px;
  color: blue;
}