0

我正在为我父亲设计一个网站，到目前为止我只是在索引页面的中间。当我缩小到 30% 左右（只是为了测试）时，让我烦恼的是 div 被破坏了，它们最终不合适（将向您展示一个示例）。此外，即使是 div 也不会作为一个“整体实体”

我基本上什么都试过了，最小宽度（965px）。有没有办法让它在百分比明智的情况下四舍五入？如果是这样，考虑到宽度 max-width 必须为 965px，如何制作？

我的网站主要面向个人电脑。

我也在使用 HTML5 和 CSS3

有一个外部 div 将整个身体放入一个“盒子”

警告：我的页眉在 PHP 中，页脚也是如此，然后我只加载它们。我将同时发布 header.php 和 generalbackground CSS

CSS 代码是这样的：

@charset "utf-8";
/* CSS Document */

body
{
    background:url(pics/bg.jpg) no-repeat center center fixed;

    background-color:#282828;
    font-family: 'Sancreek', cursive;
    min-width:965px;
    margin: 0 auto;
}
.bodyoutline
{
    min-width:100%  ;
}
div.upperbody
{
    background:url('pics/topbg.png') no-repeat center center;
    width:965px;
    height:100px;
    margin: 0 auto;
}
div.body
{
    background:url('pics/divbg.png') no-repeat center center fixed;
    width:965px;
    height:1304px;
    margin: 0 auto;
    margin-top:-25px;
    }

div.header
{
    background:url('pics/header.png');  
    width:965px;
    margin: 0 auto;
    height: 319px;
    overflow:hidden;    
}

div.logo
{
    background:url('pics/logo.png');
    width: 220px;
    height: 215px;
    float:left;
    margin-left:20px;
    margin-top:20px;    
}

div.groupPhoto
{
    background:url('pics/group.png');
    float:right;
    margin-right:30px;
    width:552px;
    height:244px;
    margin-top:30px;
    transform: rotate(12deg);
    -ms-transform: rotate(12deg); /* IE 9 */
    -webkit-transform: rotate(12deg); /* Safari and Chrome */
}

div.mainContent
{
    width:965px;
    margin: 0 auto;
    float:left;
}

div.menuLinks
{
    width:965px;
    margin: 0 auto;
    text-align:center;
}


ul,li.menuLinks
{
    width:965px;
    margin: 0 auto;
    display:inline;
    font-size: 38px;    
    padding: 10px;
    color: #39100a;
    font-weight:bold;
}
div.separator
{
    width:965px;
    text-align:center;
    margin:0 auto;
    height:50px;
}

div.box
{
    width:965px;
    margin: 0 auto;

}

div.updec
{
    background:url('pics/updec.png') center no-repeat;
    width: 965px;
    height: 202px;
}

h1.titles
{
    margin-left:75px;
    font-size:30px;
}
h1.ePhotos
{
    float:left;
    font-size:18px;
    text-decoration:underline;
    margin-left:25px;
}

.position
{
    margin-left:90px;
    margin-top:-130px;
}

a:visited
{
    text-decoration:none;
    color:#000; 
}
a:hover
{
    text-outline:#000;
    outline-color:#000;
    outline-width:2px;
    margin: 0 auto;
}

头文件.php

<!DOCTYPE>

<html>
<head>  


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Copyright" content="© Dorienne Grech (DodoSerebro), All Rights Reserved ">
<meta name="description" content ="Forever Friends Official Website. All the Latest Dances Walkthroughs, Videos of Recent Events, Photos, Contacts and More regarding Forever Friends Linedancers will be found here!, latest Dances">  
<meta name="keywords" content="">
<title>Forever Friends Lineadancers Official Site</title>
<link rel="stylesheet" type="text/css" href="generalbackground.css">
<link rel="stylesheet" type="text/css" href="accordion.css">
<link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'>


</head>

<body>
<div class="bodyoutline">
<div class="upperbody"></div>
<div class="body">

    <div class="header"> <!-- Header containing Logo and Group Photo -->
        <div class="logo"></div> <!-- Logo -->
        <div class="groupPhoto"></div> <!-- end of groupPhoto -->
    </div> <!--End of header -->

    <div class="mainContent"> <!--Main Body Consisting of Links / Video/Photo and others -->

        <div class="menuLinks"> <!-- Menu Links -->
            <ul class="menuLinks">
                <li class="menuLinks"><a href="index.php">Home</a></li>
                <li class="menuLinks"><a href="about.php">About</a></li>
                <li class="menuLinks"><a href="dances.php">Dances</a></li>
                <li class="menuLinks"><a href="videos.php"> Videos </a></li>
                <li class="menuLinks"><a href="events.php">Events </a></li>
                <li class="menuLinks"><a href="contact.php">Contact</a></li>
             </ul>
         </div> <!-- end of mainContent -->

缩小到 30% 的结果

http://imageshack.us/photo/my-images/571/y1bw.jpg/

PS：浏览器目前正在测试和使用的是 GOOGLE CHROME：版本 29.0.1547.66 m

谢谢

4

2 回答 2

0

最佳做法是

.bodyoutline
{
    position: relative;
    min-width: 1366px;
    max-width: 2048px;
    margin: 0px auto; 
    width: 100%;
}

这将使您的所有元素都在 div 中，并且无论放大还是缩小都始终对齐。

于 2013-09-19T14:27:19.870 回答
0

我发现最好的人是使用媒体查询

通过简单地添加

@media (max-width: 600px)
{
  //All the CSS [classes] to be effected by the change in screen will be written here for e.g
h1
{
  font-size:20px;
}
}

当屏幕为 600 像素或更小（或缩小）时，h1 的字体大小将更改为 20 像素，而所有其他 CSS 将保持原样（因为它是父级）

换句话说：

媒体查询只会影响在媒体查询之间写入的那些类（将覆盖原来的）

于 2014-02-28T21:39:19.233 回答