实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文混排</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: lightgray;
}
.main {
width: 1200px;
height: 335px;
background-color: #fff;
margin: 30px auto;
border-radius: 8px;
position: relative; /*在做定位的时候，默认在父元素中就要加一个相对定位*/
}
.left {
position: absolute; /*把第一个块级元素，设置成绝对定位，然后布局到父级元素中间*/
top: 30px;
left: 30px;
}
.left ul li img {
width: 450px;
height: 275px;
border-radius: 5px;/*设置图片的圆角大小*/
}
.left ul li:nth-child(2) {/*利用选择器，选择到自己想要处理的元素进行处理*/
background-color: #fff;
height: 60px;
width: 450px;
border-radius: 5px;
position: relative;/*设置成相对定位，让下面的元素上浮到图片的上面*/
top: -60px;
text-align: center;/*文本水平居中*/
line-height: 60px;/*文本垂直居中行高*/
color: #000;
font-size: 1.1rem;
opacity: 0.6;/*设置元素背景的透明度*/
}
ul, h1, p {
list-style: none;
padding: 0;
margin: 0
}
.right {
position: absolute;/*设置绝对定位*/
left: 510px;
top: 30px;
width: 660px;
}
.title h1 {
font-weight: normal;/*清楚H1标签的粗体*/
font-size: 1.7rem;
margin-bottom: 5px
}
.title p {
color: grey;
margin-bottom: 40px;
}
.right_bottom p:nth-child(1) {
padding: 3px 5px;
background-color: lightgray;
display: inline;
font-size: 12px;
border-radius: 3px;
}
.right_bottom p:nth-child(2) {
font-size: 14px;
margin: 30px 0;
color: grey;
}
.right_bottom p:nth-child(2) span {
margin: 0 10px;
width: 10px;
}
.right_bottom p:nth-child(2) img {
width: 20px;
vertical-align: middle;
}
.right_bottom p:nth-child(3) span:nth-child(1) {
display: inline-block;/*将行内元素转换成行内块级元素，就可以设置元素的高宽*/
padding: 15px 30px;
background-color: #009688;
border-radius: 3px;
color: white;
}
.right_bottom p:nth-child(3) span:nth-child(2) {
display: inline-block;
padding: 15px 30px;
background-color: #393d49;
border-radius: 3px;
color: white;
margin: 0 20px;
}
.right_bottom p:nth-child(3) span:nth-child(3) {
display: inline-block;
padding: 15px 30px;
background-color: #009688;
border-radius: 3px;
color: white;
/*下面这断是设置背景颜色为图片，然后设置图片的大小与水平垂直距离，以及清除XY轴复制*/
background-image: url("https://img.php.cn//upload/image/815/993/962/1534605440289655.png");
background-size: 25px;
background-repeat: no-repeat;
background-position-x: 20px;
background-position-y: center;/*设置图片Y轴垂直居中*/
padding-left: 50px;
}
.right_bottom p:nth-child(3) img {
width: 19px;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<ul>
<li><img src="https://img.php.cn/upload/course/000/069/489/5a580ffc4b2f7668.jpg" alt="php实战"></li>
<li><a>PHP实战天龙八部之仿爱奇艺电影网站</a></li>
</ul>
</div>
<div class="right">
<div class="title">
<h1>PHP实战天龙八部之仿爱奇艺电影网站</h1>
<p>本课程是php实战开发课程，以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程</p>
</div>
<div class="right_bottom">
<p>中级</p>
<p><img src="https://img.php.cn//upload/image/101/899/893/1534605449976794.png" alt=""><span>共49章节</span> | <img src="https://img.php.cn//upload/image/452/350/506/1534605447549804.png" alt=""> <span>92466次播放</span> | <span>添加时间:2018-01-11 17:32</span></p>
<p><span>继续学习 | ☆</span><span>课件下载</span><span>QQ交流群</span></p>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
