は、マウスの指のような表示の例です 2.標準 カーソルの書き方: pointer; 10. 背景、画像クラス 1. 背景の表示の問題 width 属性と height 属性を完了することに注意してください 2. 背景の透明度の問題 IE: filter: progid: DXImageTransform。 Microsoft.Alpha(style =0,opacity=60); IE: filter: alpha(opacity=10); FF: opacity:0.6; FF: -moz-opacity:0.10; と の両方を記述するのが最善です以下に opacity 属性を置きます 11. min-height の最小高さの実装 (IE6、IE7、FF と互換性があります) 機能は次のとおりです: コンテナーの内容が小さい場合、コンテナーの破壊を避けるために最小の高さを維持できます。レイアウトまたは UI デザイン効果。コンテナ内のコンテンツが増加すると、コンテンツの変化に合わせてコンテナが自動的に伸縮します。 #mrjin { background:#ccc; min-height:100px; height:auto ! important; height:100px; overflow:visible; } 12. 有名なマイヤー リセット html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6,p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } 13、跨浏览器的CSS透明度 .transparent { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; 14、文字阴影(CSS3) .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); } 15、Box阴影(CSS3) .box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; } 16、Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置) CSS: * { margin:0; パディング:0; } html, body, #wrap { height: 100%; } body > #wrap {height: auto-height: 100%;} #main { パディングボトム: 150px; } #footer { 位置: 相対; マージントップ: -150px; .clearfix:after {コンテンツ: "."; 表示: ブロック; 高さ: 0; クリア: 両方; 可視性: 非表示;} .clearfix {表示: インラインブロック;} * html .clearfix { 高さ: 1%;} .clearfix {表示: block;} 17. iframe 要素から継承された html と本文の背景色/背景画像を削除するにはどうすればよいですか? iframe 要素の機能は、ドキュメントにドキュメントを埋め込み、フローティング フレームを作成することです。埋め込みドキュメントは、HTML、BODY、その他の属性を備えた完全なページです。ここで問題が発生します。スタイル シートの BODY に背景色/背景画像が定義されている場合、埋め込まれたドキュメントはすべてそれを継承します。では、背景色と背景画像を削除する方法: 【1】背景色を削除: filter:Chroma(Color=white); 例: 【2】背景画像を削除します: 例: 注: 埋め込まれたページには BODY 属性も追加する必要があります: 18. IE ブラウザのスクロール バーの色を Web 標準で設定できないのはなぜですか? 元のスタイル設定: 解決策は、ボディを置き換えることです。 htmlで。 19. Firefox のテキストはコンテナの高さを拡張できないのはなぜですか? 標準ブラウザで高さの値が固定されているコンテナは、IE6 のように引き伸ばされません。では、高さを固定して引き伸ばしたい場合はどうすればよいでしょうか。方法は、高さを削除して min-height:200px; を設定することです。min-height を認識しない IE6 を処理するには、次のように定義します。 200px; min-height:200px; } 20. 高さ約 1px のコンテナを定義するには? IE6 でのこの問題は、デフォルトの行の高さが原因で発生します。次のような解決策があります。 解決策は、FLASH の透明度を設定することです:: 22. ブラウザーで div レイヤーを中央に配置するにはどうすればよいですか? 23. divの背景を透明にする方法は? まず第一に、これら 2 つのレイヤーは兄弟である必要があります。次に、これら 2 つのレイヤーは絶対に配置される必要があります。例: Colinivy の世界
这里很多的文字,这里很多的文字,这里很多的文字,这里很多的文字,
BlueIdea,BlueIdea,BlueIdea
24、怎样去掉选中时的虚线框? 利用onfocus="this.blur();"例如:测试 25、ie6下png背景显示问题? 针对ie6下png背景显示问题,CSS中可以这样解决:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’http://www.0351zhuangxiu.com/uploads/images/bj.jpg’); 26、文字与表单对齐方法? 设置表单元素第一字体为Tahoma(Verdana系列也可),并设置vertical-align:middle.建设大家把这个约定写入CSS RESET中,能减小很多麻烦: body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle} 27、optgroup标签的用法? optgroup标签,鲜为人知,它对提升选择表单用户体验很有帮助。就是可以在有很多选项时,对这些选项分组:例子:one select two select three select four select 28、文字与图片垂直居中对齐方法? 为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};例如:我要的坚强
只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中. 29、文章标题列表中日期居右显示的两种方法? 方法A相对方法B省资源,但比方法B要多写两句代码,使用时请视情况而定: 方法A: 这是文章标题2010-10-10
然后定义p和span的样式: p{ position:relative} p span{ position:absolute; right:0} 方法B:2010-10-10 这是文章标题
然后定义span右浮动: p span{float:right} 30、ie6下max/min-width/height实现? ie6下max/min-width/height实现,_width: expression_r(this.width >600 ? “600px” : true);,height同理. 31、空白外边距互相叠加的问题? 一般通过添加透明边框或者1px的内边距避免; 其一,为外围元素定义透明边框.具体到本例,即在样式div中加入border:1px solid transparent; 其二,为外围元素定义内边距填充..具体到本例,即在样式div中加入padding:1px; 例如:空白边距叠加demo@Mr.Think
32. Web デザインのデフォルト フォント font: 12px/1.5 Tahoma、Helvetica、Arial、sans-serif; 注: line-height は 1.5 を使用します。 18 ピクセル。これは、淘宝網のビジュアル仕様で定義されている行の高さです。12 ピクセルのフォントの場合、この行の高さは非常に快適に見えます。フォント ファミリのデフォルトは Tahoma です。Tahoma は、英語の Windows オペレーティング システムのデフォルト フォントであり、中国語と英語がうまく組み合わされて表示されます。 33. ブラウザ対応??よく使われるCSSハック (1).title{ height:200px; *height:200px; _height:200px } (2).title{ height:200px; * height :200px !重要; *高さ:200px; } (3).title{ 高さ:200px; } *html.title{ 高さ:200px;}