网站首页实例 9.05 - 前端

自己完成很不***。上面的banner图片有点大，然后是图片下面的图片名称和按钮没有办法放在一行，网页无法缩放，文字会缩放，但是banner图片还是一样大（ctrl+滑轮缩放）

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="static/css/index1.css">
	<title>实例演示</title>
</head>
<body>
<div>
	<!-- 头部 -->
	<div class="header">
		<div class="content">
			<ul class="nav">
				<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 class="banner"><img src="static/image/timg.jpg" alt="banner"></div>
	<!-- 主体 -->
	<div class="container">
		<!-- 主体 -->
		<div class="main">
			<div class="item">
				<img src="static/image/2019-03-19.jpg" alt="">
				图片名称：bing2019-03-19<button>download</button>
			</div>
			<div class="item">
				<img src="static/image/2019-03-20.jpg" alt="">
				图片名称：bing2019-03-20<button>download</button>
			</div>
			<div class="item">
				<img src="static/image/2019-03-21.jpg" alt="">
				图片名称：bing2019-03-21<button>download</button>
			</div>
			<div class="item">
				<img src="static/image/2019-03-22.jpg" alt="">
				图片名称：bing2019-03-22<button>download</button>
			</div>
			<div class="item">
				<img src="static/image/2019-03-23.jpg" alt="">
				图片名称：bing2019-03-23<button>download</button>
			</div>
			<div class="item">
				<img src="static/image/2019-03-24.jpg" alt="">
				图片名称：bing2019-03-24<button>download</button>
			</div>
			<div class="item">
				<img src="static/image/2019-03-25.jpg" alt="">
				图片名称：bing2019-03-25<button>download</button>
			</div>
			<div class="item">
				<img src="static/image/2019-03-26.jpg" alt="">
				图片名称：bing2019-03-26<button>download</button>
			</div>
			<div class="item">
				<img src="static/image/2019-03-27.jpg" alt="">
				图片名称：bing2019-03-27<button>download</button>
			</div>
			<div class="item">
				<img src="static/image/2019-03-28.jpg" alt="">
				图片名称：bing2019-03-28<button>download</button>
			</div>
			<div class="item">
				<img src="static/image/2019-03-29.jpg" alt="">
				图片名称：bing2019-03-29<button>download</button>
			</div>
			<div class="item">
				<img src="static/image/2019-03-30.jpg" alt="">
				图片名称：bing2019-03-30<button>download</button>
			</div>
			<div class="item">
				<img src="static/image/2019-03-31.jpg" alt="">
				图片名称：bing2019-03-31<button>download</button>
			</div>
			<div class="item">
				<img src="static/image/2019-04-01.jpg" alt="">
				图片名称：bing2019-04-01<button>download</button>
			</div>
			<div class="item">
				<img src="static/image/2019-04-02.jpg" alt="">
				图片名称：bing2019-04-02<button>download</button>
			</div>
		</div>
		<!-- 左侧 -->
		<div class="left">
			<h1>图片分类</h1>
			<ul>
				<li><a href="">风景图片</a></li>
				<li><a href="">美女图片</a></li>
				<li><a href="">动漫图片</a></li>
				<li><a href="">游戏图片</a></li>
				<li><a href="">明星图片</a></li>
				<li><a href="">萌宠图片</a></li>
				<li><a href="">萌娃图片</a></li>
				<li><a href="">电影图片</a></li>
				<li><a href="">海报图片</a></li>
				<li><a href="">美食图片</a></li>
			</ul>
		</div>
		<!-- 右侧 -->
		<div class="right">
			<h1>热门排行</h1>
			<ul>
				<li>2019-03-26</li>
				<li>2019-03-25</li>
				<li>2019-03-24</li>
				<li>2019-03-19</li>
				<li>2019-03-19</li>
				<li>2019-03-19</li>
				<li>2019-03-19</li>
				<li>2019-03-19</li>
				<li>2019-03-19</li>
				<li>2019-03-19</li>
			</ul>
		</div>
	</div>
	<!-- 底部 -->
	<div class="footer">
		<div class="content">
			<p>
				<a href="">©php中文网</a>  |  
				<a href="">0377 - 12345678</a>  |  
				<a href="">沪ICP备1231231231231</a>
			</p>
		</div>
	</div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

body , h1 , p , img{
	margin: 0;
}

/*头部样式*/
.header {
	/* background-color: lightgray; */
	background-color: black;
}

.header .content{
	width: 90%;
	height: 60px;
	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{
	color: white;
	float: left;
	min-width: 80px;
	min-height: 60px;

	/*文本水平对齐*/
	text-align: center;
	/*文本垂直居中*/
	line-height: 60px;

	padding: 0 15px;

	/*去掉下划线*/
	text-decoration: none;
}


.header .content .nav .item a:hover {
	background-color: red;
	font-size: 1.1rem;
}

.banner {
	width: 90%;
	margin: 0 auto;
}
.banner img{
	width: 100%;
}

/*底部样式*/
.footer {
	/* background-color: lightgray; */
	background-color: #444;
}

.footer .content {
	width: 90%;
	background-color: #444;
	height: 60px;
	margin: 0 auto;
}

.footer .content p{
	line-height: 60px;
	text-align: center;
}

.footer .content p a{
	color: #999;
	text-decoration: none;
}

.footer .content p a:hover {
	color: white;
}

.container {
	width: 90%;
	min-height: 600px;

	margin: 5px auto;
	overflow: hidden;
}

.left{
	width: 150px;
	min-height: 600px;
	background-color: lightslategray;
	float: left;
	margin-left: -100%;
	padding: 10px;

	box-sizing: border-box;
}
.left h1 {
	font-size: 1.2em;
	border-bottom: #444 1px solid;
}
.left ul , .right ul{
	margin-top: 20px;
	padding: 0;

}
.left ul li , .right ul li{
	list-style: none;
	padding: 10px 20px;
}
.left ul li a{
	text-decoration: none;
	color: #221818;
}

.right{
	width: 150px;
	min-height: 600px;
	background-color: lightslategray;

	float: left;

	margin-left: -150px;
	box-sizing: border-box;
	padding: 10px;
}
.right h1 {
	font-size: 1.2em;
	border-bottom: #444 1px solid;
}

.main {
	min-height: 600px;

	padding-left: 150px;
	padding-right: 150px;

	width: 100%;
	/* background-color: lightcoral; */

	float: left;

	/*设置盒子大小计算方式，默认大小由内容决定*/
	box-sizing: border-box;
	overflow: hidden;
}
.main .item{
	width: 33.33%;
	float: left;
	background-color: lightslategray;
}
.main .item img{
	width: 100%;
	margin: 3px;
}
.main .item button{
	float: right;
	background-color: lightslategray;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

ps. 还是得回头再了解以下浮动，感觉这个写的嵌套还是css哪里有点问题

Correction status：qualified

Teacher's comments：布局还看得下去, 通过这个案例,相信你对一些商业网站的布局有了自己的理解