html+css小例子-1

阿新 • • 發佈：2020-12-07

html+css小例子-1

效果圖如下：

在這裡插入圖片描述

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  < 
style>
    /* 1.樣式重置 */
    ul {
      /* 不常用 */
      /* list-style-image: url(""); */
      /* margin-top: 8px; */

      /* list-style-position */
      /* 不常用 */
      /* list-style-position: outside; */
      /* list-style-position: inside; */

      /* list-style:是 list-style-type、list-style-image、list-style-position的縮寫屬性*/ 

      /* 前倆個存在一個就行 */
      /* list-style: outside url(""); */

      /* 常規操作 */
      list-style: none;
      padding: 0;
      margin: 0;
    }


    /* 2.整體樣式 */
    a {
      text-decoration: none;
      color: #0000cc;
    }
    
    /* 3.每一個li的樣式 */
    .page ul li {
      display: inline-block/* 對內是行元素，對外是快元素 =>所有li在一行顯示 */ 

    }

    .page ul li a {
      display: inline-block;/* 對外是塊級元素，可設定寬高 */
      width: 34px;
      height: 34px;
      border: 1px solid #e1e2e3;

      /* 橫向居中 */
      text-align: center;
      /* 行高=div高度->垂直居中 */
      line-height: 34px;

      /* 調整間距 */
      margin-right: 5px;
    }

    .page ul li a:hover {
      border: 1px solid #38f;
      background-color: #f2f8ff;
    }

    /*疊加css屬性 */
    .page .prev a,.page .next a {
      /* 並集選擇器 */
      width: 88px;
    }

    /* 4.點選後的a效果 */
    .page .active {
      border: none;
      font-weight: 700;
      color: #000;

    }

    .page .active:hover {
      border: none;
      background-color: transparent;/* transparent：透明 */
    }
  </style>
</head>
<body>
  <div class="page">
    <ul>
      <li class="prev"><a href="#">&lt;上一頁</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a  class="active">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
      <li><a href="#">7</a></li>
      <li><a href="#">8</a></li>
      <li><a href="#">9</a></li>
      <li><a href="#">10</a></li>
      <li class="next"><a href="#">下一頁&gt;</a></li>
    </ul>
  </div>
</body>
</html>

html+css小例子-1

技術標籤：cssHTMLhtmlcss html+css小例子-1 效果圖如下：程式碼如下： <!DOCTYPE html>

HTML+CSS知識點【1】

技術標籤：htmlhtmlcss 目錄 1、小div在大div中如何水平垂直居中方法一：使用定位的方法方法二:利用定位及margin:auto實現方法三:使用display:table-cell;方法四:使用伸縮佈局display:flex方法五:計算四周的間

html+css 小專案注意事項

復位專案樣式百度搜索yui reset 點選百度快照轉到圖中的網址複製下來在自己的專案中建立css檔案，複製進去，並且引入到自己的html檔案中

Html+CSS小案例專案：CSS開發小米商城電商產品展示效果

關於電商產品展示，無論是從首頁還是到欄目頁，再到產品的詳情頁，產品展示效果不僅僅是在電商平臺，在很多的企業網站也使用頻繁，今天為大家分享一個HTML+CSS小案例專案：小米電商平臺的商品展示頁面！我們來一起看

回顧html+css（1）

技術標籤：前端htmlcsses6 一.html和web網頁組成部分 1.什麼是html 超文字標記語言 2.html的語法

【HTML+CSS】實現小盒子水平垂直居中大盒子

技術標籤：web前端csshtml基礎大前端csshtmlcss3html5 小div在大div中如何水平垂直居中關於如何設定小盒子在大盒子裡面水平垂直方向同時居中的實現方法有很多種，下面僅列舉了常用的幾種。首先看一下要實現的

android html 不換行字型縮小了_每天一個CSS小技巧 - 插入換行

技術標籤：android html 不換行字型縮小了當我們在定義列表時，我們通常想得到如下的效果：

html+css+js實現canvas跟隨滑鼠的小圓特效原始碼

效果（原始碼在最後）：實現： 1.定義標籤： <h1>北極光之夜</h1> <canvas id=\"draw\" style=\" position: fixed; display: block;\">

2021年1月-第02階段-前端基礎-HTML+CSS進階-VS Code 軟體

Visual Studio Code (簡稱 VS Code / VSC) 是微軟公司推出的一款免費開源的現代化輕量級程式碼編輯器，支援幾乎所有主流的開發語言的語法高亮、智慧程式碼補、GIT 等特性，支援外掛擴充套件等等。官網下載地址：h

html+css+js實現別踩白板小遊戲

目錄背景簡介一、思路分析二、頁面搭建2.1 HTML層2.2 層2.3 層2.3.1獲取元素2.3.2建立每一行div元素2.3.3點選事件函式封裝2.3.4 方塊移動函式封裝2.3.5 遊戲開始三、總結背景簡介

富有彈性的導航欄小標籤Html+CSS

富有彈性的導航欄小標籤Html+CSS 演示 html <!DOCTYPE html> <html lang=\"en\"> <head>

簡易部落格頁面小專案 html css

專案預覽程式碼 html: <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

java彈幕小遊戲1.0版本

java 彈幕小遊戲的最初版本，供大家參考，具體內容如下最近在學習javaSE，根據b站視訊老師的講解，也參考了他的程式碼，做了一個彈幕小遊戲，也增添了一些自己的程式碼進去，因為只是最簡單的遊戲體，以後會慢慢做

wxPython實現繪圖小例子

本文例項為大家分享了wxPython繪圖小例子的具體實現程式碼，供大家參考，具體內容如下

基於html+css+js實現簡易計算器程式碼例項

使用html+css+js實現簡易計算器，效果圖如下： html程式碼如下 <!DOCTYPE html> <html lang=\"en\">

Python正則表示式學習小例子

正則表示式是處理字串的強大工具。作為一個概念而言，正則表示式對於Python來說並不是獨有的。但是，Python中的正則表示式在實際使用過程中還是有一些細小的差別。

jQuery HTML css()方法與css類例項詳解

本文例項講述了jQuery HTML css()方法與css類。分享給大家供大家參考，具體如下：

Servlet+JDBC實現登陸功能的小例子(帶驗證碼)

案例需求：訪問帶有驗證碼的登入頁面login.jsp使用者輸入使用者名稱，密碼以及驗證碼。如果使用者名稱和密碼輸入有誤，跳轉登入頁面，提示:使用者名稱或密碼錯誤如果驗證碼輸入有誤，跳轉登入頁面，提示：驗證碼錯誤

04 Web 相關知識-HTML/CSS/JS

本小節會將會介紹前端的相關基礎知識，這些是後面 Django 的模板系統中必要的基礎知識。我們會在開發的 Django 專案中製作一些簡單的頁面，需要用到這裡的內容。

面試瀏覽器/HTML/CSS問題

盒模型盒模型主要兩種，標準盒模型和怪異和模型標準盒模型：width指content部分的寬度

html+css小例子-1

相關推薦