" " ;/colgroup> 3 番目は、太字で中央揃えの属性を非表示にします
col タグは、色や背景などのテーブルの列に作用します
テーブルの背景の優先順位背景色の優先順位よりも高くなります
html image
图像
文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top
缺省是bottom,在图像最的下方见到文字,
top上 center中间
主要用 left或者right,align left或者right属性的设置相当于 浮动float的设置(博客或者日志的图文粗略显示模式
vspace="10" hspace="10" 对应上下margin
上述基本属性基本使用css来实现就可以了
在a标签的包括下图像,边框的设置:css设置图像边框为0,css reset中要设置
设置图标 ie6会有问题显示不了图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 1
Alt属性对应无图像加载时候,对图像的描述,开发的时候必须加入,然而title属性看效果使用也无伤大雅。
Html 超链接
超链接
</p> <p>超链接也叫 URL 中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据 URL</p> <p>的地址找到所需的资源。</p> <p>格式:</p> <p>scheme://host[:post]/path/filename</p> <p>scheme指的是 http,ftp,file,mailto,news,gopher,telnet 七种</p> <p>host 指的是 IP 地址或计算机名称</p> <p>post 指的是服务器端口</p> <p>path 指的是文件路径</p> <p>filename 指的是文件</p> <p> </p> <p>基准参考点</p> <p>基本格式:<head>< basehref=”http://localhost:8080”> </head></p> <p>对应的该页面下的超链接为http://localhost:8080/*</p> <p> 163@163
href="mailto:163@163.com" 使用本机的邮件发送
锚点 a设置name name="123"
跳转到123的锚点,a超链接 href写的#123 一般直接使用top返回顶部,对应某些页面的锚点,使用href="1.html#123"
超链接hover 点击后css失效 使用正确的书写顺序 link visited hover active 其实就是一个样式重写的问题
Target属性 target="_blank" 新窗口打开
_blank ブラウザは常に、新しく開かれた名前のないウィンドウにターゲット ドキュメントを読み込みます。
_self このターゲットの値は、ターゲットを指定しないすべての タグのデフォルトのターゲットであり、ターゲット ドキュメントがロードされ、ソース ドキュメントと同じフレームまたはウィンドウに表示されます。このターゲットは、ドキュメント タイトルの タグの target 属性と組み合わせて使用しない限り、冗長であり不要です。
_parent このターゲットにより、ドキュメントが親ウィンドウ、またはハイパーリンクによって参照されるフレームを含むフレームセットに読み込まれます。この参照がウィンドウ内またはトップレベルのフレーム内にある場合、それは target _self と同等です。
_top このゴールにより、ハイパーリンクを含むウィンドウにドキュメントが読み込まれます。_top ゴールを使用すると、含まれているフレームがすべてクリアされ、ドキュメントがブラウザ ウィンドウ全体に読み込まれます。
もちろん、target="du" など、新しいウィンドウの名前を自分で定義することもできます。そうすると、新しいウィンドウが du ウィンドウまたはラベルで開かれます
すべてのハイパーリンクは定義された view_window で開かれ、あまりにも多くのページを繰り返し開くことはありません
HTML フォーム
form
;
" < ;/optgroup>
>
< ;/Select & gt;
属性値 Multiple は複数の選択肢、Optgroup Label = "Guangxi"、次のオプションの名前が表示されます。選択すると、複数選択リストを js で実装する必要があります。そうしないと、ユーザーはアカウントを購入できません
< /html>
外側の境界線:
.. タイトル: ...
効果のタイトルは境界線の内側にあります
- ---タイトル------------- ----
htmlフレームワーク
frame
< Frame src="6.Form">
body タグを削除する必要があります 現在、基本的なネストはフローティングフレームを使用しています
iframe
通常、JavaScriptが必要です Webページの高さを自動的に取得します
htmlメディア(主にFlash用)
メディア
高さと幅が必要です
wmode
value
windowはFlashを独自の長方形のウィンドウで再生します
opaqueはFlashの背後にあるページを非表示にします
transparentはFlashの特定の部分を透明にします
object はオブジェクトであり、その値を挿入する必要があります。対応するフラッシュは、型宣言オブジェクト type
BGM の場合は、bgsound src="URL"loop="回数" を使用して
メタタグ (メタについては機会があれば詳しく説明します)
時限ジャンプ ページ
リフレッシュとは、再定義されたジャンプ ページを実現するためにページを再ダウンロードすることを意味します
通常は head 内に記述されます
メタ レコードは、検索を増やすための対応する情報
<メタ名="ジェネレーター" content= "開発ツール? ">
;/html & gt;
xml
xml は独自のラベルを作成できます。主に Dtd などを保存するためにデータを使用します。重複するスタイル シート 優先度:
1. インライン スタイル シートの重みは 100 です 3. 10
4. HTML タグ セレクターの重みは 1 です
css ファイルの導入に @import を使用しないでください。ファイルが複数のスレッドでダウンロードされなくなります px ピクセルの長さを推奨します。 Em は現在のフォントの高さに基づいています (絶対値はいずれにしても rem があります。これを見てください) rem (css3) はルート要素に従ってスケールします
Color rgb(0,0,0) (通常は使用します)エフェクトには rgba (これも css3)、通常、デザインの下書きには #000000 を使用します。これらはあなた次第です
単純にフォントを太字にすると、通常は表示されません。フォント: 12px ボールド; 複合タグを使用します
ボールドには font-weight: ボールドを使用するのが最善です
text-indent 最初の行のインデントはテキスト段落の前のスペースに使用できます (中国語のカスタム形式
line) -height: 100px 100px コンテナーの垂直方向のセンタリングに対応します
vertical-align:middle
最初の使用法、最初に見てください 後の文「表のセルでは、このプロパティはセル ボックス内のセルの内容の配置を設定します」 。 「これは簡単に理解できます。テーブルの TD にvertical-align:middle スタイルを追加すると、テーブルの内容が垂直方向の中央に配置されます。同様に、vertical-align:bottom を指定すると、下に配置されます」 -aligned を与えると、vertical- align:top は上を揃えます
。
2 番目の使用法については、前のページの文を参照してください。「この属性は、要素が配置されている行のベースラインを基準としたインライン要素のベースラインの垂直方向の配置を定義します。方法はわかりません。」専門的な言葉で話すため、次のように例えます。 a と b の 2 つの要素があり、a と b が両方とも img であるとします。以下に示すように、b のベースライン) は a の中間位置に揃えられます:
a と b の両方にvertical-align:middle スタイルが追加されている場合、それらは互いの中間位置に揃えられます。以下に示すように、垂直方向の正中線は揃っています。
この時点で、アイデアは明確です。
同じ原則がテキストなどにも当てはまります。
CSS 背景
背景
body{background:#fff url("bg.jpg") リピートなし固定中央上部;}
li{
list-style:none;
}
略語の背景を宣伝する: カラー背景画像の繰り返し添付位置
list-style:url はほとんど使用しない;画像は高さに応じて調整できないため、通常は背景を使用します
シンプル px。これは CSS
シンプル px。これは CSS
< ;p> ;シンプルな px。これは CSSシンプルな px。これは CSS
シンプルな px。これは CSS
シンプルな px。これは CSS< /p>
シンプル ピクセル。これは CSS
シンプル ピクセル。これは CSS
シンプル ピクセル。これは CSS
単純な px.これは css
単純な px.これは css
単純な px.これは css
;
これは css
これは css シンプル px。 css
シンプルなピクセル
境界線と境界線
オーバーフロー: auto;
}
img{
border:5px 破線 ;
/*
border-color:red black yellow green
対応する境界線の色を上、右、下、左に設定する必要があります。それぞれを分離する必要があります
境界線のピクセル形状の色を単純化することをお勧めします。/standard
*/
margin:10px;
padding:10px;
}
.box_a{width:50px; 50px; 背景:#f00; マージン:10px 0;}
.box_b{幅:50px; 高さ:20px 0; 表示:インライン; ;}
/*margin は、最初の要素を親要素の隣接する要素のマージンとマージします (ブロックロードされた要素を持つ標準ブラウザでは問題があり、IE は正常に動作します)
解決策:
1) 追加: overflow:hidden to theparent div
2) margin-top を padding-top Padding に変更します
3) 親要素の margin-overlap 側に 0 ではないパディング、または 0 ではない幅のボーダーがあります。 none ではないスタイル
親レイヤー div:padding-top: 1px または border-top:1px を追加します ;
4) 親要素または子要素を float (左/右) に設定します
5) 設定します親要素の display:inline-block または display:table-cell;
6) 親要素に絶対位置を追加します
上記の 6 つのメソッドは、最初の子要素の親要素間の間隔の問題を解決できます
2 つの隣接する要素間の間隔はわずか 20 ピクセルです。2 つの要素間の間隔を実現したい場合、これが理想的な間隔、つまり 30 ピクセルです。どのように実装すればよいでしょうか? 2 つの方法があります:
1) 最後の要素に float (left/right) を追加します
2) 最後の要素に display: inline-block を追加しますが、IE6 および IE7 では完全ではありません。 :inline-block なので、IE6 と 7 のバグを解決するために *display:inline;zoom:1 を追加します。
1;
2. 两个上下渲染相邻(不一定是兄弟节点)的块状元素在正常页面流情况下会发生 margin 合并。
3. 浮动元素不会和任何元素(包括子孙节点)发生 margin 合并。
4. overflow!=visible的元素不和任何元素发生margin合并。
5. 绝对定位的元素不和任何元素发生margin合并。
6. inline-block 的元素不和任何元素发生margin合并。
7. 设置 clear 属性的元素不和任何元素发生margin合并。
8. 根元素不和任何元素发生margin合并。
9. 父节点和第一个子节点发生margin-top合并。
10. 如果最后一个子节点没有border以及padding,则和其父节点发生margin-bottom合并。
注意IE!特别是hasLayout对于margin合并也有影响,从而也造成了包含的绝对定位元素的位置差异。
*/
CSS链接、光标、DHTML、缩放
CSS链接、光标、DHTML、缩放
a{
text-decoration:none;
border: 1px solid black;
zoom:1
}
a:link{
color:red;
text-decoration:none;
border: 1px solid black;
zoom:1
}
a:visited{
color:black;
text-decoration:none;
border: 1px solid black;
zoom:1
}
a:hover{
color:blue;
text-decoration:underline;
border: 1px solid black;
zoom:1
}
a:active{
color:green;
text-decoration:none;
border: 1px solid black;
zoom:1
}
span{cursor:help
}
超链接测试
超链接测试2
123
zoom:1 缩放图像,只有ie6需要这个标签来显示全部内容
cursor 指定鼠标图片,html就指定整个页面
滤镜
滤镜
div{
height:200px;
}
p{
height:200px;
}
img{
opacity:0.5
}
滤镜必须是块状对象而且是定义了高度的块状元素,而且是只有ie支持,filter里面滤镜的必须配合属性才有效
滤镜必须是块状对象,而且是只有ie支持,filter里面滤镜的必须配合属性才有效
filter ie9以下包括ie9 ,才支持,然而ie9支持opacity 标签了
Css选择器 优先级:
1.内联样式表的权值最高 1000;
2.ID 选择器的权值为 100
3.Class 类选择器的权值为 10
4.HTML 标签选择器的权值为 1
每个id只能在html里面使用一次,唯一的元素,不会混淆(虽然可以用多个相同id但是不符合规范)
class可以在多个元素里面使用
选择符号
标签 div
Id #div
Class .div
div.div , div .div 优先级都属于11,所以谁先写在前面就会被后一个重写css
div.div div中class位div被选中, div .div div中的子元素class为div的元素被选中
link 加载css
css越晚加载的越重要,因为会覆盖之前加载的
css 选择器
body{font-size: 20px}
h1{font-size: 12px; margin:0;padding:0}
div .div{color:red;}
div.div{color:green;}
123
滤镜必须是块状对象而且是定义了高度的块状元素,而且是只有ie支持,filter里面滤镜的必须配合属性才有效
滤镜必须是块状对象而且是定义了高度的块状元素,而且是只有ie支持,filter里面滤镜的必须配合属性才有效
滤镜必须是块状对象,而且是只有ie支持,filter里面滤镜的必须配合属性才有效
通过css设置,首先设置body的字体,如
body {font-size: 14px;}
然后其他的都可以使用相对尺寸设置了,如
h1 {font-size: 2em;} /*14*2 = 28*/
h2 {font-size: 1.8em;}
等等
这样便于快速修改页面的整体文字尺寸,同时也不影响你修改局部的文字大小。
很少在嵌套标签里面加class,一般使用子类选择器来继承css
ie6不支持高级选择器 h1 >gt i{}
ie6只支持a的伪类,实在现在还有多少页面会做ie6-7的兼容
css 构造模型 定位(排版重点)
css 构造模型
#contion{
padding:20px;
background:green;
border:1px solid black;
}
.box{
border:1px solid black;
margin:10px;
padding:10px;
}
div p{_color:blue}
#contion>p{color:blue}
.box p{color:red}
body{
/*text-align:center;*/
}
#textbox{
width:150px;
height:150px;
background:yellow;
border:1px solid black;
/*margin-left:auto;
margin-right:auto;*/
margin:0 auto;
padding:50px;
position:relative ;
}
#textbox p{
position:absolute ;
top:120px;
left:120px;
}
CSS构造颜色、背景与图像
CSS构造颜色、背景与图像
body{
background:url(bg1.jpg) repeat-x #E2FFEA;
}
div{
//width:90px;
//height:90px;
background:red;
}
span{
width:90px;
height:90px;
background:#fff;
}
.shadow{
background: url(shadow.gif) no-repeat right bottom;
clear: right;
float: left;
//position: relative;
margin: 10px 0 0 10px;
}
.shadow img{
display: block;
/*这个属性到列表再进行解释*/
margin: -5px 5px 5px -5px;
//position: relative;
}
1
2
"/>
CSS 構築リスト < ;style> body{margin:50px;padding:0} ul{margin:5px;padding:2px;
list-style: none;
width:160px
}
li{
background :#ddd;
margin:0;
padding:2px 10px;
border-left:1px ソリッド #fff;
border-top :1px ソリッド #fff;
border-left:1px ソリッド #666;
border-bottom:1px ソリッド #fff;
}
a{display:block;}
111
;!--
ie-8 以降はパディングありデフォルトではマージン、
水平リスト li{display:inline;}
タイトルを設定するには ul list-style-image:url(1.jpg); を使用します。対応する前句読点のアイコンを調整することはできません。
ul li
li {
background:url(1.jpg) no-repeat 0% 50%;
padding-left:150px;
line-height:150px ;
} を設定することをお勧めします
インラインリスト display:inline; 高さはインラインで調整できません
li{display:inline;
/* display:inline;1 行リストではリストのプレフィックス番号が削除されますが、引き続き使用することをお勧めしますfloat* /
background:url(1.jpg) no-repeat 0% 50% ;
padding-left:150px;
padding-top:150px;
line-height:150px
}
垂直リストは、元の背景設定で、a が display:block; に設定されている場合、IE7 では a タグに高さを追加する必要はありません。そうしないと、少し問題が発生します
- ->
CSSで構築されたハイパーリンク
css で作成されたハイパーリンク
< ;tr>
1
2 gt;3 gt;4
1 gt;2 gt;3
4
CSSフォーム構築
CSSフォームの構築
legend{ margin:0 auto}
.label label{
width:100px;
背景:赤
表示:インラインブロック;
テキスト整列:右;
}
< ;フィールドセット>
レジストリ
性別: nan ;nv< ラベル & gt;
& lt;/フォーム & gt; フォームクラス = "ラベル" & gt; & & lt; label for="name">名前:
< ;label for="name ">123123:
145 :
< /form>
< ;!--
ラベルを使用してテキストの配置を実現します
display:inline-block; を使用すると対応する機能を実現できますが、フローティングも実装できます。
古いバージョンの IE ブラウザはサポートしていません属性display:inline-block!
正確な説明は、「inline-block 属性を使用すると、IE でレイアウトがトリガーされるため、要素に設定された幅と高さが有効になり、表示効果が他のブラウザーと一致するとは言えません。」です。 /7 は、display:inline-block をサポートします。
-->
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
2024-10-22 09:46:29
2024-10-13 13:53:41
2024-10-12 12:15:51
2024-10-11 22:47:31
2024-10-11 19:36:51
2024-10-11 15:50:41
2024-10-11 15:07:41
2024-10-11 14:21:21
2024-10-11 12:59:11
2024-10-11 12:17:31