CSS学习18之小试牛刀
生活随笔
收集整理的這篇文章主要介紹了
CSS学习18之小试牛刀
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
小試牛刀
到現在為止，我們已經將css要學習的初級中級高級知識都已經學完了，接下來我們就應該對自己做一個小測驗了，以下就是我的小測驗，模擬qq會員官網的頭部欄！
素材
bg.png背景圖
logo.png 企鵝logo圖
qqvip官網頭部欄示例
代碼 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>qq會員官網頭部欄</title><style>body,a,div{margin: 0;padding: 0;text-decoration: none;}body{background-image: url("images/bg.png");background-repeat: no-repeat;}ul{margin: 0;padding: 0;list-style: none;}#app{position: relative;width: 100%;height: 150px;background: #282424;overflow: hidden;}#logo{position: fixed;display: inline-block;float: left;}#login{position: relative;display: inline-block;right: -400px;top: 60px;border: 2px yellow solid;border-radius: 45px;}#login a{text-align: center;font: 20px bold;line-height: 40px;display: inline-block;width: 80px;height: 40px;color: yellow;}#login:hover{background: #939331;}#register{position: relative;display: inline-block;border: 2px yellow solid;border-radius: 45px;right: -450px;top: 60px;background: #939331;}#register a{text-align: center;font: 20px bold;line-height: 40px;display: inline-block;width: 200px;height: 40px;color: yellow;}#list{position: relative;display: inline-block;width: 600px;height: 50px;left: 400px;top: 60px;}#list a{text-align: center;font: 14px bold;line-height: 50px;display: inline-block;width: 90px;height: 50px;color: white;}#list a:hover{color: red;}</style> </head> <body><div id="app"><div id="logo"><img src="images/qqviplogo.png" alt="vip"></div><div id="list"><a href="">靚號站 </a><a href="">功能特權 </a><a href="">游戲特權 </a><a href="">成長體系 </a><a href="">年費專區 </a><a href="">免流量特權 </a></div><div id="login"><a href="#">登錄</a></div><div id="register"><a href="">開通超級會員</a></div> </div></body> </html> 效果總結
以上是生活随笔為你收集整理的CSS学习18之小试牛刀的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS学习17之动画
- 下一篇： css什么时候用绝对定位,CSS - 使