Time of Update: 2018-12-07
Time of Update: 2018-12-07
良好的CSS命名可以語義化你的代碼,不僅僅是人讀起來舒服,聽說對SEO也有好處(沒有考證過),下面是流行的樣式命名,記錄一下。 ———————- 頁頭:header 登入條:loginBar 標誌:logo 側欄:sideBar 廣告:banner 導航:nav 子導航:subNav 菜單:menu 子功能表:subMenu 搜尋:search 滾動:scroll 頁面主體:main 內容:content 標籤頁:tab 文章列表:list 提示資訊:msg 小技巧:tips
Time of Update: 2018-12-07
很多人喜歡將網頁中的重要訊息列印出來,但是常常遇到這種情況,網頁在瀏覽器中非常漂亮,列印出來卻非常混亂,一些看起來引人注目和五彩繽紛的頁面內容,列印出來卻差強人意。作為網站設計者,也需要考慮頁面對於印表機是否也同樣友好。 之前為Web頁面建立一個印表機友好的版本意味著要設計一個布局和格式都經過修改的單獨頁面,這樣才能夠在列印的時候獲得令人滿意的效果,而現在不需要這樣做。
Time of Update: 2018-12-07
今天在看CSS的時候遇到了position: absolute、relative的問題,一直比較迷糊,今天終於搞清楚了。 CSS2.0 HandBook上的解釋: 設定此屬性值為 absolute 會將對象拖離出正常的文檔流絕對位置,而不考慮它周圍內容的布局。假如其他具有不同 z-index 屬性的對象已經佔據了給定的位置,他們之間不會相互影響,而會在同一位置層疊。TRBL屬性(TOP、RIGHT、BOTTOM、LEFT)當設定position:absolute
Time of Update: 2018-12-07
牛腩老師在視頻中提到了css 跟著視頻也簡單的操作了,體會到了一點其給設計帶來的好處,畢竟也是剛剛接觸這部分,下面就來說說CSS css是一套可行的,搞笑的網頁維護方法,幫網頁設計師統一維護眾多的頁面而不需要大量繁複的調整每一個頁面.它的核心理念就是表現與結構分離,也就是說把頁面結構有條理有層次的工作讓Html去完成,而如何呈現這些內容則由Css負責完成 舉個最簡單的例子,我們想在頁面上顯示"廊坊師範學院資訊技術提高班"幾個大字,為了顯眼我還將這幾個字的字型,
Time of Update: 2018-12-07
table{ table-layout: fixed;}td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 原理:本方法用於解決表格儲存格內容過多時的美觀問題,主要涉及到4句CSS樣式:1. table-layout:
Time of Update: 2018-12-07
1. 目標一個登入後的個人資訊顯示條,最終要實現的效果如所示:2. 分析這個顯示條的特點是:使用者的使用者名稱和積分可能會佔據不同的寬度,這樣會導致整個邊框的寬度不同。邊框的顏色是用的漸層色,上深下淡,所以現階段還只能用切圖的方法來做。這要怎麼實現呢?辦法很多。綜合考慮,覺得將邊框的左側、右側、中間平鋪部分各切出4px,形成一個4*75的PNG圖片,用CSS來調整background-position的辦法比較靠譜,既能實現自動平鋪,又可滿足左右圓角的要求。切圖如下:3.
Time of Update: 2018-12-07
在越來越多的網站中,XHTML的使用正以很快的速度替代HTML4,但是,目前一些主流瀏覽器對XHTML的支援還不是很好,加上一些網頁製作者對XHTML和HTML4之間的差異理解不夠,使得XHTML在WEB發展上進程變得緩慢。XHTML是XML而不是HTML 目前,對XHTML的一個主要誤解是它是HTML的另外一個版本。造成此誤解的一個事實是Microsoft Internet
Time of Update: 2018-12-07
文章目錄 概念目錄一、引言二、浮動的情感化認識三、浮動的原始意義是什嗎?四、浮動的本質是什嗎? 本文作者為:張鑫旭 來源於:張鑫旭-鑫空間-鑫生活 網站地址是:http://www.zhangxinxu.com概念目錄個人感悟之CSS代碼的情感化思維 個人觀點之浮動的意義僅僅是文字環繞顯示而已 個人觀點之浮動的本質是“包裹及破壞” 個人觀點之目前大多數浮動應用都不是浮動應該做的 個人觀點之浮動其實是個魔鬼、混球
Time of Update: 2018-12-07
IE6、IE7、IE8不支援HTML5,IE9開始支援HTML5,這就導致我們無法在IE6/IE7/IE8中使用HTML5元素作為CSS選取器。利用下面的指令碼可以解決這個問題,需要注意的是這個指令碼需要在頁面渲染以前執行。<!--[if lte IE 8]> <script type="text/javascript"> (function(){ var html5elmeents =
Time of Update: 2018-12-07
所謂“div+css”是網站標準(或稱“Web標準”)中常用的術語之一,通常為了說明與html網頁設計語言中的表格(table)定位方式的區別,因為xhtml網站設計標準中,不再使用表格定位技術,而是採用div+css的方式實現各種定位。div元素是用來為html文檔內大塊(block-level)的內容提供結構和背景的元素。div的起始標籤和結束標籤之間的所有內容都是用來構成這個塊的,其中所包含元素的特性由div標籤的屬性來控制,或者是通過使用樣式表格式化這個塊來進行控制。css是英語Casc
Time of Update: 2018-12-07
CSS HACK總結 在開發頁面的過程中,總會遇到這樣那樣的不相容問題,在盡量避免使用一些相容性很差的元素和樣式後,往往還有細節上的不相容問題,追求完美的前端工程師們就要採用css hack來解決問題了。 網上各種css hack資料很多,但是很多是有錯誤,或者不形象的,今天我來細緻形象的總結一下他們,及最萬無一失的用法~ 所有效果均經過各個瀏覽器測試 首先 ,將要提及的css hack
Time of Update: 2018-12-07
在網站的首頁或者側邊欄輸出新聞條目的時候,經常會遇到文字溢出與截斷的問題。這個問題曾經困擾了我很久,最近又重新遇到,我本著“每天進步一點點”的態度,繼續改進方法,查閱文章,幾經測試,終於確定使用純CSS的方法解決這個問題。關於這個問題,我用編程的方式解決過,也用js攻克過,現在CSS的標準屬性和各瀏覽器私人屬性的發展給我們帶來重新解決這一問題的機會,我這樣做也算是一種新的嘗試吧。假定我要實現一組新聞條目的輸出,每個新聞標題後面附帶有新聞發表的日期,日期要完整顯示,但標題和日期的總長度超過一定數值
Time of Update: 2018-12-07
用CSS的text-overflow屬性,按顯示地區的大小截取標題,取代用程式自動截取標題的方式,這樣做有兩個優點:(1) 因為中英文字型寬度不一,用程式自動截取標題,會出現長度參差不齊的情況。用CSS則可以根據顯示地區的大小來截取標題,使顯示效果更加整齊。(2) 輸出完整的標題,有利於搜尋引擎識別完整的標題內容。參數:clip: 不顯示省略標記(...),而是簡單的裁切ellipsis: 當對象內文本溢出時顯示省略標記(...)說明:
Time of Update: 2018-12-07
bug 描述 當 element 的 css font-size:100% 此類百分比值的時候 我們將得到的是個錯誤的值 而這個值是什麼呢? 也許大家猜到了。 是的 就是父容器的 clientWidth*這個百分比 之所以會這樣的原因是 因為 他的代碼如下:if(elem.currentStyle){//r=elem.currentStyle [ styleString];//取到相應css屬性的最終渲染值if ( !/^\d+(px)?$/i.test( ret ) &&
Time of Update: 2018-12-07
<form id="Form1" runat="server" action="Index.aspx" method="post"> <div id="loginForm"> <table> <tr> <td> </td> <td> &l
Time of Update: 2018-12-07
最近在OA編程中要實現滑鼠移至上方後改變表格中<tr>元素的背景顏色實現了javascript和CSS的兩種方式,總結如下:Javascript的實現方式為:onMouseover="this.style.backgroundColor='#FFFFCC';" onMouseout="this.style.backgroundColor='ffffff';"這種方式可在<tr>元素中使用在IE8、Firefox15下測試正常CSS的實現方式為:table
Time of Update: 2018-12-07
定義vertical-align 屬性設定元素的垂直排列。繼承性:No說明該屬性定義行內元素的基準相對於該元素所在行的基準的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表儲存格中,這個屬性會設定儲存格框中的儲存格內容的對齊。JavaScript 文法CSS 屬性也可通過一段 JavaScript 被動態地改變。指令碼文法:object.style.verticalAlign="bottom"例子img{
Time of Update: 2018-12-07
CSS:1.<link type="text/css" href="<%=ResolveUrl("~/css/css.css")%>" rel="stylesheet"/> asp.net相對伺服器路徑<link type="text/css" href="/css/css.css" rel="stylesheet"/>2.<style type="text/css"> .txtClass { font-size: 12px; }&
Time of Update: 2018-12-07
table{ table-layout: fixed;}td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 原理:本方法用於解決表格儲存格內容過多時的美觀問題,主要涉及到4句CSS樣式:1. table-layout: