0 0 4 9 - 双列自适应布局 | 【情人节特刊 - 当你老了】

不二如是 · 发表于 2017-2-14 19:39:10

购买主题 已有 14 人购买 本主题需向作者支付 2 鱼币 才能浏览

alltolove · 发表于 2017-2-14 20:19:01

好下功夫阿

不二如是 · 发表于 2017-2-14 22:39:13

alltolove 发表于 2017-2-14 20:19
好下功夫阿

必须滴～

a540656809 · 发表于 2017-3-6 23:17:44

是不是有必要用你教的爬虫来一次性爬取这个区域的文章，不然翻页好麻烦

shishunfu · 发表于 2017-5-3 10:17:37

进阶布局

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>双列自适应布局</title>
        <style type="text/css">
                * {
                        margin: 0;
                        padding: 0;
                }

                .page {
                        width: 100%;
                        background: #000000;
                        position: relative;
                        padding-left: 300px;
                        box-sizing: border-box;
                }

                .side, .main {
                        text-align: center;
                        font-family: "Comic Sans MS", cursive;
                        color: #FFF;
                        box-sizing: border-box;
                }

                .main {
                        width: 100%;
                        height: 1555px;
                        background: #FF88C2;
                        padding: 55px;
                }

                .main img {
                        margin-top: 400px;
                }

                .main h1 {
                        font-size: 55px;
                        font-family: sans-serif;
                }

                .main p {
                        font-size: 22px;
                }

                .side {
                        width: 333px;
                        height: 1555px;
                        background: #F88;
                        position: absolute;
                        left: 0;
                        padding: 33px;
                }

                .side img {
                        margin-bottom: 33px;
                }

                .side button {
                        background: #F39C12;
                        border: none;
                        border-radius: 3px;
                        padding: 2px 40px;
                        margin-top: 33px;
                        font-size: 18px;
                }

        </style>
</head>
<body>
<div class="page">
        <div class="side">
                <img src="p9.png">
                <h2>When you are old</h2>
                <p>
                        When you are old and grey and full of sleep,<br>
                        当你老了，头发花白，睡意沉沉，<br><br>

                        And nodding by the fire，take down this book,<br>
                        倦坐在炉边，取下这本书来，<br><br>

                        And slowly read,and dream of the soft look<br>
                        慢慢读着，追梦当年的眼神<br><br>

                        Your eyes had once,and of their shadows deep;<br>
                        你那柔美的神采与深幽的晕影。<br><br>

                        How many loved your moments of glad grace,<br>
                        多少人爱过你昙花一现的身影，<br><br>

                        And loved your beauty with love false or true,<br>
                        爱过你的美貌，以虚伪或真情，<br><br>

                        But one man loved the pilgrim Soul in you<br>
                        惟独一人曾爱你那朝圣者的心，<br><br>

                        And loved the sorrows of your changing face;<br>
                        爱你哀戚的脸上岁月的留痕。<br><br>

                        And bending down beside the glowing bars,<br>
                        在炉罩边低眉弯腰，<br><br>

                        Murmur,a little sadly,how Love fled<br>
                        忧戚沉思，喃喃而语，<br><br>

                        And paced upon the mountains overhead<br>
                        爱情是怎样逝去，又怎样步上群山，<br><br>

                        And hid his face amid a crowd of stars.<br>
                        怎样在繁星之间藏住了脸。
                </p>
                <button>鱼C-SSF</button>
        </div>
        <div class="main">
                <img src="eg_cute.gif" alt="flowers">
                <h1>爱情</h1>
                <p>爱情就美在风险和运气，我们将自身转向了未知、神秘。</p>
        </div>
</div>
</body>
</html>

aswyamato1989 · 发表于 2017-7-25 07:57:23

我去，这b格瞬间就上来了啊！！！

aswyamato1989 · 发表于 2017-7-25 13:31:36

交作业！

隨鈊乄鎍慾 · 发表于 2018-6-22 22:10:01

交作业，这次的作业还得扣图

：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双列自适应</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .page{
            width:100%;
            background:#000;
            position:relative;
            padding-left:433px;
           box-sizing:border-box;
        }
        .side{
            width:433px;
            height:1555px;
            background: #ff9ea6;
            padding:53px;
            position:absolute;
            left:0;
        }
        .main{
            width:100%;
            height:1555px;
            background:#ff88c2;
            padding:55px;
        }
        .main h1{
            font-size: 55px;
            font-family:"SimSun";
        }
        .main p{
            font-size: 22px;
        }
        .main img{
            margin-top:400px;
        }
        .side img{
            margin-bottom: 33px;
        }
        .side h2{
            font-size:35px;
        }
        .side p{
            margin-top:43px;
        }
        .side button{
            background:#f39c12;
            border:none;
            border-radius:3px;
            padding:3px 40px;
            margin-top:33px;
            font-size:18px;
        }
        .side,.main{
            text-align:center;
            font-family:"Comic Sans MS",cursive;
            color:#fff;
            box-sizing:border-box;
        }

    </style>
</head>
<body>
    <div class="page">
        <div class="side">
            <img src="2.png" alt="Flowers">
            <h2>When you are old</h2>
            <p>When you are old and grey and full of sleep,<br>
                当你老了，头发花白，睡意沉沉，<br><br>

                And nodding by the fire，take down this book,<br>
                倦坐在炉边，取下这本书来，<br><br>

                And slowly read,and dream of the soft look<br>
                慢慢读着，追梦当年的眼神<br><br>

                Your eyes had once,and of their shadows deep;<br>
                你那柔美的神采与深幽的晕影。<br><br>

                How many loved your moments of glad grace,<br>
                多少人爱过你昙花一现的身影，<br><br>

                And loved your beauty with love false or true,<br>
                爱过你的美貌，以虚伪或真情，<br><br>

                But one man loved the pilgrim Soul in you<br>
                惟独一人曾爱你那朝圣者的心，<br><br>

                And loved the sorrows of your changing face;<br>
                爱你哀戚的脸上岁月的留痕。<br><br>

                And bending down beside the glowing bars,<br>
                在炉罩边低眉弯腰，<br><br>

                Murmur,a little sadly,how Love fled<br>
                忧戚沉思，喃喃而语，<br><br>

                And paced upon the mountains overhead<br>
                爱情是怎样逝去，又怎样步上群山，<br><br>

                And hid his face amid a crowd of stars.<br>
                怎样在繁星之间藏住了脸。</p>
            <button>鱼C-不二如是</button>
        </div>
        <div class="main">
            <img src="1.png" alt="Fun">
            <h1>爱情</h1>
            <p>爱情就美在风险和运气，我们将自身转向了未知、神秘。</p>
        </div>

    </div>
</body>
</html>

你在意在便在 · 发表于 2019-11-2 09:34:48

发现一丢丢小问题，如果当main高度提高像素后，会出现main和side之间有地方重合，如果要解决这个问题是一定要把宽度定值嘛，不能设置成百分比？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双列自适应</title>
<style type="text/css">
* {
        margin: 0;
        padding: 0;
}
.page {
        width: 100%;
        background: black;
        position: relative;
        padding-left: 510px;
        box-sizing:border-box;
}
.main {
        padding: 55px;
        width:100%;
        height: 1700px;
        background: #e66767 ;
        color:lightyellow;
}
.main h1 {
        font-size: 55px;
        font-family: "SimSun";
}
.main p {
        font-size: 55px;
}
.main img {
        margin-bottom: 33px;
        margin-top: 400px;
}
.side {
        
        padding: 10px;
        height: 1700px;
        width:530px;
        background: #f8a5c2;
        color: white;
        font-family: "SimSun";
        position: absolute;
        left:0;
}
.side,.main {
        font-size: 22px;
        text-align: center;
        font-family:"Comic Sans MS",cursive;
        box-sizing:border-box;
}
button {
        border:none;
        border-radius:3px;
        padding: 2px 40px;
        margin-top:33px;
        font-size: 28px;
        background: #c44569;
        color:white;
        margin-bottom:10px;
}
</style>
</head>
<body>
<div class="page">
        <div class="side">
                <img src="未标题-2.png" alt="Flowers">
                <h2>When you are old</h2>
                <p>When you are old and grey and full of sleep,<br>
                当你老了，头发花白，睡意沉沉，<br><br>

                And nodding by the fire，take down this book,<br>
                倦坐在炉边，取下这本书来，<br><br>

                And slowly read,and dream of the soft look<br>
                慢慢读着，追梦当年的眼神<br><br>

                Your eyes had once,and of their shadows deep;<br>
                你那柔美的神采与深幽的晕影。<br><br>

                How many loved your moments of glad grace,<br>
                多少人爱过你昙花一现的身影，<br><br>

                And loved your beauty with love false or true,<br>
                爱过你的美貌，以虚伪或真情，<br><br>

                But one man loved the pilgrim Soul in you<br>
                惟独一人曾爱你那朝圣者的心，<br><br>

                And loved the sorrows of your changing face;<br>
                爱你哀戚的脸上岁月的留痕。<br><br>

                And bending down beside the glowing bars,<br>
                在炉罩边低眉弯腰，<br><br>

                Murmur,a little sadly,how Love fled<br>
                忧戚沉思，喃喃而语，<br><br>

                And paced upon the mountains overhead<br>
                爱情是怎样逝去，又怎样步上群山，<br><br>

                And hid his face amid a crowd of stars.<br>
                怎样在繁星之间藏住了脸。</p>

                <button>让编程改变世界</button>
        </div>
        <div class="main">
                <img src="未标题-1.png" alt="Fun">
                <h1>爱情</h1>
                <p>爱情就美在风险和运气，我们将自身转向了未知、神秘。</p>
        </div>
</div>
</body>
</html>

suweixuan1998 · 发表于 2020-1-9 23:05:01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>双列自适应</title>
    <style type="text/css">
*{
    margin: 0;
    padding:  0;

}
        .page{
            width:100%;
            background: #000000;
            position: relative;
            padding-left: 333px;
            box-sizing: border-box;
        }
        .side{
            padding: 33px;
            width: 444px;
            height: 1555px;
            background: #F88;
            position: absolute;
            left: 0;
        }
.side img{
        width:222px;
}
        .main{
            padding: 55px;
            width: 100%;
            height: 1555px;
            background: #FF88C2;
        }
        .main img{
            margin-top: 200px;
        }
        .side,.main{
            text-align: center;
            font-family: "Comic Sans MS", cursive;
            color: #FFF;
            box-sizing: border-box;
        }
        .main h1{
            font-size: 55px;
            font-family: "SimSun";
        }
        .main p{
            font-size: 22px;
        }
        .side img{
            margin-bottom: 33px;
        }
        .side button{
            background: #F39C12;
            border: none;
            border-radius: 3px;
            padding: 2px 40px;
            margin-top: 33px;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div class="page">

    <div class="side">
        <img src="3.png" alt="Flowers">
        <h2>When you are old</h2>

        <p>When you are old and grey and full of sleep,<br>
            当你老了，头发花白，睡意沉沉，<br><br>

            And nodding by the fire，take down this book,<br>
            倦坐在炉边，取下这本书来，<br><br>

            And slowly read,and dream of the soft look<br>
            慢慢读着，追梦当年的眼神<br><br>

            Your eyes had once,and of their shadows deep;<br>
            你那柔美的神采与深幽的晕影。<br><br>

            How many loved your moments of glad grace,<br>
            多少人爱过你昙花一现的身影，<br><br>

            And loved your beauty with love false or true,<br>
            爱过你的美貌，以虚伪或真情，<br><br>

            But one man loved the pilgrim Soul in you<br>
            惟独一人曾爱你那朝圣者的心，<br><br>

            And loved the sorrows of your changing face;<br>
            爱你哀戚的脸上岁月的留痕。<br><br>

            And bending down beside the glowing bars,<br>
            在炉罩边低眉弯腰，<br><br>

            Murmur,a little sadly,how Love fled<br>
            忧戚沉思，喃喃而语，<br><br>

            And paced upon the mountains overhead<br>
            爱情是怎样逝去，又怎样步上群山，<br><br>

            And hid his face amid a crowd of stars.<br>
            怎样在繁星之间藏住了脸。</p>
        <button>
            鱼C-苏十八
        </button>
    </div>
    <div class="main">

        <img src="2.png" alt="Fun">
        <h1>爱情</h1>
        <p>爱情就美在风险和运气，我们将自身转向了未知、神秘。</p>
    </div>
</div>
</body>
</html>

小脑斧 · 发表于 2020-3-16 18:25:45

1428375758 · 发表于 2020-6-6 18:25:43

aswyamato1989 发表于 2017-7-25 13:31
交作业！

你的花花那个图片哪里来的啊

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 57002 狗仔卡	发表于 2017-2-14 19:39:10 \| 显示全部楼层 \|阅读模式购买主题已有 14 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 36
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

[庖丁解牛] 0 0 4 9 - 双列自适应布局 | 【情人节特刊 - 当你老了】

本帖被以下淘专辑推荐:

评分