2024.01.03 新增css跟html內容

Hsuan1128 · Jan 3, 2024 · fd501c4 · fd501c4
1 parent c704860
commit fd501c4
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 1 deletion.
diff --git a/pic/dog-pic-dotted.png b/pic/dog-pic-dotted.png
diff --git a/pic/dog-pic-img1.jpg b/pic/dog-pic-img1.jpg
diff --git a/style.css b/style.css
@@ -0,0 +1,90 @@
+body{
+    margin-top: 100px;
+}
+.filter-item{
+    width: 54%;
+    min-width: 1100px;
+    margin: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    row-gap: 30px;
+    column-gap: 30px;
+}
+.filter-item-dog{
+    width: 31%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 30px;
+    text-decoration: none;
+}
+.item-dog-pic{
+    width: 100%;
+    margin-bottom: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+}
+.dog-pic-img{
+    width: 83%;
+    height: 255px;
+    border-radius: 61px;
+    overflow: hidden;
+    position: relative;
+}
+.dog-pic-img img{
+    width: 100%;
+}
+.dog-pic-dotted{
+    width: 100%;
+    transform: scaleY(0.98);
+    position: absolute;
+    top: -45px;
+}
+.dog-pic-dotted img{
+    width: 100%;
+}
+.item-dog-nickname{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 160px;
+    height: 41px;
+    background-color: #F7F6F188;
+    border-radius: 154px;
+    position: absolute;
+    top: 48%;
+    transition: 0.3s;
+}
+.item-dog-nickname span{
+    font-size: 24px;
+    font-weight: bold;
+    letter-spacing: 5px;
+    color: #474143;  
+}
+.item-dog-introduce{
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 16px;
+    line-height: 30px;
+    color: #7A7677;
+    transition: 0.3s;
+}
+.filter-item-h2{
+    display: block;
+    width: 122px;
+    height: 50px;
+    border-radius: 50px;
+    background-color:#3A3967;
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    text-align: center;
+    box-sizing: border-box;
+    padding-top: 13px;
+    transition: 0.3s;
+}
diff --git a/vue_homework.html b/vue_homework.html
@@ -4,8 +4,28 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Miss Dog</title>
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <h1></h1>
+    <div class="filter-item">
+      <div class="filter-item-dog" id="item-dog-01">
+        <div class="item-dog-pic">
+          <div class="dog-pic-img">
+              <img src="pic/dog-pic-img1.jpg" alt="狗狗照片" class="dog-pic-img-1" id="dog-pic-img-01">
+          </div>
+
+          <div class="dog-pic-dotted">
+              <img src="pic/dog-pic-dotted.png" alt="虛線裝飾">
+          </div>
+
+        </div>
+
+        <div class="item-dog-nickname" ><span id="item-dog-nickname01">冰雪精靈</span></div>
+
+        <p class="item-dog-introduce" id="item-dog-introduce01">冰冰．公．<br>3歲．25公斤</p>
+
+        <h2 class="filter-item-h2" id="filter-item-h201">狗狗檔案</h2>
+      </div>
+    </div>
   </body>
 </html>