网页设计与开发html

1.根据本靠所讲知识，采用有序列表技术望写出具有如图4-10所示运行效果的程序。

img


2.根据本章所讲知识、采用无序列表的多层嵌套技术编写出具有如图4-11所示的运行
效果的HTML程序。

img


3.使用无序列表实现水平导航和垂直导航，如图4-12所示。

img

基于Monster 组和GPT的调写：
1.有序列表程序：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<meta charset="UTF-8">
 
<ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
 
<ol type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
 
<ol type="a">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
 
<ol type="I">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
 
<ol type="i">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
</body>
</html>

2.无序列表程序：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<ul>
    <li>咖啡</li>
    <li>茶
        <ul>
            <li>红茶</li>
            <li>
                绿茶
                <ul>
                    <li>中国差</li>
                    <li>非洲茶</li>
                </ul>
            </li>
        </ul>
     <li>牛奶</li>
</ul>



</body>
</html>

3.水平和垂直导航程序：

<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8">
    <title>Navigation</title>
    <style>
        nav {
            margin: 0;
            padding: 0;
            list-style: none;
            background-color: #333;
            overflow: hidden;
        }

        nav li {
            float: left;
            padding: 10px 20px;
            color: white;
            font-size: 18px;
        }

        nav li:hover {
            background-color: #555;
        }

        .vertical-nav {
            margin: 0;
            padding: 0;
            list-style: none;
            background-color: #f2f2f2;
            width: 200px;
            border: 1px solid #ccc;
        }

        .vertical-nav li {
            padding: 10px;
            color: #333;
            font-size: 16px;
            border-bottom: 1px solid #ccc;
        }

        .vertical-nav li:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>

    <nav>
        <ul>
            <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>
            <li><a href="#">IT</a></li>
            <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>
            <li><a href="#">邮件</a></li>
        </ul>
    </nav>


    <nav>
        <ul class="vertical-nav">
            <li><a href="#">公司简介</a></li>
            <li><a href="#">组织机构</a></li>
            <li><a href="#">荣誉称号</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</body>
</html>

基于最新版ChatGPT4的回答，望采纳！！！有其他问题也可以询问我哦💕（最新版更智能，功能更加强大）：
有序列表技术实现运行效果如下：

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>有序列表示例</title>
</head>
<body>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript
            <ol type="a">
                <li>React</li>
                <li>Vue</li>
                <li>Angular</li>
            </ol>
        </li>
        <li>PHP</li>
    </ol>
</body>
</html>

无序列表的多层嵌套技术实现运行效果如下：

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>无序列表示例</title>
</head>
<body>
    <h1>菜单</h1>
    <ul>
        <li>主页</li>
        <li>产品
            <ul>
                <li>电子产品
                    <ul>
                        <li>手机</li>
                        <li>笔记本电脑</li>
                        <li>平板电脑</li>
                    </ul>
                </li>
                <li>服装
                    <ul>
                        <li>男装</li>
                        <li>女装</li>
                        <li>童装</li>
                    </ul>
                </li>
                <li>食品
                    <ul>
                        <li>零食</li>
                        <li>饮料</li>
                        <li>保健品</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>服务
            <ul>
                <li>售后服务</li>
                <li>技术支持</li>
                <li>在线客服</li>
            </ul>
        </li>
        <li>关于我们</li>
    </ul>
</body>
</html>

使用无序列表实现水平导航和垂直导航，代码如下：
水平导航：

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水平导航示例</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover {
            background-color: #111;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</body>
</html>

垂直导航：

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>垂直导航示例</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
            position: fixed;
            height: 100%;
            overflow: auto;
        }
        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }
        li a.active {
            background-color: #4CAF50;
            color: white;
        }
        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>
</head>
<body>
    <ul>
        <li><a class="active" href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<meta charset="UTF-8">
 
<ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
 
<ol type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
 
<ol type="a">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
 
<ol type="I">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
 
<ol type="i">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
</body>
</html>

问题解决了么

emmmm，单纯问一下，这是大学作业吗？咋还有书上的图

 .nav1 ul{
  display: flex;
  list-style: none;

 }
 .nav1 ul li{
  margin-right: 10px;
 }

 a{
  text-decoration: none;
 }
 .nav1 ul li a,
 .nav2 ul li a
 {
    color: #333;
  }
 .nav2 ul{
  list-style: none;
  color: #333;
 }



 <p>数字列表：</p>
  <ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
 <p>字母列表：</p>
<ol type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
 <p>小写字母列表：</p>
<ol type="a">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
<p>罗马字母列表：</p>
<ol type="I">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
 <p>小写罗马字母列表：</p>
<ol type="i">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
<p>一个嵌套列表：</p>
<ul>
  <li>咖啡</li>
  <li>
    茶
   <ul>
     <li>红茶</li>
     <li>绿茶
      <ul>
        <li>中国茶</li>
        <li>非洲茶</li>
      </ul>
     </li>
   </ul>
  </li>
  <li>牛奶</li>
</ul>
<p>水平导航:</p>
<nav class="nav1">
  <ul class="nav1-ul">
      <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>
      <li><a href="#">IT -</a></li>
      <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>
      <li><a href="#">邮件</a></li>
  </ul>
</nav>

<p>垂直导航:</p>
<nav class="nav2">
  <ul class="nav2-ul">
      <li><a href="#">公司简介</a></li>
      <li><a href="#">组织机构</a></li>
      <li><a href="#">荣誉称号</a></li>
      <li><a href="#">联系我们</a></li>
  </ul>
</nav>

基于bing、GPT部分内容和本人思考总结：
有序列表实现图4-10的程序效果：


html
Copy code
<ol>
  <li>打开炸鸡店门店</li>
  <li>准备食材：鸡肉、面粉、调料等</li>
  <li>将鸡肉腌制入味</li>
  <li>将面粉和调料混合搅拌均匀</li>
  <li>将腌制好的鸡肉放入面粉混合物中裹上一层面糊</li>
  <li>将裹好面糊的鸡肉放入炸锅中炸至金黄色</li>
  <li>取出炸好的鸡肉，沥干油分</li>
  <li>上菜，享用美食</li>
</ol>

无序列表实现图4-11的程序效果：


html
Copy code
<ul>
  <li>学科一
    <ul>
      <li>章节一</li>
      <li>章节二</li>
      <li>章节三</li>
    </ul>
  </li>
  <li>学科二
    <ul>
      <li>章节一</li>
      <li>章节二</li>
      <li>章节三
        <ul>
          <li>小节一</li>
          <li>小节二</li>
          <li>小节三</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>学科三
    <ul>
      <li>章节一</li>
      <li>章节二</li>
      <li>章节三</li>
    </ul>
  </li>
</ul>

水平导航和垂直导航实现图4-12的程序效果：

html
Copy code
<!-- 水平导航 -->
<ul>
  <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>
</ul>
<!-- 垂直导航 -->
<ul>
  <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>
</ul>
<style>
  /* 水平导航样式 */
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    background-color: #f1f1f1;
  }
  li {
    display: inline-block;
    padding: 10px;
  }
  a {
    text-decoration: none;
    color: #333;
  }
  /* 垂直导航样式 */
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
    width: 200px;
  }
  li {
    padding: 10px;
  }
  a {
    text-decoration: none;
    color: #333;
  }
  li:hover {
    background-color: #ccc;
  }
</style>

代码和运行效果我都放上来了，请采纳，谢谢
1.有序列表

  • 代码：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>有序列表</title>
</head>
<body>
 <b>数字列表：</b>
<ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
<b>字母列表：</b>
<ol type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
<b>小写字母列表：</b>
<ol type="a">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
<b>罗马字母列表：</b>
<ol type="I">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
<b>小写罗马字母列表：</b>
<ol type="i">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
</body>
</html>
  • 运行效果：

img

img

2.无序列表的多层嵌套

  • 代码：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>有序列表多层嵌套</title>
</head>
<body>

<ul>
    <li>咖啡</li>
    <li>茶
        <ul>
            <li>红茶</li>
            <li>
                绿茶
                <ul>
                    <li>中国差</li>
                    <li>非洲茶</li>
                </ul>
            </li>
        </ul>
     <li>牛奶</li>
</ul>



</body>
</html>
  • 运行效果

    img

3.水平导航，垂直导航

  • 代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>导航示例</title>
   <style>
 ul{
  list-style: none;

 }
 .nav1 li{
  display:inline-block;
 }

 a{
  text-decoration: none;
   color:#000;
 }
     
</style>
</head>
<body>
   <p>水平导航:</p>

  <ul class="nav1">
      <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>
      <li><a href="#">IT - </a></li>
      <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>
      <li><a href="#">邮件</a></li>
  </ul>

<p>垂直导航:</p>

  <ul class="nav2">
      <li><a href="#">公司简介</a></li>
      <li><a href="#">组织机构</a></li>
      <li><a href="#">荣誉称号</a></li>
      <li><a href="#">联系我们</a></li>
  </ul>

</body>
</html>
  • 运行效果：

img

以下答案由GPT-3.5大模型与博主波罗歌共同编写：

  1. 有序列表程序代码如下：
<!DOCTYPE html>
<html>
<head>
    <title>有序列表实例</title>
</head>
<body>
    <ol>
        <li>第一章</li>
        <li>第二章
            <ol>
                <li>第2.1节</li>
                <li>第2.2节
                    <ol>
                        <li>第2.2.1小节</li>
                        <li>第2.2.2小节</li>
                    </ol>
                </li>
                <li>第2.3节</li>
            </ol>
        </li>
        <li>第三章
            <ol>
                <li>第3.1节</li>
                <li>第3.2节</li>
                <li>第3.3节</li>
            </ol>
        </li>
    </ol>
</body>
</html>
  1. 无序列表多层嵌套技术的程序代码如下：
<!DOCTYPE html>
<html>
<head>
    <title>无序列表多层嵌套实例</title>
</head>
<body>
    <ul>
        <li>家电
            <ul>
                <li>空调</li>
                <li>电视
                    <ul>
                        <li>曲面电视</li>
                        <li>超薄电视</li>
                    </ul>
                </li>
                <li>电冰箱</li>
            </ul>
        </li>
        <li>数码产品
            <ul>
                <li>智能手机
                    <ul>
                        <li>苹果</li>
                        <li>三星</li>
                        <li>华为</li>
                    </ul>
                </li>
                <li>笔记本电脑</li>
            </ul>
        </li>
    </ul>
</body>
</html>
  1. 水平导航和垂直导航的无序列表代码如下：

水平导航：

```html

水平导航实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
    .horizon li{
        display: inline-block;
    }
    </style>
</head>

<body>

    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>

    <ol type="A">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>

    <ol type="a">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>

    <ol type="I">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>

    <ol type="i">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>

    <ul>
        <li>咖啡</li>
        <li>茶
            <ul>
                <li>
                    绿茶
                    <ul>
                        <li>中国差</li>
                        <li>非洲茶</li>
                    </ul>
                </li>
            </ul>
         <li>牛奶</li>
    </ul>

    <ul class="horizon">
        <li><span>搜狐首页 - </span></li>
        <li><span>新闻 - </span></li>
        <li><span>体育 - </span></li>
        <li><span>娱乐圈 - </span></li>
        <li><span>财经 - </span></li>
        <li><span>IT - </span></li>
        <li><span>汽车 - </span></li>
        <li><span>房产 - </span></li>
        <li><span>家居 - </span></li>
        <li><span>女人 - </span></li>
        <li><span>短信 - </span></li>
        <li><span>邮件</span></li>
    </ul>
   
   
    <ul class="verticle">
        <li><span>公司简介</span></li>
        <li><span>组织机构</span></li>
        <li><span>荣誉称号</span></li>
        <li><span>联系我们</span></li>
    </ul>
</body>

</html>

简单写了一下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>有序列表</title>
</head>
<body>
 <b>数字列表：</b>
<ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
<b>字母列表：</b>
<ol type="A">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
<b>小写字母列表：</b>
<ol type="a">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
<b>罗马字母列表：</b>
<ol type="I">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
<b>小写罗马字母列表：</b>
<ol type="i">
    <li>苹果</li>
    <li>香蕉</li>
    <li>柠檬</li>
    <li>桔子</li>
</ol>
</body>
</html>
1. 有序列表实现如图4-10所示的效果，代码如下：
html

  1.   
  2. HTML

  3.   
  4. CSS

  5.   
  6. JavaScript



2. 无序列表的多层嵌套实现如图4-11所示的效果，代码如下：
html

  •   
  • HTML

  •   
  • CSS
        

    •       
    • 选择器

    •       
    • 盒模型

    •     

      

  •   
  • JavaScript
        

    •       
    • 变量

    •       
    • 函数

    •



3. 使用无序列表实现水平导航和垂直导航，代码如下：
html