列表和表单

列表和表单

1.列表标签

  • 概念:

    容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表

  • 特点:

    列表最大的特点就是 整齐 、整洁、 有序,跟表格类似,但是他可组合自由度会更高。

1.1无序列表ul

无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>
  • 注意:

    <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
    <li></li>之间相当于一个容器,可以容纳所有元素。
    无序列表会带有自己样式属性,放下那个样式,一会让CSS来!
    
1.2有序列表ol

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

所有特性基本与ul 一致。 但是实际中比 无序列表 用的少很多。

1.3自定义列表

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的美团网页,包含下拉列表表单设计的示例代码: ```html <!DOCTYPE html> <html> <head> <title>美团网页示例</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> form { display: flex; flex-direction: column; align-items: center; margin: 50px; } input, select { margin: 10px; padding: 5px; border-radius: 5px; border: 1px solid #ccc; width: 300px; } input[type="submit"] { background-color: #008CBA; color: #fff; cursor: pointer; } </style> </head> <body> <header> <h1>欢迎来到美团</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">美食</a></li> <li><a href="#">电影</a></li> <li><a href="#">酒店</a></li> </ul> </nav> </header> <main> <h2>订餐服务</h2> <form> <label for="city">城市:</label> <select id="city" name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> </select> <label for="restaurant">餐厅:</label> <select id="restaurant" name="restaurant"> <option value="restaurant1">餐厅1</option> <option value="restaurant2">餐厅2</option> <option value="restaurant3">餐厅3</option> <option value="restaurant4">餐厅4</option> </select> <label for="date">日期:</label> <input type="date" id="date" name="date"> <label for="time">时间:</label> <input type="time" id="time" name="time"> <label for="guests">人数:</label> <input type="number" id="guests" name="guests" min="1" max="10"> <input type="submit" value="提交"> </form> </main> <footer> <p>© 2021 美团</p> </footer> </body> </html> ``` 在这个示例中,我们使用了 HTML、CSS 和 JavaScript 技术,实现了一个简单的美团网页,其中包含了一个下拉列表表单设计。其中,我们使用了 `select` 元素实现下拉列表,使用了 `form` 元素和各种输入元素(如 `input` 和 `select`)来设计表单。您可以根据自己的需要进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值