仿写微信书单君的页面

最新推荐文章于 2022-08-21 21:35:32 发布

前端小白的江湖路

最新推荐文章于 2022-08-21 21:35:32 发布

阅读量531

点赞数

分类专栏： HTML/CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_21058391/article/details/52413385

版权

HTML/CSS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!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;
}