我如何使侧边栏响应
[英]How do i make the sidebar responsive
问题描述
我希望这段代码还不错，我是一个初学者。 我右边有蓝色的侧边栏，这太低了，而且也没有响应，我不确定如何编写这些东西。 非常感谢你！
html { font-family: "Trebuchet MS", Helvetica, sans-serif; color: #424242; } body { background-color: #D5FAFB; margin-top: 35px; margin-right: 50px; margin-left: 50px; } .text { margin-right: 800px; } img { float: right; border: 5px solid black; margin-right: 500px; } h1 { color: #232424; font-size: 50px; text-align: center; } .sidebar { float: right; background-color: #3399FF; padding: 30px; font-size: 30px; margin-bottom: 300px; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/new-styles.css" media="all"> <title>How to take care of Fido</title> </head> <body> <h1>Instructions for Fido's babysitter</h1> <h2>Thanks so much for watching Fido this weekend! Here's everything you need to know while I'm gone.</h2> <img class="image" src="img/helsinki.jpg"> <div class="text"> <p>Here's a bit of history about Fido. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <p> Fido is allergic to a lot of foods.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <p>Fido likes to play. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <p>Here is a list of things that you should do with Fido every day.</p> </div> <div class="sidebar"> <p>Menu</p> <p>Picture</p> <p>Videos</p> <p>Contact</p> </div> <ul> <li>Walk him</li> <li>Feed him</li> <li>Pet him</li> </ul> <p>If you have any questions while i'm out of town, I <strong>won't have cell service</strong> but you can<a href="mailto:michael@epicodus.com" class="btn btn-primary btn-lg" role="button"> email me</a> if you need anything</p> <p>Thanks again!</p> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2014-10-09 20:20:05
我不确定这是否是您要寻找的东西……但是它很漂亮而且工作正常。
.sidebar {
position: fixed;
top: 20%;
right: -170px;
}
.sidebar:hover {
right: 0;
}
html { font-family: "Trebuchet MS", Helvetica, sans-serif; color: #424242; } body { background-color: #D5FAFB; margin-top: 35px; margin-right: 50px; margin-left: 50px; min-width: 200px; overflow-x: hidden; } img { float: right; border: 5px solid black; margin-right: 500px; } h1 { color: #232424; font-size: 50px; text-align: center; } .sidebar { opacity: 0.9; position: fixed; top: 20%; right: -170px; background-color: #3399FF; padding: 30px; font-size: 30px; margin-bottom: 300px; border-radius: 5px 0 0 5px; transition: right 0.5s ease-in-out; } .sidebar:hover { right: 0; } .sidebar p { margin: 5px; padding: 10px; } .sidebar p:hover { background-color: rgba(255,255,255,0.3); } .sidebar > span { color: white; position: absolute; left: 4px; top: 45%; } .sidebar > span { color: white; position: absolute; left: 4px; top: 45%; opacity: 1; transition: opacity 0.5s ease-in-out; } .sidebar:hover > span { opacity: 0; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <h1>Instructions for Fido's babysitter</h1> <h2>Thanks so much for watching Fido this weekend! Here's everything you need to know while I'm gone.</h2> <img class="image" src="img/helsinki.jpg"> <div class="text"> <p>Here's a bit of history about Fido. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <p> Fido is allergic to a lot of foods.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <p>Fido likes to play. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> <p>Here is a list of things that you should do with Fido every day.</p> </div> <div class="sidebar"> <p>Menu</p> <p>Picture</p> <p>Videos</p> <p>Contact</p> <span>«</span> </div> <ul> <li>Walk him</li> <li>Feed him</li> <li>Pet him</li> </ul> <p>If you have any questions while i'm out of town, I <strong>won't have cell service</strong> but you can<a href="mailto:michael@epicodus.com" class="btn btn-primary btn-lg" role="button"> email me</a> if you need anything</p> <p>Thanks again!</p> </body> </html>
您如何制作固定的响应式侧边栏？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.