css系列（5）css的運用（一）

時間 2019-11-12

標籤 css 系列運用欄目 CSS 简体版

原文原文鏈接

從本節開始介紹css配合html能夠達到的一些效果。css

(1)導航欄:html

<html>
<head>
<title>示例5.1</title>
</head>
<style>
  #nav_div{
    height:60px;
    background-color:black;    
  }
  a{
    display:inline-block;      /*設爲inline-block是爲了讓同類標籤在同一行顯示*/
    color:white;
    line-height:60px;          /*設置行高*/
    width:100px;
    text-align:center;         /*讓文本居中顯示*/
    float:left;                /*設置爲左浮動，僅對內聯元素有效*/
  }
  #nav_div  a:hover{           /*當鼠標滑動到a標籤上時*/
    cusor:pointer;
    font-size:20px;
    background-color:#625D5D;  /*背景顏色*/
    color:#FFF30E;             /*字體顏色*/ 
  }
</style>
<body style="margin:0px;">
  <div id="nav_div">            
    <a href="#">首頁</href>
    <a href="#">公司簡介</href>
    <!--爲何界面中這個只能連接不靠右顯示-->
    <a style="float:right;margin-right:0px;" href="#">智能連接</a>
 </div>
<body>
</html>

(2)行級元素div的塊級用法:瀏覽器

<!DOCTYPE html>
<html>
<head>
  <title>示例5.2</title>
  <style>
    #padding_div{
      dispaly:inline-block;
      width:200px;
      height:150px;
      background:black;
      padding-top:50px;
      float:left;
    }
    #padding_div div{
      width:100px;
      height:100px; 
      background:green;
    }
    #border_div{
      dispaly:inline-block;
      width:  195px;
      height: 195px;
      background: red;
      margin-left:30px;
      border-style:solid;                 
      border-left-width:20px;
      float:left;
    }
  </style>
</head>
<body>
<div>
  <!--僅僅當兩個div都設爲內聯時，他們的排列才遵照同一規則-->
  <div id="padding_div">
    <div></div>
  </div>
  <div id="border_div">
  </div>
</div>
</body>
</html>

(3)div的overflow屬性:post

<!DOCTYPE html>
<html>
<head>
  <title>示例5.3</title>
  <style>
    .over_div{
      display:inline-block;
      width:150px; 
      height:200px;
      background-color:grey;
      color:yellow;
    }
    #over01{
      overflow:visible;
    }
    #over02{
      overflow:hidden;
    }
    #over03{
      overflow:scroll;
    }
    #over04{
      overflow:auto;
    }
  </style>
</head>
<body>
<div>
    <div class="over_div" id="over01">
    默認值。內容不會被修剪，會呈如今元素框以外。
    overflow屬性規定當內容溢出元素框時發生的事情。這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。所以，有可能即便
元素框中能夠放下全部內容也會出現滾動條。
    </div>
    <div class="over_div" id="over02">
    內容會被修剪，而且其他內容是不可見的。
    overflow 屬性規定當內容溢出元素框時發生的事情。這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。所以，有可能即便
元素框中能夠放下全部內容也會出現滾動條。
    </div>
    <div class="over_div" id="over03">
    內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
    overflow 屬性規定當內容溢出元素框時發生的事情。這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。所以，有可能即便
元素框中能夠放下全部內容也會出現滾動條。
    </div>
    <div class="over_div" id="over04">
    若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
    overflow 屬性規定當內容溢出元素框時發生的事情。這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。所以，有可能即便
元素框中能夠放下全部內容也會出現滾動條。
    </div>
</body>
</html>

(4)表單和div的混合使用:(仿照騰訊微博註冊登陸頁面)字體

<!DOCTYPE html>
<html>
<head>
  <title>示例5.4</title>
  <style>
    body{
      background-color:#73CFF1;/*藍色色調*/
      margin-top:0px;
    }
    #main_div {
      width: 800px;
      height: 600px;
      background-color: #ffffff;/*白色*/
      margin: auto;/*默認居中*/
    }
    div.block_div{
      width:798px;
      background-color: #ffffff;
      border:1px solid;
      border-color: #ffffff;
    }
    #div_block_01{
      height:60px;
      margin-left:20px;
      border:1px solid;
      border-color:#ffffff;
      margin-top: 20px;
    }
    #img_div{
      float:left;
      margin-left:20px;
      margin-top:10px;
      width:50px;
      border:1px solid;
      border-color:#ffffff;
      margin-left:50px;
    }
    #text_div{
      border: 1px solid;
      border-color:#ffffff;
      float:left;
      border:1px solid;
      border-color:#ffffff;
      margin-left:20px;
    }
    #div_block_02{
      margin-top:5px;
      width:798px;
      height:225px;
      border:1px solid;
      border-color:#ffffff;"
    }
    #form_div{
      width:510px;
      height:200px;
      background-color:#FFFDDF;
      border:1px solid; 
      border-color:#ffffff;
      margin:0px auto;
    }
   span{
      font-size:15px;
      margin-left:10px;
   }
  </style>
</head>
<body>
<div id="main_div">
  <div class="block_div">
    <div id="div_block_01">
      <div id="img_div">
        <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_tencent_QQ01.png"></img>
      </div>
      <div id="text_div">
        <pre style="font-size:13px;color:black;"><b>用QQ號碼註冊</b></pre>
        <pre style="font-size: 11px;color:black;margin-top:-10px;">用QQ號碼開通能夠方便你在微博上找到QQ好友，騰訊微博承諾，毫不會泄漏您的QQ號碼。</pre>
      </div>
    </div>
    <div id="div_block_02">
      <div id="form_div">
        <form action="" method="post">
          <br/>
          <span>QQ賬號：&nbsp;&nbsp;<input style="margin-bottom: 10px;" type="text" size="25";name="用戶名" value=""/></span><br/>
          <span>QQ密碼：&nbsp;&nbsp;<input type="text" size="25"/><span style="color:blue;font-size:10px">忘記密碼?</span></span>
            <div style="border:1px solid;border-color:#ffffff;height:100px;margin-top: -15px;"><br/>
              <p><b style="margin-left:80px;"><input type="checkbox"/>下次自動登陸</b></p>
              <p><b style="color:blue;margin-left:80px;" ><input type="button" value="開通微博"/></b></p>
            </div>
        </form>
      </div>
    </div>
  </div>
<div>
</body>
<html>

(5)設置文本屬性:spa

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    .p1 {
      word-spacing: 15px;  /*單詞間距*/ 
      Letter-spacing:5px;  /*字母間距*/
      text-indent:10px;    /*首行的文本縮進*/
      line-height:30px;    /*行高*/
    }
    .p2 {
      Text-align:center;   /*設置文本居中*/
    }
  </style>
</head>
<body>
  <p class="p1">CSS是Csssascading Style Sheet 這個幾個英文單詞的縮寫,翻譯成中文是「層疊樣式表」的意思。CSS能讓網頁製做者有效的定製、改善網頁的效果。CSS是對HTML的補充，網頁設計師曾經爲沒法很好的控制網頁的顯示效果而倍感苦惱，CSS的出現解決了這個問題。</p>
  <p class="p2">帝子降兮北渚，目眇眇兮愁予。洞庭波兮木葉下...</p>
</body>
</html>