您的位置：首页 > 其它

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

2016-07-14 20:08 357 查看

由于是顺带学习的，也没想多深入，所以就用的记事本做的开发工具。

现在桌面新建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的编码。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航