0

嗨，我想问一些关于 css 的问题。我想制作一个使用 css 来设计它的网站.. 但我被 css 代码所困扰，这让我感到困惑..

这是我想成为的网络： 在此处输入图像描述

网页的内容中间只有1000px，我做的是这样的：

在此处输入图像描述

我不知道如何使角落变成那样，就像丝带角落一样。而且我想让功能区的其余部分更长到网站的末尾（如果你放大或缩小它仍然是成比例的）

第二个问题是当我尝试在 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 回答