css的常用操作樣本

最後更新：2016-12-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1,樣式對齊

.div {      width: 70%;      height: 1000px;      background-color: red;      position: relative;      left: 15%;      right: 15%;      /*margin: 10px auto;*/  }

2,樣式尺寸

<body>  <p class="p1">hell world html5 hell world html5</p>  <p class="p2">hell world html5 hell world html5</p>  <p class="p3">hell world html5 hell world html5</p>  <ul>      <li>111111</li>      <li>222222</li>      <li>33333333</li>  </ul>  </body>

.p1 {      width: 200px;      /*行高*/      line-height: normal;  }    .p2 {      width: 200px;      line-height: 20px;      /*元素 是否顯示*/      visibility: visible;  }    .p3 {      width: 200px;      line-height: 50%;      /*滑鼠焦點 顯示*/      cursor: cell;  }    li {      /*元素是否顯示，如何顯示 塊元素還是內嵌元素*/      display: inline;  }

3,導覽列

<body>  <ul>      <li><a>導航1</a></li>      <li><a>導航2</a></li>      <li><a>導航3</a></li>      <li><a>導航4</a></li>  </ul>  </body>

ul {      list-style-type: none;      margin: 0px auto;      padding: 0px;      width: 300px;      background-color: chocolate;      text-align: center;  }    li {      /*none不顯示,block作為塊元素，      inline內嵌元素，元素前後沒有分行符號,      inherit規定應該從父元素繼承 display 屬性的值*/      display: inline;      padding: 10px;  }    a:link, a:hover {      background-color: aqua;      text-decoration: none;      width: 50px;      text-align: center;  }    a:visited, a:active {      background-color: blue;  }

4,圖片展示

<body>  <div class="content">      <div class="div">          <img src="zxwd.png">          <div class="text">圖片介紹</div>      </div>      <div class="div">          <img src="zxwd.png">          <div class="text">圖片介紹</div>      </div>      <div class="div">          <img src="zxwd.png">          <div class="text">圖片介紹</div>      </div>      <div class="div">          <img src="zxwd.png">          <div class="text">圖片介紹</div>      </div>      <div class="div">          <img src="zxwd.png">          <div class="text">圖片介紹</div>      </div>      <div class="div">          <img src="zxwd.png">          <div class="text">圖片介紹</div>      </div>      <div class="div">          <img src="zxwd.png">          <div class="text">圖片介紹</div>      </div>      <div class="div">          <img src="zxwd.png">          <div class="text">圖片介紹</div>      </div>      <div class="div">          <img src="zxwd.png">          <div class="text">圖片介紹</div>      </div>      <div class="div">          <img src="zxwd.png">          <div class="text">圖片介紹</div>      </div>      <div class="div">          <img src="zxwd.png">          <div class="text">圖片介紹</div>      </div>      <div class="div">          <img src="zxwd.png">          <div class="text">圖片介紹</div>      </div>      <div class="div">          <img src="zxwd.png">          <div class="text">圖片介紹</div>      </div>      <div class="div">          <img src="zxwd.png">          <div class="text">圖片介紹</div>      </div>    </div>  </body>

* {      margin: 0px;      padding: 0px  }    body {      width: 70%;      height: auto;      margin: 0px auto;  }    img {      width: 100px;      height: 100px;      border: 1px solid black;  }    .text {      text-align: center;      background-color: chocolate;      width: inherit;  }    .div {      width: auto;      border: 1px solid red;      padding: 1px;      height: auto;      margin: 5px;      float: left;  }

以上就是css的常用操作樣本的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More