实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--<link rel="stylesheet" href="style.css">-->
<style>
body {
margin: 0;
}
.header {
background-color: #000000;
}
.header .content {
height: 60px;
width: 90%;
/*background-color: black;*/
margin: 0 auto;
}
.header .content .nav {
margin: 0;
padding: 0;
}
.header .content .nav .item {
list-style: none;
}
.header .content .nav .item a {
min-width: 80px;
min-height: 60px;
text-decoration: none;
float: left;
/*font-size: 1.3rem;*/
color: white;
text-align: center;
line-height: 60px;
padding: 0 10px;
}
.header .content .nav .item a:hover {
background-color: red;
font-size: 1.3rem;
}
.slider {
width: 90%;
margin: 0 auto;
}
.slider img{
width: 100%;
}
.contain {
margin: 5px auto;
width: 90%;
/*background-color: lightblue;*/
overflow: hidden;
/*border: 1px solid red;*/
}
.main,.left,.right {
float: left;
}
.main {
box-sizing: border-box;
width: 100%;
min-height: 800px;
padding: 0 220px;
/*background-color: #008800;*/
}
.main .content .mitem {
list-style:none;
float: left;
}
.main .content .mitem a {
text-decoration: none;
}
.main .content .mitem ***g {
overflow: hidden;
}
.main .content .mitem img {
/*background-color: red;*/
width: 150px;
padding: 0 12px;
}
.main .content .mitem .info .pro{
margin: 10px 10px;
font-size: 1.2rem;
color: #555555;
}
.main .content .mitem .info .price{
margin: 10px 10px;
font-size: 1.2rem;
color: red;
}
.main .content .mitem .info .buy {
background-color: red;
padding: 3px 5px;
color: #fff;
}
.left {
width: 200px;
min-height: 800px;
margin-left: -100%;
/*background-color: #8affa7;*/
border: 2px solid #666;
}
.left .content h2 {
text-align: center;
color: #555;
}
.left .content .litem {
list-style: none;
padding: 5px 20px;
}
.left .content .litem a {
text-decoration: none;
}
.right {
width: 200px;
min-height: 800px;
margin-left: -204px;
/*background-color: #000088;*/
border: 2px solid #666;
}
.right .content h2 {
text-align: center;
color: #555;
}
.right .content table{
margin: 0 auto;
}
.right .content table tr td:nth-of-type(1) {
background-color: red;
/*padding: -2px 5px;*/
}
.right .content table tr td:nth-of-type(2) {
font-size: 1.1rem;
/*padding: 0 15px;*/
}
.footer {
height: 60px;
width: 90%;
background-color: #888;
margin: 0 auto;
}
.footer .content p{
text-align: center;
line-height: 60px;
}
.footer .content p a {
text-decoration: none;
}
.footer .content p a:hover {
font-size: 1.1rem;
color: red;
}
</style>
<title>模拟网站布局</title>
</head>
<body>
<div class="header">
<div class="content">
<div class="nav">
<ul>
<li class="item"><a href="">首页</a></li>
<li class="item"><a href="">公告</a></li>
<li class="item"><a href="">新闻</a></li>
<li class="item"><a href="">简介</a></li>
<li class="item"><a href="">我的</a></li>
</ul>
</div>
</div>
</div>
<div class="slider">
<img src="https://www.php.cn/static/images/index_banner9.jpg" alt="">
</div>
<div class="contain">
<div class="main">
<div class="content">
<ul>
<li class="mitem">
<a href="">
<div class="img">
<img src="https://img30.360buyimg.com/babel/s590x470_jfs/t1/65261/17/8654/94540/5d6895edE579ac183/7c48c6d5ea29d7f1.jpg.webp" alt="">
</div>
<div class="info">
<p class="pro">上好的月饼</p>
<p>
<span class="price"><b>￥1000</b></span>
<span class="buy">***</span>
</p>
<!--<p>***</p>-->
</div>
</a>
</li>
<li class="mitem">
<a href="">
<div class="img">
<img src="https://img30.360buyimg.com/babel/s590x470_jfs/t1/65261/17/8654/94540/5d6895edE579ac183/7c48c6d5ea29d7f1.jpg.webp" alt="">
</div>
<div class="info">
<p class="pro">上好的月饼</p>
<p>
<span class="price"><b>￥1000</b></span>
<span class="buy">***</span>
</p>
<!--<p>***</p>-->
</div>
</a>
</li>
<li class="mitem">
<a href="">
<div class="img">
<img src="https://img30.360buyimg.com/babel/s590x470_jfs/t1/65261/17/8654/94540/5d6895edE579ac183/7c48c6d5ea29d7f1.jpg.webp" alt="">
</div>
<div class="info">
<p class="pro">上好的月饼</p>
<p>
<span class="price"><b>￥1000</b></span>
<span class="buy">***</span>
</p>
<!--<p>***</p>-->
</div>
</a>
</li>
<li class="mitem">
<a href="">
<div class="img">
<img src="https://img30.360buyimg.com/babel/s590x470_jfs/t1/65261/17/8654/94540/5d6895edE579ac183/7c48c6d5ea29d7f1.jpg.webp" alt="">
</div>
<div class="info">
<p class="pro">上好的月饼</p>
<p>
<span class="price"><b>￥1000</b></span>
<span class="buy">***</span>
</p>
<!--<p>***</p>-->
</div>
</a>
</li>
<li class="mitem">
<a href="">
<div class="img">
<img src="https://img30.360buyimg.com/babel/s590x470_jfs/t1/65261/17/8654/94540/5d6895edE579ac183/7c48c6d5ea29d7f1.jpg.webp" alt="">
</div>
<div class="info">
<p class="pro">上好的月饼</p>
<p>
<span class="price"><b>￥1000</b></span>
<span class="buy">***</span>
</p>
<!--<p>***</p>-->
</div>
</a>
</li>
<li class="mitem">
<a href="">
<div class="img">
<img src="https://img30.360buyimg.com/babel/s590x470_jfs/t1/65261/17/8654/94540/5d6895edE579ac183/7c48c6d5ea29d7f1.jpg.webp" alt="">
</div>
<div class="info">
<p class="pro">上好的月饼</p>
<p>
<span class="price"><b>￥1000</b></span>
<span class="buy">***</span>
</p>
<!--<p>***</p>-->
</div>
</a>
</li>
<li class="mitem">
<a href="">
<div class="img">
<img src="https://img30.360buyimg.com/babel/s590x470_jfs/t1/65261/17/8654/94540/5d6895edE579ac183/7c48c6d5ea29d7f1.jpg.webp" alt="">
</div>
<div class="info">
<p class="pro">上好的月饼</p>
<p>
<span class="price"><b>￥1000</b></span>
<span class="buy">***</span>
</p>
<!--<p>***</p>-->
</div>
</a>
</li>
<li class="mitem">
<a href="">
<div class="img">
<img src="https://img30.360buyimg.com/babel/s590x470_jfs/t1/65261/17/8654/94540/5d6895edE579ac183/7c48c6d5ea29d7f1.jpg.webp" alt="">
</div>
<div class="info">
<p class="pro">上好的月饼</p>
<p>
<span class="price"><b>￥1000</b></span>
<span class="buy">***</span>
</p>
<!--<p>***</p>-->
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="left">
<div class="content">
<h2>商品列表</h2>
<ul>
<li class="litem"><a href="">铅笔</a></li>
<li class="litem"><a href="">橡皮</a></li>
<li class="litem"><a href="">小刀</a></li>
<li class="litem"><a href="">文具盒</a></li>
<li class="litem"><a href="">转笔刀</a></li>
<li class="litem"><a href="">碳素笔</a></li>
<li class="litem"><a href="">圆珠笔</a></li>
<li class="litem"><a href="">商品名称</a></li>
</ul>
</div>
</div>
<div class="right">
<div class="content">
<h2>销售排列</h2>
<table cellpadding="8 px">
<tbody>
<tr>
<td>1</td>
<td>铅笔</td>
<td>7</td>
</tr>
<tr>
<td>2</td>
<td>橡皮</td>
<td>6</td>
</tr>
<tr>
<td>3</td>
<td>小刀</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>文具盒</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>转笔刀</td>
<td>3</td>
</tr>
<tr>
<td>6</td>
<td>碳素笔</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="footer">
<div class="content">
<p>
<a href="">© 测试系统所有</a> |
<a href="">*************</a> |
<a href="">xxxxxxxxxxxxxx</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
