HTML和CSS制作的简单百度网页

最新推荐文章于 2024-03-16 09:51:29 发布

松柏123

最新推荐文章于 2024-03-16 09:51:29 发布

阅读量3.4k

点赞数 5

文章标签：百度 html js css

本文链接：https://blog.csdn.net/weixin_53456849/article/details/119377600

版权

话不多说！！！
直接上代码！！！！

<!DOCTYPE html>
<html lang="ch_CN">
<head>
    <meta charset="UTF-8">
    <title>百度首页</title>
    <style type="text/css">
        .top{
            /*border: 1px solid blue;*/
            width: 100%;
            height: 64px;
        }
        .top>.title{
            /*border: 1px solid blue;*/
            height: 64px;
            float: right;
        }
        .top>.title>span{
            /*border: 1px solid red;*/
            line-height: 64px;  //line-height 属性 表示设置行高
        }
        .top>.title>span>a{
            /*border: 1px solid black;*/
            color: black ;
            font-size: 15px ;    //font-size 属性  表示设置字体
            font-family: "宋体" ; //font-family 属性 表示设置字体样式
            text-decoration: underline ;  //text-decoration 属性 规定添加到文本的修饰，下划线，上划线，删除线等。
            //text-decoration 属性的值：
            //none  默认。定义标准的文本。
            //underline 定义文本下的一条线。
            //overline  定义文本上的一条线。
            //line-through  定义穿过文本的一条线。
            //blink     定义闪烁的文本。
            //inherit   规定应该从父元素继承text-decoration属性的值。
        }
        .top>.title>span>.body{
            font-weight: bold;  //font-weight 属性 规定字体的粗细
            //值 normal 默认值。定义标准的字符。
            //值 bold 定义粗体字符。
            //值 bolder 定义更粗的字符。
            //值 lighter 定义更细的字符。
            //值 100 200 300 400 500 600 700 800 900 定义由细到粗的字符。400等同于normal，而700等同于bold。
            //值 inherit 规定应该从父元素继承字体的粗细。
        }
        .body>.picture{
            /*border: 1px solid red;*/
            text-align:center; //text-align 属性 指定元素文本的水平对其方式。
            margin-bottom: 36px;  //设置元素的下外边距。
            /*//left 把文本排列到左边。默认值：由浏览器决定。*/
            /*//right 把文本排列到右边。*/
            /*//center 把文本排列到中间。*/
            /*//justify 实现两端对其文本效果。*/
            /*//inherit 规定应该从父元素继承text-align 属性的值。*/

        }
        .body>.search{
            /*border: 1px solid blue;*/
            text-align: center;
        }
        .body>.search>.abc>.input{
            width: 540px;
            height: 36px;
        }
        .body>.search>.abc>.btn{
            width: 100px;
            height: 43px;
            margin-top: 10px;
            background: blue;
            color: white;
            font-size: 13px;
        }
        .foot{
            /*border: 1px solid red;*/
            width: 100%;
            position: absolute;
            bottom: 100px;
        }
        .foot>.link{
            /*border: 1px solid green;*/
            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: blue;
            color: white;
            font-size: 1px;
            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="/baiduWeb/baidupicture.png" 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>

松柏123

关注

5
点赞
踩
35

收藏

觉得还不错? 一键收藏
0
评论
HTML和CSS制作的简单百度网页

话不多说！！！直接上代码！！！！<!DOCTYPE html><html lang="ch_CN"><head> <meta charset="UTF-8"> <title>百度首页</title> <style type="text/css"> .top{ /*border: 1px solid blue;*/ width:
复制链接

扫一扫