流体布局与不规则标题下的列？ - CSS

时间：2015-11-19 05:00:16

标签： html css css3 fluid-layout

免责声明：我的问题是家庭作业的一部分。我们还没有学到HTML和CSS3之外的任何东西，所以我必须使用它。

我收到了一本小册子，指示设计一个“类似布局和意图”的网站。这个页面和我已经完成的网站之间的最大区别是它有一个弯曲/不规则的标题。我还没有使用过这些。我不知道如何将这种图像（如果它使用图像，边缘）合并到流体布局中 - 这在这里也很重要。

所以...我想出了一些使用border-radius看起来相同的东西，但我真的不知道它是否可用于页面的其余部分。有没有办法在这个标题下面制作列（有多种背景颜色）？或者更好（假设它甚至可以通过这些编码限制来完成）以完全不同的方式完成它？

top of sample brochure

enter image description here

我尝试复制没有图像的标题是：

Fiddle 

div {
    border-top-left-radius: 50% 160px;
    border-top-right-radius: 50% 30px;
    height: 1500px;
    background-color: white;
    width: 100%;
}
h1 {
    text-align: right;
    font-family: Arial, san-serif;
    color: white;
    font-size: 550%;
    padding-right: 3%;
    padding-top: 5px;
    letter-spacing: -2px;
}

full brochure

1 个答案:

答案 0 :(得分：0)

根据评论，这可能会对您有所帮助：

<强> Working : Fiddle 

html, body { height:100%; }
body {
    margin:0px;
    width:100%;
    background-color: #BCCC48;
    font-family:Calibri;
}

header {
    height: auto;
    /*background: -webkit-linear-gradient (#89A530, #AEC141);
	background: -moz-linear-gradient (#89A530, #AEC141);
	background: linear-gradient (#89A530, #AEC141);*/
    overflow:hidden;
    padding:30px;
}

header .leftPart
{
    display:inline-block;
    float:left;
    font-weight:500;
    font-family:Calibri;
}

.rPR1, .rPR2, .rPR3
{
    border:1px solid rgba(255,255,255,0.5);
    display:block;
    width:60px;
    font-size:14px;
}

.rPR2
{
    color:White;
    font-size:350%;
}

header .rightPart
{
    display:table;
    float:right;
    width:auto;
}

header h1 {
    display:table-cell;
    vertical-align:middle;
    font-family: Arial, san-serif;
    color: white;
    font-size: 480%;
    padding-right: 3%;
    padding-top: 0px;
    letter-spacing: -2px;
    border:1px solid rgba(255,255,255,0.5);
}
header .headerBlock2
{
    text-align:right;
    display:table-cell;
    width:100px;
    font-size:12px;
    line-height:23px;
    text-transform: uppercase;
    border:1px solid rgba(255,255,255,.5);
    vertical-align:middle;
    font-weight:100;
    font-family:Arial;
}

div.container {
    display:table-row;
    border-top-left-radius: 50% 50px;
    border-top-right-radius: 50% 30px;
    height: auto; /* Changed */
    background-color: white;
    width: 100%;
    overflow:hidden;
    table-layout:fixed;
}

div .left-column
{
    display:table-cell;
    width:25%;  
    height:100%;
    padding:80px 20px;
    background:#333;
    color:#ddd;
    /*float:left;*/
    text-align:justify;
}

.left-column h2, .left-column h3
{
    color:#ff9933;
}

div .right-column
{
    display:table-cell;
    /*width:calc(75% - 42px); /* This -40px is because of 20px padding of .left-column on both left and right*/
    height:auto;
    background:#fff;
    border:0px solid red;
}

.row1
{
    display:table;
    width:100%;
    height:100%;
    color:#fff;
    overflow:auto;
    table-layout:fixed;
    background:#333;
}

.row1 img.row1col1
{
    display:table-cell;
    width:100%;
}

.row1 .row1col2
{
    display: table-cell;  
    position:relative;
    padding: 10px;   
    vertical-align: middle;
    text-align:right;
}

.row1 .row1col2 p
{
    margin:9px auto;
}

.bullets
{
    padding-left:5px;
    color:#ff9933;
}

.row2
{
    display:block;
    width:100%;
}

.row2 h1
{
    text-align:center;
    width:100%;
    color:#89A530;
}

.content
{
    display:block;
    width:calc(100% - 40px);
    overflow:auto;
    text-align:justify;
    padding:10px 20px;
   -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

footer
{
    display:block;
    width:calc(100% - 40px);
    height:auto;
    padding:20px 20px 0px 20px;
    background:#eee;    
}

footer pre
{
    padding:0px;
    margin:0px;
    font-weight:bold;
    /*font-family:calibri;*/
}

@media only screen and (max-width: 650px) {
    header
    {
        padding:20px 15px;
    }
    .rPR1, .rPR2, .rPR3
    {
        width:50px;
        font-size:12px;
    }
    .rPR2
    {
        font-size:220%;
    }
    
    header h1
    {
        font-size: 300%;
    }    
    
    .headerBlock2
    {
        width:80px;
        font-size:12px;
        line-height:18px;
    }
    
}

@media only screen and (max-width: 480px) {
    header
    {
        padding: 15px 10px;
    }
    .rPR1, .rPR2, .rPR3
    {
        width:40px;
        font-size:0.7em;
    }
    .rPR2
    {
        font-size:190%;
    }
    
    header h1
    {
        font-size: 210%;
    }    
    
    .headerBlock2
    {
        font-size:0.6em;
        line-height:12px;
        width:75px;
    }
    
}
<body>
    <!-- HEADER -->
    <header>
        <span class="leftPart">
            <span class="rPR1">ISSUE</span>
            <span class="rPR2">00</span>
            <span class="rPR3">MONTH YEAR</span>
        </span>
        <span class="rightPart">
            <span class="headerBlock2">
                Monthly Journal of Information Technology
            </span>
            <h1>Tech<span style="font-weight:normal">Times</span></h1>
        </span>
    </header>
    
    <!-- CONTAINER -->    
    <div class="container">
        <span class="left-column">
            <h2>
                Solutions For a New Economy
            </h2>
            <p>
                <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
            </p>
            <h3>
                PERSONAL COMPUTING
            </h3>
            <p>
                The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from?Contrary to popular belief, Lorem Ipsum is not simply random text.
            </p>
        </span><!-- LEFT COLUMN Ends -->
        
        <span class="right-column">
            <span class="row1">
                <img class="row1col1" src="http://www.divyashah.in/stackoverflow/images/image-1.jpg" />
                <span class="row1col2">
                    <h2>this issue</h2>
                    <p>Open Source Revolution <span class="bullets">P.1</span></p>
                    <p>I.T.Management Tips <span class="bullets">P.2</span></p>
                    <p>Non-Profit Solutions <span class="bullets">P.3</span></p>
                    <p>Trends & New Software <span class="bullets">P.4</span></p>
                </span><!-- ROW1COL2 Ends -->
            </span> <!-- ROW 1 Ends -->
            <span class="row2">
                <h1>Exploring Open Source Software Opportunities</h1>
                <span class="content">
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet mollis lorem, in consequat leo finibus at. Etiam et suscipit dui, eu luctus velit. Curabitur dapibus euismod semper. Donec et quam euismod nisl feugiat commodo. Praesent in egestas purus, eget finibus lectus. Duis eget erat at eros maximus fringilla quis non neque. Fusce et convallis purus. Mauris sed pellentesque leo. Suspendisse potenti. Integer bibendum, diam et pellentesque mattis, nunc tortor dictum mi, a suscipit dolor ante nec arcu. Aliquam aliquet placerat ex, eu tincidunt est feugiat id. Fusce in dui finibus, sodales quam porta, egestas justo. Praesent convallis est et tortor vehicula, sed porttitor metus sollicitudin.
                    </p>
                    <p>
Curabitur quis neque in risus ullamcorper luctus. Duis finibus mauris in eros rhoncus suscipit. Maecenas non faucibus dolor. Cras dictum eu enim a aliquet. Mauris tincidunt scelerisque finibus. Praesent interdum ipsum quis hendrerit ornare. Mauris arcu metus, dignissim sed convallis at, placerat eget nulla. Sed nec facilisis enim. Phasellus at gravida est. Aliquam faucibus ipsum scelerisque, tincidunt massa aliquam, rutrum turpis. Maecenas ut ex quis arcu dignissim pulvinar non in lectus. Suspendisse viverra tristique laoreet. Donec mollis, lectus a scelerisque eleifend, libero erat fermentum sapien, a condimentum lorem nunc eu risus. In interdum libero mauris, ut ultrices mi hendrerit vitae. Donec accumsan, nisi vel consectetur aliquet, elit nunc blandit lorem, sed viverra odio ligula in nibh. Phasellus posuere nulla id accumsan blandit.
                    </p>
                    <p>
Aliquam nec tristique felis. Nulla quam turpis, maximus vitae felis a, consectetur pretium nisi. Nam eu pharetra leo. Quisque ac est id nisi commodo mattis et quis libero. Morbi pretium sem at mi iaculis, eget aliquam magna facilisis. Suspendisse id vehicula dui. Sed ornare augue in augue rutrum scelerisque. Praesent ac lectus luctus, placerat enim nec, accumsan quam. Vivamus condimentum sodales nulla consequat lobortis. Mauris condimentum bibendum lorem, fringilla condimentum mauris tempor quis. Etiam feugiat eros eu ante consectetur, quis interdum nisl condimentum. Duis interdum velit eu lorem faucibus ornare. Nam convallis tellus vitae scelerisque pellentesque. Donec tempor dapibus urna eget convallis. Aliquam at imperdiet massa. Integer in eros ante. Praesent id lacinia leo. Donec fermentum, justo vitae luctus aliquet, nisl augue scelerisque felis, in commodo mi lacus quis mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce at purus risus. Donec rhoncus diam nibh. Nulla dignissim, tortor id mattis laoreet, nulla leo vehicula nulla, at aliquet nunc augue eu ligula. Fusce id est est. Fusce ut ultricies velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam vel enim ac massa elementum pharetra id vitae leo. Quisque felis magna, accumsan a accumsan et, tincidunt eget ante. Quisque lacinia eleifend nisi, sed porta arcu volutpat at. Duis vitae malesuada lectus.
                    </p>
                    <p>
Sed a rhoncus nulla, et vulputate nisl. Fusce a augue non massa gravida commodo ut sed neque. Phasellus tempor, neque ac lacinia blandit, nisi tellus consectetur augue, molestie efficitur mauris purus ac elit. Morbi a urna tempor, ornare augue nec, sagittis dui. Praesent sit amet magna congue, porta lacus ac, lacinia velit. Cras gravida dapibus tortor ut egestas. Nulla eu leo augue. Aliquam sodales est leo, ac gravida mauris cursus non. Cras semper massa at est dictum, et mollis metus egestas. Vivamus ut ultrices erat. Duis vel tempor ante, nec fringilla purus. Suspendisse eu aliquet mauris, et dictum urna. Aenean tincidunt, nulla ut finibus pretium, quam odio ullamcorper enim, et gravida enim augue vitae augue. Nam et ligula commodo, malesuada sem quis, accumsan tellus. Donec nec lectus at nisl dapibus viverra.
                    </p>
                    <p>
Aliquam at imperdiet massa. Integer in eros ante. Praesent id lacinia leo. Donec fermentum, justo vitae luctus aliquet, nisl augue scelerisque felis, in commodo mi lacus quis mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce at purus risus. Donec rhoncus diam nibh. Nulla dignissim, tortor id mattis laoreet, nulla leo vehicula nulla, at aliquet nunc augue eu ligula. Fusce id est est. Fusce ut ultricies velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam vel enim ac massa elementum pharetra id vitae leo. Quisque felis magna, accumsan a accumsan et, tincidunt eget ante. Quisque lacinia eleifend nisi, sed porta arcu volutpat at. Duis vitae malesuada lectus.
                    </p>
                </span><!-- CONTENT Ends -->
            </span><!-- ROW 2 Ends -->
        </span> <!-- RIGHT COLUMN Ends -->
    </div><!-- CONTAINER Ends -->

    <!-- FOOTER -->
    <footer>
        <div class="footer-left">
            <img src="http://www.divyashah.in/stackoverflow/images/Logo.jpg" />
            <div class="address">
                <pre>
New Jersey
12 North State, Route 17
Suite 303,Paramus
New Jersey,NJ-07652
Tel: +1.201.336 9431/ 32
                </pre>
            </div>
        </div>
    </footer>
    
</body>

当我现在看到整个代码时，我想我大大地度过了我的空闲时间。 ：）

相关问题
最新问题