เพิ่ม html ใหม่ที่เป็น list

index.html

<!DOCTYPE html>
<html>

<head>
    <title>BOOTSTRAP4 workshop</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <div class="container">
        <div class="box-1">
            <h1>Hello world</h1>
            <p>Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่
                16 เมื่อเครื่องพิมพ์โนเนมเครื่องหนึ่งนำรางตัวพิมพ์มาสลับสับตำแหน่งตัวอักษรเพื่อทำหนังสือตัวอย่าง Lorem Ipsum
                อยู่ยงคงกระพันมาไม่ใช่แค่เพียงห้าศตวรรษ แต่อยู่มาจนถึงยุคที่พลิกโฉมเข้าสู่งานเรียงพิมพ์ด้วยวิธีทางอิเล็กทรอนิกส์
                และยังคงสภาพเดิมไว้อย่างไม่มีการเปลี่ยนแปลง มันได้รับความนิยมมากขึ้นในยุค ค.ศ. 1960 เมื่อแผ่น Letraset วางจำหน่ายโดยมีข้อความบนนั้นเป็น
                Lorem Ipsum และล่าสุดกว่านั้น คือเมื่อซอฟท์แวร์การทำสื่อสิ่งพิมพ์ (Desktop Publishing) อย่าง Aldus PageMaker
                ได้รวมเอา Lorem Ipsum เวอร์ชั่นต่างๆ เข้าไว้ในซอฟท์แวร์ด้วย</p>
        </div>

        <div class="box-2">
            <h1>Goodbye world</h1>
            <p>Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่
                16 เมื่อเครื่องพิมพ์โนเนมเครื่องหนึ่งนำรางตัวพิมพ์มาสลับสับตำแหน่งตัวอักษรเพื่อทำหนังสือตัวอย่าง Lorem Ipsum
                อยู่ยงคงกระพันมาไม่ใช่แค่เพียงห้าศตวรรษ แต่อยู่มาจนถึงยุคที่พลิกโฉมเข้าสู่งานเรียงพิมพ์ด้วยวิธีทางอิเล็กทรอนิกส์
                และยังคงสภาพเดิมไว้อย่างไม่มีการเปลี่ยนแปลง มันได้รับความนิยมมากขึ้นในยุค ค.ศ. 1960 เมื่อแผ่น Letraset วางจำหน่ายโดยมีข้อความบนนั้นเป็น
                Lorem Ipsum และล่าสุดกว่านั้น คือเมื่อซอฟท์แวร์การทำสื่อสิ่งพิมพ์ (Desktop Publishing) อย่าง Aldus PageMaker
                ได้รวมเอา Lorem Ipsum เวอร์ชั่นต่างๆ เข้าไว้ในซอฟท์แวร์ด้วย</p>
        </div>

        <div class="categories">
            <h2>Categories</h2>
            <ul>
                <li>
                    <a href="#">Category1</a>
                </li>
                <li>
                    <a href="#">Category2</a>
                </li>
                <li>
                    <a href="#">Category3</a>
                </li>
                <li>
                    <a href="#">Category4</a>
                </li>
                <li>
                    <a href="#">Category5</a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

ลองกำหนด style ให้กับพื้นที่รอบๆ div categories style.css

.categories {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
}

ต่อมาลองกำหนด style ให้กับแท็ก ul ภายใต้ categories

.categories ul {
    padding: 0;
    list-style: square;
}

คือการกำหนดให้ padding ของ ul เป็น 0 (ปกติแท็ก ul จะมีค่า padding อยู่แล้ว)และเปลี่ยน สัญลักษณ์ให้เป็นสี่เหลี่ยม ดูเพิ่มเติมเกี่ยวกับการใช้ list ได้ที่ https://www.w3schools.com/css/css_list.asp

ต่อมาคือส่วนของการกำหนด Style ของ item แต่ละชิ้น

.categories li {
    padding-bottom: 6px;
    border-bottom: dotted;
    list-style-image: url('../images/check.png');
}

เป็นกำหนด padding ด้านล่างของ list item แต่ละอัน และวาดเส้นขอบด้านล่างเป็นเส้นประ และกำหนดให้ bullet ใช้รูปที่กำหนดให้

ใช้ pesudo class เข้ามาช่วยใด้ เช่นการสลับสีระหว่าง item

.categories li:nth-child(even) {
    background: gray;
}

สามารถดูเพิ่มเติมเกี่ยวกับการใช้ pseudo class ได้ที่ https://www.w3schools.com/css/css_pseudo_classes.asp

results matching ""

    No results matching ""