sondmk header
เรียนรู้การเขียน CSS เบื้องต้น (Cascading Style Sheets)

การทำให้รูปเอียงได้ด้วย CSS

Post by Goborijung at 2018-12-24 13:48:06 | ID: 36

-webkit-transform: scale(1.1) rotate(2deg);  // Safari
-moz-transform: scale(1.1) rotate(2deg);  // Mosila Firfox
-o-transform: scale(1.1) rotate(2deg);  // Opera
-ms-transform: scale(1.1) rotate(2deg);  // IE
transform: scale(1.1) rotate(2deg);  // Chrome
จัดระเบียบโค้ด css ด้วย css-beautify

Post by Goborijung at 2018-12-24 14:00:11 | ID: 41

http://www.cleancss.com/css-beautify/
สร้าง Table-Scroll กำหนดความสูง

Post by Goborijung at 2018-12-24 13:58:58 | ID: 40

--CSS--
<style>
.table-wrapper-scroll-y {
   display: block;
   max-height: 100px;
   overflow-y: auto;
   -ms-overflow-style: -ms-autohiding-scrollbar;
}
</style>

--HTML--
<div class="table-wrapper-scroll-y">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">เป็นครั้งแรก</th>
        <th scope="col">สุดท้าย</th>
        <th scope="col">จัดการ</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>เครื่องหมาย</td>
        <td>อ็อตโต</td>
        <td>@abc</td>
      </tr>
      <tr>
        <th scope="row">1</th>
        <td>เครื่องหมาย</td>
        <td>อ็อตโต</td>
        <td>@abc</td>
      </tr>
      <tr>
        <th scope="row">1</th>
        <td>เครื่องหมาย</td>
        <td>อ็อตโต</td>
        <td>@abc</td>
      </tr>
    </tbody>
  </table>
</div>
สร้างข้อความโปร่งใสให้กับรูปภาพ

Post by Goborijung at 2018-12-24 13:53:58 | ID: 38

<style>
* {
 box-sizing: border-box;
} 

body {
 margin: 0;
 font-family: Arial;
 font-size: 17px;
}


.container {
 position: relative;
 max-width: 800px;
 margin: 0 auto;
}


.container img {vertical-align: middle;}


.container .content {
 position: absolute;
 bottom: 0;
 background: rgba(0, 0, 0, 0.5); /* Black background with transparency */
 color: #f1f1f1;
 width: 100%;
 padding: 20px;
}
</style>
</head>
<body>


<div class="container">
 <img src="/w3images/notebook.jpg" alt="Notebook" style="width:100%;">
 <div class="content">
 <h1>Heading</h1>
 <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu
recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.</p>
 </div>
</div>
เปลี่ยนสี Class .table-hover

Post by Goborijung at 2018-12-24 13:57:08 | ID: 39

.table-hover tr:hover > td {
 background-color: #fffcaf;
}
<<<123
Programming

Framework

Library

Lernnings

เครื่องมือพัฒนาเว็บ

Computer Network

Computer Security

การออกแบบและพัฒนาเว็บไซต์

Download Tools

Download SourceCode

Operating System

Webs Hacking

copyAllright © 2016 soundmk.com