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