html+css 百度首页制作

最新推荐文章于 2022-04-10 10:54:04 发布

vvvjack7

最新推荐文章于 2022-04-10 10:54:04 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTMl+CSS 文章标签： HTML+css

本文链接：https://blog.youkuaiyun.com/vvvjack7/article/details/89710828

HTMl+CSS 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了使用HTML和CSS从零开始复刻百度首页的过程，包括页面布局、样式设置及元素定位技巧。通过块级元素、居中设置、属性选择器等实现网页的精准样式控制。

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

分为三部分去做,先把一些元素添上，在用style设置格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度首页</title>
    <style>
        body{
            font-size: 18px;
            color: #666;
            /*整个页面继承字体大小和颜色，显示为底部字体变为了灰色*/
        }
        div{
            text-align: center;
            /*将所有div标签设置为居中*/
        }
        .header{
            height: 200px;
            /*由于div是块级元素，默认宽度即body宽度*/

        }
        .content{
            height: 250px;

        }
        .footer{
            height: 200px;
        }
        .logo{
            height: 150px;
            /*设置的是百度logo块级的高度，这样就可以与下面的超链接隔开一段距离*/
        }
        /*想要找到input标签并设置其长宽高，最好不要用ID，ID是留给js使用的；也可以加class，但是还是比较麻烦。
        可以选择属性选择器，找到有哪个属性，并且某个属性的值等于某个指定值得标签，然后在设置其属性*/
        input[type="text"]{
            width: 400px;
            height: 30px;
        }
        input[type="submit"]{
            width: 100px;
            height: 30px;
        }
        .search{
            height: 60px;
             /*同上，可以设置间距*/
        }
        .bk{
            height: 120px;
        }
        .aq{
            height: 40px;
        }
        .tg{
            height: 40px;
        }
    </style>

</head>
<body>

<div class="header">
    <div class="logo">
      <img src="images/bdlogo.gif" alt="">
      <!--img是行内块级元素，不独占一行，独占一行的只有块级元素，
      将img元素放到块级元素div中，就可以独占一行了，并且可以设置宽和高-->
    </div>

    <div class="nav">
      <a href="#">贴 吧</a>&nbsp
      <strong>新 闻</strong>&nbsp<!--加粗-->
      <a href="#">知 道</a>&nbsp
      <a href="#">图 片</a>&nbsp
      <a href="#">视 频</a>&nbsp
      <a href="#">地 图</a>&nbsp
      <a href="#">音 乐</a>
    </div>
</div>

<div class="content">
    <div class="search">
        <form action="">
            <input type="text">
            <input type="submit" value="百度一下">
        </form>
    </div>

    <div class="bk">
        <a href="#">百科</a>
        <a href="#">文库</a>
        <a href="#">学术</a>
        |
        <a href="#">更多</a>
    </div>

    <div>
    <img src="images/ic.jpg" alt="">
    <a href="#">百度吃喝，全心全意为您服务</a>
    </div>
</div>

<div class="footer">
    <div class="aq">
        <a href="#">把百度设为首页</a>
        <a href="#">安装安全卫士</a>
    </div>

    <div class="tg">
        <a href="#">加入百度推广</a>
        |
        <a href="#">搜索风云榜</a>
        |
        <a href="#">关于百度</a>
        |
        <a href="#">About Baidu</a>
    </div>

    <div>
    版权号等等等等
    </div>
</div>
</body>
</html>