2. 程式人生 > 其它 >P63-前端基礎CSS-電影卡片練習圖文佈局

P63-前端基礎CSS-電影卡片練習圖文佈局

阿新 • • 發佈：2021-01-27

技術標籤：最美前端# 前端【H5+Css3】

P63-前端基礎CSS-電影卡片練習圖文佈局

1.概述

通過電影卡片案例，綜合練習背景圖片、文字的樣式設定和佈局。

2.電影卡片案例

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>電影卡片</title>
  <link rel="stylesheet" href="./css/reset.css">
  <!-- 匯入圖示字型 -->
 

  <link rel="stylesheet" href="./fa/css/all.css">

  <style>
    /* 設定外層容器 */
    .outer {
      width: 240px;
      margin: 100px auto;
      /* 設定陰影 */
      box-shadow: 0 0 10px rgba(0, 0, 0, .8);
    }

    /* 設定圖片 */
    .img-wrapper img {
      width: 100%;
      vertical-align: bottom;
 

    }

    /* 設定內容容器 */
    .info {
      padding: 0px 18px;
      color: #acaaaa;
      font-size: 14px;
    }

    .info .title {
      color: #717171;
      font-size: 18px;
      margin: 13px 0 15px 0;
    }

    .info .category i{
      margin-left: 4px;
      margin-right: 7px;
    }

    /* 設定簡介的樣式 */
 

    .info .intro {
      margin: 18px 4px;
      /* 設定行間距 */
      line-height: 20px;
    }

    /* 設定下邊的內容 */
    .star-wrapper {
      height: 46px;
      line-height: 46px;
      border-top: 1px solid #e9e9e9;
      color: #ddd;
      padding: 0 16px;
    }

    /* 設定星星的樣式 */
    .star-wrapper .star {
      float: left;
    }

    .star-wrapper .light {
      color: #b9cb41;
    }

    .star-wrapper .weibo {
      float: right;
    }
  </style>
</head>

<body>
  <!-- 建立一個外層容器 -->
  <div class="outer">
    <!-- 建立圖片容器 -->
    <div class="img-wrapper">
      <img src="./img/10/1.jpg" alt="電影卡片">
    </div>
    <!-- 建立內容區容器 -->
    <div class="info">
      <h2 class="title">
        暴雪公主
      </h2>
      <h3 class="category">
        <!-- 使用圖示字型 -->
        <i class="fas fa-map-marker-alt"></i>
        Call Me
      </h3>
      <p class="intro">
        Now the queen was the most beautiful woman in all the land,
        and very proud of her beauty. She had a mirror,
        which she stood in front of every morning
      </p>
    </div>
    <!-- 建立評分的容器 -->
    <div class="star-wrapper">
      <!-- 建立星星 -->
      <ul class="star">
        <!-- 使用圖示字型 -->
        <li class="fas fa-star light"></li>
        <li class="fas fa-star light"></li>
        <li class="fas fa-star"></li>
        <li class="fas fa-star"></li>
      </ul>
      <!-- 分享 -->
      <ul class="weibo">
        <!-- 使用圖示字型 -->
        <li class="fab fa-weibo"></li>
      </ul>
    </div>

  </div>
</body>

</html>

3.效果

在這裡插入圖片描述

相關推薦

P63-前端基礎CSS-電影卡片練習圖文佈局

技術標籤：最美前端# 前端【H5+Css3】 P63-前端基礎CSS-電影卡片練習圖文佈局 1.概述

前端基礎 | CSS

1. 為了讓網頁元素的樣式更加豐富,也為了讓網頁的內容和樣式能拆分開,CSS由此思想而誕生.

2020年12月-第01階段-前端基礎-CSS初識

CSS層疊樣式表 理解 css的目的作用 css的三種引入方式 1.HTML的侷限性 說起HTML，這其實是個非常單純的傢伙， 他只關注內容的語義，

2020年12月-第01階段-前端基礎-CSS字型樣式

CSS字型樣式屬性除錯工具 應用 使用css字型樣式完成對字型的設定 使用css外觀屬性給頁面元素新增樣式

2020年12月-第01階段-前端基礎-CSS Day02

CSS Day02 複合選擇器 後代選擇器 並集選擇器 1. CSS複合選擇器 理解 理解css複合選擇器分別的應用場景

2020年12月-第01階段-前端基礎-CSS Day03

CSS Day03 盒子模型（CSS重點） css學習三大重點： css 盒子模型、浮動、定位 主題思路：

P9-前端基礎-CSS簡介

技術標籤：最美前端# 前端【H5+Css3】 P9-前端基礎-CSS簡介 1.概述 網頁分成三個部分：

P62-前端基礎CSS-背景圖片位移之雪碧圖效果

技術標籤：最美前端# 前端【H5+Css3】 P62-前端基礎CSS-背景圖片位移之雪碧圖效果

P53-前端基礎CSS-行高設定

技術標籤：最美前端# 前端【H5+Css3】 P53-前端基礎CSS-行高設定 1.概述 行高（line height）

P21-前端基礎-CSS顏色四種表示方式

技術標籤：最美前端# 前端【H5+Css3】 P21-前端基礎-CSS顏色四種表示方式 1.概述 顏色單位： 在CSS中可以直接使用顏色名來設定各種顏色 比如：red、orange、yellow、blue、green … … 但是在css中直接使用顏色

P18-前端基礎-CSS樣式的繼承

技術標籤：最美前端# 前端【H5+Css3】 P18-前端基礎-CSS樣式的繼承 1.概述 樣式的繼承，我們為一個元素設定的樣式同時也會應用到它的後代元素上 繼承是發生在祖先後後代之間的 繼承的設計是為了方便我們的開發，

P17-前端基礎-CSS偽元素選擇器

技術標籤：最美前端# 前端【H5+Css3】 P17-前端基礎-CSS偽元素選擇器 1.概述 偽元素，表示頁面中一些特殊的並不真實的存在的元素（特殊的位置） 偽元素使用 :: 開頭

P23-前端基礎-CSS盒子模型

技術標籤：最美前端# 前端【H5+Css3】 P23-前端基礎-CSS盒子模型 1.概述 盒模型、盒子模型、框模型（box model）

前端基礎-CSS層疊樣式表

CSS CSS被用來同時控制多重網頁的樣式和佈局。 通過使用 CSS，所有的格式化均可從 HTML 中剝離出來，並存儲於一個獨立的檔案中。

前端基礎小知識：常用的選擇器的一些運用，及匯入CSS的四種方法

1.這裡我們運用不同選擇器來製作炫彩logo 我們用到了，標籤選擇器，類選擇器，ID選擇器，分別給予不同屬性值，來變化下面字型的顏色和大小，具體程式碼如下：

前端基礎篇：CSS文字屬性集合

一、字型屬性 font-family：‘微軟雅黑’指定字型Css屬性設定樣式 font-size: 12px/em/rem

css實現一個電影卡片

1 <!DOCTYPE html>2 <html lang=\"en\"> 3 <head> 4<meta charset=\"UTF-8\"> 5<title></title>

P78-前端基礎動畫效果-小球跳躍動畫練習

技術標籤：最美前端# 前端【H5+Css3】 P78-前端基礎動畫效果-小球跳躍動畫練習

前端基礎面試題 (一) ----- css基礎

CSS基礎面試題1.盒模型寬度計算1) offsetWidth = (內容寬度+內邊距padding+邊框border)無外邊距margin2) 想讓div的width = offsetWidth設定:box-sizing:border-box;

前端基礎HTML---css簡介(內聯樣式)

1. 層疊樣式表(Cascading Style Sheets)2. Css可以用來為網頁建立樣式表,通過樣式表可以對網頁進行裝飾。3. 所謂層疊，可以將整個網頁想象成是一-層一層的結構,層次高的將會覆蓋層次低的。而css就可以分別為網頁的各