前端第二次作业

最新推荐文章于 2022-07-11 10:01:19 发布

快累死的初级学者

最新推荐文章于 2022-07-11 10:01:19 发布

阅读量118

点赞数

文章标签：前端 webview elementui

本文链接：https://blog.csdn.net/m0_61999957/article/details/124911999

版权

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">
    <link rel="stylesheet" href="./css/commom.css">
    <link rel="stylesheet" href="./css/home.css">
    <title>百度一下，你就知道</title>
</head>

<body>
    <div id="header">
        <div class="h-left">
            <a href="#">新闻</a>
            <a href="#">hao123</a>
            <a href="#">地图</a>
            <a href="#">贴吧</a>
            <a href="#">视频</a>
            <a href="#">图片</a>
            <a href="#">网盘</a>
            <a href="#">更多</a>
        </div>
        <div class="h-right">
            <a>设置</a>
            <a id="loginBtn">登录</a>
        </div>
    </div>
    <div id="main">
        <a href="index.html">
            <img class="logo" src="img/baiduiog.png" alt="百度一下，你就知道" title="点击一下，了解更多">
        </a>
        <div class="search-box">
            <input type="text" name="keyword" id="keyword">
            <a href="javascript:void(0);" id="searchbtn">百度一下</a>
            <i class="icos"></i>
        </div>
        <div class="news-list">
            <p>
                <a class="t-left">百度热搜 ></a>
                <a class="t-right">换一换</a>
            </p>
            <p class="clear"></p>
            <div>
                <div class="news-box news-left">
                    <a herf="#">
                        <span class="news-one"> 1</span> 中国经济无惧风浪英勇前进
                        <span class="retubiao">热</span>
                    </a>
                    <a href="#"><span class="news-two"> 2</span>  近千人投降 钢铁场内还有谁？</a>
                    <a href="#"><span class="news-three"> 3</span>  我爱我的祖国</a>
                </div>
                <div class="news-box news-right">
                    <a href="#">4 中国博物馆的国宝图鉴</a>
                    <a href="#">5 中国疫情日渐好转 <span class="xintubiao">新</span></a>
                    <a href="#">6 山东农业大学解封</a>
                </div>
            </div>
        </div>

    </div>
    <div id="footer">
        <a href="#">关于百度</a>
        <a href="#">About baidu</a>
        <a href="#">使用百度必读</a>
        <a href="#">帮助中心</a>
        <a href="#">京公网安备11000002000001号</a>
        <a href="#">京icp证030173</a> @2022 Baidu联网药品信息服务资格证书(京)-经营性-2017-0020
        <a href="#"> 信息网络传播视听节目许可证0110516</a>
    </div>

</body>

</html>

</html>

css

#header {
    height: 40px;
    line-height: 40px;
}

#header .h-left {
    float: left;
}

#header .h-left a {
    margin-left: 30px;
    font-size: 14px;
}

#header .h-right {
    float: right;
    font-size: 14px;
}

#header .h-right a {
    margin-right: 20px;
}

#header .h-right #loginBtn {
    background-color: rgb(57, 57, 238);
    color: aliceblue;
    padding: 2px 7px;
    border-radius: 3px;
}

#main {
    width: 730px;
    height: auto;
    overflow: hidden;
    margin: 30px auto;
    text-align: center;
}

#main .logo {
    width: 290px;
    height: auto;
}

#main .search-box {
    position: relative;
    width: 100%;
    height: 44px;
}

#main .search-box #keyword {
    width: 550px;
    height: 40px;
    padding-left: 20px;
    border: 2px solid #c0c0c0;
    padding-left: 20px;
    outline: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

#main .search-box #keyword:focus {
    border: 2px solid #315efb;
}

#main .search-box #searchbtn {
    position: relative;
    left: -6px;
    display: inline-block;
    width: 100px;
    height: 44px;
    line-height: 40px;
    background-color: #345ae6;
    color: azure;
    font-size: 16px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

#main .search-box #searchbtn:hover {
    background-color: cornflowerblue;
}

#main .search-box .icos {
    position: absolute;
    top: 6px;
    right: 135px;
    display: block;
    width: 40px;
    height: 40px;
    background: url(../img/niction.png) no-repeat;
    background-position: -4px -102px;
}

#main .search-box .icos:hover {
    background-position: -4px -150px;
}

#main .news-list {
    margin-top: 45px;
    font-size: 14px;
    width: 700px;
}

#main .news-list .t-left {
    float: left;
}

#main .news-list .t-right {
    float: right;
}

#main .news-list .news-left {
    float: left;
}

#main .news-list .news-right {
    float: right;
}

#main .news-list .news-box {
    width: 300px;
    height: auto;
    overflow: hidden;
    text-align: left;
}

#main .news-list .news-box a {
    display: block;
    margin: 15px 2px;
}

#main .news-list .news-box .news-one {
    color: red;
}

#main .news-list .news-box .news-two {
    color: #f30;
}

#main .news-list .news-box .news-three {
    color: #f60;
}

#main .news-list .news-box .retubiao {
    background-color: #f60;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

#main .news-list .news-box .xintubiao {
    background-color: #ff455b;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 30px;
    width: 100%;
    line-height: 30px;
    text-align: center;
    font-size: 9px;
    color: #bbb;
}

#footer a {
    color: #bbb;
    margin-right: 10px;
}

#footer a:hover {
    color: #222;
}

    * {
        padding: 0;
        margin: 0;
    }
    
    a {
        text-decoration: none;
        color: black;
    }
    
    a:hover {
        color: #315efb;
    }
    
    .clear {
        clear: both;
        height: 0;
        font-size: 0;
        line-height: 0;
    }

效果图

下面是我最近学到的东西

快累死的初级学者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端第二次作业

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"> <link
复制链接

扫一扫