Maison interface Web Tutoriel H5 html/css应用的方法

html/css应用的方法

May 17, 2016 am 09:08 AM

  

  html/css应用的方法

  1、制作透明效果

  opacity:0.7;

  filter:alpha(opacity=70);


  2、清除浮层的另外方法

  .clearfix:after {

  content:".";

  display:block;

  height:0;

  clear:both;

  visibility:hidden;

  }

  .clearfix{

  display:inline-block;

  }

  * html .clearfix {height:1%;}

  .clearfix {display:block;}


  3、div 块级元素分隔符

  span 行内元素分的区域隔符

  当页面内标签无法满足设计需要时,才会适当添加div和span等无语义标签来 辅助实现。


  4、标签语义化:

  搜索引擎看不到视觉效果,看到的只是代码,只能通过标签来判断内容的语义。


  5、语义化标签应注意的一些问题:

  • 尽可能少用无语义标签div和span;
  • 不要使用纯样式标签,例如b、font和u等,改用css设置。语义上需要强调的文本可以在strong或em标签里

  DTD:文档类型定义(标准模式和怪异模式)

  标准模式:浏览器根据规范表现页面。

  怪异模式:通常模拟老式浏览器的行为以防止老站点无法工作。(width包含padding和border的宽度,margin:auto;无法正常工作)

  如果漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中(包含IE6\IE7\IE8)就会触发怪异模式。


  6、CSS reset:通过重新定义标签的样式,“覆盖”掉浏览器提供的默认样式


  7、模块化CSS

  模块与模块之间尽量不要包含相同的部分,如果有相同部分,应将它们提取出来,拆分成一个独立的模块。

  模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性。


  8、CSS命名

  驼峰命名法用于区分不同单词,划线用于表明从属。

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 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

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)

Comment utiliser les balises META de la fenêtre pour contrôler la mise à l'échelle des pages sur les appareils mobiles? Comment utiliser les balises META de la fenêtre pour contrôler la mise à l'échelle des pages sur les appareils mobiles? Mar 13, 2025 pm 08:00 PM

L'article discute de l'utilisation de balises Meta pour contrôler la mise à l'échelle des pages sur les appareils mobiles, en se concentrant sur des paramètres tels que la largeur et l'échelle initiale pour une réactivité et des performances optimales. COMMANDE: 159

Comment créer des jeux interactifs avec HTML5 et JavaScript? Comment créer des jeux interactifs avec HTML5 et JavaScript? Mar 10, 2025 pm 06:34 PM

Cet article détaille la création de jeux HTML5 interactifs à l'aide de JavaScript. Il couvre la conception de jeux, la structure HTML, le style CSS, la logique JavaScript (y compris la gestion des événements et l'animation) et l'intégration audio. Bibliothèques JavaScript essentielles (Phaser, Pi

Comment ajouter de l'audio à mon site Web HTML5? Comment ajouter de l'audio à mon site Web HTML5? Mar 10, 2025 pm 03:01 PM

Cet article explique comment intégrer l'audio dans HTML5 en utilisant l'AUDIO & GT; Element, y compris les meilleures pratiques pour la sélection du format (MP3, Ogg Vorbis), l'optimisation des fichiers et le contrôle JavaScript pour la lecture. Il met l'accent sur l'utilisation de plusieurs audio F

Comment utiliser l'API de visibilité de la page HTML5 pour détecter quand une page est visible? Comment utiliser l'API de visibilité de la page HTML5 pour détecter quand une page est visible? Mar 13, 2025 pm 07:51 PM

L'article discute de l'utilisation de l'API de visibilité de la page HTML5 pour détecter la visibilité de la page, améliorer l'expérience utilisateur et optimiser l'utilisation des ressources. Les aspects clés comprennent la pause des supports, la réduction de la charge du processeur et la gestion de l'analyse en fonction des changements de visibilité.

Comment gérer la confidentialité de l'emplacement de l'utilisateur et les autorisations avec l'API Geolocation? Comment gérer la confidentialité de l'emplacement de l'utilisateur et les autorisations avec l'API Geolocation? Mar 18, 2025 pm 02:16 PM

L'article traite de la gestion de la confidentialité de l'emplacement des utilisateurs et des autorisations à l'aide de l'API Geolocation, mettant l'accent sur les meilleures pratiques pour demander des autorisations, assurer la sécurité des données et se conformer aux lois sur la confidentialité.

Comment utiliser les formulaires HTML5 pour la saisie de l'utilisateur? Comment utiliser les formulaires HTML5 pour la saisie de l'utilisateur? Mar 10, 2025 pm 02:59 PM

Cet article explique comment créer et valider les formulaires HTML5. Il détaille le & lt; formulaire & gt; élément, types d'entrée (texte, e-mail, numéro, etc.) et attributs (requis, modèle, min, max). Les avantages des formes HTML5 sur les méthodes plus anciennes, incl

Comment utiliser l'API HTML5 glisser-déposer pour les interfaces utilisateur interactives? Comment utiliser l'API HTML5 glisser-déposer pour les interfaces utilisateur interactives? Mar 18, 2025 pm 02:17 PM

L'article explique comment utiliser l'API HTML5 Drag and Drop pour créer des interfaces utilisateur interactives, détaillant les étapes pour rendre les éléments dragables, gérer les événements clés et améliorer l'expérience utilisateur avec des commentaires personnalisés. Il discute également des pièges communs à un

Comment utiliser l'API HTML5 WebSockets pour la communication bidirectionnelle entre le client et le serveur? Comment utiliser l'API HTML5 WebSockets pour la communication bidirectionnelle entre le client et le serveur? Mar 12, 2025 pm 03:20 PM

Cet article explique l'API HTML5 WebSockets pour la communication client-serveur bidirectionnelle en temps réel. Il détaille les implémentations côté client (JavaScript) et côté serveur (Python / Flask), résolvant des défis tels que l'évolutivité, la gestion de l'état, un

See all articles