3月13号

  今天学校放假了,有的同学回家happy去了,而我不能回家啊,我要学习,要敲代码,不敲代码是不行的,于是我就9:30左右背着书包去了自习室,早上复习了html5第二天的内容并且写完了案例,下午预习CSS3第一天的内容,也把所有的案例做了一遍,有个百度的代码有问题,搞了2个小时没搞定,具体情况是代码相同,然后实现不一样,换了浏览器也是一样,具体的代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>百度一下,你就知道</title>
  <style type="text/css">
    .logo {
      text-align: center;
    }

    .nav {
      font-size: 14px;
      text-align: center;
    }

    .sousou {
      text-align: center;
    }

    .search {
      width: 420px;
      height: 23px;
    }

    .btn {
      height: 30px;
      width: 100px;
      font-size: 14px;
    }

    .more {
      text-align: center;
      font-size: 14px;
    }

    .map {
      text-align: center;
      font-size: 12px;
    }

    .bottom {
      font-size: 12px;
      text-align: center;
      line-height: 30px;
    }
  </style>
</body>
  <div class="logo"><img src="bdlogo.gif" /></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>&nbsp;
    <a href="#">地图</a>
  </div><br />

  <div class="sousou">
    <input type="text" class="search" />&nbsp;
    <input type="button" value="百度一下" class="btn" />
  </div><br />
  <br />

  <div class="more">
    <a href="#">百科</a>
    <a href="#">文库</a>
    <a href="#">hao123</a> | <a href="#">更多&gt;&gt;</a>
  </div><br />
  <br />
  
  <div class="map">
    <img src="ic.jpg" />&nbsp;
    <a href="#">百度地图带你吃喝玩乐,全心全意为人民服务</a>
  </div><br />
  <br />

  <div class="bottom">
    <a href="#">把百度设置为主页
    </a>&nbsp;<a href="#">安装百度卫士</a>
    <br />

    <a href="#">加入百度推广</a> | <a href="#">搜索风云榜</a> | <a href="#">关于百度</a> | <a href="#">About Baidu</a> <br />
  ©2013 Baidu 使用百度前必读 京ICP证030173号
  </div>
  

</html>
Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>百度一下,你就知道</title>
  <style type="text/css">
    .logo {
      text-align: center;
    }

    .nav {
      font-size: 14px;
      text-align: center;
    }

    .sousou {
      text-align: center;
    }

    .search {
      width: 420px;
      height: 23px;
    }

    .btn {
      height: 30px;
      width: 100px;
      font-size: 14px;
    }

    .more {
      text-align: center;
      font-size: 14px;
    }

    .map {
      text-align: center;
      font-size: 12px;
    }

    .bottom {
      font-size: 12px;
      text-align: center;
      line-height: 30px;
    }
  </style>
</head>

<body>
  <div class="logo"><img src="bdlogo.gif" /></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> &nbsp;
    <a href="#">地图</a>
  </div><br />

  <div class="sousou">     
    <input type="text" class="search" />&nbsp;
    <input type="button" value="百度一下" class="btn" />
  </div><br />
  <br />

  <div class="more">
    <a href="#">百科</a> 
    <a href="#">文库</a> 
    <a href="#">hao123</a> | <a href="#">更多&gt;&gt;</a>
  </div><br />
  <br />
  <div class="map">
    <img src="ic.jpg" />&nbsp;
    <a href="#">百度地图带你吃喝玩乐,全心全意为人民服务</a>
  </div><br />
  <br />

  <div class="bottom">
    <a href="#">把百度设为主页
    </a>&nbsp;<a href="#">安装百度卫士</a>
    <br />

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

    ©2013 Baidu 使用百度前必读 京ICP证030173号
  </div>
</body>

</html>
原版

两个地方有问题:

1.demo的搜索框部分比原版多了一部分。

2.demo的百科、文库等信息靠得太紧了,没有原版的好看。

这个问题已经卡了1天了,一直在不停地review代码,就是看不出异常,今晚把原版的一个小功能一个小功能地复制到demo中去看效果,看看到底是哪坨代码出问题了。

加油,既然花了钱,就玩命学吧!

虽然我是中专,我坚信只要我肯玩命学,技术能力超过部分大专和本科生,工作机会还是有的,我坚信这个行业还是相对公平的。

 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2019/3/15更新:

百度页面的问题解决了,问了助教老师,原来是隐藏字符的问题,原版的页面是别人用爬虫工具爬取下来的代码,并不是手写的h5代码,自己给搜索框增加样式就行了,这就是自学和培训的差别啊,有人指导半小时,没人指导估计得卡半个月。

更新后的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>百度一下,你就知道</title>
    <style>
        .logo {
            text-align: center;
        }
        .nav {
            font-size: 14px;
            text-align: center;
        }
        .sousou {
            text-align: center;
        }
        .search {
            width: 420px;
            height: 23px;
            margin-left: 90px;
        }
        .btn {
            height: 30px;
            width: 100px;
            font-size: 14px;
        }
        .more {
            text-align: center;
            font-size: 14px;
        }
        .map {
            text-align: center;
            font-size: 12px;
        }
        .bottom {
            font-size: 12px;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div class="logo"><img src="bdlogo.gif" alt="百度一下,你就知道"></div> <!-- 百度logo -->
    <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>&nbsp;
        <a href="#">地 图</a>
    </div><br />

    <div class="sousou">
        <input type="text" class="search" />&nbsp;
        <input type="button" value="百度一下" class="btn" />
    </div><br />
    <br />

    <div class="more">
    <a href="#">百科</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#">文库</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#">hao123</a> | <a href="#">更多&gt;&gt;</a>
    </div><br />

    <div class="map">
        <img src="ic.jpg" alt="定位">&nbsp;
        <a href="#">百度带你吃喝玩乐, 全心全意为人民服务</a>
    </div><br />

    <div class="bottom">
        <a href="#">把百度设置为主页</a>&nbsp;
        <a href="#">安装百度卫士</a>
        <br />

        <a href="#">加入百度推广</a> | <a href="#">搜索风云榜</a> | <a href="#">关于百度</a> | <a href="#">About Baidu</a> <br />
        ©2013 Baidu 使用百度前必读 京ICP证030173号
    </div>
</body>

</html>
百度首页demo.html

猜你喜欢

转载自www.cnblogs.com/replaceroot/p/10532796.html