第八天了，做一个静态页面
作者：互联网
昨天没有怎么学新知识，想着做一个静态页面把之前学的东西串连一下，复习一下。就找到了天空之城这个首页，感觉页面不算难，下面这个是我截得一部分。
这个页面做的大致分header、banner、body三部分，因为下面还有一些内容没有做，就没有footer部分，header是最上面的部分，又分为最左边的logo图片、中间的导航栏nav、最右边的搜索以及登录注册。
做之前首先要把图片素材准备好，包含logo图、中间的大图部分、下面的小图。都是在原网站下载下来的。首页右击按检查，点击左上方的箭头图标，就能把html代码和图片对应上。直接复制图片链接就好。
然后需要知道上面header部分最外面盒子的高度，因为宽度是整个浏览器窗口的宽度，就没有额外设置。最左边的logo部分需要用一个div盒子装起来，定义好宽和高，在img标签里面放图片链接，需要设置左浮动。然后中间部分也需要定义一个盒子，里面用无序标签将导航文字放进去。将无序标签样式设置成空，取消默认的实心圆，定义li标签的时候需要注意设置内边距，让导航栏内的文字有一定间隔，看起来比较美观，然后字体、大小这些都可以根据实际情况设置，也需要设置左浮动。因为导航栏文字第一个首页默认是白色字体，所以需要额外对第一个li标签的文字颜色进行设置。原导航栏文字在鼠标悬停的时候会变成白色，需要在css定义，用hover这个属性，设置鼠标悬停时文字的颜色。搜索我和原主页不一样，因为我不会！！！！原网页中是鼠标点击搜索放大镜的时候才会在左边出现一个搜索框，以我目前学到的知识还做不了。我只是定义了一个盒子，里面分左边的搜索框和右边的放大镜图标。左边的设置左浮动，图标在右边设置右浮动。高度设置成外面盒子的高度。登录和注册就是两个span标签。
<div class="header">
<div class="leftdiv">
<img src="//spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/logo-cn.00c32c62.svg" alt="logo">
</div>
<div class="centerdiv">
<ul>
<li class="active">首页</li>
<li>探索</li>
<li>标签</li>
<li>摄影师</li>
<li>签约摄影师招募</li>
<li>天空之城7周年航拍大赛
<img src="//spcn-webfront.skypixel.com/skypixel/v2/public/assets/images/hot-tag.36b40497.svg">
</li>
</ul>
</div>
<div class="login">
<span>登录</span>
<span>注册</span>
</div>
<div class="rightdiv">
<div class="search">
<input type="text" placeholder="搜索" class="searchleft">
<input type="submit" value="" class="searchright">
</div>
</div>
</div>{
margin: 0;
padding: 0;
}
.header{
height: 60px;
background-color: black;
}
.leftdiv{
width: 96.16px;
height: 18px;
margin-left: 40px;
padding: 21px 0px;
float: left;
}
.leftdiv img{
width: 96.16px;
height: 18px;
}
.login span{
color: white;
float: left;
color: #999999;
font-family:"方正美黑简体";
font-size: 16px;
line-height: 60px;
padding-right: 10px;
}
.login span:hover{
color: white;
}
.centerdiv{
width: 550.28px;
height: 60px;
margin-left: 150px;
padding: 0px 100px 0px 200px;
float: left;
}
.centerdiv ul li{
float: left;
list-style-type: none;
color: #999999;
font-family:"方正美黑简体";
font-weight: 900;
padding-right: 20px;
text-align: center;
line-height: 60px;
font-size: 14px;
}
.centerdiv .active{
color: white;
font-family:"方正美黑简体";
font-weight: 900;
}
.centerdiv li:hover{
color: white;
}
.rightdiv{
width: 300px;
height: 28px;
float: right;
padding: 16px 0px;
}
.search{
width: 200px;
height: 20px;
}
.search input{
border: 0;
outline: none;
}
.search .searchleft{
height: 20px;
border: 1px solid #999999;
outline: none;
float: left;
padding-left: 15.5px;
}
.search .searchright{
background-image: url(../img/search.png);
width: 20px;
height: 22px;
background-repeat: no-repeat;
background-position: left center;
background-color: white;
float: right;
}banner的部分比较简单，就是设置一张背景图，定义好宽和高以及外边距。
<div class="banner"></div>
.banner{
background-image: url(https://sp-webfront-cn.oss-cn-hangzhou.aliyuncs.com/skypixel/v2/public/website/assets/1634797952996-e8c565e6bdf95bb27618a26e0839a833.jpg);
width: 1200px;
height: 300px;
margin: 40px auto 0px;
background-position:center;
background-size:cover
}
最后一部分就是body部分，分为上面的标题和下面的图片。
上面的标题用一个盒子。里面设置p标签和span标签，定义文字的大小、粗细，用line-height将字体居中，因为左右两边各有一个标题，分别设置左浮动和右浮动。
下面的图片定义一个大盒子，img设置图片路径，p标签定义内容。设置图片的宽和高，设置图片的内边距，因为设置后最后一个图片会换行，最后一个不需要设置右内边距，需要单独将左内边距设置成0。
<div class="body">
<div class="box">
<p class="biaoti">热门航拍点</p>
<span><a>热门航拍点集锦</a></span>
</div>
<div class="item">
<img src="img/美国.jpg">
<p>美国</p>
</div>
<div class="item">
<img src="img/澳大利亚.jpg">
<p>澳大利亚</p>
</div>
<div class="item">
<img src="img/冰岛.jpg">
<p>冰岛</p>
</div>
<div class="item">
<img src="img/西藏.jpg">
<p>西藏</p>
</div>
<div class="item">
<img src="img/上海.jpg">
<p>上海</p>
</div>
<div class="item spec">
<img src="img/新疆.jpg">
<p>新疆</p>
</div>
</div>
.body{
width: 1200px;
height: 208px;
margin: 20px auto;
}
.body img{
width: 180px;
height: 120px;
}
.body .box{
width: 1200px;
height: 80px;
}
.body .biaoti{
font-size: 28px;
font-weight: 900;
line-height: 80px;
float: left;
}
.body .box span{
float: right;
text-align: center;
line-height: 80px;
color: #1890ff;
}
.body .item{
float: left;
padding-right:24px ;
}
.body .spec{
padding-right: 0px;
}最后的效果
原网站的大图是轮播的，我查了查需要用到js知识，目前还没办法实现，其他已经尽力还原了。
标签：font,第八天,静态,float,height,width,设置,left,页面 来源： https://blog.csdn.net/qq_41575188/article/details/123599766