📜  如何使用 HTML 和 CSS 创建响应式个人资料卡?

📅  最后修改于: 2021-09-01 02:15:20             🧑  作者: Mango

在本文中,我们将创建一个个人资料卡,用户可以从中查看其他用户的基本详细信息,并通过不同的句柄与他们联系,也可以向用户发送消息。

方法:

  • 首先,我们创建一个 HTML 文件,在其中执行以下操作:
    • 创建一个包含所有信息的容器。
    • 添加用户的个人资料图片。
    • 添加不同社交媒体句柄的链接。
    • 添加消息按钮。
  • 然后,我们创建一个 CSS 文件,在其中为 HTML 标签应用不同类型的样式属性。
  • 最后,我们使用 HTML 的 head 部分中的 link 标记将我们的 CSS 文件链接到 HTML 文件。

HTML代码:

  1. 首先,我们创建一个 HTML 文件(index.html)。
  2. 创建 HTML 文件后,我们将使用 标签为我们的网页提供标题。它应该是<br/>放在 <head> 标签之间。</li> <li>然后我们将提供所有动画效果的 css 文件链接到我们的 html。这也放在 <head> 标签之间。</li> <li>现在我们添加一个来自 Google Fonts 的链接,以便在我们的项目中使用不同类型的字体系列。</li> <li><strong>来到我们 HTML 代码的正文部分。</strong> <ol> <li>创建一个 div,我们可以在其中存储所有图像、链接、按钮、标题和段落。</li> <li>然后我们创建一个 div,在其中添加用户的图像。</li> <li>创建了另一个 div,在这个 div 中我们必须添加以下标签: <ol> <li>添加标题标签以存储用户的姓名。</li> <li>添加了一个段落标签来存储用户的用户名。</li> <li>然后我们添加了一些社交媒体链接,以便与指定的用户建立联系。</li> <li>最后,我们创建了一个链接,用于使用消息服务连接另一个。</li> </ol> </li> </ol> </li> </ol> <div class="noIdeBtnDiv"> <div> <h5 class="code">HTML</h5> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"><!DOCTYPE html> <html lang="en">   <head>     <link rel="stylesheet" href="style.css">     <link rel="preconnect"         href="https://fonts.gstatic.com">     <link href= "https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap"         rel="stylesheet"> </head>   <body>     <div class="container">         <div class="user-image">             <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210223165952/gfglogo.png"             alt="this image contains user-image">         </div>           <div class="content">             <h3 class="name">Geeks-For-Geeks</h3>             <p class="username">@geeks_for_geeks</p>                 <div class="links">                 <a class="facebook" href= "https://www.facebook.com/geeksforgeeks.org/"                     target="_blank" title="GFG_facebook">                     <i class="fab fa-facebook"></i>                 </a>                   <a class="git" href= "https://github.com/topics/geeksforgeeks"                     title="GFG_github" target="_blank">                     <i class="fab fa-github-square"></i>                 </a>                   <a class="linkedin" href= "https://www.geeksforgeeks.org/tag/linkedin/"                     title="GFG_linkedin" target="_blank">                     <i class="fab fa-linkedin"></i>                 </a>                                   <a class="insta" href= "https://www.instagram.com/geeks_for_geeks/?hl=en"                     target="_blank" title="GFG_instagram">                     <i class="fab fa-instagram-square"></i>                 </a>             </div>               <p class="details">                 A Computer Science portal for geeks             </p>                 <a class="effect effect-4" href="#">                 Message             </a>         </div>     </div>           <!-- This is link of adding small images          which are used in the link section  -->     <script src="https://kit.fontawesome.com/704ff50790.js"         crossorigin="anonymous">     </script> </body>   </html></code></pre> </div> <p></p> <hr/> <h5 class="code">CSS</h5> <div class="hcb_wrap"> <pre class="prism line-numbers lang-css" data-lang="CSS"><code class="replace">*{     margin: 0;     padding: 0;     box-sizing: border-box; }   /* Assigning all the same properties to the body */ body{     height: 100vh;     display: flex;     justify-content: center;     background-color: rgb(0, 0, 0);     align-items: center; }   .container{     width: 20em;     background-color: rgb(255, 255, 255);     overflow: hidden;     border-radius: 1em;     text-align: center;     font-family: 'Open Sans Condensed', sans-serif;     font-size: 1em; }   .user-image{     padding: 3em 0;     background-image: linear-gradient(70deg,#61A1DD,#0083FD); }   .user-image img{     width: 7em;     height: 7em;     border-radius: 50%;     box-shadow:  0 0.6em 1.8em ;     object-fit: cover; }   .content{     color: #565656;     padding: 2.2em; }   .name{     font-size: 1.5em;     text-transform: uppercase; }   .username{     font-size: 1em;     color: #9e9e9e; }   .links{     display: flex;     justify-content: center;     margin: 1.5em 0; }   a{     text-decoration: none;     color: #565656;     transition: all 0.3s;     font-size: 2em;     margin-right: 1.2em; }   a:last-child{     margin: 0; }   .insta:hover{     color:rgb(255, 70, 101);     transform: scale(2,2); }   .git:hover{     color:rgb(0, 0, 0);     transform: scale(2,2); }   .linkedin:hover{     color:rgba(4, 0, 253, 0.842);     transform: scale(2,2); }   .facebook:hover{     color:rgb(4, 0, 255);     transform: scale(2,2); }   .details{     margin-bottom: 1.8em; }     /* CSS for messagin link */   .effect {     text-align: center;     display: inline-block;     position: relative;     text-decoration: none;     color: rgb(48, 41, 41);     text-transform: capitalize;     width: 100%;     background-image: linear-gradient(60deg,#0083FD,#61A1DD);     font-size: 1.2em;     padding: 1em 3em;     border-radius: 5em;     overflow: hidden; }     .effect.effect-4:before {     content: "\f2b6";     font-family: FontAwesome;     display: flex;     align-items: center;     justify-content: center;     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     text-align: center;     font-size: 1.8em;     transform: scale(0, 1); } .effect.effect-4:hover {     text-indent: -9999px; }       .effect.effect-4:hover:before { transform: scale(1, 1); text-indent: 0; }</code></pre> </div> <p></p> <hr/> </div> </div> <p> <strong>CSS 代码:</strong> CSS 用于为我们的 HTML 页面提供不同类型的动画和效果,使其看起来对所有用户都是交互的。</p> <p>在CSS中,我们要提醒以下几点——</p> <ul> <li>恢复所有浏览器效果。</li> <li>使用类和 id 为 HTML 元素赋予效果。</li> <li>使用 CSS 的 nth-child 选择器功能来调用不同的链接。</li> </ul> <div class="noIdeBtnDiv"> <div class="responsive-tabs"> <h2 class="tabtitle"> CSS </h2> <div class="tabcontent"> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace">*{     margin: 0;     padding: 0;     box-sizing: border-box; }   /* Assigning all the same properties to the body */ body{     height: 100vh;     display: flex;     justify-content: center;     background-color: rgb(0, 0, 0);     align-items: center; }   .container{     width: 20em;     background-color: rgb(255, 255, 255);     overflow: hidden;     border-radius: 1em;     text-align: center;     font-family: 'Open Sans Condensed', sans-serif;     font-size: 1em; }   .user-image{     padding: 3em 0;     background-image: linear-gradient(70deg,#61A1DD,#0083FD); }   .user-image img{     width: 7em;     height: 7em;     border-radius: 50%;     box-shadow:  0 0.6em 1.8em ;     object-fit: cover; }   .content{     color: #565656;     padding: 2.2em; }   .name{     font-size: 1.5em;     text-transform: uppercase; }   .username{     font-size: 1em;     color: #9e9e9e; }   .links{     display: flex;     justify-content: center;     margin: 1.5em 0; }   a{     text-decoration: none;     color: #565656;     transition: all 0.3s;     font-size: 2em;     margin-right: 1.2em; }   a:last-child{     margin: 0; }   .insta:hover{     color:rgb(255, 70, 101);     transform: scale(2,2); }   .git:hover{     color:rgb(0, 0, 0);     transform: scale(2,2); }   .linkedin:hover{     color:rgba(4, 0, 253, 0.842);     transform: scale(2,2); }   .facebook:hover{     color:rgb(4, 0, 255);     transform: scale(2,2); }   .details{     margin-bottom: 1.8em; }     /* CSS for messagin link */   .effect {     text-align: center;     display: inline-block;     position: relative;     text-decoration: none;     color: rgb(48, 41, 41);     text-transform: capitalize;     width: 100%;     background-image: linear-gradient(60deg,#0083FD,#61A1DD);     font-size: 1.2em;     padding: 1em 3em;     border-radius: 5em;     overflow: hidden; }     .effect.effect-4:before {     content: "\f2b6";     font-family: FontAwesome;     display: flex;     align-items: center;     justify-content: center;     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     text-align: center;     font-size: 1.8em;     transform: scale(0, 1); } .effect.effect-4:hover {     text-indent: -9999px; }       .effect.effect-4:hover:before { transform: scale(1, 1); text-indent: 0; } </code></pre> </div> </div> </div> </div> <p><strong>输出:</strong> </p> <p><img class="img-fluid" sizes="100vw" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/How_to_create_Responsive_Profile_Card_using_HTML_and_CSS_?_1.jpg" srcset="https://media.geeksforgeeks.org/wp-content/uploads/20210224171718/ezgifcomgifmaker3.gif" width="450"/></p> <div class="_ap_apex_ad" id="82d2079a-8120-480f-9fc7-5cda825d56e7"></div> <p></p></div> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer> <!-- 引入Bootstrap JavaScript库 --> <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <!-- 引入Meilisearch搜索相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script> <!-- 引入prismjs代码高亮相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>