Question

您好我想问一些关于CSS的问题。我想创建一个使用css设计它的网站..但是我坚持使用css代码让我感到困惑..

这里是我想成为的网络： enter image description here

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

enter image description here

我不知道如何使角落像那样，像带角。而且我想把剩余的功能区延长到网站的末尾（如果你放大或缩小它仍然是成比例的）

第二个问题是，当我尝试在mozilla上打开它时，它会在登录框中乱七八糟，如下所示： enter image description here

以下是代码：

<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>

非常感谢..希望有人能帮助我..谢谢...... :)

Answer 1

至于功能区角，你可以使用这段代码：

<强> 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;
}

working example

它应该适用于所有主流浏览器，包括IE8（不是IE7）。

Answer 2

我对css功能区不太确定，但你可以将功能区绝对定位并设置为0

Answer 3

在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;
}

see here

问CSS网站

3 个答案: