其他分享
首页 > 其他分享> > 第八天了,做一个静态页面

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

作者:互联网

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

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