第八天了，做一个静态页面

2022-03-19 19:03:02 阅读：198 来源： 互联网

标签：font 第八天静态 float height width 设置 left 页面

昨天没有怎么学新知识，想着做一个静态页面把之前学的东西串连一下，复习一下。就找到了天空之城这个首页，感觉页面不算难，下面这个是我截得一部分。

这个页面做的大致分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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

第八天了，做一个静态页面