2201_75527854 2023-03-22 11:27 采纳率: 33.3%
浏览 198
已结题

网页设计与开发html

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

img


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

img


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

img

  • 写回答

11条回答 默认 最新

  • 社区专家-Monster-XH 2023-03-22 11:38
    关注
    获得7.50元问题酬金

    基于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>
    评论 编辑记录

报告相同问题？

问题事件

  • 系统已结题 3月30日
  • 创建了问题 3月22日