定制设计一个简单的网页设计HTML5作业

前言：

HTML5是Web定制设计中核心语言HTML的规范，定制设计用户使用任何手段进行定制设计网页浏览时看到的内容原本都是HTML格式的，定制设计在浏览器中通过一些技定制设计术处理将其转换成为了定制设计可识别的信息。HTML5在从前HTML4.01定制设计的基础上进行了一定的改进，定制设计虽然技术人员在开发过定制设计程中可能不会将这些新定制设计技术投入应用，定制设计但是对于该种技术的新特性，定制设计技术人员是必须要有所了解的。

定制设计一直走在路上🏔

🐒设计要求：

（1）定制设计网站页面数量不少于4个，定制设计文件命名规范，定制设计网站结构要求层次清楚，定制设计目录结构清晰，代码缩进规整。（4分）

（2）采用HTML结构标记（或div标记）+CSS进行整体布局定位。（5分）

（3）网站首页栏目数量不能少于3个，各栏目要能正确链接到相应栏目子页面，同时各栏目页面也能正确返回到网站首页。（3分）

（4）网站页面标题、图片图标等要符合网站主题。（2分）

（5）网站页面中要有列表。（2分）

（6）网站页面中要含有表单（form）。（3分）

（7）网站内容应具有原创性，内容充实。（7分）

（8）网站整体色系符合视觉习惯，布局合理美观。（4分）

🐒首页.html：

此次我设计的页面为古诗词页面，含有标题，古诗词，推荐作者，@baidu4块内容

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.             <meta content="width=device-width, initial-scale=1.0" name="viewport">
  6.                 <title>
  7.                     古诗词大全
  8.                 </title>
  9.                 <link href="./style.css" rel="stylesheet" type="text/css">
  10.                 </link>
  11.             </meta>
  12.         </meta>
  13.     </head>
  14.     <body>
  15.         <div id="con">
  16.             <div id="a">
  17.                 <h3>
  18.                     古诗词大全
  19.                 </h3>
  20.             </div>
  21.             <div id="b">
  22.                 <div id="d">
  23.                     <br/>
  24.                     <h5>
  25.                         推荐作者
  26.                         <br/>
  27.                         <hr/>
  28.                         <br/>
  29.                     </h5>
  30.                     <div>
  31.                         <img alt="刘禹锡" height="100px" position="absolute" src="images/刘禹锡.jpg" width="80px"/>
  32.                         <img alt="杨万里" height="100px" position="absolute" src="images/杨万里.jpg" width="80px"/>
  33.                         <img alt="柳宗元" height="100px" position="absolute" src="images/柳宗元.jpg" width="80px"/>
  34.                     </div>
  35.                     <div>
  36.                         <img alt="" height="300" src="images/shiren.jpg" width="250">
  37.                         </img>
  38.                     </div>
  39.                 </div>
  40.                 <div id="f">
  41.                     <br/>
  42.                     <h4>
  43.                         古诗词
  44.                     </h4>
  45.                     <hr/>
  46.                     <li>
  47.                         <a href="first.html">
  48.                             将进酒
  49.                         </a>
  50.                         <p>
  51.                             [作者]李白 [朝代]唐
  52.                             <br/>
  53.                             君不见黄河之水天上来，奔流到海不复回。
  54.                             <br/>
  55.                             君不见高堂明镜悲白发，朝如青丝暮成雪。
  56.                             <br/>
  57.                             ......
  58.                             <br/>
  59.                         </p>
  60.                     </li>
  61.                     <li>
  62.                         <a href="second.html">
  63.                             沁园春·长沙
  64.                         </a>
  65.                         <p>
  66.                             [作者]毛泽东
  67.                             <br/>
  68.                             独立寒秋，湘江北去，橘子洲头。
  69.                             <br/>
  70.                             看万山红遍，层林尽染；漫江碧透，百舸争流。
  71.                             <br/>
  72.                             ......
  73.                             <br/>
  74.                         </p>
  75.                     </li>
  76.                     <li>
  77.                         <a href="thired.html">
  78.                             沁园春·雪
  79.                         </a>
  80.                         <p>
  81.                             [作者]毛泽东
  82.                             <br/>
  83.                             北国风光，千里冰封，万里雪飘。
  84.                             <br/>
  85.                             望长城内外，惟余莽莽；大河上下，顿失滔滔。
  86.                             <br/>
  87.                             ......
  88.                             <br/>
  89.                         </p>
  90.                     </li>
  91.                     <li>
  92.                         <a href="">
  93.                             送元二使安西
  94.                         </a>
  95.                         <p>
  96.                             [作者]王维 [朝代]唐
  97.                             <br/>
  98.                             渭城朝雨浥轻尘，客舍青青柳色新。
  99.                             <br/>
  100.                             劝君更尽一杯酒，西出阳关无故人。
  101.                             <br/>
  102.                         </p>
  103.                     </li>
  104.                 </div>
  105.             </div>
  106.             <div id="c">
  107.                 <p id="copyright">
  108.                     © Baidu
  109.                     <a href="http://www.baidu.com/duty/">
  110.                         使用百度前必读
  111.                     </a>
  112.                     <a href="http://www.baidu.com">
  113.                         百度首页
  114.                     </a>
  115.                     <a href="/s" style="display:none">
  116.                         站内搜索
  117.                     </a>
  118.                     <a href="http://help.baidu.com/newadd?prod_id=8&category=1">
  119.                         问题反馈
  120.                     </a>
  121.                 </p>
  122.             </div>
  123.         </div>
  124.     </body>
  125. </html>

🐒分页.html：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.             <meta content="width=device-width, initial-scale=1.0" name="viewport">
  6.                 <title>
  7.                     Enovo将进酒
  8.                 </title>
  9.             </meta>
  10.         </meta>
  11.         <style typr="text/css">
  12.             hr{
  13.                 background-color: #303841;
  14.                 border: none;
  15.                 height: 1px;
  16.                 width: 100%;
  17.             }
  18.             p{
  19.                 font-family: 楷书;
  20.             }
  21.         </style>
  22.     </head>
  23.     <body>
  24.         <div align="center" id="container">
  25.             <div class="select">
  26.                 <a href="index.html">
  27.                     首页 |
  28.                 </a>
  29.                 <a href="first.html">
  30.                     将进酒 |
  31.                 </a>
  32.                 <a href="second.html">
  33.                     沁园春·长沙 |
  34.                 </a>
  35.                 <a href="thired.html">
  36.                     沁园春·雪
  37.                 </a>
  38.                 <hr/>
  39.                 <a href="oddments.html">
  40.                     附页
  41.                 </a>
  42.             </div>
  43.             <hr/>
  44.             <img alt="" height="150px" src="images/qiang.jpg" width="200px">
  45.                 <div id="contain">
  46.                     <h1>
  47.                         将进酒
  48.                     </h1>
  49.                     <p>
  50.                         君不见黄河之水天上来，奔流到海不复回。
  51.                     </p>
  52.                     <p>
  53.                         君不见高堂明镜悲白发，朝如青丝暮成雪。
  54.                     </p>
  55.                     <p>
  56.                         人生得意须尽欢，莫使金樽空对月。
  57.                     </p>
  58.                     <p>
  59.                         天生我材必有用，千金散尽还复来。
  60.                     </p>
  61.                     <p>
  62.                         烹羊宰牛且为乐，会须一饮三百杯。
  63.                     </p>
  64.                     <p>
  65.                         岑夫子，丹丘生，将进酒，杯莫停。
  66.                     </p>
  67.                     <p>
  68.                         与君歌一曲，请君为我倾耳听。
  69.                     </p>
  70.                     <p>
  71.                         钟鼓馔玉不足贵，但愿长醉不愿醒。
  72.                     </p>
  73.                     <p>
  74.                         陈王昔时宴平乐，斗酒十千恣欢谑。
  75.                     </p>
  76.                     <p>
  77.                         主人何为言少钱，径须沽取对君酌。
  78.                     </p>
  79.                     <p>
  80.                         五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。
  81.                     </p>
  82.                 </div>
  83.             </img>
  84.         </div>
  85.         <hr/>
  86.         <div class="exp">
  87.             <p>
  88.                 1.岑夫子:人名
  89.             </p>
  90.             <p>
  91.                 2.丹丘生:人名
  92.             </p>
  93.         </div>
  94.     </body>
  95. </html>

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.             <meta content="width=device-width, initial-scale=1.0" name="viewport">
  6.                 <title>
  7.                     Enovo沁园春·长沙
  8.                 </title>
  9.             </meta>
  10.         </meta>
  11.         <style typr="text/css">
  12.             hr{
  13.                 background-color: #303841;
  14.                 border: none;
  15.                 height: 1px;
  16.                 width: 100%;
  17.             }
  18.             p{
  19.                 font-family: 楷书;
  20.             }
  21.         </style>
  22.     </head>
  23.     <body>
  24.         <div align="center" id="container">
  25.             <div id="navi">
  26.                 <a href="index.html">
  27.                     首页 |
  28.                 </a>
  29.                 <a href="first.html">
  30.                     将进酒 |
  31.                 </a>
  32.                 <a href="second.html">
  33.                     沁园春·长沙 |
  34.                 </a>
  35.                 <a href="thired.html">
  36.                     沁园春·雪
  37.                 </a>
  38.                 <hr/>
  39.                 <a href="oddments.html">
  40.                     附页
  41.                 </a>
  42.             </div>
  43.             <hr/>
  44.             <img alt="" height="150px" src="images/chang.jpg" width="200px">
  45.                 <div id="contain">
  46.                     <h1>
  47.                         沁园春·长沙
  48.                     </h1>
  49.                     <p>
  50.                         独立寒秋，湘江北去，橘子洲头。
  51.                     </p>
  52.                     <p>
  53.                         看万山红遍，层林尽染；漫江碧透，百舸争流。
  54.                     </p>
  55.                     <p>
  56.                         鹰击长空，鱼翔浅底，万类霜天竞自由。
  57.                     </p>
  58.                     <p>
  59.                         怅寥廓，问苍茫大地，谁主沉浮？
  60.                     </p>
  61.                     <p>
  62.                         携来百侣曾游，忆往昔峥嵘岁月稠。
  63.                     </p>
  64.                     <p>
  65.                         恰同学少年，风华正茂；书生意气，挥斥方遒。
  66.                     </p>
  67.                     <p>
  68.                         指点江山，激扬文字，粪土当年万户侯。
  69.                     </p>
  70.                     <p>
  71.                         曾记否，到中流击水，浪遏飞舟？
  72.                     </p>
  73.                 </div>
  74.             </img>
  75.         </div>
  76.         <hr/>
  77.         <div class="exp">
  78.             <p>
  79.                 1.浪遏飞舟:
  80.             </p>
  81.             <p>
  82.                 2.万户侯:古代官职
  83.             </p>
  84.         </div>
  85.     </body>
  86. </html>

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.             <meta content="width=device-width, initial-scale=1.0" name="viewport">
  6.                 <title>
  7.                     Enovo沁园春·雪
  8.                 </title>
  9.             </meta>
  10.         </meta>
  11.         <style typr="text/css">
  12.             hr{
  13.                 background-color: #303841;
  14.                 border: none;
  15.                 height: 1px;
  16.                 width: 100%;
  17.             }
  18.             p{
  19.                 font-family: 楷书;
  20.             }
  21.         </style>
  22.     </head>
  23.     <body>
  24.         <div align="center" id="container">
  25.             <div id="navi">
  26.                 <a href="index.html">
  27.                     首页 |
  28.                 </a>
  29.                 <a href="first.html">
  30.                     将进酒 |
  31.                 </a>
  32.                 <a href="second.html">
  33.                     沁园春·长沙 |
  34.                 </a>
  35.                 <a href="thired.html">
  36.                     沁园春·雪
  37.                 </a>
  38.                 <hr/>
  39.                 <a href="oddments.html">
  40.                     附页
  41.                 </a>
  42.             </div>
  43.             <hr/>
  44.             <img alt="" height="150px" src="images/xue.jpg" width="200px">
  45.                 <div id="contain">
  46.                     <h1>
  47.                         沁园春·雪
  48.                     </h1>
  49.                     <p>
  50.                         北国风光，千里冰封，万里雪飘。
  51.                     </p>
  52.                     <p>
  53.                         望长城内外，惟余莽莽；大河上下，顿失滔滔。
  54.                     </p>
  55.                     <p>
  56.                         山舞银蛇，原驰蜡象，欲与天公试比高。
  57.                     </p>
  58.                     <p>
  59.                         须晴日，看红装素裹，分外妖娆。
  60.                     </p>
  61.                     <p>
  62.                         江山如此多娇，引无数英雄竞折腰。
  63.                     </p>
  64.                     <p>
  65.                         惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
  66.                     </p>
  67.                     <p>
  68.                         <p>
  69.                             俱往矣，数风流人物，还看今朝。
  70.                         </p>
  71.                     </p>
  72.                 </div>
  73.             </img>
  74.         </div>
  75.         <hr/>
  76.         <div class="exp">
  77.             <p>
  78.                 1.今朝:
  79.             </p>
  80.             <p>
  81.                 2.唐宗宋祖:皇帝
  82.             </p>
  83.         </div>
  84.     </body>
  85. </html>

 

 

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.             <meta content="width=device-width, initial-scale=1" name="viewport">
  6.                 <title>
  7.                     附页
  8.                 </title>
  9.             </meta>
  10.         </meta>
  11.         <style type="text/css">
  12.             body{
  13.                 background: url(images/de.jpg);
  14.                 width: 100%;
  15.             }
  16.             hr{
  17.                 background-color: #c7cbd1;
  18.                 border: none;
  19.                 height: 1px;
  20.                 width: 100%;
  21.             }
  22.         </style>
  23.     </head>
  24.     <body>
  25.         <form>
  26.             <div align="center" id="container">
  27.                 <div id="navi">
  28.                     <a href="index.html">
  29.                         首页 |
  30.                     </a>
  31.                     <a href="first.html">
  32.                         将进酒 |
  33.                     </a>
  34.                     <a href="second.html">
  35.                         沁园春·长沙 |
  36.                     </a>
  37.                     <a href="thired.html">
  38.                         沁园春·雪
  39.                     </a>
  40.                     <hr/>
  41.                     <a href="oddments.html">
  42.                         附页
  43.                     </a>
  44.                 </div>
  45.                 <hr/>
  46.             </div>
  47.             <hr/>
  48.             <p>
  49.                 诗词，
  50. 是指以古体诗、近体诗和格律词为代表的中国古代传统诗歌。亦是汉字文化圈的特色之一。
  51.             </p>
  52.             <h4>
  53.                 古诗词考试频率：
  54.             </h4>
  55.             <ol>
  56.                 <li>
  57.                     唐:
  58.                 </li>
  59.                 <ol>
  60.                     <li>
  61.                         锦瑟【李商隐】
  62.                     </li>
  63.                     <li>
  64.                         登高【杜甫】
  65.                     </li>
  66.                     <li>
  67.                         雁门太守行【李贺】
  68.                     </li>
  69.                 </ol>
  70.                 <li>
  71.                     宋:
  72.                 </li>
  73.                 <ol>
  74.                     <li>
  75.                         念奴娇·赤壁怀古【苏轼】
  76.                     </li>
  77.                     <li>
  78.                         永遇乐·京口北固亭怀古【辛弃疾】
  79.                     </li>
  80.                 </ol>
  81.                 <hr/>
  82.                 <table align="center" border="5" height="30%" width="50%">
  83.                     <tr>
  84.                         <!-- 居中加粗 -->
  85.                         <th>
  86.                             古诗词
  87.                         </th>
  88.                         <th>
  89.                             近五年考试频率
  90.                         </th>
  91.                     </tr>
  92.                     <tr>
  93.                         <td>
  94.                             念奴娇·赤壁怀古【苏轼】
  95.                         </td>
  96.                         <td>
  97.                             4.3星
  98.                         </td>
  99.                     </tr>
  100.                     <tr>
  101.                         <td>
  102.                             登高【杜甫】
  103.                         </td>
  104.                         <td>
  105.                             3.2星
  106.                         </td>
  107.                     </tr>
  108.                 </table>
  109.                 <hr/>
  110.                 <p>
  111.                     <h2>
  112.                         2023高考押题:
  113.                     </h2>
  114.                 </p>
  115.                 <p>
  116.                     <h3>
  117.                         昵称:
  118.                     </h3>
  119.                     <input name="name" placeholder="请输入您的昵称" size="20" type="text"/>
  120.                 </p>
  121.                 <p>
  122.                     <h3>
  123.                         古诗词选择:
  124.                     </h3>
  125.                     <select name="古诗词">
  126.                         <option selected="selected" value="A1">
  127.                             锦瑟【李商隐】
  128.                         </option>
  129.                         <option value="A2">
  130.                             念奴娇·赤壁怀古【苏轼】
  131.                         </option>
  132.                         <option value="A3">
  133.                             登高【杜甫】
  134.                         </option>
  135.                     </select>
  136.                     <!-- 单选框 -->
  137.                     <div>
  138.                         <h3>
  139.                             考试几率:
  140.                         </h3>
  141.                         <label>
  142.                             <input name="interset" type="radio" value="J1">
  143.                                 30%
  144.                             </input>
  145.                         </label>
  146.                         <label>
  147.                             <input name="interset" type="radio" value="J2">
  148.                                 50%
  149.                             </input>
  150.                         </label>
  151.                         <label>
  152.                             <input name="interset" type="radio" value="J3">
  153.                                 70%
  154.                             </input>
  155.                         </label>
  156.                         <label>
  157.                             <input name="interset" type="radio" value="J4">
  158.                                 90%
  159.                             </input>
  160.                         </label>
  161.                     </div>
  162.                 </p>
  163.                 <p>
  164.                     考试心得:
  165.                 </p>
  166.                 <textarea cols="30" id="" name="" rows="10">
  167.                 </textarea>
  168.                 <p>
  169.                     <input name="确认信息无误" type="radio">
  170.                         我已阅读信息并确认无误
  171.                     </input>
  172.                 </p>
  173.                 <p>
  174.                     <input name="submit" type="submit" value="提交">
  175.                         <input name="reset" type="reset" value="重置">
  176.                         </input>
  177.                     </input>
  178.                 </p>
  179.             </ol>
  180.         </form>
  181.     </body>
  182. </html>

🐒style.css

  1. .exp {
  2.     text-align: left;
  3. }
  4. * {
  5.     margin: 0;
  6.     padding: 0;
  7. }
  8. body {
  9.     font-family: 微软雅黑;
  10.     font-size: 15px;
  11. }
  12. #con {
  13.     margin: 0 auto;
  14.     width: 1000px;
  15.     height: 1500px;
  16. }
  17. #a {
  18.     height: 100px;
  19.     margin-bottom: 10px;
  20.     background: #f2f2f2;
  21.     text-align: center;
  22.     font-size: 25px;
  23.     line-height: 100px;
  24. }
  25. #b {
  26.     margin-bottom: 10px;
  27.     height: 500px;
  28. }
  29. #d {
  30.     float: right;
  31.     width: 390px;
  32.     height: 500px;
  33.     background: white;
  34.     border: 2px solid #eeeeee;
  35. }
  36. #f {
  37.     float: left;
  38.     width: 600px;
  39.     height: 500px;
  40.     background: white;
  41.     border: 2px solid #eeeeee;
  42. }
  43. #c {
  44.     height: 150px;
  45.     background: #f2f2f2;
  46. }
  47. p {
  48.     font-size: 10px;
  49. }
  50. hr {
  51.     color: #f2f2f2;
  52.     background: #f2f2f2;
  53.     height: 1px;
  54. }
  55. #copyright {
  56.     text-align: center;
  57. }

结语：

上述内容就是此次html作业的全部内容了，感谢大家的支持，由于初次学习html相信在很多方面存在着不足乃至错误，希望可以得到大家的指正。🙇‍(ง •_•)ง

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发