Web实现：微博头部开发实例

最新推荐文章于 2024-07-04 00:59:27 发布

jasmyn518

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量360

点赞数 1

分类专栏：笔记 HTML CSS 文章标签：前端 css css3

本文链接：https://blog.csdn.net/jasmyn518/article/details/122891113

版权

笔记同时被 3 个专栏收录

127 篇文章 4 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

HTML部分代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>微博实战--head</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="outer-tile">
        <header class="clearFix">
            <div class="left">
                <div class="img"></div>
                <div class="input-box">
                    <input type="text" placeholder="大家正在搜：中国队开赛三天已超上届金牌总数">
                    <span class="search"></span>
                </div>
            </div>
            <div class="right">
                <ul class="nav clearFix">
                    <li>
                        <span class="first-page"></span>
                        首页
                    </li>
                    <li>
                        <span class="video"></span>
                        视频
                    </li>
                    <li>
                        <span class="find"></span>
                        发现
                    </li>
                    <li>
                        <span class="game"></span>
                        游戏
                    </li>
                </ul>
                <ul class="regist-login">
                    <li>注册</li>
                    <li>|</li>
                    <li>登录</li>
                </ul>
            </div>
        </header>
    </div>
</body>

</html>

CSS部分代码：

* {
    margin: 0px;
    padding: 0px;
}

ul {
    list-style: none;
}

.clearFix::after {
    display: block;
    content: '';
    clear: both;
}

.outer-tile {
    width: 1440px;
    background: #ffffff;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3);
}

header {
    box-sizing: border-box;
    width: 1225px;
    height: 50px;
    margin: 0 auto;
}

.left {
    float: left;
}

.left>div {
    float: left;
}

.left .img {
    width: 80px;
    height: 50px;
    background: url(./images/weibo-header.png) no-repeat center;
    background-size: contain;
}

.left .input-box {
    position: relative;
    width: 470px;
    height: 30px;
    margin-top: 11px;
    margin-left: 30px;
    border: 1px solid #CCCCCC;
    box-sizing: border-box;
    background-color: #F2F2F2;

}

.left .input-box input {
    box-sizing: border-box;
    width: 100%;
    height: 28px;
    border: none;
    background-color: transparent;
    font-size: 12px;
    color: #808080;
    padding-left: 10px;
    padding-right: 35px;
    line-height: 29px;
    outline: 0;
}

.left .input-box span {
    position: absolute;
    width: 16px;
    height: 28px;
    line-height: 28px;
    top: 0px;
    right: 15px;
    background: url(./images/search.png) no-repeat center;
    background-size: contain;
}

.right {
    float: right;
    line-height: 50px;
}

.right ul {
    float: left;
}

.right .nav {
    margin-right: 30px;
}

.right .nav li {
    position: relative;
    float: left;
    margin-right: 15px;
    font-size: 12px;
    line-height: 50px;
    padding-left: 22px;
}

.right .nav li:last-child {
    margin-right: 0px;
}

.right .nav span {
    position: absolute;
    top: 16px;
    left: 0px;
    width: 17px;
    height: 17px;
}

.right .nav .first-page {
    background: url(./images/first-page.png) no-repeat center;
    background-size: contain;
}

.right .nav .video {
    background: url(./images/video.png) no-repeat center;
    background-size: contain;
}

.right .nav .find {
    background: url(./images/find.png) no-repeat center;
    background-size: contain;
}

.right .nav .game {
    background: url(./images/game.png) no-repeat center;
    background-size: contain;
}

.right .regist-login li {
    float: left;
    font-size: 12px;
}

.right .regist-login li:nth-child(2) {
    margin: 0 10px;
    color: #D9D9D9;
}

jasmyn518

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web实现：微博头部开发实例

HTML部分代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>微博实战--head</title> <link rel="stylesheet" href="index.css"></head><body> <div class="outer-tile"&gt
复制链接

扫一扫