CSS学习18之小试牛刀
生活随笔
收集整理的這篇文章主要介紹了
CSS学习18之小试牛刀
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
小試牛刀
到現(xiàn)在為止，我們已經(jīng)將css要學(xué)習(xí)的初級(jí)中級(jí)高級(jí)知識(shí)都已經(jīng)學(xué)完了，接下來我們就應(yīng)該對(duì)自己做一個(gè)小測(cè)驗(yàn)了，以下就是我的小測(cè)驗(yàn)，模擬qq會(huì)員官網(wǎng)的頭部欄！
素材
bg.png背景圖
logo.png 企鵝logo圖
qqvip官網(wǎng)頭部欄示例
代碼 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>qq會(huì)員官網(wǎng)頭部欄</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="">靚號(hào)站 </a><a href="">功能特權(quán) </a><a href="">游戲特權(quán) </a><a href="">成長體系 </a><a href="">年費(fèi)專區(qū) </a><a href="">免流量特權(quán) </a></div><div id="login"><a href="#">登錄</a></div><div id="register"><a href="">開通超級(jí)會(huì)員</a></div> </div></body> </html> 效果總結(jié)
以上是生活随笔為你收集整理的CSS学习18之小试牛刀的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS学习17之动画
- 下一篇： 为什么手机上传图片这么慢 前端_怎样在手