JavaScript #28

30509 ワード
CSS JavaScript テキストリンク
210806
JavaScript #28
  • font & size & position
    フォント、サイズ、位置を変更します.
    • 私が考えている位置はこうです.
  • 位置

    すべての要素が左上隅に配置されます.
    • <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
        <title>MOO App</title>
    </head>
    <body>
        <div id="weather">
            <span></span>
            <span></span>
        </div>
        <h2 id="clock">00:00:00</h2>
        <div id="quote">
            <span></span>
            <span></span>
        </div>
        <form class="hidden" id="login-form"> 
            <input 
            required maxlength="15" 
            type="text" 
            placeholder="What is your name?"/>
            <button>Log In</button> <!--Login-->
        </form>
        <h1 id="greeting" class="hidden"></h1>  <!--after login-->
        <form id="todo-form">   <!--Input To Do-->
            <input type="text" placeholder="Write a To Do and Press Enter" />
        </form>
        <ul id="todo-list"></ul>    <!--To Do List-->
        
        <script src="js/greetings.js"></script>
        <script src="js/clock.js"></script>
        <script src="js/quotes.js"></script>
        <script src="js/background.js"></script>
        <script src="js/todo.js"></script>
        <script src="js/weather.js"></script>
    </body>
</html>
    位置をより簡単に変更するためにhtml内で順序を変更しました.
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
        <title>MOO App</title>
    </head>
    <body>
        <div id="weather">
            <span></span>
            <span></span>
        </div>
        <h2 id="clock">00:00:00</h2>
        <div id="quote">
            <span></span>
            <span></span>
        </div>
        <form class="hidden" id="login-form"> 
            <input 
            required maxlength="15" 
            type="text" 
            placeholder="What is your name?"/>
            <button>Log In</button> <!--Login-->
        </form>
        <h1 id="greeting" class="hidden"></h1>  <!--after login-->
        <form id="todo-form">   <!--Input To Do-->
            <input type="text" placeholder="Write a To Do and Press Enter" />
        </form>
        <ul id="todo-list"></ul>    <!--To Do List-->
        
        <script src="js/greetings.js"></script>
        <script src="js/clock.js"></script>
        <script src="js/quotes.js"></script>
        <script src="js/background.js"></script>
        <script src="js/todo.js"></script>
        <script src="js/weather.js"></script>
    </body>
</html>

    -style.css
    .hidden{
  display: none;
}

body{
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

#weather{
  position: relative;
  text-align: right;
  margin-right: 30px;
}

#clock{
  position: relative;
  text-align: center;
}

#quote{
  position: relative;
  text-align: center;
}

#todo-list{
  position: relative;
  width: 200px;
  text-align: left;
  margin: auto;
}

    アウトラインの場所を移動しました.
    MVCカスタム式ツリーをパラメータとするhtmlhelper
    会議室の手配(1931)