CSS+HTML实现掘金网首页

最新推荐文章于 2021-07-27 21:42:17 发布

努力的拾壹

最新推荐文章于 2021-07-27 21:42:17 发布

阅读量890

点赞数 1

本文链接：https://blog.csdn.net/weixin_45608986/article/details/119089512

版权

html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>掘金网</title>

    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 导入字体图标样式 -->
</head>

<body>

    <div class="header">

        <div class="header-top">
            <div class="header-nav">
                <div class="header-logo">
                    <a href="index.html">
                        <img  class="logotou" src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg" alt="掘金网" title="掘金网">
                    </a>

                </div>
                <nav class="header-nav-ul">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">沸点</a></li>
                        <li><a href="#">咨询</a></li>
                        <li><a href="#">小册</a></li>
                        <li><a href="#">活动</a></li>
                    </ul>

                </nav>

                <!-- 涛哥课下新增部分 -->
                <div class="header-right-ul">
                    <ul>
                        <li>

                            <div class="header-search">
                                <span class="header-search-input"><input type="text" name="" id="" placeholder="搜索掘金"></span>
                                <span class="header-search-icon">
                                    <!-- 字体图标引入方式  必须在head部分 通过Link 引入样式 和拷贝font-awesome 目录中的css和fonts -->
                                    <img src="../image/搜索.png" alt="">
                                    <i class="fa fa-search" aria-hidden="true"></i>  
                                </span>


                            </div>


                        </li>
                        <li>
                            <span class="header-author-center"><a href="#">创作者中心</a></span>

                        </li>
                        <li>
                            <span class="header-add-button">
                             <button type="button">写文章</button>
                             <select class="hot">
                                <option>
                                    <img src="../image/下拉.png" alt="">
                                </option>
                                <option>发布热点</option>
                            </select>
                            </span>
                            <span class="header-login-button">
                                <button type="button">登陆</button>
                                </span>
                        </li>
                            

                        
                    </ul>

                </div>

                <!--涛哥课下 新增部分结束 -->

            </div>



        </div>

        <!-- 头部中的底部文章分类导航开始-->
        <div class="header-bottom">
            <div class="header-bottom-nav">
                <nav class="header-bottom-nav-ul">
                    <ul>
                        <li><a href="#" class="a-active">推荐</a></li>
                        <li><a href="#">后端</a></li>
                        <li><a href="#">前端</a></li>
                        <li><a href="#">IOS </I></a></li>
                        <li><a href="#">Andorid</a></li>
                        <li><a href="#">人工智能</a></li>
                        <li><a href="#">代码人生</a>
                            <ul>
                                <li>二级栏目</li>
                                <li>二级栏目</li>
                                <li>二级栏目</li>
                                <li>二级栏目</li>
                                <li>二级栏目</li>
                                <li>二级栏目</li>
                                <li>二级栏目</li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">
                                <h6 style="font-weight: normal;">阅读</h6>
                                <!--     <ol>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>
                                        <li></li>

                                </ol>
                            -->

                            </a>
                        </li>
                    </ul>

                </nav>


            </div>



        </div>

    </div>
    <!-- <div>内容</div> -->
    <!-- <div class="container-top">

    </div> -->
    <div class="body">
        <div class="container-left">
            <div class="container-left-top">
                <ul>
                    <li>
                        <a href="#" class="a-active">热门 </a>
                        <a class="shu">|</a>
                        <a href="#" >最新</a>
                        <a class="shu">|</a>
                        <a href="#" >热榜 </a>
                    </li>
                </ul>
            </div>
            <div class="container-left-middle">
                <div class="container-left-middle-1">
                    <ul>
                        <li>稀土君</li>
                        <li>15天前</li>
                    </ul>
                    <div class="div1">
                        <br>
                        <span><h3>稀土开发者大会出品人集结完毕，5折购票火热进行中！</h3></span>
                        <div class="span">
                            <span>2021年9月10-11日，由稀土掘金开发者社区主办的首届 稀土开发者大会 将于北京盛大开幕。目前 14 大热门技术专题出品人全部集结完毕，来自各大互联网科技大厂的明星讲师正持续上线，5折购票火热进行中！</span>
                        </div>
                        <div>
                            
                        </div>
                        <img  class="img1" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3923e2491a964ae8aa06092f3ac9e547~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:360:240.awebp" alt="">
                    </div>
                </div>
                <div class="container-left-middle-1">
                    <ul>
                        <li>子怡</li>
                        <li>3天前</li>
                        <li>前端·面试</li>
                    </ul>
                    <div>
                        <br>
                        
                        <span><h3>稀土开发者大会出品人集结完毕，5折购票火热进行中！</h3></span>
                        <div class="span">
                            <span>最近用团队的账号发了一篇文章专有钉钉前端面试指南，初衷是希望给大家传递一些可能没有接触过的知识，其中某些知识可能也超出了前端的范畴，本质是希望给大家提供一些扫盲的思路。但是文章的评论使我意识到大家对于这个文章的抵触心情非常大。</span>
                        </div>
                    </div>
                </div>
                <div class="container-left-middle-1">
                    <ul>
                        <li>一只不守规矩的猫</li>
                        <li>1天前</li>
                        <li>前端·Node.js</li>
                    </ul>
                    <div>
                        <br>
                        
                        <span><h3>Node实现微信机器人，最新可用。实现个人微信收款指南！</h3></span>
                        <div class="span">
                            <span>所以你们还觉得前端不需要学docker吗？需要的可以去翻本喵的docker极速入门文章，作为一个开发者，你可以使用 Wechaty 轻松地建立你的机器人</span>
                        </div>
                    </div>
                </div>
                <div class="container-left-middle-1">
                    <ul>
                        <li>字节前端</li>
                        <li>1天前</li>
                    </ul>
                    <div>
                        <br>
                        
                        <span><h3>第一届字节青春-走进前端</h3></span>
                        <div class="span">
                            <span>由于文章字数限制，很多题目无法详尽和深入回答(纯粹是懒，就是想一晚上赶出来文章，嘿!)，本人也只是简略写一下，而且非标准答案，比如问浏览器URL请求流程，那至少能跟面试官扯几个小时</span>
                        </div>
                    </div>
                </div>
                <div class="container-left-middle-1">
                    <ul>
                        <li>白杨</li>
                        <li>1天前</li>
                        <li>Java</li>
                    </ul>
                    <div>
                        <br>
                        
                        <span><h3>深入理解JVM虚拟机，终结操作！</h3></span>
                        <div class="span">
                            <span>虽迟但到，今天就来继续给大家更Stream第二部分知识——终结操作，由于这部分的API内容繁多且复杂，所以我单开一篇给大家细细讲讲，我的文章很长，请大家忍耐一下。</span>
                        </div>
                    </div>
                </div>
                <div class="container-left-middle-1">
                    <ul>
                        <li>悠悠球</li>
                        <li>2天前</li>
                    </ul>
                    <div>
                        <br>
                        
                        <span><h3>钉钉前端面试指南</h3></span>
                        <div class="span">
                            <span>本文主要给大家带来组内一面面试官子弈的面试题，用于给大家进行前端知识扫盲，希望对正在求职的同学以及正在准备秋招的应届生有所帮助。如果你真的想要了解更多的详细信息，可以询问子弈。</span>
                        </div>
                    </div>
                </div>
                
                
    
            </div>
        </div>
    
        <div class="container-right">
            <div class="container-right-1">
                <ul>
                    <li>
                        <img src="../image/签到.png" alt="">
                    </li>
                    <li class="nihao">你好！</li>
                    <li class="qiandao">
                        <button class="quiandao" type="button"><a href="#">去签到</a></button>
                    </li>
                </ul>
                <div class="continue">
                    <span class="zitichuxi">连续签到赢掘金惊喜好礼</span>
                </div>
                
            </div>
            <div class="container-right-2">
                <p>掘金 - juejin.cn</p>
                <div>一个帮助开发者成长的社区</div>
                <div class="phone">
                    <select name="quyu" id="quyu">
                        <option>+86</option>
                        <option>+853</option>
                        <option>+886</option>
                        <option>+852</option>
                        <option>+869</option>
                    </select>
                    <input type="text" name="dianhua" id="dianhua" placeholder="请输入手机号">
                </div>
                <div class="yanzhengma">
                    <input type="text" name="" id="" placeholder="验证码">
                    <a href="#">获取验证码</a>
                </div>
                <span class="login">
                    <button>立即登录</button>
                </span>
                <div class="register">
                    <span>注册登录提示</span>
                    <br>
                    <span>同意 <a href="#">用户协议</a>、 <a href="#">隐私政策</a> </span>
                </div>
                
            </div>
    
            <div class="container-right-3">

                <img class="erweima" src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/home.e8f8c43.png" alt="">
                <!-- <div class="grow">
                    <div>下载掘金客户端</div>
                    <div class="grow-up">一个帮助开发者成长的社区</div>
                </div> -->
                <span>下载掘金客户端</span>
                <span>一个帮助开发者成长的社区</span>
                
            </div>

            <div class="container-right-4">
                <img class="container-right-4-img" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f5d6aa2110d45e395f2aee99fe67adf~tplv-k3u1fbpfcp-watermark.image" alt="">
            </div>

            <div class="container-right-5">
                <img class="container-right-5-img" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/794d5bb2bc6f4eadab94f8854db3d118~tplv-k3u1fbpfcp-watermark.image" alt="">
            </div>

        </div>
    </div>
    
</body>

</html>

css

/* 基础样式 */

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: '微软雅黑', Courier, monospace;
    font-size: 15px;
    background-color: #f4f5f5;
}

ul,
ol {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.header {
    width: 100%;
    height: 105px;
    
    background-color: white;
}

.header-top {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid gainsboro;
}

.header-bottom {
    width: 100%;
    height: 45px;
}

.header-nav {
    width: 1000px;
    margin: 0 auto;
    height: 100%;
}

/* .header-logo {
    float: left;

} */

.logotou{
    position: fixed;
    height: 60px;
    width: 60px;
}

.header-nav-ul {
    float: left;
    margin-left: 40px;
}

.header-nav-ul ul li {
    float: left;
    width: 60px;
    line-height: 60px;
    height: 60px;
    /* margin-left: 10px; */
}

.header-nav-ul ul li:nth-child(1){
    margin-left: 60px;
}

.header-nav-ul ul li a {
    color: black;
}

.header-nav-ul ul li a:hover {
    color: blue;
    /*background-color: cornflowerblue;
    color: white;*/
}

.header-bottom-nav {
    margin: 0 auto;
    width: 1000px;
    height: 100%;
}

.header-bottom-nav-ul>ul>li {
    width: 80px;
    float: left;
    font-size: 0.9rem;
    line-height: 45px;
    height: 45px;
}

.header-bottom-nav-ul>ul>li a {
    color: black;
}

.header-bottom-nav-ul>ul>li a:hover {
    color: blue;
}

.a-active {
    color: blue !important;
}


/*涛哥课下新增CSS*/

.header-right-ul {
    /*确定不了总宽度，可以设置最小宽度*/
    min-width: 500px;
    height: 60px;
    /* float: right; */
}

.header-right-ul li {
    float: left;
    height: 60px;
    /*  通过设置行高让li的元素垂直居中 */
    line-height: 60px;
    /*最小宽度*/
    min-width: 100px;
    padding-left: 20px;
}

.header-add-button button {
    background-color: white;
    width: 100px;
    height: 32px;
    color: white;
    font-size: 1rem;
    border: 1px solid #1e80ff;
    background-color: #1e80ff;
}

.hot{
    width: 22px;
    height: 32px;
    line-height: 32px;
    margin-left: -10px;
    border-left-color: whitesmoke;
    background-color: #1e80ff;

}

.header-login-button button {
    background-color: white;
    width: 80px;
    height: 32px;
    color: #1e80ff;
    font-size: 1rem;
    border: 1px solid #1e80ff;margin-left: 20px;
}

.header-author-center a {
    color: #1e80ff;
    background-color: #e8f3ff;
    width: 100px;
    height: 32px;
    /*把a标签转换成 内联块状  否则无法设置高度和宽度*/
    display: inline-block;
    /*设置下行高 让a 居中*/
    line-height: 32px;
    /*文本水平居中*/
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
}

.header-search-input {
    width: 150px;
    height: 32px;
    display: inline-block;
    line-height: 32px;
    
}

.header-search-input input {
    width: 150px;
    height: 32px;
    /*选中边框加粗效果去掉*/
    outline: none;
    border: none;
    background-color: ghostwhite;
    /* padding-left: 10px; */
    /*  圆角 */
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.header-search-icon {
    background-color: ghostwhite;
    /*转换为行内块状*/
    display: inline-block;
    height: 32px;
    width: 20px;
    line-height: 32px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-left: -5px;
    cursor: pointer;
}

/* .container-top{
    width: 500px;
    height: 50px;
    margin: 0 auto;
    background-color: wheat;
    border-bottom: 1px solid rgb(220, 220, 220);
    position: fixed;
} */

.container-left{
    width: 500px;
    height: auto;
    /* margin: 0 auto; */
    margin-left: 260px;
    /* background-color: thistle; */
    position: absolute;
    background-color: white;
    margin-top: 20px;
    padding-right: 15px;
    padding-left: 15px;
}

.container-left-top{
    width: 500px;
    height: 40px;
    list-style-type: none;
    border-bottom: 1px solid gainsboro;
}

.container-left-top ul li{
    line-height: 40px;

}

.container-left-top ul li a:hover{
    color: blue;
}



.container-left li a{
    padding-left: 20px;
}
.container-left-middle span{
    margin-top: 1px;
    margin-bottom: 10px;

}

.container-left-middle ul li{
    /* margin-left: 20px; */
    margin-top: 10px;
    font-size: 12.5px;
    float: left;
}

.container-left-middle ul{
    padding-bottom: 10px;
}

.shu{
    margin-left: 5px;
}

.img1{
    float: right;
    width: 100px;
    height: 80px;
    margin-top: -79px;
}

h3{
    font-size: 16px;
    padding-bottom: 10px;
    margin-top: 10px;
}

.span{
    padding-bottom: 10px;
    border-bottom: 1px solid gainsboro;
    font-family: Arial, Helvetica, sans-serif;
}

.container-right{
    width: 250px;
    height: 800px;
    margin-left: -100px;
    float: left;
    
    /* background-color: violet; */
}

.container-right-1 ul li{

    float: left;
}

.container-right-1{
    background-color: white;
    margin-top: 20px;
}

.container-right-1 img{
    width: 50px;
    height: 50px;
}

.qiandao{
    padding-top: 11px;
    padding-left: 29px;
    
    
    
}
.quiandao{
    border-radius: 20px;
    width: 70px;
    height: 35px;
    border-color: #15c3e2;
    color: #15c3e2;
    cursor: pointer;
    background-color: white;
    
}
.nihao{
    padding-top: 15px;
    padding-left: 8px;
    font-size: 20px;
    
}

.continue{
    clear: both;
    text-align: center;
    padding-bottom: 15px;
}
p{
    font-weight: bold
}
.container-right-2{
    margin-top: 20px;
    background-color: white;
}

input{
    width: 100px;
    height: 29px;
    /* background-color: yellow;
    border-style: none; */
    padding-left: -10px;
}

.phone{
    border: 1px solid gainsboro;
    width: 220px;
}

select,input{
    border-style: none;
    outline: none;
}

.yanzhengma input{
    width: 120px;
    margin-left: 5px;
}

.yanzhengma{
    margin-top: 10px;
    border: 1px solid gainsboro;
    margin-bottom: 10px;
    width: 220px;
}
select{
    width: 50px;
    height: 31px;
    /* border-style: none;
    background-color: yellow; */
}


.login button{
    width: 200px;
    height: 30px;
    background-color: #1e80ff;
    color: white;
}

.register{
    margin-top: 20px;
}


.container-right-3{
    width: 250px;
    height: 80px;
    margin-top: 20px;
    background-color: white;
}

.erweima{
    padding-left: 15px;
    padding-top: 15px;
}

.grow{
    margin-left: -15px;
    margin-top: 18px;
}

.grow-up{
    font-size: 10px;
}

.container-right-4 ,.container-right-5{
    width: 250px;
    height: 260px;
}
.container-right-4-img{
    padding-top: 25px;
    width: 250px;
    height: 260px;
}


.container-right-5{
    width: 250px;
    height: 260px;
    padding-top: 25px;
}
.container-right-5-img{
    padding-top: 25px;
    width: 250px;
    height: 260px;
}











.erweima{
    width: 50px;
    height: 50px;
}

努力的拾壹

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
CSS+HTML实现掘金网首页

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
复制链接

扫一扫