效果如图
<!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;
}效果图
Correction status：qualified
Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
