话不多说 !!!
直接上代码!!!!
<!DOCTYPE html>
<html lang="ch_CN">
<head>
<meta charset="UTF-8">
<title>百度首页</title>
<style type="text/css">
.top{
/*border: 1px solid blue;*/
width: 100%;
height: 64px;
}
.top>.title{
/*border: 1px solid blue;*/
height: 64px;
float: right;
}
.top>.title>span{
/*border: 1px solid red;*/
line-height: 64px; //line-height 属性 表示设置行高
}
.top>.title>span>a{
/*border: 1px solid black;*/
color: black ;
font-size: 15px ; //font-size 属性 表示设置字体
font-family: "宋体" ; //font-family 属性 表示设置字体样式
text-decoration: underline ; //text-decoration 属性 规定添加到文本的修饰,下划线,上划线,删除线等。
//text-decoration 属性的值:
//none 默认。定义标准的文本。
//underline 定义文本下的一条线。
//overline 定义文本上的一条线。
//line-through 定义穿过文本的一条线。
//blink 定义闪烁的文本。
//inherit 规定应该从父元素继承text-decoration属性的值。
}
.top>.title>span>.body{
font-weight: bold; //font-weight 属性 规定字体的粗细
//值 normal 默认值。定义标准的字符。
//值 bold 定义粗体字符。
//值 bolder 定义更粗的字符。
//值 lighter 定义更细的字符。
//值 100 200 300 400 500 600 700 800 900 定义由细到粗的字符。400等同于normal,而700等同于bold。
//值 inherit 规定应该从父元素继承字体的粗细。
}
.body>.picture{
/*border: 1px solid red;*/
text-align:center; //text-align 属性 指定元素文本的水平对其方式。
margin-bottom: 36px; //设置元素的下外边距。
/*//left 把文本排列到左边。默认值:由浏览器决定。*/
/*//right 把文本排列到右边。*/
/*//center 把文本排列到中间。*/
/*//justify 实现两端对其文本效果。*/
/*//inherit 规定应该从父元素继承text-align 属性的值。*/
}
.body>.search{
/*border: 1px solid blue;*/
text-align: center;
}
.body>.search>.abc>.input{
width: 540px;
height: 36px;
}
.body>.search>.abc>.btn{
width: 100px;
height: 43px;
margin-top: 10px;
background: blue;
color: white;
font-size: 13px;
}
.foot{
/*border: 1px solid red;*/
width: 100%;
position: absolute;
bottom: 100px;
}
.foot>.link{
/*border: 1px solid green;*/
text-align: center;
margin-bottom: 5px;
}
.foot>.link>a{
font-size: 15px;
font-family: "宋体";
text-decoration: underline;
}
.foot>.footer{
/*border: 1px solid blue;*/
text-align: center;
font-size: 15px;
font-family: "宋体";
}
.font>.footer>a{
text-decoration: underline;
color: blue;
}
#btn{
background: blue;
color: white;
font-size: 1px;
width: 50px;
height: 30px;
}
</style>
</head>
<body>
<div class="top">
<div class="title">
<span>
<a class="body" href="https://www.baidu" >新闻</a>
<a class="body" href="https://www.baidu">hao123</a>
<a class="body" href="https://www.baidu">地图</a>
<a class="body" href="https://www.baidu">直播</a>
<a class="body" href="https://www.baidu">视频</a>
<a class="body" href="https://www.baidu">贴吧</a>
<a class="body" href="https://www.baidu">学术</a>
<a href="https://www.baidu">更多</a>
<button id="btn">设置</button>
<button id="btn">登录</button>
</span>
</div>
</div>
<div class="body">
<div class="picture">
<image src="/baiduWeb/baidupicture.png" widht="540" height="258"/>
</div>
<div class="search">
<from class="abc" action="https://www.baidu/?tn=21002492_16_hao_pg">
<label for="search"></label>
<input class="input" type="text" name="search" id="search" value=""/><input class="btn" type="submit" value="百度一下" name="submit"/>
</from>
</div>
</div>
<div class="foot">
<div class="link">
<a href="">把百度设为主页</a>
<a href="">关于百度</a>
<a href="">About Baidu</a>
</div>
<div class="footer">
©2015 Baidu
<a href="">使用百度前必读</a>
<a href="">意见反馈</a>
京ICP证030173号
</div>
</div>
</body>
</html>
更多推荐
HTML和CSS制作的简单百度网页
发布评论