除了侧面导航栏外，如何向网站添加内容（文字）？
[英]How do I add content (writings) to my website apart from my side navigation bar?
问题描述
I am working on a small website right now, but I have encountered this problem that is quite troublesome. 
我现在正在一个小型网站上工作，但是遇到了这个非常麻烦的问题。
Ive successfully created a side navigation bar, following tips and tutorials, but am struggling in putting my content to the website. Ive按照提示和教程成功创建了一个侧面导航栏，但在将我的内容发布到网站上时很挣扎。 Every time I try it always ends up on the nav bar, so how do I add content out of/apart the nav bar? 每次尝试时，它总是会出现在导航栏上，那么如何在导航栏外添加内容呢？ Another problem is that theres a white gap above everything, but that seems alright for now. 另一个问题是，所有内容之间都存在空白，但是目前看来还不错。
$(document).ready(function(){ $(".fa-times").click(function(){ $(".sidebar_menu").addClass("hide_menu"); $(".toggle_menu").addClass("opacity_one"); }); $(".toggle_menu").click(function(){ $(".sidebar_menu").removeClass("hide_menu"); $(".toggle_menu").removeClass("opacity_one"); }); });
* { margin:0; padding:0; text-decoration: none; list-style: none; } a { color: inherit; } h1 { margin-top: 0; } .toggle_menu{ position: fixed; padding: 10px 10px 10px 10px; margin-top: 70px; color: white; cursor: pointer; background-color: #648B79; z-index: 1000000; font-size: 2em; } .sidebar_menu{ position: fixed; width: 250px; margin-left: 0px; overflow: hidden; height: 100vh; max-height: 100vh; background-color: rgba(17, 17, 17, 0.9); opacity: 0.9; transition: all 0.3s ease-in-out; } .fa-times{ right: 10px; top: 10px; opacity: 0.7; cursor: pointer; position: absolute; color: white; transition: all 0.3s ease-in-out; } .fa-times:hover{ opacity: 1; } .boxed_item{ font-family: 'Open Sans'; font-weight:200; padding: 10px 20px; display: inline-block; border:solid 2px white; box-sizing: border-box; font-size: 22px; color: white; text-align: center; margin-top: 70px; } .logo_title{ color: white; font-family: 'Open Sans'; font-weight: 200; font-size: 12px; text-align: center; padding: 5px 0px; } .navigation_selection{ margin: 20px 0; display: block; width: 200px; margin-left: 25px; } .navigation_item{ font-weight: 200; font-family: 'Open Sans'; color: white; padding: 12px 0; box-sizing: border-box; font-size: 14px; color: #D8D8D8; border-bottom: solid 1px #D8D8D8; transition: all 0.3s ease-in-out; cursor: pointer; } .boxed_item_smaller{ font-size: 12px; color: #D8D8D8; width: 200px; transition: all 0.3s ease-in-out; cursor: pointer; border-width: 1px; margin: 0 0 20px 0; } .boxed_item_smaller:hover{ background-color: white; color: #111; transition: all 0.3s ease-in-out; } .hide_menu{ margin-left: -250px; } .opacity_one{ opacity: 1; transition: all 0.3s ease-in-out; } .post-body { position: relative; padding: 0 20px 20px; } .post-content { position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: "Open Sans"; font-weight: 300; font-size: 1.2em; line-height: 1.5; }
<!doctype html> <html> <head> <!--stylesheets--> <link rel="stylesheet" type="text/css" src="css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="style.css"> <!--fonts--> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'> <!--scripts--> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="menu.js"></script> <script src="https://use.fontawesome.com/6cde4f18cc.js"></script> <!--meta--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Slide-Out Navigation Bar</title> </head> <body> <i class="fa fa-bars toggle_menu"></i> <div class="sidebar_menu"> <i class="fa fa-times"></i> <center> <a href="index.html"><h1 class="boxed_item">Cupcakery</h1></a> <h2 class="logo_title">The best cupcakes in town!</h2> </center> <ul class="navigation_selection"> <li class="navigation_item"><a href="Cupcakes & Orders.html">Cupcakes & Orders</a></li> <li class="navigation_item"><a href="Who we are.html">Who we are</a></li> <li class="navigation_item"><a href="Our Location.html">Our Location</a></li> <li class="navigation_item"><a href="Contact Us.html">Contact Us</a></li> </ul> <center> <a href="#"><h1 class="boxed item boxed_item_smaller"> <i class="fa fa-user"></i> ORDER NOW! </h1></a> </center> <div class="post-body"> <section class="post-content"> <!--PROBLEM--> <p>testing, why does this show up on the navbar?</p> </body> </html>
1 个解决方案
解决方案1
0 2017-03-20 02:08:06
It looks like you are missing a closing "div" tag: 好像您缺少结束的“ div”标签：
* { margin:0; padding:0; text-decoration: none; list-style: none; } a { color: inherit; } h1 { margin-top: 0; } .toggle_menu{ position: fixed; padding: 10px 10px 10px 10px; margin-top: 70px; color: white; cursor: pointer; background-color: #648B79; z-index: 1000000; font-size: 2em; } .sidebar_menu{ position: fixed; width: 250px; margin-left: 0px; overflow: hidden; height: 100vh; max-height: 100vh; background-color: rgba(17, 17, 17, 0.9); opacity: 0.9; transition: all 0.3s ease-in-out; } .fa-times{ right: 10px; top: 10px; opacity: 0.7; cursor: pointer; position: absolute; color: white; transition: all 0.3s ease-in-out; } .fa-times:hover{ opacity: 1; } .boxed_item{ font-family: 'Open Sans'; font-weight:200; padding: 10px 20px; display: inline-block; border:solid 2px white; box-sizing: border-box; font-size: 22px; color: white; text-align: center; margin-top: 70px; } .logo_title{ color: white; font-family: 'Open Sans'; font-weight: 200; font-size: 12px; text-align: center; padding: 5px 0px; } .navigation_selection{ margin: 20px 0; display: block; width: 200px; margin-left: 25px; } .navigation_item{ font-weight: 200; font-family: 'Open Sans'; color: white; padding: 12px 0; box-sizing: border-box; font-size: 14px; color: #D8D8D8; border-bottom: solid 1px #D8D8D8; transition: all 0.3s ease-in-out; cursor: pointer; } .boxed_item_smaller{ font-size: 12px; color: #D8D8D8; width: 200px; transition: all 0.3s ease-in-out; cursor: pointer; border-width: 1px; margin: 0 0 20px 0; } .boxed_item_smaller:hover{ background-color: white; color: #111; transition: all 0.3s ease-in-out; } .hide_menu{ margin-left: -250px; } .opacity_one{ opacity: 1; transition: all 0.3s ease-in-out; } .post-body { position: relative; padding: 0 20px 20px; } .post-content { position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: "Open Sans"; font-weight: 300; font-size: 1.2em; line-height: 1.5; }
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="menu.js"></script> <script src="https://use.fontawesome.com/6cde4f18cc.js"></script> <i class="fa fa-bars toggle_menu"></i> <div class="sidebar_menu"> <i class="fa fa-times"></i> <center> <a href="index.html"><h1 class="boxed_item">Cupcakery</h1></a> <h2 class="logo_title">The best cupcakes in town!</h2> </center> <ul class="navigation_selection"> <li class="navigation_item"><a href="Cupcakes & Orders.html">Cupcakes & Orders</a></li> <li class="navigation_item"><a href="Who we are.html">Who we are</a></li> <li class="navigation_item"><a href="Our Location.html">Our Location</a></li> <li class="navigation_item"><a href="Contact Us.html">Contact Us</a></li> </ul> <center> <a href="#"><h1 class="boxed item boxed_item_smaller"> <i class="fa fa-user"></i> ORDER NOW! </h1></a> </center> </div> <!--closing sidebar_menu div --> <div class="post-body"> <section class="post-content"> <!--PROBLEM--> <p>testing, why does this show up on the navbar?</p>
If you add the closing tag right before your "post-body" div, it should adjust and not show in your nav menu. 如果您在“后身体” div之前添加结束标记，则它应该进行调整并且不会显示在导航菜单中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在我的 html/css 网站上垂直添加“填充”点导航样式 - How do I add a 'fill up' dot navigation style vertically on my html/css website
我想将我网站的内容永久添加到html中 - I want to add content from my website to the html permanently
如何向我的网站添加导航按钮 - How to add Navigation buttons to my website
如何阻止我的汉堡包图标停留在顶部栏上，使其出现在侧面菜单中？ - How do I stop my hamburger icon from staying with top bar so it appears with the side menu?
打开另一页时，如何最小化网站上的侧边栏？ - How can i minimize the side bar in my website while opening another page?
如何在我的网站上添加“添加到收藏夹”按钮或链接？ - How do I add an "Add to Favorites" button or link on my website?
如何将路由添加到我的 react 本机应用程序导航，但将其排除在我的选项卡导航之外？ - How do I add routes to my react native app navigation, but keep it out of my tab navigation?
如何让我的侧边菜单推动我的网站？ - How do i make my side menu push my website over?
如何从http网站加载元素并将其添加到我的网站 - How do I load elements from a http site and add it to my website
如何将导航内容居中？ - How could i center my navigation content?
相关标签