一个简陋的百度网页

最新推荐文章于 2024-06-06 01:35:12 发布

Pretty Fairy

最新推荐文章于 2024-06-06 01:35:12 发布

阅读量199

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/weixin_44433423/article/details/117381395

版权

web 专栏收录该内容

2 篇文章

订阅专栏

这是一个网页顶部布局的HTML代码示例，包含导航菜单和搜索框。菜单包括新闻、hao123、地图等选项，样式定义了不同链接状态的颜色，以及搜索框的样式和尺寸。页面还包含一个固定在右上角的子菜单，提供城市选择、天气和设置等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述
文件结构：

ps:页面的图片我上传到csdn,名字image.

<!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>Document</title>
    <style>
        ul li{
            display: inline;
        }
        a:link{color:yellow;} /* 未访问的链接 */
        a:visited {color:black;} /* 已访问的链接 */
        a:hover{color:red;} /* 鼠标划过链接 */
        a:active{color:green;} /* 已选中的链接 */
        #image2{
                padding: 2px;
                width: 24px;
                height: 24px;
                border-radius: 50%
                }
        .s-top-right {
                    position: fixed;
                    float: right;
                    right: 0;
                    top: 0;
                    z-index: 100;
                    height: 60px;
                    padding-right: 24px;
                    margin-top: 0%;
                    }
        ul li {
            padding: 8px 10px; 
        }
        #div1{
            text-align: center;
        }
        form{
            text-align: center;
        }
        #kw {
            width: 512px;
            height: 16px;
            padding: 12px 16px;
            font-size: 16px;
            margin: 0;
            vertical-align: top;
            outline: 0;
            box-shadow: none;
            border-radius: 10px 0 0 10px;
            border: 2px solid #c4c7ce;
            background: #fff;
            color: #222;
            overflow: hidden;
            box-sizing: content-box;
            }
        #input2{
            cursor: pointer;
            width: 108px;
            height: 44px;
            line-height: 45px;
            line-height: 44px\9;
            padding: 0;
            background: 0 0;
            background-color: #4e6ef2;
            border-radius: 0 10px 10px 0;
            font-size: 17px;
            color: #fff;
            box-shadow: none;
            font-weight: 400;
            border: none;
            outline: 0;
        }
    </style>
</head>
<body>
    <div >
        <div >
            <ul id="ul1">
                <li><a href="">新闻</a></li>
                <li><a href="">hao123</a></li>
                <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>
        </div>
    </div>
    <div class="s-top-right">
        <div>
            <ul id="ul2" >
                <li><a href="">上海</a></li>
                <li><a href="">天气</a></li>
                <li><a href="">设置</a></li>
                <li><img src="image/1_weixin_44433423_1620443745.jpg" id="image2"  alt="" srcset=""></li>
                <li><a href="">Fairy</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="div1">
    <img src="image/image2.png" id="image1" alt="">
</div>
<form action="" >
    <span>
        <input type="text" name=""  id="kw" maxlength="1">
    </span>
    <span>
        <input type="submit" value="百度一下" id="input2">
    </span>
</form>
</body>
</html>