Time of Update: 2017-07-26
以前我們都是用JS來實現字母的首字母大小寫,但現在沒有必要了,CSS完全可以實現,話說相容性還好從IE6開始就支援了。text-transform:none | capitalize | uppercase | lowercasenone:無轉換capitalize:將每個單詞的第一個字母轉換成大寫<style> #box{ text-transform:capitalize; }</style><p id="box">css
Time of Update: 2017-07-26
only-child選取器“:only-child”選取器選擇的是父元素中只有一個子項目,而且只有唯一的一個子項目。也就是說,匹配的元素的父元素中僅有一個子項目,而且是一個唯一的子項目。樣本示範通過“:only-child”選取器,來控制僅有一個子項目的背景樣式,為了更好的理解,我們這個樣本通過對比的方式來向大家示範。HTML代碼:<p class="post"> <p>我是一個段落</p> <p>我是一個段落</p&
Time of Update: 2017-07-26
一,背景圖片和插入圖片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>40-css背景圖片和插入圖片的區別.html</title> <style> p{ width: 200px;
Time of Update: 2017-07-26
1、只有底線的文字框:<input style="border:0;border-bottom:1 solid black;background:;">2、軟體序號式的輸入框:<script for="T" event="onkeyup">if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();</script>
Time of Update: 2017-07-26
前面的話 CSS文本樣式是相對於內容進行的樣式修飾。由於在層疊關係中,內容要高於背景。所以文本樣式相對而言更加重要。有些人對文本和字型樣式之間的不同不太瞭解,簡單地講,文本是內容,而字型則用於顯示這個內容。本文將詳細介紹文本相關樣式首行縮排定義 首行縮排是將段落的第一行縮排,這是常用的文字格式設定化效果。一般地,中文寫作時開頭空兩格,類似於此 [注意]該屬性可以為負值text-indent 值: <length> | <percentage> |
Time of Update: 2017-07-26
使用js和css講圖片的現實控制在固定的地區內,大於這個地區的等比例縮放,小於這個地區的置中顯示。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <
Time of Update: 2017-07-26
通常,我們可以給圖片<img>設定一個CSS屬性,定義其高度和寬度。但有時候,我們只希望控製圖片的最大可見大小。這樣的操作,一般有兩種辦法:1.直接使用CSS屬性值;2.使用JavaScript動態設定CSS值。一、固定大小一般,為了限制圖片的大小,會使用下面的HTML 屬性值或CSS屬性值來定義:<img src="http://www.linuxfly.org/logo.gif" width="600" height="50
Time of Update: 2017-07-26
一、網頁製作技巧執行個體解決:用CSS控製圖片自適應大小圖片自動適應大小是一個非常常用的功能,在進行製作的時候為了防止圖片撐開容器而對圖片的尺寸進行必要的控制,我們可不可以用CSS控製圖片使它自適應大小呢?我們想到了一個比較簡單的解決方案,雖然不是非常的完美,如果您的要求不是非常高,已經可以滿足你的需要了。我們看下面的代碼:p img
Time of Update: 2017-07-26
writing-mode介紹css 的writing-mode據說是為了中文,日文等方塊文字設計的,用來修改文字的書寫方向,通過這個屬性可以實現文字從右向左的布局,或者從上向下的布局。writing-mode使用.wrtmod{ margin:15px; padding:15px; border:1px solid #bababa; background:#f1f1f1; font-size:15px; writing-mode:vertical-rl;
Time of Update: 2017-07-26
zoom這個屬性是ie專有屬性,除了設定或者檢索對象的縮放比例之外,它還有可以觸發ie的haslayout屬性,清除浮動,清除margin重疊等作用。
Time of Update: 2017-07-26
writing-mode屬性 最初只是ie中的屬性,只有ie支援,現在在css3中Google,Firefox也開始支援。所以使用的時候就需要記住兩套不同的文法,ie的私人屬性和css3的規範屬性如果只需要相容到ie8+就可以只使用css3的規範屬性就可以了css3:writing-mode:horizontal-tb;//預設:水平方向,從上到下writing-mode: vertical-rl;//垂直方向,從右向左writing-mode:
Time of Update: 2017-07-26
我在一個html頁面中引入一個demo.css,其他都很正常,到但是h4標籤的align屬性,不能正確顯示。是因為在連結式中不能寫align嗎?寫成行內式就沒有問題。代碼如下:這是html頁面的幾句代碼 <h1 style="color:blue">前端工程師:JavaScript,PHP,CSS!<br/> </h1> <h2>2.測試CSS的四種形式</h2> <hr/>
Time of Update: 2017-07-26
vertical-align的定義W3C上對vertical-align的定義:vertical-align
Time of Update: 2017-07-26
下拉式清單的預設樣式:下面介紹自訂下拉式清單的兩種方法:方法一:用純CSS自訂下拉式清單的樣式。原理:將預設的下拉式清單樣式清除,自訂樣式,並附上一張向靠右對齊的小箭頭圖片。<!doctype html><html><head><style type="text/css">select{width:200px;height:30px;appearance:none; -moz-appearance:none;
Time of Update: 2017-07-26
1. 單像素邊框CSS表格這是一個很常用的表格樣式。原始碼:<!-- CSS goes in the document HEAD or added to your external stylesheet --><style type="text/css">table.gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width:
Time of Update: 2017-07-25
在網頁設計中,水平導覽功能表使用是十分廣泛的,在CSS樣式中,我們一般會用Float元素或是「display:inline-block」來解決。而今天主要講解如何讓未知寬度的元素置中,下面我們會列出幾種方法來解決水平置中問題。當然這些方法不一定是用來解決導覽功能表問題,還有其它類似情況也是可以使用的。CSS導覽功能表水平置中的多種方法:方法1:display:inline-block方法2:position:relative方法3:display:table方法4:display:inline-
Time of Update: 2017-07-24
通常CSS注釋代碼如果是單行注釋的話開始使用/*,結束使用*/,這裡向大家描述一下CSS代碼中進行注釋的三種方法,相信本文介紹一定會讓你有所收穫。CSS代碼中進行注釋的三種方法1、選取器(childselector)如果你想在IE中隱藏一個CSS定義,可以使用子選取器。CSS注釋代碼:html>bodyp{ /*declarations*/ }2、“萬用字元”(*)這種寫法只有IE瀏覽器可以理解(對其他瀏覽器都隱藏)CSS注釋代碼:*htmlp{ /*declarations*/
Time of Update: 2017-07-24
p中display和visibility屬性差別p中display和visibility屬性差別還是挺大的,雖然Visibility和Display屬性都可以達到隱藏頁面元素的目的,但它們的區別在於如何回應正常文檔流本節向大家描述一下p中display和visibility的差別,visibility屬性是隱藏元素但保持元素的浮動位置,而display實際上是設定元素的浮動特徵,雖然它們都可以達到隱藏頁面元素的目的,但它們的區別在於如何回應正常文檔流。p中display和visibility屬性
Time of Update: 2017-07-24
display:none視為不存在且不載入,即,不為被隱藏的對象保留其物理空間,即該對象在頁面上徹底消失。visibility:hidden隱藏,但在瀏覽時保留位置,即,使對象在網頁上不可見,但該對象在網頁上所佔的空間沒有改變。 使用
Time of Update: 2017-07-24
分步驟的登入註冊表單現在也比較多,主要是能提高使用者體驗,使用者可以有選擇性的填寫相應的表單資訊,不至於讓使用者看到一堆表單望而卻步。今天和大家分享的就是一款基於HTML5和CSS3的分步驟註冊登入表單,外觀不用說,非常漂亮。你看一下DEMO就知道了。這裡是線上示範,你可以先看看效果。接下來我們要來一起看看實現的過程是怎樣的。代碼有點複雜,主要由HTML代碼、CSS3代碼以及Javascript程式碼群組成。HTML代碼:<form id="msform">