Question

我有一个我正在制作的网页，屏幕上有一些项目我需要帮助安排。我曾尝试使用花车，它们相距太远，填充物使它们变得古怪。我希望一切都集中在一起，彼此相邻。大小并不重要，因为我可以做的只是一些对齐帮助将被赞赏。这显示了当前和期望的结果。

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;
 }

Answer 1

也许你可以尝试将所有想要包含在div中的内容包装起来并给出div余量：0 auto

带盒子和正文的HTML定位

1 个答案: