css_0630作业

作业内容：1. 制作一个用户注册表单,将课堂上提到的表单控件全部用到;

<h3>用户注册</h3>
<form action="" method="post">
<fieldset id="">
<legend>必填项</legend>
  <div >
   <label for="username">用户名：</label>
<input type="text" name="" id="username" value="" autofocus="autofocus" required="required"/>
   </div>
   <div >
   <label for="pwd">密 码：</label>
<input type="password" name="" id="pwd" value="" />
   </div>
   <div >
 <label for="email">邮箱：</label>
<input type="email" name="" id="email" value="" required/>
   </div>
</fieldset>
    <div id="">
       <input type="radio" name="gender" id="male" value="" />
<label for="male">男</label>
<input type="radio" name="gender" id="girl" value="" />
<label for="girl">女</label>
   </div>
<div id="">
<input type="checkbox" name="hobby[]" id="football" value="" checked="checked" /><label for="football">足球</label>
<input type="checkbox" name="hobby[]" id="football" value="" /><label for="football">篮球</label>
<input type="checkbox" name="hobby[]" id="football" value="" /><label for="football">乒乓球</label>
<input type="checkbox" name="hobby[]" id="football" value="" /><label for="football">铁球</label>
</div>
    <div id="">
<select name="" id="">
<option value ="金牌会员">金牌会员</option>
<option value ="银牌会员">金牌会员</option>
<option value ="铜牌会员">金牌会员</option>
</select>
</div>
<div id="">
<label for="search">搜索关键字</label>
<input type="search" name="search" id="search" value="" list="keywords" />
<datalist id="keywords">
   <option value ="html"></option>
   <option value ="css"></option>
   <option value ="javascript"></option>
</datalist>
</div>
</form>

2. 理解css模块的思想,并试写一个案例(选做)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css"/>导入style.css文件
    </head>
    <body>
        <header>头部</header>
        <main>主体</main>
        <footer>尾部</footer>
    </body>
</html>
/* 初始化样式 */
            * {margin: 0;
               padding: 0;
               box-sizing: border-box;
            }
            a {
                color: red;
                text-decoration: none;
            }
/* 公共样式 */
            body {
                height: 100vh;
                background-color: #ccc;
            }
/* 头部样式 */
             header {
                 height: 5em;
                 background-color: aqua;
             }
 /* 主体样式 */
              main {
                  height: 50em;
                  background-color: yellow;
              }
 /* 尾部样式 */
              footer {
                       height: 10em;
                       background-color: blue;
              }
#####新建style.css文件
@import url("reset.css");
@import url("public.css");
@import url("header.css");
@import url("main.css");
@import url("footer.css");

3. 实例演示基本选择器与上下文选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 标签基本选择器 */
            /* li {background-color: red;} */
            /* 属性选择器 */
            /* li[id="demo"] {background-color: aquamarine;} */
            /* 上下文选择器 */
            /* 后代选择器 */
            /* ul li {background-color: beige;} */
            /* 子选择器
             */
            ul>li {background-color: bisque;}
            /* 相邻选择器 */
            #demo+li {background-color: yellow;}
        </style>
    </head>
    <body>
        <!-- 基本选择器 -->
        <ul>
            <li id="demo">item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </body>
</html>

作业内容：1. 制作一个用户注册表单,将课堂上提到的表单控件全部用到;

2. 理解css模块的思想,并试写一个案例(选做)

3. 实例演示基本选择器与上下文选择器

4. 预习伪类选择器与常用元素的css样式设置,盒模型知识等

相关文章