响应式卡片布局：图片文本并排，点击跳转，带导航
<!DOCTYPE html>
<html>
<head>
<title>响应式卡片布局：图片文本并排，点击跳转，带导航</title>
<style type="text/css">
/* 父div样式 */
.parent {
width: 80%;
margin: 0 auto;
background-color: #f3f3f3;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px #ccc;
text-align: center;
position: relative;
}
<pre><code> /* 子1div样式 */
.child1 {
display: inline-block;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px #ccc;
text-align: center;
}
/* 图片div样式 */
.img-div {
display: inline-block;
width: 45%;
vertical-align: middle;
margin-right: 5%;
}
/* 文本div样式 */
.text-div {
display: inline-block;
width: 45%;
vertical-align: middle;
margin-left: 5%;
text-align: left;
}
/* 图片样式 */
.img-div img {
width: 100%;
border-radius: 10px;
cursor: pointer;
}
/* 文本样式 */
.text-div p {
margin: 0;
padding: 10px;
font-size: 16px;
line-height: 1.5;
color: #333;
cursor: pointer;
}
/* 导航div样式 */
.nav-div {
position: absolute;
top: 10px;
right: 10px;
width: 30%;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px #ccc;
text-align: center;
}
/* 导航图片样式 */
.nav-div img {
width: 80%;
margin-bottom: 20px;
}
/* 导航链接样式 */
.nav-div a {
display: block;
margin-bottom: 10px;
font-size: 16px;
color: #333;
text-decoration: none;
cursor: pointer;
}
/* 导航链接悬停样式 */
.nav-div a:hover {
color: #f00;
}
</style>
</code></pre>
</head>
<body>
<div class='parent'>
<div class='child1'>
<div class='img-div'>
<a href='https://www.baidu.com' target='_blank'><img src='https://via.placeholder.com/300x200' alt='图片'></a>
</div>
<div class='text-div'>
<a href='https://www.baidu.com' target='_blank'><p>这是一段文本内容，点击跳转到百度首页</p></a>
</div>
</div>
<div class='nav-div'>
<img src='https://via.placeholder.com/150x150' alt='导航图片'>
<a href='#'>导航链接1</a>
<a href='#'>导航链接2</a>
<a href='#'>导航链接3</a>
</div>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/mlnA 著作权归作者所有。请勿转载和采集!