CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用したレスポンシブグリッドビューの構築

次のコードを実行して、レスポンシブグリッドビューを作成できます。

例

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <style>
         * {
            box-sizing: border-box;
         }
         .header {
            border: 1px solid black;
            padding: 10px;
         }
         .leftmenu {
            width: 30%;
            float: left;
            padding: 10px;
            border: 1px solid black;
         }
         .content {
            width: 70%;
            float: left;
            padding: 10px;
            border: 2px dotted black;
         }
      </style>
   </head>
   <body>
      <div class = "header">
         <h1>Header</h1>
      </div>
      <div class = "leftmenu">
         <ul>
            <li>Menu One</li>
            <li>Menu Two</li>
            <li>Menu Three</li>
            <li>Menu Four</li>
            <li>Menu Five</li>
            <li>Menu Six</li>
            <li>Menu Seven</li>
            <li>Menu Eight</li>
            <li>Menu Nine</li>
            <li>Menu Ten</li>
         </ul>
      </div>
      <div class = "content">
         <h1>Demo</h1>
         <p>This is demo text. This is demo text. This is demo text.
            This is demo text. This is demo text. This is demo text.
            This is demo text. This is demo text. This is demo text.
            This is demo text. This is demo text. This is demo text.
            This is demo text. This is demo text. This is demo text.
            This is demo text. This is demo text. This is demo text.
            This is demo text.
         </p>
      </div>
   </body>
</html>

  1. CSSを使用したテキストインデント

    CSS text-indentプロパティは、要素の最初の行のインデントを設定するのに役立ちます。 構文 CSStext-indentプロパティの構文は次のとおりです- Selector {    text-indent: /*value*/ } 例 次の例は、CSSのtext-indentプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> div {    display: flex;    float: left;  

  2. CSSを使用してレスポンシブカットアウト/ノックアウトテキストを作成するにはどうすればよいですか？

    CSSを使用してレスポンシブノックアウトテキストを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}