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.