我如何修复我的网站的位置 [英] How im fix the position of my website
本文介绍了我如何修复我的网站的位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图让我的网站像这张照片：
http：//i.imgur .com / tM0irdU.jpg？1 [ ^ ]
我有三口咬过的东西，其中一些可以告诉我他们如何一起设置。
它应该有可能写在两边的两个菜单上。
我昨天都试过了，所以现在变得非常厌倦了。所以希望有人可以帮助我。
正确菜单： http://i.imgur.com/V2GXgrT.jpg [ ^ ]
左侧菜单： http://i.imgur.com/ xULETCc.jpg [ ^ ]
标题： http://i.imgur.com/AFVKv7b.jpg [ ^ ]
什么我试过了：
我尝试过这样的代码：
< ！DOCTYPE html >
< html >
< head >
< < span class =code-leadattribute> style >
body {
background-image ： url（top .jpg）;
background-repeat ： no-repeat;
background-attachment ： < span class =code-keyword> fixed;
background-position ： center;
backgrou nd-color ： ＃252525;
}
< / style >
< / head >
< title > Sanitymafia < / title >
< body >
< img src = leftmenu.jpg >
< img src = right_menu.jpg >
< / body >
< / html >
我已经尝试过所有，但我错了位置。另一个css在他们错了之后被删除了。所以我希望有人可以帮助我
解决方案
这个网站
[ ^ ]
首先这个网站建立如下：
身体然后包装，包括网站的所有部分
然后在包装中我们有主要的manu在这个网站的顶部
之后你有了div side然后是center inage div这应该是这样的代码：
在html页面：
< ！DOCTYPE html >
< html >
< head >
< link < span class =code-attribute> rel = stylesheet href = test.css type = text / css / >
< title > Sanitymafia < / title >
< / head >
< body bgcolor = ＃252525 >
< div 类 = 换行 >
< div id = Main_Manu >
< table border = 1 >
< tr >
< td >
< ul id = nav >
< li > < span class =cod e-keyword>< a href = ＃ > < font size = 5 颜色 = 黑色 > < b > 一个< / b > < / font > < / a > < / li >
< li > < span class =code-keyword>< a href = ＃ > < font size = 5 颜色 = 黑色 > < b > 两个< / b > ; < / font > < / a > < / li >
< li > < a < span class =code-attribute> href = ＃ > < font size = 5 < span class =code-attribute> color = black > < b > 三< / b > < / font > < / a > < / li >
< li > < a href = ＃ > < font size = 5 颜色 = black > < b > foure < / b > < / font > < / a > < / li > ;
< / ul >
< / td >
< / tr >
< / table >
< / div < span class =code-ke yword>>
< div id = 一个 >
此处的图片
< / div >
< div id = Sell1 class = groove < span class =code-keyword>>
< marquee 行为 = 滚动 方向 = up scrollamount = 2 height = 170 >
< center >
< font color = 白色 / >
---------------------------
< br > < / br >
some text
< br > < / br >
----- ----------------------
< / center >
< / marquee >
< / div >
< div id = 页脚 < span class =code-keyword>>
< br / >
< center >
< a href = https://www.facebook.com/ > < ; img src = img / facebook.png alt = 山景城 style = < span class =code-keyword> width：50px; height：50px; > < / a >
< a href = https://www.youtube.com/ > < img src = img / youtube.png alt = 山景 样式 = 宽度：50像素;高度：50像素; > < / a >
< a href = https://twitter.com/?lang=he > < img src = img / tewitter.png alt = 山景 样式 = 宽度：50px ;高度：50px; > < / a >
< a href = https://www.instagram.com/ > < img src = img / instagram.png alt = 山景 style = width：50px; height：50px; > < / a >
< a href = HomePage.html > < img src = img / home.png alt = 山景 style = width：50px; height：50px; > < / a >
< / center >
< / div >
< / br < span class =code-keyword>>
< / div >
< / body >
< / html >
并在css页面中如下：
正文{
保证金： 0 auto;
}
。包裹{
宽度：900px;
身高：1000px;
background-color：red;
保证金： 0 auto;
}
#Main_Manu {
宽度：900px;
身高：50px;
float ：left;
margin-bottom：20px;
margin-top：20px;
}
#one
{
margin-top：100px;
clear：both;
宽度：300px;
身高：250像素;
background-color：white;
}
＃Sell1 {
宽度：200px;
身高：200px;
float ：right;
margin-top：50px;
background-image：url（img / slider3.jpg）;
background-size：200px 200px;
border-top-left-radius：15px 15px;
border-bottom-right-radius：15px 15px;
border-bottom-left-radius：15px 15px;
border-top-right-radius：15px 15px;
}
#Footer {
宽度：900px;
身高：100px;
margin-right：5px;
clear：both;
background-image：url（img / footer.png）;
background-size：1300px 100px;
border-top-left-radius：20px 20px;
border-bottom-right-radius：20px 20px;
border-bottom-left-radius：20px 20px;
border-top-right-radius：20px 20px;
}
#nav {
list-style：none inside;
保证金： 0 ;
填充： 0 ;
text-align：center;
z-index： 100 ;
border-top-left-radius：20px 20px;
border-bottom-right-radius：20px 20px;
border-bottom-left-radius：20px 20px;
border-top-right-radius：20px 20px;
}
#nav li {
display：block;
头寸：相对;
float ：left;
z-index： 100 ;
/ * background：＃006633; / *菜单背景颜色* /
border-top-left-radius：20px 20px;
border-bottom-right-radius：20px 20px;
border-bottom-left-radius：20px 20px;
border-top-right-radius：20px 20px;
}
#nav li a {
display：block;
填充： 0 ;
z-index： 100 ;
text-decoration：none;
宽度：216px; / * 这是菜单项的宽度* /
line-height：50px; / * 这是菜单项的高度* /
color：#ffffff; / * 列表项字体颜色* /
border-top-left-radius：20px 20px ;
border-bottom-right-radius：20px 20px;
border-bottom-left-radius：20px 20px;
border-top-right-radius：20px 20px;
}
#nav li li a {font-size：80％;} / * 子菜单项的较小字体大小* /
#nav li：hover {background：＃003f20;} / * 突出显示当前悬停列表项和悬停在子菜单上的父列表项* /
< span class =code-comment> / * ---子列表样式--- * /
#nav ul {
位置：绝对;
填充： 0 ;剩余
： 0 ;
z-index： 100 ;
背景：＃006633;
border-top-left-radius：20px 20px;
border-bottom-right-radius：20px 20px;
border-bottom-left-radius：20px 20px;
border-top-right-radius：20px 20px;
display：none; / * 隐藏子列表* /
}
#nav li ：hover ul ul {display：none;} / * 隐藏子子列表* /
#nav li：hover ul {display：block;} / * 显示悬停时的子列表* /
#nav li li：hover ul {
display：block; / * 显示悬停时的子子列表* /
margin-left：217px; / * 这应该与父列表项的宽度相同* /
margin-top ：-50px; / * 将子菜单顶部与列表项顶部对齐* /
}
Im trying to get my website like this photo:
http://i.imgur.com/tM0irdU.jpg?1[^]
I have those in 3 bites and had penetrated some of which could have shown me how they set up together.
And it should be possible has a possibility to write on the two menus on the sides.
I tried all yesterday, So now become very tired of this. So hope someone can help me.
right menu: http://i.imgur.com/V2GXgrT.jpg[^]
left menu: http://i.imgur.com/xULETCc.jpg[^]
header: http://i.imgur.com/AFVKv7b.jpg[^]
What I have tried:
I has try like this code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("top.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color: #252525;
}
</style>
</head>
<title>Sanitymafia</title>
<body>
<img src="leftmenu.jpg">
<img src="right_menu.jpg">
</body>
</html>
I has tried with all, But im get wrong position. The other css has im deleted after them was wrong. So i hope someone can help me
解决方案
this webside
[^]
first this web side build like this :
body and then wrapper that including all the parts of the webside
then in the wrapper we have main manu that in top of this web side
after that you have the div side and then the center inage div this should be like this code :
in html page :
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="test.css" type="text/css" /> <title>Sanitymafia</title> </head> <body bgcolor= "#252525"> <div class="Wrap"> <div id="Main_Manu"> <table border="1"> <tr> <td> <ul id="nav"> <li><a href="#"><font size=5 color=black><b>one</b></font></a> </li> <li><a href="#"><font size=5 color=black><b>two</b></font></a></li> <li><a href="#"><font size=5 color=black><b>three</b></font></a></li> <li><a href="#"><font size=5 color=black><b>foure</b></font></a></li> </ul> </td> </tr> </table> </div> <div id="one"> the image here </div> <div id="Sell1" class="groove"> <marquee behavior="scroll" direction="up" scrollamount="2" height="170" > <center> <font color=white /> --------------------------- <br></br> some text <br></br> --------------------------- </center> </marquee> </div> <div id="Footer"> <br/> <center> <a href="https://www.facebook.com/"><img src="img/facebook.png" alt="Mountain View" style="width:50px;height:50px;"></a> <a href="https://www.youtube.com/"><img src="img/youtube.png" alt="Mountain View" style="width:50px;height:50px;"></a> <a href="https://twitter.com/?lang=he"><img src="img/tewitter.png" alt="Mountain View" style="width:50px;height:50px;"></a> <a href="https://www.instagram.com/"><img src="img/instagram.png" alt="Mountain View" style="width:50px;height:50px;"></a> <a href="HomePage.html"><img src="img/home.png" alt="Mountain View" style="width:50px;height:50px;"></a> </center> </div> </br> </div> </body> </html>
and in the css page like this :
body { margin: 0 auto; } .Wrap{ width: 900px; height:1000px; background-color : red; margin: 0 auto; } #Main_Manu{ width:900px; height:50px; float:left; margin-bottom:20px; margin-top:20px; } #one { margin-top : 100px; clear : both ; width:300px; height:250px; background-color : white; } #Sell1{ width:200px; height:200px; float:right; margin-top:50px; background-image: url(img/slider3.jpg); background-size: 200px 200px; border-top-left-radius: 15px 15px; border-bottom-right-radius: 15px 15px; border-bottom-left-radius: 15px 15px; border-top-right-radius: 15px 15px; } #Footer{ width:900px; height:100px; margin-right:5px; clear:both; background-image: url(img/footer.png); background-size: 1300px 100px; border-top-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-top-right-radius: 20px 20px; } #nav { list-style:none inside; margin:0; padding:0; text-align:center; z-index:100; border-top-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-top-right-radius: 20px 20px; } #nav li { display:block; position:relative; float:left; z-index:100; /* background: #006633; /* menu background color */ border-top-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-top-right-radius: 20px 20px; } #nav li a { display:block; padding:0; z-index:100; text-decoration:none; width:216px; /* this is the width of the menu items */ line-height:50px; /* this is the hieght of the menu items */ color:#ffffff; /* list item font color */ border-top-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-top-right-radius: 20px 20px; } #nav li li a {font-size:80%;} /* smaller font size for sub menu items */ #nav li:hover {background:#003f20;} /* highlights current hovered list item and the parent list items when hovering over sub menues */ /*--- Sublist Styles ---*/ #nav ul { position:absolute; padding:0; left:0; z-index:100; background: #006633; border-top-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; border-top-right-radius: 20px 20px; display:none; /* hides sublists */ } #nav li:hover ul ul {display:none;} /* hides sub-sublists */ #nav li:hover ul {display:block;} /* shows sublist on hover */ #nav li li:hover ul { display:block; /* shows sub-sublist on hover */ margin-left:217px; /* this should be the same width as the parent list item */ margin-top:-50px; /* aligns top of sub menu with top of list item */ }
这篇关于我如何修复我的网站的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![http：//i.imgur .com / tM0irdU.jpg？1](\"http://i.imgur.com/tM0irdU.jpg?1\"){kind=link}
![http://i.imgur.com/ xULETCc.jpg](\"http://i.imgur.com/xULETCc.jpg\"){kind=link}
![http://i.imgur.com/AFVKv7b.jpg](\"http://i.imgur.com/AFVKv7b.jpg\"){kind=link}
