단순한 CSS 블로그 카드

24632 단어
순수한 CSS로 간단한 블로그 카드를 만드는 방법은 다음과 같습니다.

더 많은 CSS 블로그 카드 예제를 보려면 here을 방문하십시오.

이제 블로그 카드를 만드는 단계를 살펴보겠습니다.

index.html 및 기본 HTML 형식 만들기



먼저 코드 편집기를 사용하여 index.html 파일을 만든 다음 기본 html 형식을 입력합니다.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
<style>
</head>
  <body>
  </body>
</html>


외부 스타일시트를 사용하지 않고 헤드에 스타일만 포함합니다.

카드 컨테이너 만들기




  <main>
    <div id="container">
      <a class="card-link" href="#">
        <article class="blog-card">
          <img class="post-image" src="https://images.unsplash.com/photo-1526925539332-aa3b66e35444?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" />
          <div class="article-details">
            <h4 class="post-category">Learning</h4>
            <h3 class="post-title">How to become a badass programmer</h3>
            <p class="post-description">Do you dream of becoming a computer programmer, but think you're not (and never will be) cut out for the job? Turns out you're probably...</p>
            <p class="post-author">By Codelex</p>
          </div>
        </article>
      </a>
    </div>
    </main>


html 컨테이너에는 먼저 메인 컨테이너가 있으며 그 다음에는 제목, 이미지 및 설명과 같은 항목을 포함하는 기사 컨테이너가 있습니다.

기본 스타일 지정



먼저 기본 컨테이너의 스타일을 지정하고 필요한 글꼴을 가져옵니다.

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

main {
  display: flex;
  font-family: 'Roboto', sans-serif;
  color: #777;
  background: #eedfcc;
  font-size: 16px;
  min-height: 100vh;
  line-height: 1.6;
  align-items: center;
  justify-content: center;
}

#container {
  width: 650px;
}


링크 및 블로그 카드 스타일 지정




.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.blog-card {
  display: flex;
  flex-direction: row;
  background: #fff;
  box-shadow: 0 3px 24px rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  overflow: hidden;
  /* for rounded corners */
}

.card-link:hover .post-title {
  color: #e04f62;
}

.card-link:hover .post-image {
  opacity: 0.9;
}


이미지 스타일 지정




.post-image {
  transition: opacity 0.3s ease;
  width: 40%;
  height: 280px;
  object-fit: cover;
}


기사 제목, 세부 정보 및 저자 스타일 지정




.article-details {
  padding: 24px;
}

.post-category {
  display: inline-block;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 3px;
  margin: 0 0 12px 0;
  padding: 0 0 4px 0;
  border-bottom: 2px solid #ebebeb;
}

.post-title {
  transition: color 0.3s ease;
  font-size: 17;
  line-height: 1.4;
  color: #121212;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.post-author {
  font-size: 14px;
  line-height: 1;
  margin: 17px 0 0 0;
  padding: 17px 0 0 0;
  border-top: 1px solid #ebebeb;
}


미디어 쿼리를 사용하여 디자인 응답성 유지




@media (max-width: 700px) {
  #container {
    width: 330px;
  }

  .post-image {
    width: 100%;
  }

  .blog-card {
    flex-wrap: wrap;
  }
}


이제 모든 것을 순서대로 정렬하면 작동하는 CSS 블로그 카드를 얻을 수 있습니다.

전체 코드




<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

main {
  display: flex;
  font-family: 'Roboto', sans-serif;
  color: #777;
  background: #eedfcc;
  font-size: 16px;
  min-height: 100vh;
  line-height: 1.6;
  align-items: center;
  justify-content: center;
}

#container {
  width: 650px;
}

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.blog-card {
  display: flex;
  flex-direction: row;
  background: #fff;
  box-shadow: 0 3px 24px rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  overflow: hidden;
  /* for rounded corners */
}

.card-link:hover .post-title {
  color: #e04f62;
}

.card-link:hover .post-image {
  opacity: 0.9;
}

.post-image {
  transition: opacity 0.3s ease;
  width: 40%;
  height: 280px;
  object-fit: cover;
}

.article-details {
  padding: 24px;
}

.post-category {
  display: inline-block;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 3px;
  margin: 0 0 12px 0;
  padding: 0 0 4px 0;
  border-bottom: 2px solid #ebebeb;
}

.post-title {
  transition: color 0.3s ease;
  font-size: 17;
  line-height: 1.4;
  color: #121212;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.post-author {
  font-size: 14px;
  line-height: 1;
  margin: 17px 0 0 0;
  padding: 17px 0 0 0;
  border-top: 1px solid #ebebeb;
}

@media (max-width: 700px) {
  #container {
    width: 330px;
  }

  .post-image {
    width: 100%;
  }

  .blog-card {
    flex-wrap: wrap;
  }
}
</style>
</head>
<body>
  <body>
  <main>
    <div id="container">
      <a class="card-link" href="#">
        <article class="blog-card">
          <img class="post-image" src="https://images.unsplash.com/photo-1526925539332-aa3b66e35444?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" />
          <div class="article-details">
            <h4 class="post-category">Learning</h4>
            <h3 class="post-title">How to become a badass programmer</h3>
            <p class="post-description">Do you dream of becoming a computer programmer, but think you're not (and never will be) cut out for the job? Turns out you're probably...</p>
            <p class="post-author">By Codelex</p>
          </div>
        </article>
      </a>
    </div>
</main>
</body>
</html>


출력



다음은 위 코드의 출력입니다.

MariaDb 빠른 팁 #4 - 각 행에 대한 임의의 정수
Android Studio에서 Flutter 템플릿 프로그램을 시작해 봅시다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage