好下功夫阿
必须滴～ 是不是有必要用你教的爬虫来一次性爬取这个区域的文章，不然翻页好麻烦 进阶布局{:10_297:} 交作业
<!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> 我去，这b格瞬间就上来了啊！！！ 交作业！
交作业，这次的作业还得扣图{:10_282:} ：
<!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>
发现一丢丢小问题，如果当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>
<!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>
aswyamato1989 发表于 2017-7-25 13:31
交作业！
你的花花那个图片哪里来的啊
页:
[1]