微博首頁是一個非常重要的平臺,它為廣大用戶提供了一個分享和交流的空間。為了讓用戶能夠更加愉悅地使用微博,我們不僅需要優化用戶體驗,還需要對網頁進行一些優化。下面是微博首頁的CSS代碼:
/* reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; } body { font-family: "Microsoft Yahei", sans-serif; font-size: 1.4rem; color: #333; background-color: #f2f2f2; line-height: 1.5; } /* header */ .header { height: 5rem; background-color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 3rem; } .header__logo { height: 3rem; } .header__nav { display: flex; align-items: center; } .header__nav-item { margin-left: 2rem; font-size: 1.6rem; color: #666; } /* main */ .main { width: 100%; max-width: 120rem; margin: 0 auto; padding: 3rem; background-color: #fff; box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.15); } .main__user-card { display: flex; align-items: center; margin-bottom: 2rem; } .main__user-card-avatar { width: 5rem; height: 5rem; border-radius: 50%; margin-right: 1.5rem; } .main__user-card-name { font-size: 2rem; color: #666; } .main__post { border-top: 1px solid #f2f2f2; padding-top: 3rem; } .main__post-content { font-size: 1.8rem; color: #333; line-height: 1.8; margin-bottom: 2rem; } .main__post-img { width: 100%; height: auto; margin-top: 2rem; } .main__post-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 3rem; } .main__post-action { font-size: 1.6rem; color: #666; display: flex; align-items: center; } .main__post-action--like { margin-right: 2rem; } .main__post-action-icon { margin-right: 1rem; } .main__post-action--comment .main__post-action-icon { margin-left: -1rem; margin-right: 0.5rem; }
這些代碼構成了微博首頁的頁面樣式,通過這些樣式,我們可以讓用戶更加方便地使用微博。
上一篇mysql中代碼變為紅色
下一篇微微放大效果用css的