簡易部落格頁面小專案 html css
阿新 • • 發佈：2022-12-03
專案預覽
程式碼
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="myblog.css"> </head> <body> <div class="blog-left"> <div class="blog-avatar"> <img alt="avatar-img" class="avatar-img" src="mlq.png"> </div> <div class="blog-title">passion</div> <div class="blog-info">這個人很帥什麼都沒有留下</div> <div class="blog-link"> <ul class="blog-link-title"> <li>關於我</li> <li>微博號</li> <li>公眾號</li> </ul> </div> <div class="blog-tag"> <ul class="blog-tag-title"> <li>#python</li> <li>#golang</li> <li>#javascript</li> </ul> </div> </div> <div class="blog-right"> <div class="blog-list "> <div class="blog-box clearfix"> <!-- 防止塌陷 用偽類選擇器（:after） 創造的空文字填充盒子--> <span class="blog-box-title">論發財之道</span> <span class="blog-box-time">2022-12-1</span> </div> <div class="blog-info"> <span class="blog-info-text">身體好、吃苦耐勞、堅韌不拔、軟飯硬吃、你還在等什麼 趕緊找xxx報名</span> </div> <div class="blog-tag-list"> <span class="blog-tag-content">#重金求子</span> <span class="blog-tag-content">#全國可飛</span> </div> </div> <!-- blog-list 可以多複製幾個 --> </div> </body> </html>
css:
/* background style */ body{ background-color: gray; margin: 0; height : 1200px; font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans CJK SC,WenQuanYi Micro Hei,Arial,sans-serif; /* font-family 屬性應該設定幾個字型名稱作為一種"後備"機制，如果瀏覽器不支援第一種字型，他將嘗試下一種字型。*/ } /* left div box style */ .blog-left{ float: left; width: 25%; height: 100%; background-color:darksalmon; position: fixed; } /* right div box style */ .blog-right{ float: right; width: 75%; height: 100%; } /* general style */ a{ text-decoration: none; /* remove the a tag underline */ } ul{ list-style-type: none; /* remove the ul tag default style */ padding: 0; /* ul tag default padding-left=40, remove it */ } /*avatar style */ .blog-left .blog-avatar{ width: 100px; height: 100px; border: 8px outset white; /* border style is outset, don't forget set */ border-radius: 50% ; /* this property will Controls the border of the image to be rounded */ margin: 20px auto; /* set the circle in div box middle */ overflow: hidden; /* Resolving image overflows problem, set the img in the circle */ } /* solved overflow problem !!!! */ .clearfix:after { content: ''; /* 填充空字串 不會觸發瀏覽器優先選擇文字的機制*/ display: block; /* 設定成塊級標籤 使其可以填充一整行 */ clear: both; /* 當其左右兩端有浮空元素時 就繼續往下找到一個沒有浮空元素的位置 作為一個塊進行填充*/ } .avatar-img{ max-height: 100%; /* img is in the div box, set the max height=100% will cramming the div box */ } .blog-left .blog-title{ margin-top:20px; margin-bottom:20px; text-align: center; /* set the position of the text in the div tag */ font-weight: 900; /* set the font of the text */ font-size: 2em; color: #ff154c; } .blog-left .blog-link-title{ margin: 60px auto; } .blog-left .blog-link-title li{ margin: 10px auto; text-align: center; } .blog-left .blog-tag-title li{ margin: 10px auto; text-align: center; } .blog-left div.blog-info{ margin: 10px auto; text-align: center; } .blog-right .blog-list{ background-color: gray; width : auto; height : 100px; margin : 40px 40px; border:5px solid coral; border-radius: 10px 10px 10px 10px; box-shadow: 10px 10px 10px rgba(255,127,80,0.8) /* box-shadow style */; } .blog-right :hover{ background-color: lightcoral; } .blog-right .blog-box span.blog-box-title { float: left; } .blog-right .blog-box span.blog-box-time { float: right; } .blog-right .blog-info { margin: 10px 10px; } .blog-right .blog-tag-list { margin: 10px 10px; }