课程: HTML and CSS: Creating Navigation Bars
今天就学习课程吧!
今天就开通帐号,24,700 门业界名师课程任您挑!
Using background images in links for styling
课程: HTML and CSS: Creating Navigation Bars
Using background images in links for styling
- [Instructor] One of the last fun tricks I'd like to demonstrate for you that's something that you might want to try with the navigation bar is background images. So what would happen if we have an image that appears when we roll over our navigation bar links, that might take the form of a textured background image that repeats, or it could be a single instance of some image or another. And so what I've done here is I've created for you, in Canva, a series of images. And so this one's very subtle. It's that light gray background with the diamonds on it. Very, very subtle. And then I've changed the colors on that. I made a light blue version of it with the diamonds, and then I made a gold version of it with a diamonds. That's probably the most obvious texture of all of these. And what I thought I'd do is I would substitute in these background images for the colors that I'm using here. Right now, we have a lovely flat sort of effect on this nav bar. You could certainly leave it just…
随堂练习,边学边练
下载课堂讲义。学练结合,紧跟进度,轻松巩固知识。
内容
-
-
-
-
(已锁定)
Creating space in your nav bar6 分钟 27 秒
-
(已锁定)
Enlarging the clickable area of the link4 分钟 28 秒
-
(已锁定)
Indicating "you are here" in the navigation4 分钟 7 秒
-
(已锁定)
Adding an icon to the link in an accessible way7 分钟 24 秒
-
(已锁定)
Using background images in links for styling4 分钟 6 秒
-
(已锁定)
Challenge: Style a vertical nav bar2 分钟 5 秒
-
(已锁定)
Solution: Style a vertical nav bar3 分钟 20 秒
-
(已锁定)
-
-
-
-