<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<title>单行与多行文本溢出</title>
<link rel="stylesheet" href="./style.css"/>
<script src="../jquery-3.1.0.min.js"></script>
</head>
<body>
<div class="page-container">
<article>
<header>
书单来了| 有空抱怨生活,不如看书治愈
</header>
<div>
<h1 class="article-title">
<div>
<span>
1
</span>
<p>
《爱德华的奇妙之旅》
</p>
</div>
</h1>
<section>
<!--放置左上角的装饰三角形-->
<div class="left-top-triangle">
<img src="./images/left_top.png">
</div>
<!--放置内容图片-->
<div class="article-image">
<img src="./images/Edward.png"/>
</div>
<!--放置文本内容-->
<div class="article-introduction">
<p>凯特·迪卡米洛</p>
<p>豆瓣评分:8.7</p>
<p>(3809人评价)</p>
<p>新蕾出版社</p>
</div>
<!--放置右下角的装饰三角形-->
<div class="right-bottom-triangle">
<img src="./images/right_bottom.png"/>
</div>
</section>
<div class="article-evaluation">
<div>
<h2>▼书单狗有话说</h2>
<p>一只冷漠的瓷兔子爱德华的奇妙之旅,一个关于爱与被爱的故事。在本汪看来,这个短而美的故事,告诉了我们一个深刻的道理:无论我们经历了什么,我们始终要有爱,要对爱充满信心!</p>
</div>
<div>
<h2>▼三句话感受这本书</h2>
<p>
1.如果你不打算爱或被爱,那么整个生命之旅都是毫 无意义的。
</p>
<p>2.你的北极星就在那里,当你知道北极星在哪儿的时候 你是绝不会迷路的。
</p>
<p>
3.如果没有爱,一个故事怎么会有幸福的结局?
</p>
</div>
</div>
</div>
<div>
<h1 class="article-title">
<div>
<span>
2
</span>
<p>
《让爱点亮》
</p>
<div>
</h1>
<section>
<!--放置左上角的装饰三角形-->
<div class="left-top-triangle">
<img src="./images/left_top.png">
</div>
<!--放置内容图片-->
<div class="article-image">
<img src="./images/让爱点亮.png"/>
</div>
<!--放置文本内容-->
<div class="article-introduction">
<p>慕容引刀</p>
<p>豆瓣评分:9.0</p>
<p>(2628人评价)</p>
<p>上海人民出版社</p>
</div>
<!--放置右下角的装饰三角形-->
<div class="right-bottom-triangle">
<img src="./images/right_bottom.png"/>
</div>
</section>
<div class="article-evaluation">
<div>
<h2>▼书单狗有话说</h2>
<p>一幅幅简单的画表达着快乐,悲伤,迷惑,无奈等等,作者的风格诙谐幽默,他的文字和画面都有着启迪人心的力量,适合在冰冷的夜晚温暖那些遭到冷遇的内心。</p>
</div>
<div>
<h2>▼三句话感受这本书</h2>
<p>
1.记得的,才是活过。
</p>
<p>
2.风吹过来,我就有了风的形状。
</p>
<p>
3.我们说的地平线,古人叫它天涯。
</p>
</div>
</div>
</div>
</article>
</div>
<script src="./action.js"></script>
</body>
</html>
body{
font-family:"Helvetica","Microsoft Yahei";
padding:0;
margin:0;
}
h1,h2{
font-size:1rem;
}
/**/
div.page-container{
width:100%;
}
article{
width:90%;
margin:10px auto;
}
/**/
article header{
font-size:24px;
}
/*书的标题*/
.article-title{
height:30px;
padding-bottom:10px;
color:#3e3e3e;
}
.article-title::after{
display:block;
content:"";
clear:both;
}
.article-title div{
display:inline-block;
padding-bottom:8px;
border-bottom:2px solid rgb(172, 29, 16);
}
.article-title span{
display:block;
float:left;
height:30px;
line-height:30px;
background-color:rgb(172, 29, 16);
border-radius:80% 100% 90% 20%;
text-align:center;
width:30px;
color:white;
}
.article-title p{
margin:0;
float:left;
height:30px;
line-height:30px;
}
/*图片展示与简单描述*/
article section{
position:relative;
border:1px solid #ece9e9;
box-sizing:border-box;
padding:15px;
box-shadow: 0 0 5px 1px #dcd7d7;
}
article section::after{
content:"";
display:block;
clear:both;
}
.article-image{
position:relative;
clear:left;
float:left;
width:50%;
height:224px;
}
.article-image img{
position:relative;
display:block;
/*left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);*/
left:0;
top:0;
max-width:100%;
max-height:224px;
}
.left-top-triangle{
position:absolute;
left:-10px;
top:-10px;
z-index:1;
width:60px;
height:60px;
}
.left-top-triangle img{
display:block;
width:100%;
height:100%;
}
.right-bottom-triangle{
position:absolute;
right:0;
bottom:0;
z-index:1;
width:60px;
height:60px;
right:-10px;
bottom:-10px;
}
.right-bottom-triangle img{
display:block;
width:100%;
height:100%;
}
/***********************************************/
/*文章介绍*/
.article-introduction{
float:left;
font-size:14px;
padding-left:10px;
color:#524c4c;
}
/*文章评价*/
.article-evaluation{
clear:left;
background-color:#f9f9f9;
box-sizing:border-box;
padding:10px;
}
.article-evaluation h2{
color: rgb(228, 79, 79);
font-size: 14px;
}
.article-evaluation p{
font-size:14px;
line-height:1.8;
color:#888888;
margin:2px;
}
上午闲来没事,就写了一个。有需要的就拿去吧!