列表、选择器及表单的应用

文章目录

• • 列表的应用
  • 选择器的应用
  • 表单的应用

一、列表的应用

1.无序列表

<ul>

        <li>1. 每天告诉自己一次，『我真的很不错』 </li>

        <li>2. 生气是拿别人做错的事来惩罚自己</li>

        <li>3. 生活中若没有<span class="one">朋友</span>，就像生活中没有阳光一样</li>

   </ul>

2.有序列表

<ol>

        <li>1. 每天告诉自己一次，『我真的很不错』 </li>

        <li>2. 生气是拿别人做错的事来惩罚自己</li>

        <li>3. 生活中若没有<span class="one">朋友</span>，就像生活中没有阳光一样</li>

   </ol>

3.列表

<dl>

        <dt>1. 每天告诉自己一次，『我真的很不错』 </li>

        <dd>2. 生气是拿别人做错的事来惩罚自己</li>

        <dd>3. 生活中若没有<span class="one">朋友</span>，就像生活中没有阳光一样</li>

   </dl>

二、选择器的应用

1.通配符选择器

* {

            color: aquamarine;

        }

2.类选择器

.wgh {

            color: aqua;

        }

3.id选择器

#wzh {

            color: aliceblue;

        }

三、表单的应用

1.设置登录账号和密码

<div>账号:<input type="text" name="user"> </input></div>

<div>密码:<input type="password" name="password"> </input></div>

2.设置单选选项

<div>

            A<input type="radio" name="one"></input>

            B<input type="radio" name="one"></input>

            C<input type="radio" name="one"></input>

            D<input type="radio" name="one"></input>

</div>

3.设置多选选项

<div>

            A<input type="checkbox" name="two" value="a"></input>

            B<input type="checkbox" name="two" value="b"></input>

            C<input type="checkbox" name="two" value="c"></input>

            D<input type="checkbox" name="two" value="d"></input>

</div>

4.设置按钮并提交

<div>

            <input type="button" value="写字"></input>

            <input type="submit" value="提交"></input>

</div>