个人中心
gpt4 book ai didi

html - CSS 对齐失败和 Div 高度错误

转载 作者：行者123 更新时间：2023-11-28 01:24:00 25 4
gpt4 key购买 nike

示例 1: 我试图将各个图层居中对齐以在我的页面上形成堆叠 Logo 效果。当我实际上可以让较低的 z-index 层正确显示时，对齐就完全不合适了。

示例 2:我重新开始尝试调试所有内容，并最终使所有对齐都正确，但现在较低的 z-index 层无法扩展到正确的尺寸以显示背景。

主页 HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>DaellusKnights</title>
    <meta charset="UTF-8">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="Christopher Waguespack" />
    <meta name="robots" content="index, follow" />

    <meta property="og:title" content="DaellusKnights" />
    <meta property="og:description" content="Coming soon! DaellusKnights will be a central hub for all of my various and diverse projects, as well as a community workshop for others to do the same." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="http://www.daellusknights.com" />
    <meta property="og:image" content="http://i67.tinypic.com/117sp5w.png" />

    <link rel="stylesheet" href="/css/dk-anim.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>

<div class="vertz gears rotating" style="z-index:10;"></div>

<div class="vertz" style="z-index:100;">
    <div class="logo">
        <div><h1>Daellus<br />Knights</h1></div>
        <div class="content">
            <div class="circle stop"></div>
            <div class="circle1 stop"></div>
            <B>coming<br />soon</B>
        </div>
    </div>
</div>



</body>
</html>

主页 CSS

@font-face {
  font-family: '1979rg';
  src: url('/fonts/1979rg__.eot');
  src: url('/fonts/1979rg__.woff2') format('woff2'),
       url('/fonts/1979rg__.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

* {
    font-family: "1979rg";
    font-weight: ;
    text-align: center;
    color:rgba(3,79,132,0.75);
    border: 1px solid gray;
}

html {
    height:100%;
}

body {
    background: lightblue url("/img/grid-bg.jpg") no-repeat fixed center;
    background-size: 100% 100%;

    width:100%;
    height:100%;
}

.vertz {
    position: relative;
    margin: 0px;
    padding: 0px;

    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.logo {
    position:relative;
    width:400px;
    top:3px;
    right:3px;

    margin:auto;
    padding-left:3px;
    padding-right:3px;
    padding-bottom:10px;
}

.logo h1{
    font-family: "1979rg";
    font-size:2em;
    font-weight:bolder;
    color: rgb(3,79,132);
    position: relative;
}

.gears {
    width:362px;
    height:362px;
    margin: auto;
    position: relative;

    background:url('/img/spinner-1a.png') no-repeat center;
    background-size:cover;

    z-index: 10;
}

/* =========== Spinner Animation ============== */

@keyframes rotating {
    from
        {
        transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        }
    to
        {
        transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        }
}

@-webkit-keyframes rotating {
    from
        {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        }
    to
        {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        }
}

.rotating
    {
    -webkit-animation: rotating 15s linear infinite;
    -moz-animation: rotating 15s linear infinite;
    -ms-animation: rotating 15s linear infinite;
    -o-animation: rotating 15s linear infinite;
    animation: rotating 15s linear infinite;
    }

.spinner-1a {
    width: 362px;
    height: 362px;
    position: relative;
}

.spinner-1a:after {
    width: 362px;
    height: 362px;
    position: absolute;
    background: url("/img/spinner-1a.png") no-repeat center;

    -webkit-animation: spinX 20s infinite linear;
    animation: spinX 20s infinite linear;
}

调试页面 HTML

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="debug.css" type="text/css" media="screen" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
    <script src="debug.js" type="text/javascript"></script>
</head>
<body>

    <!-- Debug Mode Header -->
    <div>
        <h1>Debug Mode!</h1>
    </div>

    <!-- Container for BG-Spinner -->
    <div class="vertz layer1 rotating"> >What the fuck?!< </div>

    <!-- Logo and L-spinner -->
<div class="vertz" style="z-index:100;">
    <div class="logo">
        <div><h1>Daellus<br />Knights</h1></div>
        <div class="content">
            <div class="circle stop"></div>
            <div class="circle1 stop"></div>
            <B>coming<br />soon</B>
        </div>
    </div>
</div>

</body>
</html>

调试页面 CSS

@font-face {
  font-family: '1979rg';
  src: url('/fonts/1979rg__.eot');
  src: url('/fonts/1979rg__.woff2') format('woff2'),
       url('/fonts/1979rg__.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

* {
    font-family: "1979rg";
    font-weight: ;
    text-align: center;
    color:rgba(3,79,132,0.75);
}

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

body {
    background: lightblue url("/img/grid-bg.jpg") no-repeat fixed center;
    background-size: 100% 100%;
}

div {
    position: relative;
}

h1{
    font-family: "1979rg";
    font-size:2em;
    font-weight:bolder;
    color: rgb(3,79,132);
    position: relative;
}

.vertz {
    position: relative;
    margin: 0px;
    padding: 0px;

    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.layer1 {
    width: 362px;
    height: 362x;
    margin: auto;
    position: relative;

    background: url("/img/spinner-1a.png") no-repeat center;
    background-size: cover;

    z-index:10;
}

@keyframes rotating {
    from
        {
        transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        }
    to
        {
        transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        }
}

@-webkit-keyframes rotating {
    from
        {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        }
    to
        {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        }
}

.rotating
    {
    -webkit-animation: rotating 15s linear infinite;
    -moz-animation: rotating 15s linear infinite;
    -ms-animation: rotating 15s linear infinite;
    -o-animation: rotating 15s linear infinite;
    animation: rotating 15s linear infinite;
    }

.circle {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #2187e7;
    width:50px;
    height:50px;
    margin:0 auto;
    -moz-animation:spinPulse 1s infinite ease-in-out;
    -webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(0,183,229,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #2187e7; 
    width:30px;
    height:30px;
    margin:0 auto;
    position:relative;
    top:-50px;
    -moz-animation:spinoffPulse 1s infinite linear;
    -webkit-animation:spinoffPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
    50% { -moz-transform:rotate(145deg); opacity:1; }
    100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}

最佳答案

(代表问题作者发布解决方案)。

原来我问错了问题。 I found the answer here .

平移和旋转不能作为单独的功能一起使用。一个凌驾于另一个之上。它们必须在一个声明中。该链接回答得很好。

关于html - CSS 对齐失败和 Div 高度错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51345555/

25 4 0
文章推荐： css - 在 ReactCSSTransitionGroup 中淡出不起作用
文章推荐： c++ - 强制标准命名空间的命名空间范围
文章推荐： javascript - javascript中FileList中的项目和长度是什么
文章推荐： c++ - 使用 SSL_read() 时如何知道何时没有从服务器接收的进一步响应
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com