html第一次尝试(百度页面)

时间:2022-01-21 07:24:26

最近学了html和css,于是就找了个百度页面案例来练练手

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>百度一下,你就知道</title>
<style type="text/css" media="screen">
.top{
    width:100%;
    height:64px;
    margin-top:17px;
}
.top>.title{
    height:64px;
    float:right;
}
.top>.title>a{
    font-size:13.5px;
    font-family:"宋体";
    color:black;
    text-decoration:underline;
}
.top>.title>.bold{
    font-weight:bold;
}
.top>.title>.list{
    border:0;
    height:25px;
    width:60px;
    background:#06F;
    color:#fff;
}
.pic{
    text-align:center;
    margin-top:25px;
}
.search{
    text-align:center;
    margin-top:20px;
}
.input{
    width:540px;
    height:30px;
}
.btn{
    border:0;
    width:100px;
    height:36px;
    background:#06F;
    font-size:15px;
    color:#fff;
}
.bottom-one{
    text-align:center;
    margin-top:220px;
}
.page1{
    font-size:12px;
    font-family:"微软雅黑";
    font-weight:bold;
    color:#666;
    margin-top:0px;
}
.bottom-two{
    text-align:center;
    margin-top:17px;
}
.page2{
    font-size:12px;
    font-family:"微软雅黑";
    color:#999;
    text-decoration:underline;
}
.page3{
    font-size:12px;
    font-family:"微软雅黑";
    color:#999;
}
</style>
</head>
<body>
    <div class="top">
        <div class="title">
            <a class="bold" href="#">新闻</a>&nbsp;&nbsp;&nbsp;
            <a class="bold" href="#">hao123</a>&nbsp;&nbsp;&nbsp;
            <a class="bold" href="#">地图</a>&nbsp;&nbsp;&nbsp;
            <a class="bold" href="#">视频</a>&nbsp;&nbsp;&nbsp;
            <a class="bold" href="#">贴吧</a>&nbsp;&nbsp;&nbsp;
            <a class="bold" href="#">学术</a>&nbsp;&nbsp;&nbsp;
            <a href="#">登录</a>&nbsp;&nbsp;&nbsp;
            <a href="#">设置</a>&nbsp;&nbsp;&nbsp;
            <input class="list" type="submit" value="更多产品" name="submit" />&nbsp;
        </div>
    </div>
    <div class="body">
        <div class="pic">
            <img src="log.png" width="233px" height="83">
        </div>
    </div>
    <div class="search">
        <from>
            <label for="search"></label>
            <input class="input" type="text" name="search" id="search"><input class="btn" type="submit" name="submit" value="百度一下" name="submit">
        </from>
    </div>
    <div class="bottom-one">
        <img src="2.png" width="62" height="62">
        <br />
        <p class="page1">手机百度</p>
    </div>
    <div class="bottom-two">
        <a class="page2" href="#">把百度设为主页</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a class="page2" href="#">关于百度</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a class="page2" href="#">About BaiDu</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a class="page2" href="#">百度推广</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
        <span class="page3">©2017 Baidu</span>
        <a class="page2" href="#">使用百度前必读</a>
        <span class="page3">京ICP证030173号 </span>&nbsp;&nbsp;&nbsp;
        <a class="page2" href="#">京公网安备11000002000001号</a>
    </div>
</body>
</html>

效果并不是很好,还有百度页面在笔记本和台式机的显示不一样,哎真是学的太浅什么都不懂,以后有时间再改吧

推荐学习基础网站:http://www.imooc.com/learn/9

   w3school  可以查基本语法