0

cssについて質問したいことがあります。CSS を使用してデザインする Web サイトを作成したい..

ここに私がなりたいウェブがあります： ここに画像の説明を入力

真ん中の 1000px だけの Web のコンテンツと、私が作成したものは次のようなものです。

ここに画像の説明を入力

コーナーをリボンコーナーのようにする方法がわかりません。そして、リボンの残りの部分をウェブサイトの最後まで長くしたいと思います (ズームインまたはズームアウトしても比例します)。

2 番目の質問は、mozilla で開こうとすると、次のようにログイン ボックスが混乱することです。 ここに画像の説明を入力

コードは次のとおりです。

<html>
    <head>
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/jquery-migrate-1.1.1.min.js"></script>
        <style>
            a{
                text-decoration:none;
            }

            html{
                height: 100%;
                overflow-y: scroll;
            }

            body {
                margin:0px;
                font-size:8pt;
                font-family: Verdana, Helvetica, Arial, Sans-Serif;
                background-color:#ffbeec;
            }

            .clearBoth{
                clear:both;
            }

            #divHeader{
                height:321px;
            }

            #menuHeader{
                height:50px;
                background-color:#93113d;
            }

            #isiMenuHeader {
                margin:0px auto;
                width:1000px;
                height:100%;

                filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#93113d, endColorstr=#d41a59);
                background-image:-moz-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%);
                background-image:linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%);
                background-image:-webkit-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%);
                background-image:-o-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%);
                background-image:-ms-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%);
                background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#93113d), color-stop(50%,#d41a59),color-stop(100%,#93113d));
            }

            #logoHeader{
                height:221px;
                background-color:#000000;
            }

            #isiLogoHeader{
                margin:0px auto;
                width:1000px;
                height:100%;
                background-color:#000;
            }

            #lineHeader{
                height:13px;
                background-color:#986f39;
            }

            #isiLineHeader{
                margin:0px auto;
                width:1000px;
                height:100%;

                filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#986f39, endColorstr=#d3944d);
                background-image:-moz-linear-gradient(left, #986f39 0%, #d3944d 50%,#986f39 100%);
                background-image:linear-gradient(left, #986f39 0%, #d3944d 50%,#986f39 100%);
                background-image:-webkit-linear-gradient(left, #986f39 0%, #d3944d 50%,#986f39 100%);
                background-image:-o-linear-gradient(left, #986f39 0%, #d3944d 50%,#986f39 100%);
                background-image:-ms-linear-gradient(left, #986f39 0%, #d3944d 50%,#986f39 100%);
                background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#986f39), color-stop(50%,#d3944d),color-stop(100%,#986f39));
            }

            #menu2Header{
                height:37px;
                background-color:#93113d;
            }

            #isiMenu2Header{
                margin:0px auto;
                width:1000px;
                height:100%;

                filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#93113d, endColorstr=#d41a59);
                background-image:-moz-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%);
                background-image:linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%);
                background-image:-webkit-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%);
                background-image:-o-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%);
                background-image:-ms-linear-gradient(left, #93113d 0%, #d41a59 50%,#93113d 100%);
                background-image:-webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#93113d), color-stop(50%,#d41a59),color-stop(100%,#93113d));
            }
        </style>
    </head>

    <body>
        <div id="divHeader">
            <div id="menuHeader">
                <div id="isiMenuHeader">
                    <div style="float:left">
                        dsfasfas
                    </div>
                    <div style="float:right;background-color:#f782af;height:52px;width:241px;margin-top:24px;">
                        dsfdsfds
                    </div>
                </div>
            </div>

            <div class="clearBoth"></div>

            <div id="logoHeader" style="margin-top:-26px">
                <div id="isiLogoHeader">
                    <div style="float:left;margin-left:24px;position:absolute;">
                        <img src="images/logo.png">
                    </div>
                    <div style="float:right;color:#fff;margin-right:34px;margin-top:50px;">
                        <div>
                            Member Login<br>
                            <input type="text" style="width:204px"><br>
                            <input type="text" style="width:156px">
                        </div>
                        <div>
                            What are you looking for?<br>
                            <input type="text" style="width:156px">
                        </div>
                    </div>
                </div>
            </div>

            <div class="clearBoth"></div>

            <div id="lineHeader"><div id="isiLineHeader"></div></div> <!--136-->

            <div id="menu2Header">
                <div id="isiMenu2Header">
                    sdasdsas
                </div>
            </div>      
        </div>

        <div class="clearBoth"></div>

        <div id="divBody"> <!--86-->
            <div style="margin:0px auto;width:1000px;height:100%;">
                sfasfasdfas
            </div>
        </div>
    </body>
</html>

どうもありがとう..誰かが私を助けてくれることを願っています..ありがとう... :)

4

3 に答える 3

4

リボン コーナーについては、次のコードを使用できます。

HTML

<div>Lorem ipsum</div>

CSS

div {
  width: 200px;
  height: 100px;
  margin-left: 30px;
  background: pink;
  position: relative;
}
div:before {
  content: '';
  position: absolute;
  top: 0;
  left: -30px;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-top: 50px solid pink;
  border-bottom: 50px solid pink;
}

実施例

IE8 (IE7 ではない) を含むすべての主要なブラウザーで動作するはずです。

于 2013-03-22T09:10:09.080 に答える
0

CSSリボンについてはよくわかりませんが、リボンを絶対に配置して右0に設定できます

于 2013-03-22T09:10:10.963 に答える
0

nd_macias のソリューションの上に構築して、これらも追加してみてください。

div:after {
content: '';
position: absolute;
width: 2500px;
height: 100px;
background: pink;
}

これにより、ピンクがリボンの右側に拡張されます. 次に、コンテナ div の幅が 1000px に設定されているため、左右のスペースを重要なものに使用しないと想定しているため、body タグに overflow-x: hidden を設定します。現在の CSS に追加すると、次のようになります。

body {
margin:0px;
font-size:8pt;
font-family: Verdana, Helvetica, Arial, Sans-Serif;
background-color:#ffbeec;
overflow-x: hidden;
}

ここを参照

于 2013-03-22T09:30:35.053 に答える