แจกโค้ดหน้าเว็บด้วย HTML และ css

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
jamepiyawat
PHP VIP Members
PHP VIP Members
Posts: 1477
Joined: 21/05/2019 10:45 am

แจกโค้ดหน้าเว็บด้วย HTML และ css

Post by jamepiyawat » 06/09/2019 6:44 pm

การสร้างหน้าเว็บไซต์ด้วน HTML และ css นั้นก็ถือว่าเป็นสิ่งที่จะเป็นสำหรับการที่เราจะสร้างเว็บไซต์ขึ้นมาใหม่ซักเว็บหนึ่งเพราะมันจะทำให้ผู้ที่เข้ามาใช้เว็บไซต์ของเรามีความประทับใจในการเข้ามาใช้อีกครั้งบทความนี้ผมก็จะมาแจกหน้าเว็บไซต์กันจะสวยหรือเปล่าเราลองไปดูกันเลย

หน้าเว็บ
Screenshot_2019-09-06 Screenshot(1).jpg
หน้าindex

Code: Select all

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <div class="headerandmid">
      <h1>HELEN BONMAN</h1>
        <div class="two_header">
          <div class="text_two_header">
            <div class="text_text_two_header">
                <p class="hader_text">BNK48</p>
                <p class="mid_text">BNK48 บีเอ็นเคโฟร์ตีเอต</p>
                <p class="bottom_text">อ่อนแอก็แพ้ไป อุดเลือดกำเดาไหวก็ไปต่อ กับสาวๆ ไอดอล BNK48 ที่มองทีไรก็ตาลายไปหมดเลย
              เพราะมีแต่คนน่ารักๆ เลือกไม่ถูกจริงๆ และวัยทีนอย่างเรา คงไม่มีใครไม่รู้จัก เพลงคุกกี้เสี่ยงทาย
              (แอบมองเธออยู่นะจ๊ะ แต่เธอไม่รู้บ้างเลย) กันหรอกใช่ม๊า ฮิตทั้งเพลงทั้งท่าเต้นขนาดนี้ หรือถ้าใครอยากรู้เรื่องราว
              >> ที่มาและความเชื่อเรื่องคุกกี้เสี่ยงทาย << สามารถคลิ๊กเข้าไปอ่านได้เลย ดังนั้นวันนี้ทีนเอ็มไทยไม่รอช้า นำประวัติของสาวๆ
              มาให้ทุกคนได้รู้จักกับพวกเธอมากขึ้น พร้อมส่องภาพสวยๆ ของพวกเธอกัน</p>
                <div class="undre_text">
                  <p>MEER OVER MII</p>
                </div>
              </div>
          </div>
        </div>
        <div class="portfolil">
          <p>------------ PORTfPLLO</p>
        </div>
        <div class="Content">
          <p> <img src="img/2.jpg" alt="kuikainaluk"> </p>
        </div>
        <div class="content-body">
          <div class="columns-img">
            <img src="img/c1.jpg" alt="image1">
            <img src="img/c2.jpg" alt="image2">
            <img src="img/c3.jpg" alt="image3">
          </div>
          <div class="columns-img">
            <img src="img/c4.jpg" alt="image4">
            <img src="img/c10.jpg" alt="image5">
            <img src="img/c6.jpg" alt="image6">
          </div>
          <div class="columns-img">
            <img src="img/c11.jpg" alt="image4">
            <img src="img/c12.jpg" alt="image5">
            <img src="img/c9.jpg" alt="image6">
          </div>
        </div>

        <div class="bottom-content">
          <div class="bottom-content-text">
            <h1>KAIMOOK</h1>
            <p>WARATTAYA DEESOMLERT</p>
            <p> Date of birth : 27 August 1997 </p>
            <p> Height : 153 cm</p>
              <div class="bottom_content_province">
                <p> Province : Bangkok</P>
                <p>Like : แมว </p>
              </div>
          </div>
          <div class="bottom_border">
            <p>KAIMOOK</p>
          </div>
            <i class="fa fa-arrow-circle-o-up icon-center" style="font-size:48px;color:#000" ></i>
        </div>

        <div class="footer">
          <p>00000000000&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;dfsdfdfgfdgdfgdfg
            &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;sdfsdfsdfsdfsdfsdfsdf</p>
          <div class="footer-icon">
            <i class="fa fa-facebook-f" style="font-size:48px;color:#fff"></i>
            <i class="fa fa-instagram" style="font-size:48px;color:#fff"></i>
            <i class="fa fa-linkedin" style="font-size:48px;color:#fff"></i>
          </div>
        </div>
      </div>
  </body>
</html>
หน้า css

Code: Select all

body{
  background-color: #dfdfdf;
}

 .headerandmid {
  background-color: #fff;
  height: 3145px;
  margin: 30px 20px 30px 20px;
  color: #000;
}

.headerandmid h1{
  text-align: center;
  padding-top: 20px;
}

.two_header {
  background-image: url('../img/1.jpg');
  background-size: cover;
  background-position: center;
  padding: 24px;
  height: 400px;
}

.two_header .text_two_header{
  width: 50%;
  margin-left: 100px;
  text-align: center;
  padding-top: 50px;
}

.text_text_two_header .hader_text{
  font-size: 48px;
  margin: 0px;
}

.text_text_two_header .mid_text{
  text-align: left;
  font-size: 22px;
  margin: 0px;
}

.text_text_two_header .bottom_text{
  text-align: left;
}

.text_text_two_header .undre_text{
  border: 5px solid #000b11;
  text-align: left;
  padding-left: 5px ;
  margin-right: 420px;
}

.portfolil p{
  color: #000;
  text-align: center;
}

.Content p {
  background-color: #ffe6e1;
  padding: 24px;
  height: 450px;
  margin: 0px 24px;
  margin-bottom: 24px;
  color: #000;
  text-align: center;
}

.Content p img{
  width: 300px;
  transition: all 0.2s ease-in
}
.Content p img:hover{
  transform: scale(1.1);
  transition: all 0.2s ease-in
}

.content-body{
margin: 0px 24px;
}

.content-body .columns-img{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.columns-img img{
  width: 32.333%;
  height: 400px;
  transition: all 0.5s ease-in;
}
.columns-img img:hover{
  transform: rotate(10deg);
}

.bottom-content {
  background-color: #ffe6e1;
  height: 500px;
}

.bottom-content .bottom-content-text h1 {
  padding-top: 80px;
  text-align:center;
}
.bottom-content .bottom-content-text p {
  text-align:center;
}
.bottom-content .icon-center {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.bottom-content-text .bottom_content_province{
  text-align: center;
  padding-top: 24px;
}

.bottom-content .bottom_border {
  border:5px solid #000b11;
  margin: 24px 550px 0px 550px;
  text-align: center;
}

.headerandmid .footer {
  background-color: #000000;
  color: #fff;
  height: 200px;
  padding-top: 50px;
  text-align: center;
}

.footer .footer-icon{
  display: flex;
  justify-content:space-between;
  padding: 24px 550px 0px 550px;
}
เป็นอย่างไรกันบ้างล่ะครับสำหรับหน้าเว็บแบบนี้ก็หวังจะเป็นหน้าเว็บที่ถูกใจหลาย ๆ คนนะครับถ้าใครสนใจหน้าเว็บที่ผมทำก็ลองนำไปพัฒนาต่อเลยนะครับก็หวังว่าบทความนี้จะเป็นประโยชน์ให้ทุกท่านที่เข้ามาอ่านบทความนี้นะครับ

Return to “CSS Knowledge”

Users browsing this forum: No registered users and 4 guests