Time of Update: 2017-01-13
一、float:主要目的是為了實現文本繞排圖片的效果。 也成了建立多欄布局最簡單的方式。 <imgsrc= “ ” />
Time of Update: 2017-01-13
匯入外部css樣式表的方法使用link標籤匯入外部css樣式表 <linkrel="stylesheet"href="css/demo01.css"> 在樣式表中import(匯入)外部樣式表
Time of Update: 2017-01-13
標籤使用display: inline-block;時,將對象呈遞為內聯對象,但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內,允許空格。(準確地說,應用此特性的元素呈現為內聯對象,周圍元素保持在同一行,但可以設定寬度和高度地塊元素的屬性)使用inline-block水平呈現的元素間,換行顯示或空格分隔的情況下會有間距,很簡單的個例子:<!DOCTYPE html><html lang="zh-cn"><head>
Time of Update: 2017-01-13
看完這篇文章後決定用第三個方法,其實很想用jq的,方便靈活,諮詢了好多老前輩後,得知Js控制DOM在效能上影響比較大,能用css和html解決就不要用js了。HTML 代碼如下複製代碼 <div id="container"><div>.........</div> <div class="push"><!-- not put anything here
Time of Update: 2017-01-13
CSS支援多種單位形式,如百分比、px、pt、rem等,百分比和px是常用的單位,隨著移動端和響應式的流行,rem、vh、vw也開始普遍使用,這些單位你可能未必知道,想瞭解?可以戳此文:CSS:7個你可能不認識的單位。今天在SegmentFault社區碰到了兩個關於百分比計算的問題,一個是在translate中使用百分比的時候,是相對於哪個DOM元素的大小計算的;另外一個是在padding、margin等中使用百分比時,百分比又是怎麼轉為px的呢?對於第一個,移動距離是根據自身元素的大小來計算的
Time of Update: 2017-01-13
本文我們推薦8個在Linux為核心的髮型系統上免費的css代碼編輯器,非常的經典。1)jEditjEdit是一款成熟的文字編輯器,其背後凝聚了許許多多人多年的開發汗水。下載,安裝,然後設定,就可以快速輕鬆地進入jEdit啟動頁面。官方網站:http://www.jedit.org/2)BluefishBluefish是一款功能強大的編輯器,為程式員和web開發人員提供了許多編寫網站、指令碼和編程代碼的選項。Bluefish支援多種編程和標記語言。並且Bluefish是一種多平台的應用程式,可在大
Time of Update: 2017-01-13
1.父元素定義height<span style="font-family:Microsoft YaHei;"><style> .wrapper { width:600px; height:200px;/* 解決代碼 */
Time of Update: 2017-01-13
手動添加CLASS有時候,我們需要移除一個列表元素中,最後一個和第一個元素的間距(margin)屬性,你可以手動給他們設定CSS樣式:.first { margin-top: 0 !important; margin-left: 0 !important; } .last { margin-bottom: 0 !important; margin-right: 0 !important;
Time of Update: 2017-01-13
層疊優先順序是:瀏覽器預設 < 外部樣式表 < 內部樣式表 < 內聯樣式 其中樣式表又有:類別選取器 < 類派生選取器 < ID選取器 < ID派生選取器 派生選取器以前叫上下文選取器,所以完整的層疊優先順序是:瀏覽器預設 < 外部樣式表 < 外部樣式表類別選取器 < 外部樣式表類派生選取器 < 外部樣式表ID選取器 < 外部樣式表ID派生選取器 < 內部樣式表 < 內部樣式表類別選取器 <
Time of Update: 2017-01-13
認識Photoshop(PS)CSS切圖必用工具Adobe PHOTOSHOP平時我們又被稱為PS。 div
Time of Update: 2017-01-13
可能大家看過關於 Retina 螢幕的一像素邊框問題,注意這裡是邊框寬度而不是移動元素。什嗎?border 小於 1px ?對,因為前面有人給出相關方案而且好多種方案,這裡不重複描述實現原理,給大家兩個連結,感興趣的自己跳轉。Retina 屏的行動裝置如何?真正 1px 的線?移動 web 點 5 像素的秘密看完大徹大悟,佩服佩服,思路很多,回到本文重點想一下能實現移動的方法 position(top,right,bottom,left), margin, padding,
Time of Update: 2017-01-13
大家可能會經常用到hover這屬性,用hover實現滑鼠經過的顏色改變等等之類,其實hover非常強大。分享一個滑鼠經過,彈出下拉式功能表的小技巧;當我們建好一個列表:<ul><li class=”home”><a href=”javascript:;” target=”_blank”
Time of Update: 2017-01-13
應用技巧一:位移和連寫我們可以用box-shadow的位移效果來書寫移動端導覽按鈕“三道杠”,如下圖:我們正是運用了box-shadow的位移和連寫!何為連寫?就是我們可以書寫多個box-shadow,並用“,”進行分割。達到不同的效果!三道杠的代碼書寫如下:.sdg{width:45px;height:45px;line-height:2.6;border:1px solid
Time of Update: 2017-01-13
53 CSS-Techniques You Couldn’t Live Without53個CSS-不可或缺的技巧QUOTE:CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between
Time of Update: 2017-01-13
1.基本文法 CSS的定義是由三個部分構成:選擇符(selector),屬性(properties)和屬性的取值(value)。基本格式如下: selector { property: value} (選擇符 { 屬性:值}) 選擇符是可以是多種形式,一般是你要定義樣式的HTML標記,例如BODY、P、TABLE……,你可以通過此方法定義它的屬性和值,屬性和值要用冒號隔開: body { color: black}
Time of Update: 2017-01-13
一個新的,更加具有親和力的CSS隱藏文字方法介紹,說明為什麼現有的幾種CSS隱藏文字的方法的缺陷和新的方法如何彌補。實用性一般,但是這個方法挺新穎的。1.display:none;的缺陷 搜尋引擎可能認為被隱藏的文字屬於垃圾資訊而被忽略螢幕助讀程式(是為視覺上有障礙的人設計的讀取螢幕內容的程式)會忽略被隱藏的文字。2. visibility: hidden ;的缺陷這個大家應該比較熟悉就是隱藏的內容會佔據他所應該佔據物理空間3.overflow:hidden;一個比較合理的方法
Time of Update: 2017-01-13
css中能把cursor變成抓手樣的形狀,注意不是超連結的那種手,是抓手css:{cursor:url('絕對路徑的圖片(格式:cur,ico)'),-moz-zoom-out;}//FF下面css:{cursor:url('絕對路徑'),auto;}//IE,FF,chrome瀏覽器都可以例子 代碼如下複製代碼 .style1{ cursor: url('http://你地網站/手抓.jpg'); } 補充:問題一 瀏覽器不相容問題:
Time of Update: 2017-01-13
做開發幾年了,在前端開發中,竟然沒有留意position:fixed的用法。我們都知道CSS中定位屬性position的值,除了預設的值外,還有absolute,relative和fixed。我平時比較常用absolute和relative,而position:fixed卻沒多關注。或許是因為當初在CSS中文手冊中看到position:fixed旁邊有說明“IE5.5及NS6尚不支援此屬性”吧。昨天,在做一個項目時需要使一個層相對於瀏覽器邊框固定,那時用position:
Time of Update: 2017-01-13
關於CSS 用CSS縮寫給你的網站加速 Web網站可用性的關鍵計量是速度,更確切地說,是頁面能以多快的速度出現在訪問者的瀏覽器視窗裡。影響速度的因素有很多種,包括Web伺服器的速度、訪問者的Internet串連情況,以及瀏覽器必須下載的檔案大小。儘管你無法控制伺服器和串連的速度,但是你可以控制構成網站Web頁面的檔案大小。 為了讓網站能夠更快,Web的建設者都會按常規地壓縮和最佳化網站上的每一個影像檔,這常常使得為了將檔案的大小減少幾個百分點而犧牲了映像的品質。由於CSS樣式表是純文
Time of Update: 2017-01-13
代碼如下複製代碼 $(document).ready(function() { $ (".about_main li").hover(function(){ $(this).addClass('hover'); },function(){ $(this).removeClass('hover'