HTML和CSS文本框與導航菜單混合
[英]Html and Css Text Box Mixing with navigation menu
問題描述
我在一些教程的幫助下創建了此頁面，並編輯了代碼以在頁面中央附加一個文本框，但該文本框與導航菜單混合在一起。 一些幫助，將不勝感激。 我對html和CSS的了解很少，所以請以簡單的方式指導我。 我在google上搜索，還得到了w3文章，但這無濟於事，因為我在css中使用了它，因為yu可以看到我已經使用margin-top，bottom，left和right來解決問題，但是它混在一起或將其自身與導航菜單重疊。
body { background: url('nature.jpg') no-repeat; background-size: cover; font-family: Arial; color: white; } ul { margin: 0px; padding: 0px; list-style: none; } ul li { float: left; width: 200px; height: 40px; background-color: black; opacity: .8; line-height: 40px; text-align: center; font-size: 20px; margin-right: 2px; } ul li a { text-decoration: none; color: white; display: block; } ul li a:hover { background-color: green; } ul li ul li { display: none; } ul li:hover ul li { display: block; } div.transbox { background-color: #ffffff; border: 1px solid black; opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */ margin-top: 200px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } div.transbox p { margin: 5%; font-weight: bold; color: #000000; }
<html> <link href='style.css' rel='stylesheet'> <ul> <li><a href="index.html">Home</a></li> <li><a href="About.html">About</a> <ul> <li><a>Our Team</a></li> <li><a>Camp Sites</a></li> <li><a>Mission</a></li> <li><a>Resources</a></li> </ul> </li> <li><a href="Todo.html">Things to do</a> <ul> <li><a>Activities</a></li> <li><a>Parks</a></li> <li><a>Shops</a></li> <li><a>Events</a></li> </ul> </li> <li><a href="Contact.html">Contact</a> <ul> <li><a>Map</a></li> <li><a>Directions</a></li> </ul> </li> <li><a href="News.html">News</a></li> </ul> <div class="background"> <div class="transbox"> <p>This is some text that is placed in the transparent box.</p> </div> </div> </html>
1 個解決方案
解決方案1
0 2018-05-19 16:12:45
HTML CSS 導航菜單定位文本和圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.