當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

CSS学习笔记-04 a标签-导航练习

發(fā)布時(shí)間：2023/12/2 CSS 52 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS学习笔记-04 a标签-导航练习小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

?個(gè)人練習(xí)，各位大神勿笑 ?。。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0;padding: 0;}ul{width: 810px;height: 50px;background-color:green;margin: 100px auto;list-style: none;}ul li{float: left;width: 90px;height: 50px;text-align: center;line-height: 50px;margin-left: 10px;}ul li a{text-decoration: none;display: inline-block;width: 90px;height: 50px;}ul li a:visited{color:blue;}ul li a:hover{color: white;background-color:pink;}</style> </head> <body><ul><li><a href="#">我是導(dǎo)航</a></li><li><a href="#">我是導(dǎo)航</a></li><li><a href="#">我是導(dǎo)航</a></li><li><a href="#">我是導(dǎo)航</a></li><li><a href="#">我是導(dǎo)航</a></li><li><a href="#">我是導(dǎo)航</a></li><li><a href="#">我是導(dǎo)航</a></li><li><a href="#">我是導(dǎo)航</a></li></ul> </body> </html>

<!DOCTYPE html > < html lang= "en" > < head > < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < meta http-equiv= "X-UA-Compatible" content= "ie=edge" > < title >Document </ title > < style > *{ margin: 0; padding: 0; } ul{ width: 810px; height: 50px; background-color: green; margin: 100px auto; list-style: none; }
ul li{ float: left; width: 90px; height: 50px; text-align: center; line-height: 50px; margin-left: 10px; }
ul li a{ text-decoration: none; display: inline-block; width: 90px; height: 50px; }
ul li a:visited{ color: blue; }
ul li a:hover{ color: white; background-color: pink; }
< / style > </ head > < body > < ul > < li >< a href= "#" >我是導(dǎo)航 </ a ></ li > < li >< a href= "#" >我是導(dǎo)航 </ a ></ li > < li >< a href= "#" >我是導(dǎo)航 </ a ></ li > < li >< a href= "#" >我是導(dǎo)航 </ a ></ li > < li >< a href= "#" >我是導(dǎo)航 </ a ></ li > < li >< a href= "#" >我是導(dǎo)航 </ a ></ li > < li >< a href= "#" >我是導(dǎo)航 </ a ></ li > < li >< a href= "#" >我是導(dǎo)航 </ a ></ li > </ ul > </ body > </ html >

本文轉(zhuǎn)載于:猿2048?https://www.mk2048.com/blog/blog.php?id=jj0122j&title=CSS學(xué)習(xí)筆記-04 a標(biāo)簽-導(dǎo)航練習(xí)

總結(jié)

以上是生活随笔為你收集整理的CSS学习笔记-04 a标签-导航练习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。