✨
HTML 網頁設計
  • HTML 簡介
  • 1.網站三兄弟
    • 環境設定
    • HTML 基本結構
      • 文件架構
      • 元素
      • 文章-使用的元素
      • 超連結
      • Form表單
      • 嵌入第三方服務
    • Css 基本使用
      • 使用方式 Background
        • before、after
      • Box-sizing 介紹
      • Reset Css
      • CSS - 排版
        • CSS - 定位器
        • 導覽列篇
        • 置中篇 - 範例
        • 三欄式 - 範例
        • 兩欄式
      • css命名規則
    • JS 基本使用
      • 基本語法
      • 參數/arguments
      • param() 方法
      • 定時器（timer）
  • 2.css 進階使用
    • Display
    • Position
      • z-index and stacking context
      • Table
    • CSS選擇器
  • 3.其他JS工具
    • jQuery 簡介
      • $.cookie()
      • .animate
      • scrollTop
      • 使用效果
    • BootStrap
    • NODE.JS
      • 安裝 Node.js
        • SVG - 可縮放向量圖形
      • webpack
    • React
      • React Native
  • 4.曲線圖
    • Chart 前端操作
      • Datasets Style
      • Line 設定
  • 4.DataTable
    • Bootstrap Table
  • 99.其他內容
    • Webpack
    • IIS - 網際網路資訊服務
      • 環境設定
      • WEB IIS架站
Powered by GitBook
On this page
  • 使用說明
  • 偽元素
  • 反轉
  • 麵包屑

Was this helpful?

  1. 1.網站三兄弟
  2. Css 基本使用
  3. 使用方式 Background

before、after

::before 原本的元素[之前]加 入內容 ::after 則是原本的元素[之後]加入內容

使用說明

  • 使用時，需要加上content 才能使用

  • 產生出來虛擬元素為inline特性。無法控制寬、高、行距

  • 有關SEO內容，不應該放在content內

  • content:搜尋引擎找不倒裡面的文字

  • 可以減少HTML標籤數量，相對也加重瀏覽器的渲染區塊

偽元素

@charset "UTF-8";

.box {
	background-color: yellowgreen;
	width: 500px;
	padding: 15px;
	margin-left: auto;
	margin-right: auto;
}

.box::before {
	content: "我是 before";
	background-color: pink;
	display: block;
}

.box::after {
	content: "我是 after";
	background-color: wheat;
	display: block;
}

反轉

<body>
    <div class="base">
        <div class="base-text">text</div>
        <div class="base-photo">photo</div>
    </div>

    <div class="base flip">
        <div class="base-text">text</div>
        <div class="base-photo">photo</div>
    </div>
    
    <div class="base">
        <div class="base-text">text</div>
        <div class="base-photo">photo</div>
    </div>
    
    <div class="base flip">
        <div class="base-text">text</div>
        <div class="base-photo">photo</div>
    </div>
</body>
@charset "utf-8";

*,
*::before,
*::after {
    box-sizing: border-box;
}

.flip .base-text {
    float: right;
}

.flip .base-photo {
    float: left;
}

.base {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.base::after {
    content: "";
    display: block;
    clear: both;
}

.base-text,
.base-photo {
    width: 50%;
    padding: 15px;
}

.base-text {
    float: left;
    background-color: yellowgreen;
}

.base-photo {
    float: right;
    background-color: pink;
}

麵包屑

/* @charset "utf-8"; */
/* Base */
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, "微軟正黑體", sans-serif;
    font-size: 15px;
}

.breadcrumb{
    margin-top: 20px;
    margin-bottom: 20px;
}

.breadcrumb__item a:hover{
    color: #2ea3f2;
}

.breadcrumb__item + .breadcrumb__item::before{
    content: "»";
    margin-right: 3px;
    color:#aaa;
}
.breadcrumb__item a{
    color: #aaa;
}
Previous使用方式 BackgroundNextBox-sizing 介紹

Last updated 4 years ago

Was this helpful?