2016-07-07 46 views
-1

我有一個我正在製作的網頁和屏幕上的一些項目,我需要幫助安排。我曾嘗試使用浮動,他們太分開,填充使他們變得古怪。我希望一切都集中在一起,彼此相鄰。大小並不重要,因爲我可以做所有這些只是一些對齊幫助,將不勝感激。 enter image description here這顯示當前和期望的結果。帶框和身體的HTML定位

HTML 
<!DOCTYPE html> 
<html> 
<body background="bg.jpg"> 
<head> 
    <title>About</title> 
    <link rel="stylesheet" href="about.css"> 
    <ul> 
    <li><a href="http://cl.myweb..edu/lis3361/Project3/about.html">ABOUT</a></li> 
    <li><a href="http://cl.myweb..edu/lis3361/Project3/contact.html">CONTACT</a></li> 
    <li><a href="http://cl.myweb..edu/lis3361/Project3/gallery.html">GALLERY</a></li> 
    <li><a href="http://cl.myweb..edu/lis3361/Project3/index.html">HOME</a></li> 
    </ul> 
</head> 
</head> 
<body> 
<div class="me"></div> 
<div class="int"> 
<p>Interests: <br><br> Programming <br> Web Design <br> Graphic Design <br> Music/Musician</p> 
</div> 
<div class="para"> 
<p>I am currently a student at the University of --. I am going into my senior year this fall and am excited to be that much closer to being done. I work and take classes on programming, 
the languages I know are HTML, C++, C#, Java, and some Powershell Scripting. Although I am rather new to web page design I do enjoy it and being able to create your vision that people can visit. 
I have also learned Photoshop years ago and enjoy doing that from time to time. Some of my projects can be found in my Gallery. As far as being a musician, 
I have been playing guitar for atleast 10+ years, I couldn't tell you the exact length of time. I have also played percussion in HighSchool band, and learned other instruments such as the ukulele, 
piano, bass guitar, and xlyophone, although it is just a giant piano you hit with mallets, it still sounds cool to know how to play. Other than that I hope you enjoy my site and get a bit of insight on 
who I am!</p> 
</div> 
</body> 

CSS

div.para p{ 
text-align: left; 
background: gray; 
width: 600px; 
height:350px; 
padding: 20px; 
border: 4px ridge black; 
margin: 20px; 
margin-top: 200px; 
margin-right: 250px; 
float: left; 
color: white; 
font-family: Georgia; 
font-size: 20px; 
padding-top: 25px; 
} 
div.int p{ 
text-align: left; 
background: gray; 
width: 200px; 
height:150px; 
padding: 20px; 
border: 4px ridge black; 
margin: 20px; 
margin-top: 200px; 
margin-right: 250px; 
float: left; 
color: white; 
font-family: Georgia; 
font-size: 20px; 
padding-top: 25px; 
} 
a:link {color:black; background-color:transparent; text-decoration:none} 
a:visited {color:black; background-color:transparent; text-decoration:none} 
a:hover {color:white; background-color:transparent; text-decoration:underline} 
a:active {color:white; background-color:transparent; text-decoration:underline} 
ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-image:url('banner.jpg'); 
} 
li { 
float: right; 
} 
li a { 
font-weight: bold; 
word-spacing: 16px; 
font-size: 22px; 
font-family: Georgia; 
display: block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 
.me{ 
text-align: center; 
float: left; 
margin-top: 200px; 
margin-left: 150px; 
width: 250px; 
height: 250px; 
background: url(me2.jpg) no-repeat; 
} 

回答

0

也許你可以嘗試換你想要在一個div居中,並給予該div保證金內容:0汽車

+0

製作了一個主要的div所有的div都有效。 –