-4

即横幅，按钮和图片（所有ID）......

http://jerry.pancakeapps.com/hello.html

/*Basic reset*/
* {margin: 0; padding: 0;}

/* Started June 11, 2013 */

body {
    background: #B1E3E2;
    box-shadow: inset 0 0 100px 20px #80D0CF;
    text-align: center;
}

/* Put social networking icons beside name*/

table tr td {
    padding-right: 1px;
}

#social {
    position: absolute;
    right: 325px;
    top: 157px;
}

#social tr td {
    padding-right: 30px;
}

/* Added link styling June 13, 2013 */

a:link {
    text-decoration: none;
    font-family: Helvetica;
}

a:hover {
    color: white;
}

这些图都乱七八糟了（IE、火狐等都可以看到）

#piano {
    position: absolute;
    right: 516px;
    top: 473px;
    border-radius: 50px;
}

#video {
    position: absolute;
    right: 300px;
    top: 800px;
}

#waterloo {
    position: absolute;
    right: 110px;
    top: 473px;
}

按钮也搞砸了，布局明智......

#bluebutton1 {
    position: absolute;
    top: 327px;
    left: 650px;
    height: 59px;
    width: 120px;
    border:2px solid #6495ED;
    background-color: #BCD2EE;
    border-radius: 40px;
    padding-top: 17px;
    display: block;
}

#bluebutton1:hover {
    top: 300px;
}

#orangebutton {
    position: absolute;
    top: 327px;
    left: 877px;
    height: 47px;
    width: 120px;
    border: 5px dashed #FF6347;
    background-color: #FFA500;
    border-radius: 40px;
    padding-top: 23px;
    display: block;
}   

#orangebutton:hover {
    cursor: pointer;
    top: 300px;
}

#bluebutton2 {
    position: absolute;
    top: 327px;
    left: 1111px;
    height: 47px;
    width: 120px;
    border: 2px solid #6495ED;
    background-color: #BCD2EE;
    border-radius: 40px;
    display: table-cell;
    vertical-align: middle;
    padding-top: 23px;
    display: block;
}

#bluebutton2:hover {
    cursor: pointer;
    top: 300px;
}

标题也搞砸了。

h1 {
    display: inline-block;
    font-size: 40px;
    line-height: 80px;
    color: #8699A0;
    text-shadow: 0 0 1px #758890;
    margin: 120px 0;
    font-family: gothic;
    outline: none;
    padding: 30px 30px;
    position: relative;
    padding-right: 500px;
box-shadow: 
        0 0 30px 0 rgba(0, 0, 0, 0.1), 
        0 36px 0 -18px #B1E3E2;
}

h1:before {
    content: '';
    position: absolute;
    top: 18px;
    left: -24.5%;
    z-index: -1;
    width: 149.2%;
    height: 140px;
    border: 70px solid rgba(0, 0, 0, 0);
    border-left: 70px solid #B1E3E2;
    border-right: 70px solid #B1E3E2;
}

h1:after {
    content: '';
    width: 100%;
    height: 0;
    position: absolute;
    top: 100%; left: 0;
    z-index: -1;
    border-top: 18px solid #99acb2;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
}

h1, h1:before {
    background-image: 
        linear-gradient(
            transparent 8%, 
            rgba(0, 0, 0, 0.1) 8%, 
            rgba(0, 0, 0, 0.1) 14%, 
            transparent 14%, 
        transparent 86%, 
            rgba(0, 0, 0, 0.1) 86%, 
            rgba(0, 0, 0, 0.1) 92%, 
            transparent 92%
        ), 
        linear-gradient(
            rgba(255, 255, 255, 0.75), 
            rgba(255, 255, 255, 0) 
        ), 
            linear-gradient(
            45deg, 
            transparent 40%, 
            rgba(0, 0, 0, 0.1) 40%, 
            rgba(0, 0, 0, 0.1) 60%, 
            transparent 60%
        ), 
        linear-gradient(white, white); 
    background-size: 
        cover, /*borders*/
        cover, /*white gloss*/
        4px 4px, /*thin stripes*/
        cover; /*base white*/
}

h1, h1:before, h1:after {
    box-sizing: border-box;
    background-origin: border-box;
}

请告诉我另一种指定布局的方法，以便与不同的浏览器交叉兼容？

4

2 回答 2

2

这在所有浏览器中都被破坏了。很难看到你想要达到的目标。完成这项工作

  • 在一张纸上画出方框来代表页面上的每个元素。这是一个称为线框图的过程。这就像建筑师的计划。它还可以像地图一样帮助您防止迷失在代码中。
  • 使用带有彩色背景的浮动 div 重新创建您在纸上绘制的框布局。
  • 在所有浏览器中测试它
  • 将框布局在网格中后，您喜欢将它们替换为图像和链接。

否则添加一些图像。测试它所有的浏览器。添加链接。在所有浏览器中再次测试。然后添加视频帧。这个想法是采取小步骤让代码工作然后继续。这样，您只有最后几行代码来查找错误。

于 2013-08-27T03:50:08.080 回答
1

我建议您使用 CSS 重置文件来让所有浏览器的行为都非常相似。这将为您在其上应用自己的样式之前提供良好的基础。

这里有一些很好的资源：

埃里克·迈耶

小唯

HTML5 医生

于 2013-08-27T03:57:46.233 回答