web开发-前端作业-做一个简单网页

一、设计思路与主题

设计思路：一直在跟pink老师学前端，有次表单练习是关于相亲网站的，于是突发奇想，打算把这个东西完善一下，再玩个谐音梗“珍禽网”——真情网~（顺便交个作业）主要元素灵感来自于微博@猛禽bot 老师的小鸟表情包，太太太可爱了！

网页主题：禽类相亲静态网页设计与实现（纯整活）

二、网页效果

如果感觉什么地方丑丑的或者莫名其妙……那一定是我为了完成作业强行整上去的……orz

 

 

 一些素材图（其实是想让大家看看鸟）：

三、代码实现

 因为是初学，代码比较乱，就放个顶部导航栏的所有代码吧，这个部分做得最久，供我以后抄抄（不是）

HTML：

<div class="shortcut">
        <div class="w">
            <div class="bob">
                <img src="image/pic0.png">
                <p>鲍 勃</p>
            </div>
            <div class="nav_links">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li></li>
                    <li><a href="珍禽网提交.html">投递</a></li>
                    <li></li>
                    <li><a href="#">个人</a></li>
                </ul>
            </div>
            <div class="search-box">
                <a href="" class="search-btn">
                    <img src="image/search.png" width="200px">
                </a>
                <a href="#"><img class="help" src="image/help.png" width="30px" height="30px"></a>
                <a href="#"><img class="set" src="image/set.png" width="30px" height="30px"></a>
            </div>
        </div>

    </div>

CSS：

/* 版心 */
.w {
    width: 1200px;
    margin: 0 auto;
    /*块级元素水平居中*/
    text-align: center;
    display: flex;
    justify-content: space-between;
}

body {
    height: 100%;
    width: 100%;
    background-color: #F5F0F8;
    font-family: 'Microsoft Yahei';
}

.shortcut {
    height: 60px;
    background-color: #CFC5D6;
    justify-content: space-between;
    align-items: center;
    padding: 10px, 10px;
    display: flex;
}

.nav_links {
    cursor: pointer;
    list-style: none;
    line-height: 60px;
    height: 60px;
    padding-top: 30px;
}

.nav_links li {
    display: inline-block;
    margin-top: 30px;
}

.nav_links li:nth-child(even) {
    width: 1px;
    height: 12px;
    background-color: #707070;
    margin: 10px 40px 0;
}

.nav_links li a {
    font-weight: 500;
    font-size: 20px;
    color: #707070;
    text-decoration: none;
    transition: all 0.3s ease 0s;/* 鼠标接触会有动画 */
}

.nav_links li a:hover {
    color: rgb(255, 255, 255);
}

.bob {
    width: 160px;
    height: 40px;
    line-height: 40px;
    display: flex;
    cursor: pointer;
    justify-content: flex-end;
    float: left;
    margin: 60px;
}

.bob p {
    margin-left: 10px;
}


.search-box {
    top: 20%;
    left: 20%;
    transform: translate(-20%, -50%);
    height: 30px;
    float: right;
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    padding-top: 100px;
    margin-top: 24px;
}

.set,
.help {
    margin-top: 6px;
    margin-left: 5px;
}

其实有用JS，但是感觉用得不咋好，就不放了。