百度网页的制作

不想敲代码1

于 2022-05-21 12:39:39 发布

阅读量4.2k

点赞数 9

文章标签： css html

本文链接：https://blog.csdn.net/m0_62720219/article/details/124896793

版权

<!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>
        .a {
            text-decoration: none;
            color: black;
            font-size: 14px;
        }

        .aa {
            text-decoration: none;
            color: black;
            font-size: 17px;
        }


        .b {
            display: block;
            text-decoration: none;
            text-align: center;
            color: rgb(248, 245, 245);
            background-color: #2147f0;
            font-size: 14px;
            border-bottom-left-radius: 5px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            width: 50px;
            height: 20px;
        }

        .c {
            width: 600px;
            height: 40px;
            border-bottom-left-radius: 5px;
            border-top-left-radius: 5px;

        }

        .d {
            width: 100px;
            height: 46px;
            color: rgb(248, 245, 245);
            background-color: #2147f0;
          left:-100px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .none {
            font-size: 10px;
            color: gray;
            text-decoration: none;
        }

        .juzhong {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        div {
            background-image: url(baidu.png);
            width: 500px;
            height: 300px;
            background-position: center;
            background-repeat: no-repeat;
        }

        a:hover {
            color: skyblue;

        }

        aa:hover {
            color: skyblue;
        }

        .img:hover {
            color: skyblue;
        }

        .myway li {
            margin-bottom: 20px;
        }

        .bo {
            vertical-align:baseline;
            /* 在整个网页的位置 */
            position: absolute;
            /* 在整个网页的位置的相对性*/
        }

        body {
            white-space: nowrap;
        }

        .jiantou {
            background-image: url(jiantou.png);
            background-repeat: no-repeat;
            width: 10px;
            height: 30px;
            text-indent: 4em;
            background-position: 38px center;
            vertical-align: middle;
        }

        .tupian2 {
            display: block;
            background-image: url(resou.png);
            background-repeat: no-repeat;
            text-indent: 3em;
            background-position: 0 center;
        }

        .re {
            display: block;
            background-image: url(re.png);
            background-repeat: no-repeat;
            text-indent: 3em;
            background-position: 0 center;

        }

        .liebiao {
            list-style: none;
        }

        .bianju {
            margin-right: -5.1px;
        }

        .xiangji {
            position: absolute;
            right: 470px;
            top: 360px;
        }

        .tupian {
            background-image: url(换一换.png);
            background-repeat: no-repeat;
            width: 10px;
            height: 30px;
            text-indent: 15em;
            background-position: 280px center;
            background-size: 20px;
        }
        input:focus{
            /* 输入表单边框变色 */
            outline:0;
            border: 2px solid #315efb;
        }

        .youduiqi {

            text-align: right;
        }

        .color {
            color: grey;
            font-size: 14px;
        }

        .jianju {
            border-collapse: separate;
            border-spacing: 10px;
        }
        .hot{
            display:inline-block;
            background-color:red;
            border-bottom-left-radius: 5px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            color:white;
        }
        .xin{
            display:inline-block;
            background-color:orange;
            border-bottom-left-radius: 5px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            color:white;
        }
    </style>
</head>

<body>
    <!-- 菜单栏 -->
    <table cellpadding="10px">
        <tr>
            <td><a href="#" class="a">新闻</a></td>
            <td> <a href="#" class="a">hao123</a></td>
            <td><a href="#" class="a">地图</a></td>
            <td><a href="#" class="a">贴吧</a></td>
            <td><a href="#" class="a">视频</a></td>
            <td><a href="#" class="a">图片</a></td>
            <td><a href="#" class="a">网盘</a></td>
            <td width="500"><a href="#" class="a">更多</a></td>
            <td width="400" align="right"><a href="#" class="a">设置</a></td>
            <td><a href="#" class="b">登录</a></td>
        </tr>
    </table>

    <!-- 插入百度图片 -->
    <center>
        <div></div>
    </center>

    <!-- 搜索栏 -->
    <table>
        <tr>
            <center>
                <input type="text" class="c bianju biankuang">
                <img src="xiangji.png" class="xiangji bo" width="60px" height="35px">
                <input type="button" value="百度一下" class="d">
            </center>
        </tr>
        <br>
        <br>
    </table>

    <!-- 新闻栏 -->
    <center>
        <table width="100px" class="jianju">
            <tr>
                <td class="tupian1"><a href="#"
                        class="aa"><strong>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp百度热搜&nbsp&nbsp></a></td>
                <td class="tupian youduiqi"><a href="#" class="aa color"><strong >&nbsp&nbsp&nbsp换一换</a></td>
                
            </tr>
            <tr>
                <td >
                    <ol class=" myway liebiao">
                        <li>
                            <a href="#" class="aa "><span style=color:red>1</span>.北京十二个区域开展三天三轮核酸    <span class="hot">热</span></a>
                        </li>
                        <li>
                            <a href="#" class="aa">2.北京1人3次上公厕引发近40人感染</a>
                        </li>
                        <li>
                            <a href="#" class="aa">3.倒塌事故被困者：敲了三天三夜管子</a>
                        </li>
                        </ol>
                </td>
                <td align="left" width="40">
                    <ol class="myway liebiao">
                        <li>
                            <a href="#" class="aa">4.中央政治局会议为当前经济工作定调</a>
                        </li>
                        <li>
                            <a href="#" class="aa"><span span style=color:orange>5</span>.媒体：马某某被杭州公安局采取措施     <span class="xin">新</span></a>
                        </li>
                        <li>
                            <a href="#" class="aa">6.上海新增本土“274+5395”死亡20例</a>
                        </li>

                    </ol>
                </td>
            </tr>
        </table>
    </center>

    <!-- 小结 -->
    <table cellpadding="10">
        <tr class="bo">
            <td><a href="#" class="none">关于百度</a></td>
            <td><a href="#" class="none">About baidu</a></td>
            <td><a href="#" class="none">使用百度前必读</a></td>
            <td><a href="#" class="none">帮助中心</a></td>
            <td><a href="#" class="none">京公网安备110000020000011号</a></td>
            <td><a href="#" class="none">京ICP证030173号</a></td>
            <td><a href="#" class="none">@2022baidu</a></td>
            <td><a href="#" class="none">互联网药品信息服务资格证书(京)-经营性-2017-0020</a></td>
            <td><a href="#" class="none">信息网络传播视听节目许可证0110516</a></td>
            <td>
                <image src="bbb.png">
            </td>
        </tr>
    </table>
</body>

</html>

本次作业是百度界面，我感觉一个网页的制作也是一件不容易的事，我们得在脑子里有具体的框架，知道在哪一部分要用什么形式写，怎样让整个界面看起来美观，整齐，这都是我们需要思考的问题。

通过这次作业我学会了css的一些基础知识，并能够自行摸索使用在作业中，但还是不够熟练，可能要反复观看pink老师的视频才能记住，于是我开始记笔记，不仅便于记忆，还方便查找。本次百度静态页面的制作，我发现自己对排版方面的技巧还是掌握不够，希望在下次作业中能够得到提高，一次又一次的收获。

这次的学习涉及到了css的知识，难度在加深，但是制作网页是一件很有趣的事情

不想敲代码1

关注

9
点赞
踩
60

收藏

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

<!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&gt...
复制链接

扫一扫