入門筆記Day one

時間 2019-12-06

標籤入門筆記 day 简体版

原文原文鏈接

html、css

標籤：<html>
標籤對：<head></head>   <body></body>
單標籤：<meta/> <img/>

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>標題</title>
    </head>
    <body>
        內容
        <div style="width（寬） : 200px; height（高）: 200px;font-size(字體大小): 30px ; baackground（背景）:（顏色）或者url(圖片地址); border（邊框）:8px solid（實線） red;">xxx
        </div>
    </body>
</html>
複製代碼

js

<div onclick ="this.style.width = '800px';this.style.height = '400px';transition:1s;">xxx</div>
複製代碼

行間樣式表

內部樣式表

<!doctype html>
<html>
   <head>
       <meta charset="UTF-8"/>
       <title>標題</title>
       <!--內部樣式表-->
       <style> #div1{ width:100px; height:100px; background-color:red; /*顏色單詞（red、yellow...）16進制（#0cc）rgb（111，111，111）*/ background-image:url(圖片地址)； /*默認狀態下，背景會平鋪*/ background-repeat:no-repeat(不重複); /* repeat-x或者y 水平或垂直平鋪 */ background-position:100px 200px; /*背景定位：也能夠用% left center right... 位置單詞 */ background-attachment:fixed; (固定圖片) border(邊框): 10px dashed(虛線)solid(實線)dotted(點劃線) red; } #div2{ width:100px; height:100px; background:green; } </style>
   </head>
   <body>
      <div id="div1">qqq</div>
      <div id="div2">www</div>
   </body>
</html>
複製代碼

外部樣式表

<!doctype html>
<html>
  <head>
      <meta charset="UTF-8"/>
      <title>標題</title>
      <!--外部樣式表-->
      <link rel="stylesheet" href="外部連接"/>
  </head>
  <body>
     <div id="div1">qqq</div>
  </body>
</html>
複製代碼

文字設置

<!doctype html>
<html>
  <head>
      <meta charset="UTF-8"/>
      <title>標題</title>
      #div1{
          color: red;
          text-align(文字對齊方式): center;
          text-intent(縮進): 2em ;
          /*em是根據字體大小來進行計算的
            1em = 當前字體大小*/
          text-decoration(文字修飾）: underline;
          letter-spacing(字母間距): 10px ;
          word-spacing(單詞間距): 10px ;
          /*以空格爲解析單位*/
          white-space(強制不換行): normal ; 
          /*nowrap 不換行
            normal 正常  
          一個空格的大小爲當前文字大小的一半（僅宋體）
          字體格式不同時，空格大小也不同。
          */
          
      }
  </head>
  <body>
     <div id="div1">qqq</div>
  </body>
</html>
複製代碼

內邊距padding

<!doctype html>
<html>
   <head>
       <meta charset="UTF-8"/>
       <title>標題</title>
       #div1{
              width: 100px ;
              height: 100px ;
              background-color: pink ;
              padding: 100px ;
       /*padding 內填充
       padding-top right left bottom
       padding複合寫法  順時針 top right bottom left
       只有一個屬性值時：4個方向都是同一個值
       設置兩個屬性值時：
           第一個屬性值設置的是上下兩個方向，
           第二個屬性值設置的是左右兩個方向。
       設置三個屬性值時：
           第一個屬性值設置的是上邊一個方向，
           第二個屬性值設置的是左右兩個方向，
           第三個屬性值設置的是下邊一個方向。
       設置四個屬性值時：
           第一個屬性值設置的是上邊一個方向，
           第二個屬性值設置的是右邊一個方向，
           第三個屬性值設置的是下邊一個方向，
           第四個屬性值設置的是左邊一個方向。    
       */
       }
   </head>
   <body>
      <div id="div1">qqq</div>
   </body>
</html>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。