--- tags: 網頁切版直播班 - 2021 夏季班 --- # 7/26(一) 每日任務 網頁中的 id 在實務上不會拿來寫樣式用，但是他卻有個神奇功能，錨點。他能讓你的網頁在內部自由的跳轉，以下是錨點的練習，大家試著完成看看吧！ 記得加上 CSS Reset ## 題目 錨點練習：練習在 nav a 的 href 加上連結，來連到各區塊 HTML ```htmlembedded= <body> <nav class="nav"> <h1><a href="#" class="logo"><img src="https://www.filepicker.io/api/file/tNa2so2RRMuedpc2yydt" alt="logo" width="100"></a></h1> <ul class="nav-list"> <li class="nav-item"><a class="nav-link" href="#">首頁</a></li> <li class="nav-item"><a class="nav-link" href="#">個人</a></li> <li class="nav-item"><a class="nav-link" href="#">學歷</a></li> <li class="nav-item"><a class="nav-link" href="#">技能</a></li> </ul> </nav> <div class="container"> <section id="header" class="mb-3"> <img class="banner" src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/student-week1/banner.png" alt=""> </section> <section id="profile" class="mb-3"> 個人資料區塊 </section> <section id="edu" class="mb-3"> 學歷區塊 </section> <section id="skills" class="mb-3"> 技能區塊 </section> </div> </body> ``` CSS ```css= .nav{ background-color: #e8eeea; padding: 0 10px; margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center; } .nav-list{ display: flex; } .nav-link{ text-decoration: none; color: #00cc99; padding: 5px 10px; } .container{ width:900px; margin: 0 auto; } .mb-3{ margin-bottom: 300px; } ``` ## 回報流程 1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～ 解答及回報方式請參考下方 ![](https://i.imgur.com/vftL5i0.png) <!-- 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/rNLqMLX) --> 回報區 --- <!-- 0. Bingbingboom（回報範例，請使用註解回報） Codepen：https://codepen.io/Bingbingboom/pen/YzZaeYR --> <!-- 1. 焦糖 Codepen：https://codepen.io/yen-kg/pen/NWpEbQM --> <!-- 2.孫 sunne [https://codepen.io/Sunne/pen/vYxqLaK](https://codepen.io/Sunne/pen/vYxqLaK) --> <!--3.Alpha Codepen:https://codepen.io/alphatero/pen/yLbpXqa --> <!--4.lumei Codepen: https://codepen.io/l_umei/pen/zYwpzjd --> <!-- 5. Lina Chen codepen: https://codepen.io/LinaChen/pen/poPpwVy --> <!-- 6. Tina Yen codepen:https://codepen.io/tlorfrnl-the-typescripter/pen/NWjXgzP?editors=1010 --> <!-- 7. 葉小嵐 codepen:https://codepen.io/una607/pen/bGWaRKG --> <!-- 8. LiShang codepen:https://codepen.io/li-shang/pen/PomEjav <!-- 9. Cheng Pei-hsuan codepen:https://codepen.io/PaCheng/pen/YzVYQjJ --> <!-- 10. Jasmin codepen:https://codepen.io/thejasmin/pen/jOBmbjG --> <!-- 11.肉鬆 codepen: https://codepen.io/klrkicog/pen/qBmpjgK?editors=1010 --> <!-- 12.陳sam codepen:https://codepen.io/euldpliv/pen/KKmZqLN --> <!-- 13. 雷古娜 codepen:https://codepen.io/tinahopo/pen/XWRVgwz --> <!-- 14. Joy Cheng codepen: https://codepen.io/joycheng5432/pen/ExmovVL --> <!-- 15.sarah codepen: https://codepen.io/sarah-wang/pen/OJmzgYJ?editors=1100 --> <!-- 16. Sz codepen: https://codepen.io/szyln/pen/mdmpMEb --> <!-- 17.roger codepen: https://codepen.io/rogerchuang/pen/YzVYxPM?editors=1010 --> <!-- 18. Xing codepen: https://codepen.io/xing10/pen/yLbpoJo --> <!-- 19. yijun codepen: https://codepen.io/sandy3068/pen/LYyejxq --> <!-- 20. YuriT codepen: https://codepen.io/wenfisht/pen/bGWarqw --> <!-- 21.Sam li codepen:https://codepen.io/sam830623/pen/zYwpdwL --> <!-- Elaine Liu https://codepen.io/elaine7598/pen/ExmovXe --> <!-- 23 peter.chen codepen: https://codepen.io/JIAN-RONG/pen/WNjdEMO?editors=1100 --> <!-- 24. Tsai Ming Da Codepen: https://codepen.io/bmzpfyxe/pen/zYZgEdO --> <!-- 25. 大衛 Codepen: https://codepen.io/exnsrpjc/pen/LYyejJw --> <!-- 26. Irene Wang Codepen: https://codepen.io/irene-wang-the-looper/pen/LYyejrK --> <!-- 27. Jun Chan Codepen: https://codepen.io/chujunchan/pen/GRmyvYq --> <!-- 28. 阿熊 codepen: https://codepen.io/hsiungchi/pen/LYyejoY --> <!-- 27. Fleur Codepen: https://codepen.io/swwlee/pen/OJmjqLL --> <!-- 28. Gill Codepen: https://codepen.io/Gill-Chin/pen/VwbyMLa --> <!-- 29. huanan Codepen: https://codepen.io/hua_nan/pen/poPpWgO --> <!-- 30. 黃小瑄 Codepen: https://codepen.io/5quvgp2z/pen/YzVYrWG --> <!-- 31. Karen Huang codepen: https://codepen.io/Coding_Snorlax/full/oNWpGLb ee--> <!-- 32. axlrock1021 Codepen: https://codepen.io/andy1021/pen/YzVYrpp --> <!-- 33.阿瓜 https://codepen.io/hoick/pen/JjNMrRo --> <!-- 34.Oober https://codepen.io/xtsjrjdv/pen/vYmpeJx --> <!-- 35. Ruby Chiang Codepen:https://codepen.io/rubyyl0701/pen/gOWoGxG --> <!-- 36. ZY Hsu https://codepen.io/zihyin/pen/PomEJeQ?editors=1010 --> <!-- 37. 群嘉 https://codepen.io/efzdamnp-the-lessful/pen/YzVYEKY?editors=1100 --> <!-- 38. ZOE WU https://codepen.io/Zoechiueh/pen/poPpWMM?editors=1100 --> <!-- 39. Cate Chang https://codepen.io/tutz/pen/YzVYEPY --> <!-- 40. Jean https://codepen.io/jean-liu/pen/mdmpqmz --> <!-- 41. 魚魚 https://codepen.io/YuYu_29/pen/YzVYEYj --> <!--42. Peggy Tsai https://codepen.io/pei-chi-tsai/pen/PomEEoo?editors=1010 --> <!--43. 黃士桓 https://codepen.io/shr-huan-huang/pen/OJmzzPP --> <!-- 44. SihLe Huang code: https://codepen.io/bugbug777/pen/BaRJYad?editors=1100 --> <!-- 45. Gui https://codepen.io/guitimliu/pen/OJmzQqw --> <!-- 46. Meng https://codepen.io/MGHN/pen/GRmExgg --> <!-- 47. hellocrab https://codepen.io/hellocrab/pen/zYwpjam --> <!--48.童筱涵 https://codepen.io/hsiaohan/pen/Vwbydwv?editors=1100 --> <!--49.Jerry Yen https://codepen.io/JerryYen/pen/qBmpyrP --> <!-- 50. Jamie https://codepen.io/JamieChenWs/pen/GRmyXgV --> <!-- 51. Jim Hwang https://codepen.io/jimh1129/pen/QWvaVjK --> <!--52. 阿和 https://codepen.io/shnny/pen/BaRJOeR?editors=1010 --> <!--53. anna https://codepen.io/annhys/pen/QWvaZQZ --> <!-- 54. KatieZhao https://codepen.io/katiezhao/pen/GRmyYLQ --> <!-- 55. Hi Annie https://codepen.io/lhohdalu/pen/GRmyYPy --> <!-- 56. Min Chun Tsai https://codepen.io/Tsai0926/pen/MWmrzba --> <!--57. Jocelyn https://codepen.io/enjoyful/pen/gOWoQvq?editors=1100 --> <!--57. James https://codepen.io/james_413/pen/GRmyPXo?editors=1100 --> <!-- 58. RitaHuang https://codepen.io/Rita-Rossweisse/pen/jOmYLjz --> <!-- 59. ALberto https://codepen.io/AlbertoLL/pen/wvdpNbE --> <!-- 60. Sylvia-H https://codepen.io/Cosmosheart/pen/WNjdmze?editors=1100 --> <!-- 61. jimmyFang https://codepen.io/pohxiqqo/pen/oNWpVyq?editors=1010 --> <!-- 62. 沈依蓉 https://codepen.io/lily-oa/pen/LYyeavr --> <!-- 63. WilsonHan https://codepen.io/wi0821/pen/mdmXJoq --> <!-- 64. curry https://codepen.io/Ted19851223/pen/GRmQpOY --> <!-- 65. Erin Huang https://codepen.io/ErinHuang/pen/BaRYoGg --> <!-- 66. Jameskrauser https://codepen.io/jameskrauser/pen/OJmQMwN?editors=1100 --> <!--67. LTL https://codepen.io/ltlin93/pen/QWvQraG --> <!--68. kk https://codepen.io/potatokaka/pen/MWmQZmm?editors=1000 --> <!--69. Riley https://codepen.io/jjpxbprd/pen/abWYLoR --> <!--70. Eric-小偉哥 https://codepen.io/ericLoveDesign/pen/rNmdGJo --> <!-- 71.Calon https://codepen.io/Calon0118/pen/RwVMBag?editors=1100 --> <!-- 72.Benson https://codepen.io/polarBear712/pen/YzVadBg --> <!-- 73.Una(點子數位) https://codepen.io/xbsapbas-the-vuer/pen/RwVyGBv?editors=1100 --> <!-- 74.文文 https://codepen.io/chiawen81/pen/KKmRXMm?editors=1100 --> <!-- 75.shanglin https://codepen.io/rmovuagr-the-selector/pen/jOmxYrN --> <!-- 76. irene CodePen：https://codepen.io/lohas1107/pen/qBmYJJG?editors=1100 --> <!-- 77.Shani codepen:https://codepen.io/ShaniMa/pen/eYWKdJN --> <!-- 78.Tori codepen: https://codepen.io/hayen/pen/VwbdPXK?editors=1100 --> <!-- 79. 三隻小貓 https://codepen.io/bagelover/pen/abWjbqg --> <!-- 80. Yurie https://codepen.io/_u_jung/pen/poPZaGP --> <!-- 81. Jessie Cheng https://codepen.io/JessieMosbi/pen/vYmarwq --> <!-- 82. ellie https://codepen.io/hsu-yu/pen/BaRPvVO--> <!-- 83. WA https://codepen.io/ldddl/pen/rNmZjQQ --> <!-- 84. 袁祥恩 https://codepen.io/ovfxsavp-the-bashful/pen/ExmeeYJ --> <!-- 85. AKI https://codepen.io/akichen27/pen/dyWqqzp --> <!-- 86.陳品宏 https://codepen.io/wtka/pen/LYyMdGj --> <!-- 87. YOYO https://codepen.io/lumedkle/pen/ExmJdqJ --> <!--88.黃羽均 https://codepen.io/azzfgtpo/pen/VwbNVOz --> <!--89.Joe Kuo https://codepen.io/alertislow/pen/oNWRMqb?editors=1000 --> <!--90.Keep https://codepen.io/keep-/pen/GRExRJe -->