课程: HTML and CSS: Creating Navigation Bars
今天就学习课程吧!
今天就开通帐号,24,700 门业界名师课程任您挑!
Challenge: Style a vertical nav bar
(electronic music) - [Instructor] I have given you a ton of information about navbars and navbar styling, and it's time for you to put all of those tips and tricks to work. So what I'd like for you to do in this challenge is I'd like you to redesign the LinkedIn navbar, but I'd like you to make it go vertical on the page. So I've given you a very starting state here in your CodePen for this. Here it is: home, my network, jobs, messaging, and notifications. What I would recommend that you do to make this happen is first of all, start with the HTML. Mark that information up semantically, you don't have to use the actual LinkedIn links, just a regular placeholder is fine. And then you need to style it up in an interesting sort of way. Now, my final answer looks like this. So you see here that I've got a interesting rollover state here. What I did was I put in a whole bunch of icons. Those are all icons that are from the free Font Awesome icon library. And notice that I've got an…
随堂练习,边学边练
下载课堂讲义。学练结合,紧跟进度,轻松巩固知识。
内容
-
-
-
-
(已锁定)
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 秒
-
(已锁定)
-
-
-
-