html+css 百度首页制作

分为三部分去做,先把一些元素添上,在用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>
发布了14 篇原创文章 · 获赞 1 · 访问量 7002
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览