html和css网页制作

白菜豆腐干

已于 2022-05-21 22:57:02 修改

阅读量416

点赞数

文章标签： webview css javascript

于 2022-05-21 22:31:36 首次发布

本文链接：https://blog.csdn.net/weixin_65717727/article/details/124904556

版权

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

<head>
    <meta charset="UTF-8">
    <title>百度首页</title>
    <style type="text/css">
        .top {
            width: 100%;
            height: 64px;
        }
        
        .top>.title {
            height: 64px;
            float: right;
        }
        
        .top>.title>span {
            line-height: 64px;
        }
        
        .top>.title>span>a {
            color: black;
            font-size: 15px;
            font-family: "宋体";
            text-decoration: underline;
        }
        
        .top>.title>span>.body {
            font-weight: bold;
        }
        
        .body>.picture {
            text-align: center;
            margin-bottom: 36px;
        }
        
        .body>.search {
            text-align: center;
        }
        
        .body>.search>.abc>.input {
            width: 540px;
            height: 36px;
        }
        
        .body>.search>.abc>.btn {
            width: 100px;
            height: 40px;
            margin-top: 10px;
            background: blue;
            color: white;
            font-size: 13px;
        }
        
        .foot {
            width: 100%;
            position: absolute;
            bottom: 100px;
        }
        
        .foot>.link {
            text-align: center;
            margin-bottom: 5px;
        }
        
        .foot>.link>a {
            font-size: 15px;
            font-family: "宋体";
            text-decoration: underline;
        }
        
        .foot>.footer {
            /*border: 1px solid blue;*/
            text-align: center;
            font-size: 15px;
            font-family: "宋体";
        }
        
        .font>.footer>a {
            text-decoration: underline;
            color: blue;
        }
        
        #btn {
            background-color: blue;
            color: white;
            font-size: 15px;
            width: 50px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="top">
        <div class="title">
            <span>
            <a class="body" href="https://www.baidu.com" >新闻</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="body" href="https://www.baidu.com">hao123</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="body" href="https://www.baidu.com">地图</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="body" href="https://www.baidu.com">直播</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="body" href="https://www.baidu.com">视频</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="body" href="https://www.baidu.com">贴吧</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="body" href="https://www.baidu.com">学术</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://www.baidu.com">更多</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <button id="btn">设置</button>&nbsp;&nbsp;
            <button id="btn" >登录</button>
          </span>
        </div>
    </div>
    <div class="body">
        <div class="picture">
            <image src="C:\Users\86166\Desktop\前端基础案例\2\baidu.jpg.jpg" "widht="540 " height="258 " />
        </div>
        <div class="search ">
            <from class="abc " action="https://www.baidu.com/?tn=21002492_16_hao_pg ">
                <label for="search "></label>
                <input class="input " type="text " name="search " id="search " value=" " />
                <input class="btn " type="submit " value=" 百度一下 " name="submit " />
            </from>
        </div>
    </div>
    <div class="foot ">
        <div class="link ">
            <a href=" ">把百度设为主页</a>
            <a href=" ">关于百度</a>
            <a href=" ">About Baidu</a>
        </div>
        <div class="footer ">
            ©2015 Baidu
            <a href=" ">使用百度前必读</a>
            <a href=" ">意见反馈</a> 京ICP证030173号
        </div>
    </div>
</body>

</html>