답변 1개 / 댓글 4개
채택된 답변
+20 포인트
Copy
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>title</title> <style type="text/css"> body { background-image: url(https://img3.goodfon.ru/wallpaper/big/7/59/stockholm-sverige-stokgolm.jpg); background-size: 100%; } .darker { position: absolute; background-color: #000; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.8; } .wrap { position: relative; color: #fff; } .wrap header { text-align: center; } .wrap header h1 { display: inline-block; } .wrap nav { background-color: #000; } .wrap nav ul { display: table; width: 80%; margin: auto; color: #fff; } .wrap nav ul li { display: table-cell; list-style-type: none; } .wrap nav ul li a { text-decoration: none; color: #fff; display: block; width: 100%; padding: 0.5em 0; text-align: center; } .wrap nav ul li a:hover { background-color: #fff; color: #000; } </style> </head> <body> <div class="darker"></div> <div class="wrap"> <header> <h1>WORLD SKIN</h1> <input type="text" /> </header> <nav> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> </ul> </nav> <footer></footer> </div> </body></html>
답변에 대한 댓글 4개
답변을 작성하려면 로그인이 필요합니다.