第一个网页框架（自己的百度）

最新推荐文章于 2022-06-01 05:30:00 发布

赵不懂

最新推荐文章于 2022-06-01 05:30:00 发布

阅读量1.1k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_33351410/article/details/51912469

版权

html 专栏收录该内容

3 篇文章 3 订阅

订阅专栏

由于是顺带学习的，也没想多深入，所以就用的记事本做的开发工具。
现在桌面新建index.html文件，css,images文件夹
css文件夹里面存放index.css文件
images文件夹里面存放图片资源
话不多说，直接上代码

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" >
    <title>百度一下，你就知道</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="content">
        <!--LOGO-->
        <div class="logo">
            <img src="image/bd_logo1.png">
        </div>
        <!--导航-->
        <div class="nav">
            <ul>
            <li><a href="#">新闻</a></li>
            <li><a href="#" class="active">网页</a></li>
            <li><a href="#">贴吧</a></li>
            <li><a href="#">知道</a></li>
            <li><a href="#">音乐</a></li>
            <li><a href="#">图片</a></li>
            <li><a href="#">视频</a></li>
            <li><a href="#">地图</a></li>
            <li><a href="#">百科</a></li>
            <li><a href="#">文库</a></li>
            <li><a href="#">更多>></a></li>
            </ul>
        </div>
        <!--搜索框-->
        <div class="search">
            <input>
            <button>百度一下</button>
        </div>
    </div>
</body>
</html>

index.css

body{
    background-image:url("../image/bg.jpg");
    background-size: 100% 750px;
}

.content{
    width: 700px;
    margin:50px auto 0px;
}
.content .logo{
    text-align: center;
}

.content .logo img{
    width:270px;
    height:129px;
}

.content .nav ul{
    list-style: none; /*取出左边的圆点*/
    text-align: center;
}
.content .nav ul li{
    display: inline;
    margin-left:5px;
    margin-right:5px;
}

.content .nav ul li a{
    color:white;
    font-size:16px;
}

.content .nav ul li a.active{
    text-decoration :none; /*去除文件底部的下划线*/
    color:blue;
}

.content .search{
    text-align: center;
}

.content .search input{
    width:500px;
    height:22px;
    margin-top:6px;
    margin-left:7px;
    offset-top:6px;
    offset-left:7px;
    font-size:14px;
    border-left:1px solid #ddd;
    border-top:1px solid #ddd;
    border-bottm:1px solid #ddd;
    border-right:0px;
}

.content .search input:focus{
    border:0px;/*去除文本框蓝色边框*/
}

.content .search button{
    width: 80px;
    height: 26px;
    background-color: white;
    border: 1px solid #ddd;
}


/* 非块级元素水平居中：设置父标签的text-align:center;*/
/* 块级元素居中，设置自己的margin；0px auto;*/

注意：用记事本保存的时候编码要改为utf-8的编码。