<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <button class="btn-link add-line-comment js-add-line-comment js-add-split-line-comment" data-type="addition" data-path="慕课前端练习/CSS网页布局基础/2-4.html" data-anchor="diff-3ed2dc48e602dd86babf679810da051b" data-position="5" data-original-line="+ <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>2-4</title> <style type="text/css"> /*清除默认边距*/ * { padding: 0; margin: 0; } /*整个导航的样式*/ .nav { background: black; width: 1100px; height: 100px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto auto; } /*导航列表样式*/ .list ul { position: absolute; right: 0; top: 0; list-style: none; } .list ul li { float: left; line-height: 100px; text-align: center; margin-right: 70px; } /*超链接样式*/ a:link { color: white; } a:visited { color: cornflowerblue; } a { text-decoration: none; } /*log样式*/ .log { position: absolute; left: 0; top: 0; } /*鼠标指针样式*/ .log, li { cursor: pointer; } </style> </head> <body> <div class="nav"> <div class="log"><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt=""></a></div> <div class="list"> <ul> <li><a href="#">课程</a></li> <li><a href="#">职业路径</a></li> <li><a href="#">实战</a></li> <li><a href="#">猿问</a></li> <li><a href="#">手记</a></li> </ul> </div> </div> </body> </html>
聪明的汤姆