做一个网站首页

效果如图 3L(2($)[H`9A)55}~O8_7AK.png

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>斯蒂芬。库里</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 公共头部 -->
<div>
<div>
<div>
<p>欢迎欣赏斯蒂芬.库里的超神秀~</p>
<p>沃德爾·斯蒂芬·库里二世</p>
</div>
</div>


<div>
<div><img src="images/k14.jpg"></div>
<div><input type="text" name="name" placeholder="输入关键字">
            <button>搜索</button></div>

</div>
</div>

<!-- 公共导航 -->
<div>
<div>
<ul>
<li><a href="">网站首页</a></li>
<li><a href="">库里简介</a></li>
<li><a href="">最新资讯</a></li>
<li><a href="">NBA热点</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>


<div>
<img src="images/k22.jpg" alt="图片">
<div></div>
</div>


<div>
<div>
<div><img src="images/k17.jpg">
</div>
</div>

<div>

<ul>
<h1>最新<img src="images/k2.png">资讯</h1>
<li><a href=""><img src="images/k13.jpg">28日NBA直播步行者VS勇士 格林复出库克顶替库里大战奥拉迪波</a></li>
<li><a href=""><img src="images/k12.jpg">勇士主场91：110不敌爵士队 库里缺阵米切尔21分三分创纪录</a></li>
<li><a href=""><img src="images/k11.jpg">勇士vs爵士视频直播 库里无缘首轮米切尔欲率队取胜止颓势</p></li>
<li><a href=""><img src="images/k5.jpg">24日NBA视频直播老鹰VS勇士 库里单核复出携手库克大战施罗德</a></li>


</ul>
</div>
<div>
<ul>
<h1><img src="images/k15.jpg">热门周边</h1>
<li><a href=""><img src="images/l1.jpg"></a><a href="">库里战靴</a></li>
<li><a href=""><img src="images/l2.jpg"></a><a href="">库里签名T恤</a></li>
<li><a href=""><img src="images/l3.jpg"></a><a href="">勇士球员手办</a></li>
<br>
<li><a href=""><img src="images/l4.jpg"></a><a href="">库里个人书籍</a></li>
<li><a href=""><img src="images/l5.jpg"></a><a href="">库里水墨风水杯</a></li>
<li><a href=""><img src="images/l6.jpg"></a><a href="">库里钥匙链</a></li>
</ul></div>
</div>

<div>
<h2>斯蒂芬·库里</h2>
<p>名人堂球星等各界普遍认定他是“现役最强射手”</p>
</div>


<div></div>
<hr>

<div>
<img src="images/k16.jpg">
<div>
<h2>关于库里</h2>
<p>库里的投篮技术被各界认可，他的投篮射程非常广，出手快速且命中率高，擅长摆脱防守进行投篮，为“小球”战术开创了先河，并创下很多有关三分球的纪录，包括名人堂球星等各界普遍认定他是“现役最强射手”。</p>
<button>了解更多</button>
</div>
</div>
<hr>







<!-- 底部 -->

          <div>
<div>
<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>
<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>
<p>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图</p>
</div>
</div>

</body>
</html>

/*主页css*/
.banner img {
	width: 100%;
	height: 452px;
	vertical-align: top;
	/*清楚图片底部空白*/
}
/*用来左图片下面灰色条*/
.banner .line {
	height: 30px;
	background-color: #696969;
	opacity: 0.4;
	/*透明度*/
	margin-top: -30px;
}



.one{
	width: 1200px;
	min-height: 310px;
	margin: auto;
	overflow: hidden;

       
}
.father{
	width: 100%;
	float: left;
}
.main{
	min-height: 310px;
	margin: 0 350px;
    text-align: center;
}
.main img{
	width: 100%;
	height: 310px;
    line-height: 1px;
}
.left{
	width: 350px;
	min-height: 310px;
	float: left;
	text-align: center;
	margin-left: -1200px;
}


.left ul{
	border:2px solid black;
	width: 100%
	

}
.left ul h1 img{
	width: 30px;
	height: 30px;
	margin-top: 3px;
}
.left ul li{
	border:1px solid black;
	width: 100%;
	
	text-align: center;
	line-height: 32px;
	overflow: hidden;
}

.left ul li img{
	height: 64px;
	width: 100px;
    float: left;
}

.right{
	width: 350px;
	min-height: 310px;
	float: left;
	text-align: center;
	margin-left: -350px;
}
.right ul{
border:2px solid black;
	width: 100%
	min-height:100%;
	overflow: hidden;
}
.right ul li{
	width: 171px;
	height: 85px;
	border: 1px solid black;
	
	float: left;
}


.right ul h1 img{
	width: 30px;
	height: 30px;
	margin-top: 5px;

}
.right ul li img{
	width: 150px;
	height: 60px;

	margin: 4px auto;
	display: block;
}
.title{
	text-align: center;
	background-image: url(../images/b0.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}


.ads{
	width: 100%;
	height:300px;
	background-image: url(../images/k20.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	margin-bottom: 30px;

}
.people{
	width: 1200px;
	margin: auto;
	overflow: hidden;
	
}

.people img{
	
	width: 200px;
	height: 120px;
	margin-right:40px;
	float: left; 
}
.people .text{
	overflow: hidden;
}
.people .text p{
	line-height: 2em;
}
.people .text button{
	width: 130px;
	height: 34px;
	border: none;
	background-color:blue;
	color: #fff;
	float: right;
}
.people .text button:hover {
	background-color: #da70d6;
	cursor: pointer;
}

/*通用样式*/
.header{
	width: 100%;
height: 190px;

}
.header .tape{
	height: 28px;
	border-top-bottom:1px solid #f5f5f5;
	background-color: #00BFFF;
}
.info{
	margin:auto;
	width: 1200px;
	overflow: hidden;
	/*可以使子块设置浮动后，仍然被父块包裹*/
}
.header .tape .info .left1{
     float: left;
}
.header .tape .info .right1{
     float:right;
}

.header .info .logo{
	width: 700px;
	height: 120px;
	float: left;
}
.header .info .logo img{
	vertical-align: middle;
}
.header .info .search{
	float: right;
	height: 120px;
	margin-top: 40px;
	margin-right: 100px;
}
.header .info .search input{
	width: 210px;
	height: 30px;
	border:2px solid blue;
	margin:20px 0;
}
.header .info .search button{
	width: 45px;
	height: 35px;
	background-color: blue;
	border:none;
	color: white;
	margin-left: -45px;
}
/*导航*/
.menu {
	width: 100%;
	height: 50px;
	background-color: blue;
	margin-top: -2px;
}
.this{
	margin:auto;
	width: 1200px;
	overflow: hidden;
}

.menu ul li {
	float: left;
	line-height: 50px;
	padding: 0 40px;
}
.menu ul li a {
	font-size: 1.1em;
	color: #fff;
}

.menu ul li:hover {
	background-color:#FFB6C1;
	cursor: pointer;
}





.footer{
	width: 100%;
}
.footer .top {
	height: 40px;
	background-color: #3e3e3e;
}

.footer .top ul {
	width: 1200px;
	text-align: center;
	margin:auto;
	overflow: hidden;

}

.footer .top li {
	float:left;
	text-align: center;
}
.footer .top li a {
	height: 100%;
	padding: 0 20px;
	color:#fff;
	text-align: center;
	line-height: 40px;
}

.footer .bottom {
	width: 100%;
	height: 92px;
	background-color: black;
	text-align: center;

}
.footer .bottom p {
	color: #fff;
	line-height: 92px;
}

/*通用样式*/
.header{
	width: 100%;
height: 190px;

}
.header .tape{
	height: 28px;
	border-top-bottom:1px solid #f5f5f5;
	background-color: #00BFFF;
}
.info{
	margin:auto;
	width: 1200px;
	overflow: hidden;
	/*可以使子块设置浮动后，仍然被父块包裹*/
}
.header .tape .info .left1{
     float: left;
}
.header .tape .info .right1{
     float:right;
}

.header .info .logo{
	width: 700px;
	height: 120px;
	float: left;
}
.header .info .logo img{
	vertical-align: middle;
}
.header .info .search{
	float: right;
	height: 120px;
	margin-top: 40px;
	margin-right: 100px;
}
.header .info .search input{
	width: 210px;
	height: 30px;
	border:2px solid blue;
	margin:20px 0;
}
.header .info .search button{
	width: 45px;
	height: 35px;
	background-color: blue;
	border:none;
	color: white;
	margin-left: -45px;
}
/*导航*/
.menu {
	width: 100%;
	height: 50px;
	background-color: blue;
	margin-top: -2px;
}
.this{
	margin:auto;
	width: 1200px;
	overflow: hidden;
}

.menu ul li {
	float: left;
	line-height: 50px;
	padding: 0 40px;
}
.menu ul li a {
	font-size: 1.1em;
	color: #fff;
}

.menu ul li:hover {
	background-color:#FFB6C1;
	cursor: pointer;
}





.footer{
	width: 100%;
}
.footer .top {
	height: 40px;
	background-color: #3e3e3e;
}

.footer .top ul {
	width: 1200px;
	text-align: center;
	margin:auto;
	overflow: hidden;

}

.footer .top li {
	float:left;
	text-align: center;
}
.footer .top li a {
	height: 100%;
	padding: 0 20px;
	color:#fff;
	text-align: center;
	line-height: 40px;
}

.footer .bottom {
	width: 100%;
	height: 92px;
	background-color: black;
	text-align: center;

}
.footer .bottom p {
	color: #fff;
	line-height: 92px;
}

效果图 3L(2($)[H`9A)55}~O8_7AK.png

相关文章