html和css网页制作

编程知识行业动态更新时间:2024-06-13 00:17:15

<!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" >新闻</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="body" href="https://www.baidu">hao123</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="body" href="https://www.baidu">地图</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="body" href="https://www.baidu">直播</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="body" href="https://www.baidu">视频</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="body" href="https://www.baidu">贴吧</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="body" href="https://www.baidu">学术</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://www.baidu">更多</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/?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>

更多推荐

html和css网页制作

本文发布于:2023-03-24 23:05:00，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/bd81c660658b7b1668ebb2010542bc86.html