圖片：
運行結(jié)果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/parter5.css" />
<title></title>
</head>
<body>
<div class="demo">
<div class="top">
<p class="p1">熱門筆記本</p>
<ul class="right">
<li>超極本</li>
<li>觸控本</li>
<li>游戲本</li>
</ul>
<div class="bottom">
<ul>
<li><i class="number1">1</i><p class="px">聯(lián)想YOGA A12</p><p class="p3">￥2299</p></li>
<li><i class="number2">2</i><p class="px">聯(lián)想小新Air 13 pro</p><p class="p3">￥5499</p></li>
<li><i class="number2">3</i><p class="px">三星8500 GM-X08</p><p class="p3">￥6399</p></li>
<li><i class="number3">4</i><p class="px">鴻基Swift 7</p><p class="p3">￥9999</p></li>
<li><i class="number3">5</i><p class="px">鴻基VX5-591G-58AX</p><p class="p3">￥5999</p></li>
<li><i class="number3">6</i><p class="px">戴爾 燃7000 14(i5-7200U/4G/128G+500)</p><p class="p3">￥5599</p></li>
<li><i class="number3">7</i><p class="px">聯(lián)想Miix5(i5/8G/256G)</p><p class="p3">￥5499</p></li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS：
* {
padding: 0;
margin: 0;
}
.demo {
width: 335px;
height: 278px;
margin: 200px auto;
/*background: salmon;*/
}
.top {
width: 100%;
height: 42px;
/*background: aqua;*/
border-bottom: 1px solid #e5e5e5;
float: left;
}
.p1 {
font-family: "微軟雅黑";
font-size: 19px;
line-height: 19px;
height: 19px;
margin-top: 12px;
margin-left: 11px;
color: #0077dd;
float: left;
font-weight: 600;
}
.right {
float: right;
}
.right>li {
list-style: none;
float: left;
font-family: "微軟雅黑";
font-size: 12px;
height: 12px;
line-height: 12px;
color: #999999;
margin-top: 19px;
margin-right: 12px;
cursor: pointer;
margin-bottom: 11px;
}
.right>li:last-child {
margin-right: 16px;
}
.bottom {
width: 335px;
height: 236px;
/*background: aquamarine;*/
float: left;
}
.bottom>ul {
margin-top: 21px;
}
.bottom>ul>li {
list-style: none;
line-height: 12px;
margin-bottom: 18px;
width: 100%;
height: 12px;
}
.number1 {
color: #ff3333;
float: left;
margin-left: 8px;
margin-right: 8px;
}
.number2 {
color: #ff9600;
float: left;
margin-left: 8px;
margin-right: 8px;
}
.number3 {
color: #999999;
float: left;
margin-left: 8px;
margin-right: 8px;
}
.px {
float: left;
height: 12px;
font-size: 12px;
color: #333333;
}
.p3 {
float: right;
height: 9px;
font-size: 9px;
color: #999999;
}
