百度页面图例

最新推荐文章于 2023-10-07 14:08:36 发布

蜡笔小心眼儿!

最新推荐文章于 2023-10-07 14:08:36 发布

阅读量128

点赞数

文章标签： webview elementui css

本文链接：https://blog.csdn.net/m0_63893191/article/details/124903069

版权

HTML：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="nav ">
        <div class="navleft">
            <a href="http://news.baidu.com/">新闻</a>
            <a href="https://www.hao123.com/?src=from_pc">hao123</a>
            <a href="http://map.baidu.com/">地图</a>
            <a href="http://tieba.baidu.com/">贴吧</a>
            <a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a>
            <a href="http://image.baidu.com/">图片</a>
            <a href="https://pan.baidu.com/?from=1026962h">网盘</a>
            <a href="http://www.baidu.com/more/">更多</a>
        </div>
        <div class="navright">

            <a href="#" id="login">登录</a>
            <a href="#">设置</a>
        </div>
    </div>
    <div class="main">
        <div class="pic">
            <img src="baidu.png" alt="">
        </div>
        <div class="search">
            <div class="holder">
                <input type="text" id="searchcontent" />
                <a href="http://www.baidu.com">百度一下</a>
            </div>
        </div>
    </div>
    <div class="apple">
        <a href="https://home.baidu.com/">关于百度</a>
        <a href="http://ir.baidu.com/">about BaiDu</a>
        <a href="https://www.baidu.com/duty">使用百度必读</a>
        <a href="https://help.baidu.com/">帮助中心</a>
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京备10212222200</a>
    </div>
</body>

</html>

CSS：

* {
    margin: 0;
    padding: 0;
}

.navleft {
    float: left;
    height: 40px;
}

.navright {
    float: right;
    height: 40px;
}

.nav {
    *zoom: 1;
}

.nav::after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}

.navleft a {
    font: 13px/23px Arial, sans-serif;
    float: left;
    text-decoration: none;
    color: black;
    margin: 10px;
    padding: 5px;
}

.navright a {
    font: 13px/23px Arial, sans-serif;
    float: right;
    text-decoration: none;
    color: black;
    margin: 10px;
    padding: 5px;
}

.nav a:hover {
    color: blue;
}

#login {
    background-color: #4E6EF2;
    color: white;
    border-radius: 5px;
}

.main {
    text-align: center;
}

.pic {
    text-align: center;
}

.pic img {
    width: 200px;
    height: 100px;
}

.search {
    text-align: center;
    width: 100%;
    height: 30px;
}

.apple {
    position: fixed;
    bottom: 0px;
}

.apple a {
    padding-left: 150px;
    text-decoration: none;
    color: black;
}

.search {
    text-align: center;
}

.holder {
    display: inline-block;
}

#searchcontent {
    height: 36px;
    width: 500px;
    float: left;
    border-radius: 10px 0 0 10px;
    border-width: 1px;
    border-color: CEC7C4;
    border-right: 0px;
}

.search a {
    text-decoration: none;
    display: inline-block;
    width: 100px;
    s height: 38px;
    line-height: 36px;
    text-align: center;
    border-radius: 0px 5px 5px 0px;
    font-family: "微软雅黑";
    cursor: pointer;
    background-color: #4E6EF2;
    color: white;
    float: left;
}

.search a:hover {
    background-color: blue;
}

图例：

我会继续努力的，这个我承认很水。。。

蜡笔小心眼儿!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度页面图例

HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href=
复制链接

扫一扫