CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose
在 《CSS3 2D转换技术之translate实战开发》文章中，我给大家列出了 CSS3中的2D转换方法：
1. translate() 2. rotate() 3. scale() 4. skew() 5. matrix()
同时对第一个方法 translate()做了非常详尽的介绍，并带领大家实战开发了一个导航条。如果你对translate不了解或不是太熟悉，请阅读我的博文 《CSS3 2D转换技术之translate实战开发》 。
在讲解知识点之前，我先跟大家说明一下，有些程序员会问，为什么我应用了transform后不起作用呢，其实CSS3中的transform是对块级元素或者行内元素才起作用的。
本章我将带领大家一起来探索今天的 照片墙实战开发吧。好了，废话少说，直接进入今天的主题吧。
rotate，顾名思义，是表示旋转的意思，也就是说，如果我们给一个块元素或一个行内元素应用了rotate之后，它会发生旋转的效果。
语法：
-webkit-transform: rotate(20deg); /*兼容chrome与safari*/-moz-transform: rotate(20deg); /*兼容firefox*/-o-transform: rotate(20deg); /*兼容opera*/-ms-transform: rotate(20deg); /*兼容IE9*/transform: rotate(20deg); /*标准语法*/
rotate方法的参数如果是正数，则表示顺时针旋转；如果是负数，则表示逆时针旋转。
语法讲解完了，我现在手把手教大家开发一个照片墙，效果如下：
ok，根据效果图，我们拆分一下显示区域：一个区域显示木板背景，三个区域显示相应照片。下面就跟着我的一步步的学习吧：
一、 定义显示区域
!DOCTYPE html><html><head> <meta charset=”utf-8″> <link href=”styles.css” rel=”stylesheet”> <!? css,css3,html,html5,javascript,div,jquery,nodejs,extjs,bootstrap,pure ?> <title>CSS3 2D转换技术之rotate实战开发</title> </head> <body> <a href="http://www.itdriver.cn">实战互联网</a> <div> <div> <img src=”http://pic1.win4000.com/wallpaper/a/53900aafbf5d6.jpg” style="max-width:90%"CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose" > <p>那一刻，我在这儿感受世外桃源的安逸</p> <p>作者: 陌上花会开</p> </div> <div> <img src=”http://image.tianjimedia.com/uploadImages/2013/259/8XYI3I1E88WN_1000x500.jpg” style="max-width:90%"CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose" > <p>喜欢你的微笑，喜欢阳光下的味道</p> <p>作者: 陌上花会开</p> </div> <div> <img src=”http://image.tianjimedia.com/uploadImages/2013/308/N8457O6CJS7W_1000x500.jpg” style="max-width:90%"CSS3实战开发:手把手教你照片墙实战开发_html/css_WEB-ITnose" > <p>漫山的葵花盛开了</p> <p>作者: 陌上花会开</p> </div> </div> </body></html>
此时运行效果:
二、给照片墙实现样式 photo_wall，应用背景图片，设置照片墙的外边距，同时设置使用 CSS3的流式布局来显示照片墙上的照片。如果你对 CSS3的流式布局不太了解或不太熟悉，请阅读我的另一篇博文，相信你会精通这个特性 《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》。
*{ /*清空所有元素默认的外边距和内边距*/ margin:0; padding:0;} .photo_wall{ background:url(bg.jpg); /*定义照片墙的默认背景*/ background-size:cover; /*使照片墙的背景填充照片墙*/ width:1200px; /*设置照片墙的宽高*/ height:800px; margin:40px auto; /*设置照片墙的外边距*/ display:-webkit-box; /*使用CSS3的盒模型之流式布局*/ display:-moz-box; display:box; -webkit-box-align:center; /*定义盒模型内部元素在垂直方向上居于中间位置*/ -moz-box-align:center; box-align:center; -webkit-box-pack:center; /*定义盒模型内部元素在水平方向上居于中间位置*/ -moz-box-pack:center; box-pack:center;}此时运行效果：
三、给照片应用样式 photo_frame，设置照片的留白，同时这只照片内文字的大小，以及给照片增加阴影效果。
.photo_wall .photo_frame{ text-align:center; /*照片内的文字都是居中显示*/ padding:10px 10px 30px 10px; /*定义照片的内补白*/ /*设置照片的背景颜色*/ font-size:.8em; /*照片内文字的大小*/ box-shadow:.2em .2em .8em #130c0e; /*给照片添加阴影效果，富有立体感*/} .photo_frame p{ margin-top:10px; /*设置照片内显示文字段落的外上边距*/}
此时的运行效果：
到目前为止，照片的基本样子已经出来了，接着应用我们今天所学的内容，给照片添加旋转效果吧，这样将使照片更富层次感，且更加个性化。
四、分别给照片应用样式photo01，photo02，photo03，每张照片以自己设定的旋转基点进行旋转操作。代码如下：
.photo01{ -webkit-transform-origin:right bottom; /*定义照片1的旋转基点为 右下角*/ -moz-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate(10deg); /*以基点为轴，在2D空间内顺时针旋转10度*/ -moz-transform:rotate(10deg); -o-transform:rotate(10deg); transform:rotate(10deg);} .photo02{ -webkit-transform-origin:right bottom; /*定义照片2的旋转基点为 右下角*/ -moz-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate(-20deg); /*以基点为轴，在2D空间内逆时针旋转20度*/ -moz-transform:rotate(-20deg); -o-transform:rotate(-20deg); transform:rotate(-20deg);} .photo03{ -webkit-transform-origin:left top; /*定义照片3的旋转基点为 左上角*/ -moz-transform-origin:left top; transform-origin:left top; -webkit-transform:rotate(40deg); /*以基点为轴，在2D空间内顺时针旋转40度*/ -moz-transform:rotate(40deg); -o-transform:rotate(40deg); transform:rotate(40deg);}此时的运行效果：
至此， 《CSS3实战开发:手把手教你照片墙实战开发》已经讲完了。谢谢大家的阅读。
更多精彩实战教程，我会陆续更新，大家敬请期待吧！
欢迎大家加入互联网技术交流QQ群：62329335
个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment trier les photos par favoris dans Windows 11
Mar 18, 2024 am 09:37 AM
Dans cet article, nous expliquerons comment trier les photos à l'aide de la fonctionnalité Favoris de Windows 11. L'application Photos de Windows offre une fonctionnalité pratique qui vous permet de marquer des photos ou des vidéos spécifiques comme Favoris ou Préférences. Une fois que vous avez marqué ces éléments comme favoris, ils sont automatiquement organisés dans un dossier séparé, vous permettant de parcourir facilement votre contenu préféré sans avoir à parcourir toute votre photothèque. Cette fonctionnalité vous permet d'accéder et de gérer rapidement vos photos et vidéos préférées, ce qui vous fait gagner beaucoup de temps et d'efforts. Normalement, les photos du dossier Favoris sont triées par date et par ordre décroissant, de sorte que les photos les plus récentes apparaissent en premier, suivies des photos les plus anciennes. Toutefois, si vous souhaitez vous concentrer sur
Comment désactiver Face ID ou Touch ID pour les photos masquées et récemment supprimées sur iPhone
Mar 04, 2024 pm 04:40 PM
L'application Photos d'Apple propose une fonctionnalité qui verrouille les photos dans les albums masqués et récemment supprimés pour garantir qu'elles sont cachées des regards indiscrets. Cela fournit une couche de protection supplémentaire pour les photos et vidéos sensibles que vous avez peut-être stockées dans ces albums, car elles sont verrouillées derrière le Face ID, le Touch ID ou le code d'accès de l'appareil de votre iPhone. Si vous rencontrez des difficultés pour accéder aux albums masqués et récemment supprimés à l'aide de cette fonction de verrouillage, vous pouvez envisager de la désactiver pour rendre le contenu plus accessible. Cet article vous expliquera en détail comment désactiver l'authentification FaceID ou TouchID pour l'application Photos sur iPhone. Comment désactiver Face ID ou Touch ID pour l'application Photos Obligatoire : Exécuter iOS 16 ou version ultérieure
Que dois-je faire si le message « Impossible de télécharger » apparaît dans l'application « Photos » de l'iPhone ?
Feb 28, 2024 pm 09:00 PM
Si vous activez la fonction photo iCloud, les photos et vidéos prises sur votre iPhone seront synchronisées avec les serveurs Apple pour le stockage. Cependant, pendant le processus de synchronisation avec iCloud, une invite « Impossible de télécharger » ou un album peut apparaître. Habituellement, cet état sera affiché au bas de l'application iPhone Photos, avec une invite indiquant "Impossible de synchroniser [nombre] éléments avec iCloud". Un nouvel album nommé « Impossible de télécharger » sera ajouté dans l'application « Photos ». Pour ajouter ces photos ou vidéos à iCloud Photos, vous pouvez essayer de les exporter depuis l'application Photos, puis de les réimporter. Notez cependant que toutes les modifications ou mots-clés précédemment appliqués à ces photos ou vidéos seront perdus. sur iPhone
Comment prendre des photos en noir et blanc avec Meitu Camera
Mar 28, 2024 am 09:11 AM
Dans ce monde coloré, nous aspirons parfois aussi à la simple beauté du noir et blanc. En tant que méthode classique de traitement d'image, les filtres noir et blanc peuvent non seulement donner aux photos une atmosphère rétro et élégante, mais également mettre en valeur le thème et l'émotion de l'image à travers le contraste et les changements de lumière et d'ombre. Meitu Xiuxiu, en tant que logiciel de traitement d'image populaire, nous offre la fonction d'ajouter facilement des filtres noir et blanc. Donc, pour les utilisateurs qui souhaitent l'ajouter mais ne savent pas encore comment l'ajouter, l'éditeur de ce site vous proposera ci-dessous une introduction détaillée étape par étape. Venez suivre cet article pour l'ajouter ! Comment transformer des photos en noir et blanc sur mobile Meitu Xiuxiu. Nous devons d'abord ouvrir Meitu Xiuxiu sur le téléphone mobile. Après être entré dans l'interface principale, sélectionnez « Embellir les images » et sélectionnez l'image que nous devons modifier. 2. Cliquez ensuite.
Quatre outils de programmation assistés par IA recommandés
Apr 22, 2024 pm 05:34 PM
Cet outil de programmation assistée par l'IA a mis au jour un grand nombre d'outils de programmation assistée par l'IA utiles à cette étape de développement rapide de l'IA. Les outils de programmation assistés par l'IA peuvent améliorer l'efficacité du développement, améliorer la qualité du code et réduire les taux de bogues. Ils constituent des assistants importants dans le processus de développement logiciel moderne. Aujourd'hui, Dayao partagera avec vous 4 outils de programmation assistés par l'IA (et tous prennent en charge le langage C#). J'espère que cela sera utile à tout le monde. https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot est un assistant de codage IA qui vous aide à écrire du code plus rapidement et avec moins d'effort, afin que vous puissiez vous concentrer davantage sur la résolution de problèmes et la collaboration. Git
Que dois-je faire si je ne trouve pas les photos sur mon téléphone lorsque j'ouvre l'album Douyin ? Quelle est la raison pour laquelle l'album Douyin n'affiche pas de photos ?
Mar 21, 2024 pm 05:20 PM
À l’ère du numérique, les photos et les vidéos sont devenues un moyen important pour enregistrer notre vie et exprimer nos émotions. En tant que principale plateforme de vidéos courtes en Chine, Douyin permet aux utilisateurs de partager facilement leur vie sous forme de courtes vidéos. Certains utilisateurs constatent qu'ils ne trouvent pas les photos sur leur téléphone lorsqu'ils ouvrent l'album Douyin, ce qui pose sans aucun doute quelques problèmes à leur expérience. Alors, comment devrions-nous résoudre cette situation ? Qu’est-ce qui provoque cela ? Cet article abordera ces deux questions en détail. 1. Que dois-je faire si je ne trouve pas les photos sur mon téléphone lorsque j'ouvre l'album Douyin ? Lorsque les utilisateurs ne trouvent pas de photos sur leur téléphone dans l'album Douyin, ils peuvent essayer les méthodes suivantes pour résoudre le problème : Vérifier les autorisations des photos : Veuillez vous assurer que l'application Douyin est autorisée à accéder à l'album dans les paramètres du téléphone.
Vous apprendre à utiliser les nouvelles fonctionnalités avancées d'iOS 17.4 « Protection des appareils volés »
Mar 10, 2024 pm 04:34 PM
Apple a déployé mardi la mise à jour iOS 17.4, apportant une multitude de nouvelles fonctionnalités et de correctifs aux iPhones. La mise à jour inclut de nouveaux emojis et les utilisateurs de l’UE pourront également les télécharger depuis d’autres magasins d’applications. En outre, la mise à jour renforce également le contrôle de la sécurité de l'iPhone et introduit davantage d'options de configuration de « Protection des appareils volés » pour offrir aux utilisateurs plus de choix et de protection. "iOS 17.3 introduit pour la première fois la fonction "Protection des appareils volés", ajoutant une sécurité supplémentaire aux informations sensibles des utilisateurs. Lorsque l'utilisateur est loin de chez lui et d'autres lieux familiers, cette fonction nécessite que l'utilisateur saisisse des informations biométriques pour la première fois. heure, et après une heure, vous devez saisir à nouveau les informations pour accéder et modifier certaines données, telles que la modification du mot de passe de votre identifiant Apple ou la désactivation de la protection de l'appareil volé.
Quel programmeur IA est le meilleur ? Explorez le potentiel de Devin, Tongyi Lingma et de l'agent SWE
Apr 07, 2024 am 09:10 AM
Le 3 mars 2022, moins d'un mois après la naissance de Devin, le premier programmeur d'IA au monde, l'équipe NLP de l'Université de Princeton a développé un agent SWE pour programmeur d'IA open source. Il exploite le modèle GPT-4 pour résoudre automatiquement les problèmes dans les référentiels GitHub. Les performances de l'agent SWE sur l'ensemble de tests du banc SWE sont similaires à celles de Devin, prenant en moyenne 93 secondes et résolvant 12,29 % des problèmes. En interagissant avec un terminal dédié, SWE-agent peut ouvrir et rechercher le contenu des fichiers, utiliser la vérification automatique de la syntaxe, modifier des lignes spécifiques et écrire et exécuter des tests. (Remarque : le contenu ci-dessus est un léger ajustement du contenu original, mais les informations clés du texte original sont conservées et ne dépassent pas la limite de mots spécifiée.) SWE-A
