Maison interface Web tutoriel HTML DIV+CSS备录_html/css_WEB-ITnose

DIV+CSS备录_html/css_WEB-ITnose

Jun 24, 2016 pm 12:32 PM

#属性篇:

1滚动条的样式

*控制横向和纵向滚动条的显隐

去掉滚动条 y 轴

­

去掉滚动条 x 轴

­

滚动条 x/y 轴全部去掉

­

*滚动条颜色

Scrollbar-Face-Color为滚动条表面颜色设定; ­

Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定; ­

Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定; ­

Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定; ­

Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。 ­

Scrollbar-Track-Color为滚动条底板颜色设定; ­

Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定。

2.marquee滚动

direction 表示滚动的方向,值可以是left,right,up,down,默认为left ­

behavior 表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动) ­

loop 表示循环的次数,值是正整数,默认为无限循环 ­

scrollamount 表示运动速度,值是正整数,默认为6 ­

scrolldelay 表示停顿时间,值是正整数,默认为0,单位是毫秒 ­

align 表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle ­

bgcolor 表示运动区域的背景色,值是16进制的RGB颜色,默认为白色 ­

height、width 表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度 ­

hspace、vspace 表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素。 ­

onmouseover=this.stop() onmouseout=this.start() 表示当鼠标以上区域的时候滚动停止,当鼠标移开的时候又继续滚动。

 3.网页?嵌框架 iframe

  

marginheight:上下/左右边界

frameborder:边框

align:对齐

scrolling:滚动轴

 name:命名

allowTransparency:是否透明 

 4.Windows Media Player 网页播放器 参数含义(MediaPlayer9.0以上)

//播放的文件地址
//是否自动播放
//调整左右声道平衡,同上面旧播放器代码
//播放器是否可人为控制
//是否启用上下文菜单
//播放次数控制,为整数
//播放速率控制,1为正常,允许小数,1.0-2.0
//控件设置当前位置
//控件设置:当前标记
//显示默认框架
//脚本命令设置:是否调用URL
  //脚本命令设置:被调用的URL
//是否按比例伸展
//默认声音大小0%-100%,50则为50%
//是否静音
//播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示
//如果是0可以允许全屏,否则只能在窗口中查看
//开始播放是否自动全屏
//是否启用错误提示报告
//SAMI样式
//SAMI语言
//字幕ID

#技巧篇:

1.在dreamweaver中让flash背景透明

把原参数改为: ­

2.CSS背景半透明效果

*在CSS里加入:filter: Alpha(Opacity=50); ­//数字代表透明程度

*如果想背景半透明,而文字不透明,可以在文字层加入position:relative ;

3.去掉链接图片点击时的虚线边框

 ­在a标签加onFocus="if(this.blur)this.blur()"就可以了

4.鼠标经过时的换行解释

在二行之间加

如:title=" 酷站名称:bbcafe 添加日期:2009-6-7"

5.文本格式化

*不换行

WHITE-SPACE ­

normal :  默认处理方式 ­

pre :  用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。 ­

nowrap :  强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。

*自动换行

word-break:break-all;

word-wrap: break-word; /*不拆分单词换行*/

*自动二端对齐

text-align:justify;

text-justify:inter-ideograph;

*字符和单词的间距

letter-spacing/*字符间距*/ ­

word-spacing/*单词间距*/ ­

*文本超出时显示为省略号

text-overflow:ellipsis;

6.fieldset 标签的用法

fieldset 元素可将表单内的相关元素分组。

如:

­

item: ­

­

­

­

­

­

显示结果:

7.页面退出时的渐隐效果 

加在head 之间 ­

­//数字代码渐隐速度

8.favicon.ico 显示­

­

9.使网页另存为失效

在BODY之间加入以下代码 ­

­

­

10.让IE8自动启动IE7兼容模式

在页面中加入如下HTTP meta-tag: ­

­

 

 12.图片自适应层高度

 

只能在固定的层高度适应

#浏览器兼容(hack)

*区别IE6与FF:

background:orange;_background:blue;  
*区别IE6与IE7: (IE6能识别_, 而IE7不能) 
background:orange; *background:green;  
*区别FF,IE7,IE6:(IE6 IE7能识别*,FF不能识别)  
background:orange; *background:green; _background:blue;  

(IE6能识别_,IE7,FF不能;IE7能识别*,FF不能) 

\0\9区别于IE8与FF(IE8能识别\0或\9,IE6 7 8能识别\0,FF不能识别)

background:orange\9; background:orange\0;

*注:书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在后面 IE8写在最后面。  

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version? Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version? Mar 04, 2025 pm 12:32 PM

Le cache de mise à jour de la page Web du compte officiel, cette chose est simple et simple, et elle est suffisamment compliquée pour en boire un pot. Vous avez travaillé dur pour mettre à jour l'article officiel du compte, mais l'utilisateur a toujours ouvert l'ancienne version. Dans cet article, jetons un coup d'œil aux rebondissements derrière cela et comment résoudre ce problème gracieusement. Après l'avoir lu, vous pouvez facilement faire face à divers problèmes de mise en cache, permettant à vos utilisateurs de toujours ressentir le contenu le plus frais. Parlons d'abord des bases. Pour le dire franchement, afin d'améliorer la vitesse d'accès, le navigateur ou le serveur stocke des ressources statiques (telles que des images, CSS, JS) ou du contenu de la page. La prochaine fois que vous y accédez, vous pouvez le récupérer directement à partir du cache sans avoir à le télécharger à nouveau, et il est naturellement rapide. Mais cette chose est aussi une épée à double tranchant. La nouvelle version est en ligne,

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web? Comment ajouter efficacement les effets de course aux images PNG sur les pages Web? Mar 04, 2025 pm 02:39 PM

Cet article démontre un ajout de bordure PNG efficace aux pages Web à l'aide de CSS. Il soutient que CSS offre des performances supérieures par rapport à JavaScript ou à des bibliothèques, détaillant comment ajuster la largeur, le style et la couleur des bordures pour un effet subtil ou proéminent

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

Quel est le but du & lt; datalist & gt; élément? Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quel est le but du & lt; Progress & gt; élément? Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Quel est le but du & lt; mètre & gt; élément? Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Mar 12, 2025 pm 04:05 PM

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

See all articles