<html>
<head>
  <meta charset="utf-8" />
  <title>H01 | 纯HTML编码</title>
  <link rel="stylesheet" type="text/css" href="./normalize.css"/>
</head>
<style>
h1,h2,h3,h4{
    cursor: pointer;
}
body{
    margin: 0px;
    padding:0px;
    font-family: 'Microsoft YaHei';
    background: #dedede;
}

header{
    background-color: #000;
    height: 60px;
}
header img{
    height:40px;
    padding:10px;
}

header ul{
    position: absolute;
    top: 0px;
    right: 10px;
}

header ul li {
     float: left;
    text-decoration: none;
    color: white;
    font-size: 12px;
    padding-left: 20px;
}
article{
    background-color: white;
    border-width: 10px;
    padding:20px 40px;
    margin:20px 30px;
}

</style>
<body>
<header>
    <div role><a href="#"><img src="./images/task_1_02_1.png"></a></div>
    <nav role="navigation">
        <ul>
            <li>鏈接1</li>
            <li>鏈接2</li>
            <li>鏈接3</li>
        </ul>
    </nav>
</header>
<main>


<style>
table{
    width: 100%;
    /**********************************Understand this**************************************************/
    border-collapse: collapse;
    /************************************************************************************/    
}
table th{
    background-color: #333;
    color: white;
}
</style>
     <article>
         <table border="1">
            <tbody>
                    <tr><th>表头</th><th>表头</th><th>表头</th></tr>
                    <tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>
                    <tr class="buttomTable"><td>总计</td><td colspan="2">1000</td></tr>
            </tbody>
        </table>
     </article>
     <article>    
           <style>
           div.form{
               margin-top: 15px;
           }

           label.tips{
                   float:left;
                   text-align: right;
                   width: 35%;
                   padding-right: 30px;
               }
           .submit{
               margin-top: 15px;
               background-color: #128fdc;
               width: 100%;
               border-radius: 10px;
               color: white;
               height: 40px;

           }
           </style>           
        <div class="form">
            <label class="tips">Please input your mail address</label>
            <input type="text" placeholder="mail address"></input>    
        </div>
        <div class="form">
            <label class="tips">Sex</label>
            <input type="radio" name="sex" placeholder="mail address"></input>    
            <label>Male</label>
            <input type="radio" name="sex" placeholder="mail address"></input>    
            <label>Female</label>
        </div>
        
                 <input class="submit" type="submit" value="Submit">
        
      </article>
   

   <article>
           <style>
           .layout {
          display: inline-block;
          margin: 20px;
          background-color: white;
        }
        .c1{
            width: 200px;
        }
        .c3{
            width: 120px;
            float: right;
        }
           </style>
           <div><h1>CSS Layout</h1>
               <p>Three ways to support css layout: <b>position, float, inline-block</b></p>
               <h1>Box model and Box-sizing</h1>
               <p>经过了一代又一代人们意识到数学不好玩，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box;</p>
               <code>
                   .simple {
                  width: 500px;
                  margin: 20px auto;
                }
            </br>
                .fancy {
                  width: 500px;
                  margin: 20px auto;
                  padding: 50px;
                  border: solid blue 10px;
                }
            </br>    
               </code>
           <h1>Position</h1>
           <p>relative: 在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。</p>    
           <p>absolute 与 fixed 的表现类似，除了它不是相对于视窗而是相对于最近的<b>“positioned”</b>祖先元素</p>    
           <h1>clear</h1>
           <p>使用clear元素来消除前面元素因为float设置造成的影响。 当元素设置了clear属性时，可假定前面元素没有设置float属性。</p>
           <code>
               .after-box {
              clear: left;
            }
           </code>
       </br>
           <div class="layout c1">11</div>
           <div class="layout c2">222</div>
           <div class="layout c3">333</div>
        </div>
   </article>

     <article>
         <h1>Central alignment</h1>
         <style>
             .centre{
                 height: 200px;
                 width: 400px;
                 margin:auto auto;
                 background-color: #ccc;
                 position: relative;
             }
             .left-top-area{
                 border-radius: 0 0 50px 0;
                 position: absolute;
                 top: 0px;
                 background-color: #fc0;
                 width: 50px;
                height: 50px;
             }
            .right-bottom-area{
                 border-radius: 50px 0 0px 0;
                 position: absolute;
                 bottom: 0px;
                 right: 0px;    
                 background-color: #fc0;
                 width: 50px;
                height: 50px;
             }             
         </style>
         <div class="centre">
             <div class="left-top-area"></div>
             <div class="right-bottom-area"></div>
         </div>
     </article>
     <article>
         <h1>Figure Column changes with screen windows</h1>
         <p>Try to understand why the <b>float:left</b> and <b>overflow:auto</b> is there</p>
         <style>
             figure{
                 float:left;    
             }
         </style>

        <div style="overflow:auto;">
            <figure>
                 <figcaption>好看的图片</figcaption>
                <img src="./images/img1.jpg">
            </figure>
            <figure>
                 <figcaption>好看的图片</figcaption>
                <img src="./images/img1.jpg">
            </figure>
            <figure>
                 <figcaption>好看的图片</figcaption>
                <img src="./images/img1.jpg">
            </figure>
            
         </div>
     </article>

     <article>
         <style>
            p.intro::first-letter {
                color: #ff0000;
                font-size:200%;
            }  
        </style>
         <h1>CSS Persudo Elements</h1>
         <p>
             A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to:
            <ul>
                <li>Style the first letter, or line, of an element</li>
                <li>Insert content before, or after, the content of an element</li>
        </ul>.
        </p>
        <p>The supported persudo elements include:
            <ul>
                <li>::after</li>
                <li>::before</li>
                <li>::first-letter</li>
                <li>::first-line</li>
                <li>::selection</li>
            </ul>
        </p>
 
        <h2>::first-letter</h2>
        <p class="intro">This is an introduction.</p>
        
     </article>

     <article style="position:relative">
         <style>
             .main{
                 margin: auto auto;
                 
             }
             input[type="radio"]{
                width: 10px;
                height: 10px;
                position: relative;
                top: 10px;
                z-index: 10;
                opacity: 0;
                cursor: pointer;
                margin-right: 10px;
             }
             .list{
                 height: 10px;
                width: 10px;
                border: 1px solid #6C5C5C;
                border-radius: 5px;
                display: inline-block;
                position: relative;
                top: -10px;
                z-index: 1;
                margin-right: 10px;
             }
     
             input[type="radio"]:nth-of-type(1):checked~.list:nth-of-type(1){
                 background: #000;
             }
             input[type="radio"]:nth-of-type(2):checked~.list:nth-of-type(2){
                 background: #000;
             }
             input[type="radio"]:nth-of-type(3):checked~.list:nth-of-type(3){
                 background: #000;
             }

            input[type="radio"]:nth-of-type(1):checked~.message1{
                 display: block;
             }
             input[type="radio"]:nth-of-type(2):checked~.message2{
                 display: block;
             }
             input[type="radio"]:nth-of-type(3):checked~.message3{
                 display: block;
             }


             .message{
                 display: none;
                 position:relative;
                 top:-100px;
             
             }


         </style>
         <div>
         <h1>CSS Persudo Element and Class usage example</h1>
         <div class="main">
             <div style="width:50px;height:50px;"></div>    
             <div>    
                 <input type=radio name="list" checked>&nbsp;
                 <input type=radio name="list">
                 <input type=radio name="list">

                 <br/>

                 <div class="list"></div>
                 <div class="list"></div>
                 <div class="list"></div>

                 <div class="message message1"><p>This is content 1</p></div>
                 <div class="message message2"><p>This is content 2</p></div>
                 <div class="message message3"><p>This is content 3</p></div>
             </div>
             
         </div>
     </div>
    </article>


    <article style="position:relative">
        <h1> ~ must be in the same level to take effect.</h1>
         <style>
             .container{
                 position: relative;
             }
             .container ul li{
                 display: inline-block;
                 margin-right: 50px;
             }
             .move{
                     position: absolute;
                    border: 2px solid #E53C3C;
                    left: 1%;
                    top: 50px;
                    -webkit-transition: left 0.6s ease-in-out;
                    -moz-transition: left 0.6s ease-in-out;
                    transition: left 0.6s ease-in-out;
                    display: inline-block;
                    width: 80px;

             }
             .container ul li:nth-child(2):hover~.move{
                     left:6.5%;
             }
            .container ul li:nth-child(3):hover~.move{
                     left:13%;
             }             
            .container ul li:nth-child(4):hover~.move{
                     left:20%;
             }
             .container ul li:nth-child(5):hover~.move{
                     left:27%;
             }     
         </style>

           <div class="container">
            <nav>
                <ul>
                    <li>首页</li>
                    <li>最新活动</li>
                    <li>项目介绍</li>
                    <li>爱心社区</li>
                    <li>关于我们</li>
                    <li class="move"></li>
                </ul>
            </nav>
            
            </div>    
            
    </article>
 </main>
</body>
</html>