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 日志相册贡献荣誉积分 62694 狗仔卡	发表于 2017-2-14 19:39:10 \| 显示全部楼层 \|阅读模式购买主题已有 14 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 38
	小甲鱼最新课程 -> https://ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

本帖被以下淘专辑推荐:

评分

浏览过的版块