day_1_***

19873 ワード

ここでは、重要だと思うHTML&CSSの基本的な使い方をいくつか挙げています.
1.フォームのコントロール
テキストボックス:パスワードボックス:ラジオボックス:女a)value値bが必要)複数のラジオボックスのname属性値が一致しなければならないc)checkedデフォルト選択チェックボックス:栄光ドロップダウンボックス:複数行テキストフィールド:ボタン:
    

<html>
  <head>
    <title>09.htmltitle>

    <meta charset="UTF-8">

    <style type="text/css">
        #div_id {
            width:800px;
            height:600px;
            border-style:solid;
            background-color: red;
        }
    style>

  head>

  <body>

    <div id="div_id">
        <form action="  "  method="post">
               :<input type="text" name="username" value="      !" onfocus="abc()"/>
            <br/>
              :<input type="password" name="password"/>
            <br/>
              :<input type="radio" name="sex" value="female"  /> 
            <input type="radio" name="sex" value="male" checked="checked"/> 
            <br/>
              :
            <input type="checkbox" name="hobby" value="rongyao">  
            <input type="checkbox" name="hobby" value="chiji">  
            <input type="checkbox" name="hobby" value="lol">lol
            <input type="checkbox" name="hobby" value="daota2">  2
            <input type="checkbox" name="hobby" value="taobao">  
            <input type="checkbox" name="hobby" value="qiaodaima" checked>   

            <br/>

              :
            <select name="province">
                <option value="">  option>
                <option value="">  option>
                <option value="">  option>
            select>
            <select name="city">
                <option value="">  option>
                <option value="">  option>
                <option value="">  option>
            select>

            <br/>
              :
          <textarea rows="5" cols="50">
          textarea>
          <br/>
          <input type="submit" value="  "/>
          <input type="button" value="  "/>
          <button onclick="submit()">  button>

      form>
    div>

    <script type="text/javascript">

        function submit(){
            //     
        }
        function abc(){
            document.getElementsByTagName("input")[0].value="";
        }
    script>
  body>
html>

2.CSSケースモデル

<html>
  <head>
    <title>CSS    .htmltitle>

    <meta charset="UTF-8">
    <style type="text/css">
        /* CSS     */
        div{
            width:500px;/*         */
            height:500px;/*         */
            border-style: groove;/*         */
            border-width: 20px;/*         */

            /*margin-top: 50px;      */
            /*margin-left:50px;      */
            /*margin:auto;       */

            /* margin:100px 200px 300px 500px;         */
            /*margin: 100px 200px 300px;          */
             margin:100px 200px; /*       (   ) */
            padding: 3em;   /*         */
            border-color: red;
            background-image: url("../image/topfocusb_bg1.gif");
        }
    style>
  head>
    <div>
            div,      
    div>
  <body>
  body>
html>

3.CSSクラスセレクタ
ラベルセレクタ、クラスセレクタ、idセレクタが同時に存在する場合、同じ属性名が同時に存在する場合、属性値の優先順位はidセレクタ>クラスセレクタ>ラベルセレクタの順である

<html>
  <head>
    <title>11.htmltitle>

  <meta charset="UTF-8">

    
    <style type="text/css">
        /*        CSS   */
        /*     */
        p{
            font-family: "  ";
            text-align: center;
            font-size: 4em;
        }

        /*id   
            id          
        */
        #id1{
            font-size:2em;/*    */
            color:red;/*    */
            background-color:yellow;/*    */
            font-style: italic;/*    */
            text-decoration: line-through;/*      */
        }

        /*    
            .  {
            }
        */
        .pstyle{
            background-image: url("../image/topfocusb_bg1.gif");/*        */
            height:40px;/*      */
            background-repeat: repeat-x;/*        */
        }

    style>
  head>

  <body>

    <p id="id1" class="pstyle">     p>
    <p class="pstyle">     p>
    <p class="pstyle">     p>
    <p class="pstyle">     p>
  body>
html>

完全なコードは次のとおりです.https://github.com/menglanyingfei/Java/tree/master/JavaWebTrain