整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
1）熟練使用p標簽加粗樣式標簽給文本分段
（2）熟練使用換行標簽h標簽加粗給標簽寫標題
（3）使用圖像標簽加圖像
（4）使用錨點鏈接可以點擊鏈接快速定位到頁面中的某個位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- h1標簽的使用 -->
<h1 id="top">貓貓種類</h1>
<!--換行標簽<br/>的使用 -->
貓貓分為<br/>
<!-- 錨點鏈接的<a herf="#"></a>使用 -->
<a href="#miao">妙貓貓，</a><br/>
<a href="#cry">流淚貓貓，</a><br/>
<a href="#ben">本拉豆貓貓，</a><br/>
<a href="#wei">委屈貓貓</a><br/>
<h4 id="miao"><h3>妙貓貓</h3></h4>
<p>秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙
秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒秒啊妙啊妙啊秒啊妙啊妙啊啊妙啊妙啊秒啊妙啊妙啊秒啊妙啊妙啊秒啊妙</p>
<h4 id="cry"><h3>流淚貓貓</h3></h4>
沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒<p>人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓,沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓，沒人疼沒人愛我是一只流淚貓</p>
<img src="images/流淚貓貓.gif"width="300"/>
<h4 id="ben"><h3>本拉豆貓貓</h3></h4>
<p>哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！哦吼吼吼，我是最屌的！
</p>
<!-- 圖像標簽<img src="圖像地址"/>的使用 -->
<img src="images/本拉豆貓.jpg"width="300"/>
<h4 id="wei"><h3>委屈貓貓</h3></h4>
<p>我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？我只是一只小貓咪，我為什么要承擔這么多？</p>
<a href="#top">返回頂部</a><br>
<a href="images/菠蘿頭簡介.html"target="_blank">引申貓貓：菠蘿頭的簡介和照片</a>
</body>
</html>
1234567891011121314151617181920212223242526272829303132333435363738394041原文鏈接：https://blog.csdn.net/qq_45067479/article/details/109083277?utm_medium=distribute.pc_category.none-task-blog-hot-2.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-2.nonecase&request_id=
作者：thorn豆豆
家好，我是皮湯。最近業務調整，組內開啟了前端工程化方面的基建，我主要負責 CSS 技術選型這一塊，針對目前業界主流的幾套方案進行了比較完善的調研與比較，分享給大家。
目前整個 CSS 工具鏈、工程化領域的主要方案如下：
而我們技術選型的標準如下：
- 開發速度快
- 開發體驗友好
- 調試體驗友好
- 可維護性友好
- 擴展性友好
- 可協作性友好
- 體積小
- 有最佳實踐指導
目前主要需要對比的三套方案：
- Less/Sass + PostCSS 的純 CSS c側方案
- styled-components / emotion 的純 CSS-in-JS 側方案
- TailwindCSS 的以寫輔助類為主的 HTML 側方案
## 純 CSS 側方案
### 介紹與優點
> 維護狀態：一般
> Star 數：16.7K
> 支持框架：無框架限制
> 項目地址：https://github.com/less/less.js
Less/Sass + PostCSS 這種方案在目前主流的組件庫和企業級項目中使用很廣，如 ant-design 等
它們的主要作用如下：
- 為 CSS 添加了類似 JS 的特性，你也可以使用變量、mixin，寫判斷等
- 引入了模塊化的概念，可以在一個 less 文件中導入另外一個 less 文件進行使用
- 兼容標準，可以快速使用 CSS 新特性，兼容瀏覽器 CSS 差異等
這類工具能夠與主流的工程化工具一起使用，如 Webpack，提供對應的 loader 如 sass-loader，然后就可以在 React/Vue 項目中建 `.scss` 文件，寫 sass 語法，并導入到 React 組件中生效。
比如我寫一個組件在響應式各個斷點下的展示情況的 sass 代碼：
```
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
```
或導入一些用于標準化瀏覽器差異的代碼：
```
@import "normalize.css";
// component 相關的其他代碼
```
### 不足
這類方案的一個主要問題就是，只是對 CSS 本身進行了增強，但是在幫助開發者如何寫更好的 CSS、更高效、可維護的 CSS 方面并沒有提供任何建議。
- 你依然需要自己定義 CSS 類、id，并且思考如何去用這些類、id 進行組合去描述 HTML 的樣式
- 你依然可能會寫很多冗余的 Less/Sass 代碼，然后造成項目的負擔，在可維護性方面也有巨大問題
### 優化
- 可以引入 CSS 設計規范：BEM 規范，來輔助用戶在整個網頁的 HTML 骨架以及對應的類上進行設計
- 可以引入 CSS Modules，將 CSS 文件進行 “作用域” 限制，確保在之后維護時，修改一個內容不會引起全局中其他樣式的效果
#### BEM 規范
B （Block）、E（Element）、M（Modifier），具體就是通過塊、元素、行為來定義所有的可視化功能。
拿設計一個 Button 為例：
```
/* Block */
.btn {}
/* 依賴于 Block 的 Element */
.btn__price {}
/* 修改 Block 風格的 Modifier */
.btn--orange {}
.btn--big {}
```
遵循上述規范的一個真實的 Button：
```
<a class="btn btn--big btn--orange" href="#">
<span class="btn__price"></span>
<span class="btn__text">BIG BUTTON</span>
</a>
```
可以獲得如下的效果：
#### CSS Modules
CSS Modules 主要為 CSS 添加局部作用域和模塊依賴，使得 CSS 也能具有組件化。
一個例子如下：
```
import React from 'react';
import style from './App.css';
export default () => {
return (
<h1 className={style.title}>
Hello World
</h1>
);
};
```
```
.title {
composes: className;
color: red;
}
```
上述經過編譯會變成如下 hash 字符串：
```
<h1 class="_3zyde4l1yATCOkgn-DBWEL">
Hello World
</h1>
```
```
._3zyde4l1yATCOkgn-DBWEL {
color: red;
}
```
CSS Modules 可以與普通 CSS、Less、Sass 等結合使用。
## 純 JS 側方案
### 介紹與優點
> 維護狀態：一般
> Star 數：35.2K
> 支持框架：React ，通過社區支持 Vue 等框架
> 項目地址：https://github.com/styled-components/styled-components
使用 JS 的模板字符串函數，在 JS 里面寫 CSS 代碼，這帶來了兩個認知的改變：
- 不是在根據 HTML，然后去寫 CSS，而是站在組件設計的角度，為組件寫 CSS，然后應用組件的組合思想搭建大應用
- 自動提供類似 CSS Modules 的體驗，不用擔心樣式的全局污染問題
同時帶來了很多 JS 側才有的各種功能特性，可以讓開發者用開發 JS 的方式開發 CSS，如編輯器自動補全、Lint、編譯壓縮等。
比如我寫一個按鈕：
```
const Button = styled.button`
/* Adapt the colors based on primary prop */
background: ${props => props.primary ? "palevioletred" : "white"};
color: ${props => props.primary ? "white" : "palevioletred"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
render(
<div>
<Button>Normal</Button>
<Button primary>Primary</Button>
</div>
);
```
可以獲得如下效果：
還可以擴展樣式：
```
// The Button from the last section without the interpolations
const Button = styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// A new component based on Button, but with some override styles
const TomatoButton = styled(Button)`
color: tomato;
border-color: tomato;
`;
render(
<div>
<Button>Normal Button</Button>
<TomatoButton>Tomato Button</TomatoButton>
</div>
);
```
可以獲得如下效果：
### 不足
雖然這類方案提供了在 JS 中寫 CSS，充分利用 JS 的插值、組合等特性，然后應用 React 組件等組合思想，將組件與 CSS 進行細粒度綁定，讓 CSS 跟隨著組件一同進行組件化開發，同時提供和組件類似的模塊化特性，相比 Less/Sass 這一套，可以復用 JS 社區的最佳實踐等。
但是它仍然有一些不足：
- 仍然是是對 CSS 增強，提供非常大的靈活性，開發者仍然需要考慮如何去組織自己的 CSS
- 沒有給出一套 “有觀點” 的最佳實踐做法
- 在上層也缺乏基于 styled-components 進行復用的物料庫可進行參考設計和使用，導致在初始化使用時開發速度較低
- 在 JS 中寫 CSS，勢必帶來一些本屬于 JS 的限制，如 TS 下，需要對 Styled 的組件進行類型注釋
- 官方維護的內容只兼容 React 框架，Vue 和其他框架都由社區提供支持
整體來說不太符合團隊協作使用，需要人為總結最佳實踐和規范等。
### 優化
- 尋求一套寫 CSS 的最佳實踐和團隊協作規范
- 能夠擁有大量的物料庫或輔助類等，提高開發效率，快速完成應用開發
## 偏向 HTML 側方案
### 介紹與優點
> 維護狀態：積極
> Star 數：48.9K
> 支持框架：React、Vue、Svelte 等主流框架
> 項目地址：https://github.com/tailwindlabs/tailwindcss
典型的是 TailwindCSS，一個輔助類優先的 CSS 框架，提供如 `flex` 、`pt-4` 、`text-center` 、`rotate-90` 這樣實用的類名，然后基于這些底層的輔助類向上組合構建任何網站，而且只需要專注于為 HTML 設置類名即可。
一個比較形象的例子可以參考如下代碼：
```
<button class="btn btn--secondary">Decline</button>
<button class="btn btn--primary">Accept</button>
```
上述代碼應用 BEM 風格的類名設計，然后設計兩個按鈕，而這兩個類名類似主流組件庫里面的 Button 的不同狀態的設計，而這兩個類又是由更加基礎的 TailwindCSS 輔助類組成：
```
.btn {
@apply text-base font-medium rounded-lg p-3;
}
.btn--primary {
@apply bg-rose-500 text-white;
}
.btn--secondary {
@apply bg-gray-100 text-black;
}
```
上面的輔助類包含以下幾類：
- 設置文本相關： `text-base` 、`font-medium` 、`text-white` 、`text-black`
- 設置背景相關的：`bg-rose-500` 、`bg-gray-100`
- 設置間距相關的：`p-3`
- 設置邊角相關的：`rounded-lg`
通過 Tailwind 提供的 `@apply` 方法來對這些輔助類進行組合構建更上層的樣式類。
上述的最終效果展示如下：
可以看到 TailwindCSS 將我們開發網站的過程抽象成為使用 Figma 等設計軟件設計界面的過程，同時提供了一套用于設計的規范，相當于內置最佳實踐，如顏色、陰影、字體相關的內容，一個很形象的圖片可以說明這一點：
TailwindCSS 為我們規劃了一個元素可以設置的屬性，并且為每個屬性給定了一組可以設置的值，這些屬性+屬性值組合成一個有機的設計系統，非常便于團隊協作與共識，讓我們開發網站就像做設計一樣簡單、快速，但是整體風格又能保持一致。
TailwindCSS 同時也能與主流組件庫如 React、Vue、Svelte 結合，融入基于組件的 CSS 設計思想，但又只需要修改 HTML 上的類名，如我們設計一個食譜組件：
```
// Recipes.js
import Nav from './Nav.js'
import NavItem from './NavItem.js'
import List from './List.js'
import ListItem from './ListItem.js'
export default function Recipes({ recipes }) {
return (
<div className="divide-y divide-gray-100">
<Nav>
<NavItem href="/featured" isActive>Featured</NavItem>
<NavItem href="/popular">Popular</NavItem>
<NavItem href="/recent">Recent</NavItem>
</Nav>
<List>
{recipes.map((recipe) => (
<ListItem key={recipe.id} recipe={recipe} />
))}
</List>
</div>
)
}
// Nav.js
export default function Nav({ children }) {
return (
<nav className="p-4">
<ul className="flex space-x-2">
{children}
</ul>
</nav>
)
}
// NavItem.js
export default function NavItem({ href, isActive, children }) {
return (
<li>
<a
href={href}
className={`block px-4 py-2 rounded-md ${isActive ? 'bg-amber-100 text-amber-700' : ''}`}
>
{children}
</a>
</li>
)
}
// List.js
export default function List({ children }) {
return (
<ul className="divide-y divide-gray-100">
{children}
</ul>
)
}
//ListItem.js
export default function ListItem({ recipe }) {
return (
<article className="p-4 flex space-x-4">
<img src={recipe.image} alt="" className="flex-none w-18 h-18 rounded-lg object-cover bg-gray-100" width="144" height="144" />
<div className="min-w-0 relative flex-auto sm:pr-20 lg:pr-0 xl:pr-20">
<h2 className="text-lg font-semibold text-black mb-0.5">
{recipe.title}
</h2>
<dl className="flex flex-wrap text-sm font-medium whitespace-pre">
<div>
<dt className="sr-only">Time</dt>
<dd>
<abbr title={`${recipe.time} minutes`}>{recipe.time}m</abbr>
</dd>
</div>
<div>
<dt className="sr-only">Difficulty</dt>
<dd> · {recipe.difficulty}</dd>
</div>
<div>
<dt className="sr-only">Servings</dt>
<dd> · {recipe.servings} servings</dd>
</div>
<div className="flex-none w-full mt-0.5 font-normal">
<dt className="inline">By</dt>{' '}
<dd className="inline text-black">{recipe.author}</dd>
</div>
<div class="absolute top-0 right-0 rounded-full bg-amber-50 text-amber-900 px-2 py-0.5 hidden sm:flex lg:hidden xl:flex items-center space-x-1">
<dt className="text-amber-500">
<span className="sr-only">Rating</span>
<svg width="16" height="20" fill="currentColor">
<path d="M7.05 3.691c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.372 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.363-1.118L.98 9.483c-.784-.57-.381-1.81.587-1.81H5.03a1 1 0 00.95-.69L7.05 3.69z" />
</svg>
</dt>
<dd>{recipe.rating}</dd>
</div>
</dl>
</div>
</article>
)
}
```
上述食譜的效果如下：
可以看到我們無需寫一行 CSS，而是在 HTML 里面應用各種輔助類，結合 React 的組件化設計，既可以輕松完成一個非常現代化且好看的食譜組件。
除了上面的特性，TailwindCSS 在響應式、新特性支持、Dark Mode、自定義配置、自定義新的輔助類、IDE 方面也提供非常優秀的支持，除此之外還有基于 TailwindCSS 構建的物料庫 Tailwind UI ，提供各種各樣成熟、好看、可用于生產的物料庫：
因為需要自定的 CSS 不多，而需要自定義的 CSS 可以定義為可復用的輔助類，所以在可維護性方面也是極好的。
### 不足
- 因為要引入一個額外的運行時，TailwindCSS 輔助類到 CSS 的編譯過程，而隨著組件越來越多，需要編譯的工作量也會變大，所以速度會有影響
- 過于底層，相當于給了用于設計的最基礎的指標，但是如果我們想要快速設計網站，那么可能還需要一致的、更加上層的組件庫
- 相當于引入了一套框架，具有一定的學習成本和使用成本
### 優化
- Tailwind 2.0 支持 [JIT](https://blog.tailwindcss.com/tailwindcss-2-1 "JIT")，可以大大提升編譯速度，可以考慮引入
- 基于 TailwindCSS，設計一套符合自身風格的上層組件庫、物料庫，便于更加快速開發
- 提前探索、學習和總結一套教程與開發最佳實踐
- 探索 styled-components 等結合 TailwindCSS 的開發方式
## 參考鏈接
- [CSS 工程化發展歷程](https://bytedance.feishu.cn/docs/doccnTRF0OZtJMgKuo3y0hIDMbc# "CSS 工程化發展歷程")
以上便是本次分享的全部內容，希望對你有所幫助^_^
喜歡的話別忘了 分享、點贊、收藏 三連哦~
歡迎關注公眾號 程序員巴士，來自字節、蝦皮、招銀的三端兄弟，分享編程經驗、技術干貨與職業規劃，助你少走彎路進大廠。
html實現
效果圖
javascript
javascript
單點效果圖
.common-title {}
.common-ps {}
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
overflow: hidden;
body {
height: 100%;
#wrap {
width: 600px;
height: 900px;
border: 5px solid steelblue;
border-radius: 8%;
background: antiquewhite;
box-shadow: 2px 2px 5px #000000;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 2% auto;
text-align: center;
transition: 2s;
//絕對定位，子元素繼承位置
position: absolute;
.ct {
margin: 10px auto;
}
.cps {
margin-left: 60%;
}
&:hover {
background: seashell;
}
#btn1 {
transition: 1s !important;
}
.cevent-carousel {
margin-top: 1%;
left: 7%;
position: absolute;
.carousel-img {
img {
width: 500px;
height: 300px;
}
}
button {
position: relative;
//nth-child所包含的元素必須和父元素相同，這里父元素為button，這個為span，需要nth-of-type()
&:nth-of-type(1) {
span {
position: absolute;
font-size: 20px;
color: white;
margin-top: -8px;
left: 61%;
}
}
&:nth-of-type(2) {
span {
position: absolute;
font-size: 20px;
color: white;
margin-top: -8px;
left: 61%;
}
}
}
}
.cevent-carousel-pro {
position: absolute;
top: 55%;
.carousel-img {
img {
width: 500px;
height: 300px;
}
}
button {
position: relative;
//nth-child所包含的元素必須和父元素相同，這里父元素為button，這個為span，需要nth-of-type()
&:nth-of-type(1) {
span {
position: absolute;
font-size: 20px;
color: white;
margin-top: -8px;
left: 61%;
}
}
&:nth-of-type(2) {
span {
position: absolute;
font-size: 20px;
color: white;
margin-top: -8px;
left: 61%;
}
}
}
#dotReplacePic {
position: absolute;
list-style: none;
text-align: center;
width: 100%;
margin-left: 30%;
top: 103%;
li {
float: left;
width: 30px;
height: 30px;
background: steelblue;
color: white;
border: 2px solid silver;
border-radius: 50%;
opacity: .8;
margin: 0 1.5%;
transition:1s;
&:hover {
background: tomato;
opacity: .7;
transform: scale(1.5);
}
}
}
}
}
}
}/* DOM-html-document對象
* 注意：$(function(){}) jQuery中，獲取btn的value失效，需要轉為window.onload
*/
window.onload = function() {
var btn1 = document.getElementById("btn1");
console.log("mei點", btn1.innerHTML);
var flag = true;
btn1.onclick = function() {
if(flag) {
btn1.innerHTML = "BT Button";
} else {
btn1.innerHTML = "Link Button";
}
flag = !flag;
}
btn1.onmouseenter = function() {
btn1.style.background = "deepskyblue";
}
btn1.onmouseleave = function() {
btn1.style.background = "white";
}
//獲取btn
var previous = document.getElementById("btn-previous")
var next = document.getElementById("btn-next");
//獲取圖片，結果為array數組，需要后面加[index]索引
var imgs = document.getElementsByTagName("img")[0];
console.log("img對象[]:", imgs);
previous.onclick = function() {
console.log("上一張");
imgs.src = "./static/img/logo-500-300-5.jpg";
}
next.onclick = function() {
console.log("下一張");
imgs.src = "./static/img/logo-500-300-1.jpg";
}
//獲取btn
var previousPro = document.getElementById("previous")
var nextPro = document.getElementById("next");
var imgList = document.getElementsByClassName("carousel-img-list")[0];
console.log("圖片集合：", imgList, "info: ", info);
//獲取圖片，結果為array數組，需要后面加[index]索引
var imgsPro = ["./static/img/logo-500-300-1.jpg", "./static/img/logo-500-300-5.jpg", "./static/img/logo-500-300-2.jpg", "./static/img/logo-500-300-3.jpg", "./static/img/logo-500-300-4.jpg"];
//保存當前顯示圖片索引，默認0，第一張
var index = 0;
//共 5 張圖片-當前第 1 張
var info = document.getElementById("info");
info.innerHTML = "共 " + imgsPro.length + " 張圖片-當前第 " + 1 + " 張";
//原點切換圖片
var dotReplacePic = document.getElementById("dotReplacePic");
//在js中創建的元素，想要操作，必須在這里重新獲取
var dotLi = document.getElementsByTagName("li");
//每次點擊dot，判斷index位置
var dotIndex = 0;
//（1）存放li標簽
var liNodes = "";
//（2）存放style：css
var liStyle = document.createElement("style");
var liCss = "";
for(var i = 0; i < 5; i++) {
liNodes += "<li></li>";
//這里添加css沒有起作用，改為less中添加
liCss = "ul > li:nth-child(" + (i + 1) + "){}";
console.log("liCss: ", liCss);
}
dotReplacePic.innerHTML = liNodes;
liStyle.innerHTML += liCss;
console.log("最后的liStyle：", liStyle);
//放入html
document.head.appendChild(liStyle);
//dot初始化
dotLi[index].style.transform = "scale(1.5)";
dotLi[index].style.opacity = .7;
dotLi[index].style.background = "tomato";
console.log("img對象:", imgs);
previousPro.onclick = function() {
//初始化css樣式
dotLi[dotIndex].style.transform = "scale(1)";
dotLi[dotIndex].style.opacity = .8;
dotLi[dotIndex].style.background = "steelblue";
console.log("上一張，索引自減");
index--;
if(index < 0) {
index = imgsPro.length - 1;
}
imgList.src = imgsPro[index];
//在index自減之后記錄index位置
dotIndex = index;
dotLi[index].style.transform = "scale(1.5)";
dotLi[index].style.opacity = .7;
dotLi[index].style.background = "tomato";
info.innerHTML = "共 " + imgsPro.length + " 張圖片-當前第 " + (index + 1) + " 張";
}
nextPro.onclick = function() {
//初始化css樣式
dotLi[dotIndex].style.transform = "scale(1)";
dotLi[dotIndex].style.opacity = .8;
dotLi[dotIndex].style.background = "steelblue";
console.log("下一張，索引自增");
index++;
if(index > imgsPro.length - 1) {
index = 0;
}
imgList.src = imgsPro[index];
//在index自增之后記錄index位置
dotIndex = index;
dotLi[index].style.transform = "scale(1.5)";
dotLi[index].style.opacity = .7;
dotLi[index].style.background = "tomato";
info.innerHTML = "共 " + imgsPro.length + " 張圖片-當前第 " + (index + 1) + " 張";
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title>html-document對象</title>
<link rel="stylesheet" href="../less/6-bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/4-js-document.css" />
<body>
<div id="wrap">
<h1 class="ct common-title">原生js-DOM輪播圖操作</h1>
<h3 class="cps common-ps">一刀coder</h3>
<button id="btn1" class="btn btn-default">這是個link按鈕</button>
<div class="cevent-carousel">
<div class="carousel-img">
<img src="static/img/logo-500-300-1.jpg" alt="..." class="img-thumbnail">
</div>
<button id="btn-previous" class=" btn btn-primary" type="button">上一張 <span>↑</span> P</button>
<button id="btn-next" class="btn-next btn btn-warning" type="button">下一張 <span>↓</span> N</button>
</div>
<div class="cevent-carousel-pro">
<div class="carousel-img img-thumbnail">
<img src="static/img/logo-500-300-1.jpg" alt="..." class="carousel-img-list">
</div>
<button id="previous" class=" btn btn-danger" type="button">上一張 <span>↑</span> P</button>
<button id="next" class="btn-next btn btn-success" type="button">下一張 <span>↓</span> N</button>
<button id="info" class="btn-next btn btn-default disabled" type="button"></button>
<ul id="dotReplacePic">
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="../less/6-bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="../less/6-bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/4-js-document.js"></script>
</html>最終效果圖
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
