整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
鼠標(biāo)移動到文字時。會懸浮提示效果彈出顯示，下面就來說說用content來實現(xiàn)該效果！
html
利用了content:attr()；起到彈出懸浮窗效果！
圖網(wǎng)在做web前端項目切圖的時候，圖片的地方經(jīng)常會加一點懸停效果，最最常見的是，鼠標(biāo)移上去，圖片稍微放大一點點，這樣可能增強(qiáng)體驗，增加互動。
下面整理了15中css3圖片Hover懸停效果，基本你能想到的效果都在這了。
使用方法
1、在head區(qū)域引入樣式表文件normalize.css、demo.css、component.css
2、選取你想要的效果：<figure class="effect-lily"> …… </figure>為一個單元效果
3、3個css文件可根據(jù)你的需要做適當(dāng)精簡
演示
http://www.qietu.com.cn
Hyper Text Markup Language, 超文本標(biāo)記語言
標(biāo)記又稱為標(biāo)簽(Tag), 一般語法:
<tagName></tagName>
它可以有屬性(Attribute):
<tagName attributeName="value">, 如:
<meta charset="utf-8" />
標(biāo)簽也可以不成對地關(guān)閉:
<tagName />
HTML文檔由瀏覽器解釋并執(zhí)行。
<!DOCTYPE html> ----- 告訴瀏覽器用html5的標(biāo)準(zhǔn)來解釋和執(zhí)行該網(wǎng)頁
<html>
<head> ---- 頭部, 可包含meta, title等標(biāo)簽
</head>
<body> ---- 主體, 包含主要內(nèi)容
</body>
</html>
<meta charset="utf-8" /> 用于告訴瀏覽器用什么樣的字符編碼來解釋網(wǎng)頁中的文本.
常見編碼:
iso-8859-1: 純英文編碼
gbk, gb2312: 簡體中文編碼
big5: 大五碼,繁體中文編碼,主要應(yīng)用于臺灣地區(qū)
utf-8: 國際首選編碼,它兼容所有的字符
除此之外, meta還可以通過keywords, description屬性對頁面關(guān)鍵詞及描述信息進(jìn)行設(shè)置, 以提高搜索引擎的命中.
網(wǎng)頁標(biāo)題, 顯示在瀏覽器選項卡的標(biāo)題欄上!
h1-h6: 內(nèi)容標(biāo)題標(biāo)簽
p: 段落
br: 換行
hr: 水平線
strong: 粗體文本
em: 斜體文本
span: 無任何特殊樣式的文本
pre: 預(yù)格式標(biāo)簽,其中的內(nèi)容在頁面上帶格式渲染
small: 比當(dāng)前字體小的文本
空格
< 小于
> 大于
? 版權(quán)符
" 雙引號
<!-- 注釋內(nèi)容 -->
<img
src="圖像地址"
title="鼠標(biāo)懸停提示"
alt="圖像加載錯誤時的替代文本"
width="寬度"
height="高度"
/>
圖像地址分為2種:
1. 相對地址, 如: img/cc.jpg
2. 絕對地址, 如: http://img.bcd.com/2017/1644232421.jpg
<a href="鏈接地址" target="目標(biāo)窗口">文本|圖片</a>
目標(biāo)窗口:
_self: 目標(biāo)頁面在當(dāng)前窗口打開
_blank: 目標(biāo)頁面在新窗口中打開
如果是在頁面具有frameset/frame/iframe的場景下:
_top: 在頂級窗口中打開
_parent: 在父級窗口中打開
_自定義名稱: 在指定的特定窗口中打開
三種用法:
1. 頁面間鏈接
<a href="page/login.html"></a>
2. 錨鏈接
<a href="#help"></a>
help是本頁面中一處id為help的標(biāo)簽, 如: <p id="help">
或者:
help是通過a標(biāo)簽命名的錨記, 如: <a name="help"></a>
3. 功能性鏈接
喚醒本地安裝的外部程序如 outlook/foxmail/qq/msn/aliwangwang...
<a href="mailto:abcdef@qq.com"></a>
div是一個容器, 常用于頁面的布局
標(biāo)簽的分類:
1. 塊級標(biāo)簽/塊級元素
如: div, h1-h6, p, hr
特征: 獨占容器中的一行, 其寬度是容器的100%
2. 行級標(biāo)簽/行級元素
如: span, img, strong, em, a
特征1: 多個行級元素可以同處一行, 其寬度由內(nèi)容來撐開(auto)
特征2: 大部分行級元素設(shè)置其width/height無效
ctrl + D : 刪除當(dāng)前行
ctrl + PgUp : 當(dāng)前行上移
ctrl + PgDown : 當(dāng)前行下移
ctrl + / : 注釋 | 取消注釋
ctrl + shift + F : 整理代碼格式
ctrl + C : 復(fù)制當(dāng)前行
ctrl + X : 剪切當(dāng)前行
ctrl + V : 粘貼
ctrl + Z : 撤消上一步操作
ctrl + S : 保存當(dāng)前文件
ctrl + shift + S : 保存項目中全部文件
ctrl + Enter : 在當(dāng)前行的下方插入新行
ctrl + shift + Enter : 在當(dāng)前行的上方插入新行
以上知識能做的效果圖
部分效果
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
