国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Maison interface Web tutoriel HTML CSS+DIV第二天_html/css_WEB-ITnose

CSS+DIV第二天_html/css_WEB-ITnose

Jun 24, 2016 pm 12:33 PM

第二天開始. 昨天學習了css的基本用法.包括css的引用和一些常用css屬性。掌握了css的基本用法,只是完成了css+div排版的第一步。說到排版,最重要的莫過于定位。我們用table來排版的時候是直接在網頁上畫出一個個格子,把內容填充到相應的格子里去。用css也是這個原理,不過css不能直接劃格子,它有它自己的一套定位方法。今天的目標就是掌握css的定位。


首先,介紹兩個定義:相對定位和絕對定位。相對定位就是允許在文檔的原始位置上進行偏移。而絕對定位則允許任意定位。下面是定位需要用到的幾個屬性:



因為定位不是一般的重要,所以這里詳細介紹一下各個參數的作用:


position: static | absolute |relative
static :  無特殊定位,對象遵循HTML定位規(guī)則
absolute :  將對象從文檔流中拖出,使用left,right,top,bottom等屬性進行絕對定位。而其層疊通過z-index屬性定義。此時對象不具有邊距,但仍有補白和邊框
//我們用絕對定位的時候一般都用這個屬性。
relative :  對象不可層疊,但將依據left,right,top,bottom等屬性在正常文檔流中偏移位置


left: auto|lenth
auto :  無特殊定位,根據HTML定位規(guī)則載文檔流中分配
length :  由浮點數字和單位標識符組成的長度值 | 百分數。必須定義position屬性值為absolute或者relative此取值方可生效。
例:div { position: absolute; left: 1in; }
top和left的用法是一樣的,也要注意的是必須定義position屬性值為absolute或者relative此取值方可生效。


width:auto|lenth
auto :  無特殊定位,根據HTML定位規(guī)則載文檔流中分配
length :  由浮點數字和單位標識符組成的長度值 | 百分數。
height與width語法完全相同。而它不需要定義position必須為absolute


clip : auto | rect ( number number number number )
auto :  對象無剪切
rect ( number number number number ) :  依據上-右-下-左的順序提供自對象左上角為(0,0)坐標計算的四個偏移數值,其中任一數值都可用auto替換,即此邊不剪切


overflow : visible | auto | hidden | scroll
visible :  不剪切內容也不添加滾動條。假如顯式聲明此默認值,對象將被剪切為包含對象的window或frame的大小。并且clip屬性設置將失效
//這個屬性的結果就像當與沒有div,內容有多少就顯示多少。
auto :  此為body對象和textarea的默認值。在需要時剪切內容并添加滾動條
hidden :  不顯示超過對象尺寸的內容
scroll :  總是顯示滾動條


z-index: auto | number
auto :  遵從其父對象的定位
number :  無單位的整數值??蔀樨摂?
//應該是用來產生一些立體效果滴


visibility: inherit | visible | collapse | hidden
inherit :  繼承上一個父對象的可見性
visible :  對象可視 hidden :  對象隱藏
collapse :  主要用來隱藏表格的行或列。隱藏的行或列能夠被其他內容使用。對于表格外的其他對象,其作用等同于hidden。IE5.5尚不支持此屬性。


以上屬性中的position,width,height,left,top,z-index是用來給div定位的,其中的clip,overflow,visibility則是用來控制對內容的顯示的,這些屬性可以看作一個層的基本屬性。掌握了層的基本屬性,我們就可以來看一個用層來定位并控制顯示的例子:



   


   dingwei css
   
   
   
   


    請選擇一幅圖片:

//*設置字體大小、名稱、顏色*//
   

   
CSS+DIV第二天_html/css_WEB-ITnose
   //*導入一張圖片,標識符為container1*//
   


     名稱:大漠

//*設置字體名稱、顏色、大小*//
   

   

   

   
CSS+DIV第二天_html/css_WEB-ITnose
   //*導入另一種圖片,標識符為container2*//
   


     名稱: 大海


   

   

   
//*定義兩個按鈕*//
   

    onclick=“container1.style.visibility=‘visible’;
    container2.style.visibility=‘hidden’”>
    //*定義鼠標點擊事件圖片1為可見,圖片2為不可見*//
        container1.style.visibility=‘hidden’;
    onclick=“container2.style.visibility=‘visible’;
    container1.style.visibility=‘hidden’”>


    //*定義鼠標點擊事件圖片1為不可見,圖片2為可見*//
    

    
  
button上用了一點js的技巧來控制css中的visibility值.

上面這個例子講的只是平面布局,駝駝以前的css知識也就到此為止,然而上面有個z-index的參數,是用來立體定位的,所以,div也可以是立體的,下面就來一個簡單的立體例子:

   


    zindex
   
    
    
    CSS+DIV第二天_html/css_WEB-ITnose     style=“z-index:1”>
     //*導入一張圖片,使它為pile類,z-index屬性定義為1,位置處于最下方
      *//
    
    style=“color:#ffff33;z-index:2” > 這段文字將覆蓋在圖片上。
    //*定義一段文字的顏色和z-index屬性為2,處于中間位置*//
    CSS+DIV第二天_html/css_WEB-ITnose    style=“z-index:3”>
     //*導入第二張圖片,使它為“pile1”類,z-index屬性為3,位置處于最上
      方*//
    
  


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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

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.

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

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)

Sujets chauds

Tutoriel PHP
1502
276
Configuration des métadonnées du document dans l'élément de tête HTML Configuration des métadonnées du document dans l'élément de tête HTML Jul 09, 2025 am 02:30 AM

Les métadonnées à HTMLhead sont cruciales pour le référencement, le partage social et le comportement du navigateur. 1. Définissez le titre et la description de la page, utilisez et gardez-le concis et unique; 2. Ajoutez des informations sur les cartes OpenGraph et Twitter pour optimiser les effets de partage social, faire attention à la taille de l'image et utiliser des outils de débogage pour tester; 3. Définissez le jeu de caractères et les paramètres de la fenêtre pour s'assurer que le support multi-langues est adapté au terminal mobile; 4. Les balises facultatives telles que l'auteur Copyright, le contr?le des robots et le contenu en double prévention canonique doivent également être configurés raisonnablement.

Meilleur tutoriel HTML pour les débutants en 2025 Meilleur tutoriel HTML pour les débutants en 2025 Jul 08, 2025 am 12:25 AM

Toléarnhtmlin2025, chooseAtUtorialthatBalanShands-on -PracticewithModerNstandardsAnd IntegratescsSandjavascriptBasics.1.prioritizehands-onlearningwithstep-by-steprojectsmelindingapersonalprofileorblayout.20

HTML pour les modèles de messagerie tutoriel HTML pour les modèles de messagerie tutoriel Jul 10, 2025 pm 02:01 PM

Comment faire des modèles de courrier HTML avec une bonne compatibilité? Tout d'abord, vous devez construire une structure avec des tables pour éviter d'utiliser DIV Flex ou la disposition de la grille; Deuxièmement, tous les styles doivent être inclus et ne peuvent pas compter sur des CS externes; Ensuite, l'image doit être ajoutée avec une description ALT et utiliser une URL publique, et les boutons doivent être simulés avec une table ou un TD avec une couleur d'arrière-plan; Enfin, vous devez tester et ajuster les détails sur plusieurs clients.

Quels sont les attributs globaux les plus couramment utilisés en HTML? Quels sont les attributs globaux les plus couramment utilisés en HTML? Jul 10, 2025 am 10:58 AM

La classe, l'identification, le style, les données et le titre sont les attributs globaux les plus couramment utilisés en HTML. La classe est utilisée pour spécifier un ou plusieurs noms de classe pour faciliter le paramètre de style et les opérations JavaScript; ID fournit des identifiants uniques pour les éléments, adaptés aux sauts d'ancrage et au contr?le JavaScript; Le style permet d'ajouter des styles en ligne, adaptés au débogage temporaire mais pas recommandé pour une utilisation à grande échelle; Data-Properties est utilisé pour stocker des données personnalisées, ce qui est pratique pour l'interaction frontale et back-end; Le titre est utilisé pour ajouter des invites de souris, mais son style et son comportement sont limités par le navigateur. La sélection raisonnable de ces attributs peut améliorer l'efficacité du développement et l'expérience utilisateur.

Comment gérer la soumission des formulaires dans HTML sans serveur? Comment gérer la soumission des formulaires dans HTML sans serveur? Jul 09, 2025 am 01:14 AM

Lorsqu'il n'y a pas de serveur backend, la soumission de formulaire HTML peut toujours être traitée via une technologie frontale ou des services tiers. Les méthodes spécifiques incluent: 1. Utilisez JavaScript pour intercepter les soumissions de formulaires pour réaliser la vérification des entrées et les commentaires des utilisateurs, mais les données ne seront pas persistées; 2. Utilisez des services de formulaire de serveur tiers tels que FormSpree pour collecter des données et fournir des fonctions de notification et de redirection par e-mail; 3. Utilisez LocalStorage pour stocker les données des clients temporaires, ce qui convient à l'enregistrement des préférences des utilisateurs ou à la gestion de l'état de l'application d'une seule page, mais ne convient pas au stockage à long terme d'informations sensibles.

Implémentation de chargement paresseux natif pour les images en HTML Implémentation de chargement paresseux natif pour les images en HTML Jul 12, 2025 am 12:48 AM

Le chargement paresseux natif est une fonction de navigateur intégrée qui permet le chargement paresseux des images en ajoutant un attribut chargé = "paresseux" à la balise. 1. Il ne nécessite pas de bibliothèques JavaScript ou tierces et est utilisée directement dans HTML; 2. Il convient aux images qui ne sont pas affichées sur le premier écran sous la page, les modules complémentaires de défilement de la galerie d'images et les grandes ressources d'image; 3. Il ne convient pas aux images avec premier écran ou affichage: aucun; 4. Lorsque vous l'utilisez, un espace réservé approprié doit être réglé pour éviter la gigue de mise en page; 5. Il devrait optimiser le chargement d'image réactif en combinaison avec les attributs SRCSET et tailles; 6. Les problèmes de compatibilité doivent être pris en compte. Certains anciens navigateurs ne le soutiennent pas. Ils peuvent être utilisés grace à la détection des fonctionnalités et combinés avec des solutions JavaScript.

Comment ajouter une vidéo comme arrière-plan en HTML? Comment ajouter une vidéo comme arrière-plan en HTML? Jul 08, 2025 am 12:03 AM

Pour ajouter un arrière-plan vidéo à une page Web, la clé consiste à utiliser correctement les balises HTML et à optimiser les attributs pertinents. 1. Utilisez les balises comme arrière-plan et utilisez le positionnement CSS pour remplir la page ou la zone locale; 2. Le format vidéo est préféré.mp4, et WebM est ajouté pour considérer la compatibilité; 3. Ajoutez des attributs en malentend et en ligne pour assurer la lecture automatique du c?té mobile; 4. Contr?lez la taille de la vidéo pour optimiser la vitesse de chargement, et il est recommandé de le garder à des dizaines de MB; 5. Ajouter des boucles pour atteindre la lecture de boucle sans couture; 6. Il peut être appliqué de manière flexible aux blocs en plein écran ou locaux, et différents effets sont obtenus en ajustant la taille de la taille du conteneur et la méthode de positionnement. Les étapes ci-dessus peuvent réaliser un arrière-plan vidéo stable et magnifique.

Comment faire un iframe réactif? Comment faire un iframe réactif? Jul 09, 2025 am 01:39 AM

Pour rendre les IFRames réactifs, le noyau est d'utiliser CSS pour contr?ler le rapport d'aspect et le combiner avec le conteneur d'enveloppement pour obtenir l'adaptation. 1. Utilisez des techniques de rembourrage pour créer des bo?tes à conteneurs avec des proportions fixes. Les ratios communs tels que 16: 9 correspondent au padding-top56,25%, 4: 3 correspondent à 75% et 1: 1 correspondent à 100%; 2. Réglez la largeur d'Iframe à 100% et utilisez un positionnement absolu pour remplir le conteneur, ou utilisez l'attribut de rapport aspect pour maintenir la proportion; 3. Lors du traitement du contenu intégré à tiers, contr?lez le rapport via le transport des conteneurs et garantissez que l'attribut AutorfullScreen est ajouté pour prendre en charge la lecture à écran complet sur les terminaux mobiles. Ma?tre les paramètres du conteneur et de la proportion pour réaliser la réactivité de l'Iframe

See all articles