者:sunshine小小倩
轉發鏈接:https://juejin.im/post/599970f4518825243a78b9d5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<input enctype="multipart/form-data" type="file">
<input id="Susername" type="text" placeholder="用戶名">
<input id="Ssex" type="number" placeholder="年齡">
<input id="Sage" type="text" placeholder="專業">
<input id="Smajor" type="text" placeholder="學校">
<input id="Sschool" type="text" placeholder="QQ">
<input id="Sqq" type="text" placeholder="地址">
<input id="Saddress" type="text" placeholder="座右銘">
<input id="Smotto" type="button" value="上傳">
<div style="clear: both;"></div>
<progress value="0" max="100"></progress>
</div>
<div class="showarea">
<h3>顯示區域</h3>
</div>
</body>
</html>
.container{
box-sizing: border-box;
width: 404px;
height: 100px;
border: 1px solid #ccc;
border-radius: 5px;
padding-top: 20px;
background: linear-gradient(to bottom,#0ff,#0ff 20px,transparent 0);
margin: 0 auto;
}
input{
padding: 0;
margin: 0;
}
.container input[type=file]{
width: 300px;
height: 30px;
border: 1px solid #ccc;
background: #7FFFD4;
color: #133131;
float: left;
}
.container input[typr=button]{
width: 100px;
height: 32px;
float: left;
border: 1px solid #ccc;
color: #133131;
}
progress{
display: none;
width: 400px;
height: 30px;
margin-top: 7px;
}
.showarea{
width: 600px;
min-height: 200px;
border: 1px solid #ccc;
margin: 30px auto;
}
.showarea h3{
widows: 100px;
margin: 0 auto;
line-height: 60px;
text-align: center;
border-bottom: 1px solid #cccc;
color: #133131;
}
.showareaimg{
max-width: 1000%;
}
在現代網頁設計中,個人主頁是一個展示個人信息、技能、事件等的重要載體。為了吸引訪客的注意力并提供良好的用戶體驗,設計師通常會運用各種技巧和效果來增加頁面的吸引力。本文將介紹如何使用CSS創建一個驚嘆的個人主頁介紹卡片,展示獨特魅力;
首先,需要定義基本的HTML結構來容納個人主頁介紹卡片;
這里外層使用一個div包裹,里面使用三個<div>元素作為包裹容器布局,并在其中添加所需的圖像、內容和按鈕等:
<div class="card">
<div class="box">
<div class="img_box">
<video
src="./assets/video.mp4"
muted
autoplay
loop
/>
</div>
</div>
<div class="box">
<div class="content">
<h2>
Alexa
<br>
<span>
Professional Artist
</span>
</h2>
<ul>
<li>
Posts
<span>22</span>
</li>
<li>
Followers
<span>999+</span>
</li>
<li>
Following
<span>7</span>
</li>
</ul>
<button>Follow</button>
</div>
</div>
<div class="circle">
<div class="img_box">
<img src="./assets/user.jpg" alt="">
</div>
</div>
</div>
外層是card容器,視頻和文本內容區域是上下布局的,分別使用box容器包裹,最后是circle容器包裹頭像在定位在中間左邊超出;
注:
video設置屬性:靜音(muted)可實現自動播放(autoplay),接著設置循環播放(loop);
img>和video>的父容器是一個類名img_box;
接下來,我們將使用CSS來為個人主頁介紹卡片添加樣式。以下是一些關鍵的樣式屬性和技巧,可以使卡片看起來更加漂亮和吸引人;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--clr: #083d41
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: var(--clr);
}
.card {
background-color: var(--clr);
position: relative;
width: 320px;
height: 430px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 先把容器基本樣式調整一下 */
.card .box {
background-color: tomato;
position: relative;
width: 110%;
height: 200px;
/* 文本內容區域圓角 */
border-radius: 20px;
}
/* 頭像容器則使用定位布局 */
.card .circle {
width: 180px;
height: 180px;
position: absolute;
left: -70px;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
border: 10px solid var(--clr);
}
/* 調整img和video共有的父容器樣式 */
.card .box .img_box,
.card .circle .img_box {
position: absolute;
inset: 0;
overflow: hidden;
/* img的圓角 */
border-radius: 50%;
}
.card .box .img_box {
/* video的圓角 */
border-radius: 15px;
}
/* 調整圖片和視頻的樣式 */
.card .box .img_box video,
.card .circle .img_box img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
調整card下的第一個box容器樣式,也就是包裹視頻的容器:
.card .box:nth-child(1)::before {
content: "";
width: 20px;
height: 20px;
background-color: transparent;
position: absolute;
z-index: 10;
top: 106px;
left: -1px;
border-bottom-left-radius: 20px;
box-shadow: -6px 6px var(--clr);
}
/* 樣式同before類似,注意定位樣式 */
.card .box:nth-child(1)::after {
content: "";
width: 20px;
height: 20px;
background-color: transparent;
position: absolute;
z-index: 10;
bottom: -1px;
left: 105px;
border-bottom-left-radius: 20px;
box-shadow: -6px 6px var(--clr);
}
目前添加樣式效果圖,可以在調試階段更改明顯色彩用于調整距離、位置等;
調整card下的第二個box容器樣式,也就是包含文字信息的容器:
.card .box:nth-child(2) {
background-color: #fff;
width: 100%;
height: 220px;
}
.card .box:nth-child(2)::before {
content: "";
width: 20px;
height: 20px;
background-color: transparent;
position: absolute;
z-index: 10;
bottom: 106px;
left: -1px;
border-top-left-radius: 20px;
box-shadow: -6px -6px var(--clr);
}
.card .box:nth-child(2)::after {
content: "";
width: 20px;
height: 20px;
background-color: transparent;
position: absolute;
z-index: 10;
top: -1px;
left: 109px;
border-top-left-radius: 20px;
box-shadow: -6px -6px var(--clr);
}
.card .box .content {
position: absolute;
inset: 0;
padding: 30px 10px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
/* 姓名和Title樣式 */
.card .box .content h2 {
width: 100%;
padding-left: 120px;
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 1.1em;
font-size: 1.15em;
font-weight: 600;
color: #333;
}
.card .box .content h2 span {
letter-spacing: 0.05em;
font-size: 0.75em;
font-weight: 400;
color: tomato;
text-transform: initial;
}
/* 列表樣式 */
.card .box .content ul {
position: relative;
top: 15px;
width: 100%;
padding: 0 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card .box .content ul li {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 10px;
font-size: 0.85em;
font-weight: 500;
color: #999;
}
.card .box .content ul li:not(:last-child)
{
border-right: 1px solid #ccc;
}
.card .box .content ul li span{
font-size: 1.65em;
color: #333;
}
/* 按鈕樣式 */
.card .box .content button {
position: relative;
top: 25px;
padding: 8px 30px;
border: none;
outline: none;
background-color: #03a9f4;
border-radius: 30px;
color: #fff;
font-size: 1em;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
border: 5px solid var(--clr);
box-shadow: 0 0 0 10px #fff;
transition: .5s;
}
.card .box .content button:hover {
letter-spacing: 0.5em;
background-color: #ff3d7f;
}
由于按鈕的圓角與文本內容卡片的交界處看上去顯得有些過于突兀了; 所以現在把它們的交界處優化成弧形,樣式類似box的偽元素,這里也給按鈕創建兩個偽元素,用于優化兩邊的交界處:
.card .box .content button::before {
content: "";
width: 20px;
height: 20px;
background-color: transparent;
position: absolute;
top: 23px;
left: -29px;
border-top-right-radius: 20px;
box-shadow: 5px -7px #fff;
}
.card .box .content button::after {
content: "";
width: 20px;
height: 20px;
background-color: transparent;
position: absolute;
top: 23px;
right: -29px;
border-top-left-radius: 20px;
box-shadow: -5px -7px #fff;
}
除了基本樣式之外,還進一步優化個人主頁介紹卡片的細節。一些可選的技巧包括:
通過運用CSS的各種樣式屬性和技巧,我們可以輕松地創建漂亮的個人主頁介紹卡片。這些卡片不僅能夠有效地展示個人信息和技能,還能夠吸引訪客的注意力并提供良好的用戶體驗。記得嘗試不同的樣式和效果來定制你自己獨特的個人主頁卡片!
CSS創作個人主頁介紹卡片,展示獨特魅力
原文鏈接:https://juejin.cn/post/7260709771870060603
*請認真填寫需求信息,我們會在24小時內與您取得聯系。