模拟百度首页
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度首页</title>
<link rel="stylesheet" href="../CSS/baidu.css" >
<!--引入标题图片-->
<link href="../img/pas.ico" rel="shortcut icon">
</head>
<body>
<!--模拟百度首页-->
<div id="header">
<ul id="header_nav">
<li><a href="http://news.baidu.com/" name="" class="">新闻</a></li>
<li><a href="https://www.hao123.com/">hao123</a></li>
<li><a href="https://map.baidu.com">地图</a></li>
<li><a href="http://v.baidu.com/">视频</a></li>
<li><a href="https://tieba.baidu.com">贴吧</a></li>
<li><a href="http://xueshu.baidu.com/">学术</a></li>
<li><a href="" class="login" name="lb">登录</a></li>
<li><a href="" class="set" name="ss">设置</a></li>
</ul>
</div>
<!--网页主体部分-->
<div id="main">
<img src="../img/baidu.png">
<form action="https://www.baidu.com/s" method="get" id="main_input"><!--action是？之前的提交地址，method的get是获取的？后面的键值对-->
<input id="inp" type="text" name="wd"><!--wd是输入的字符串对应的键，而我们输入的字符串为值-->
<input id="inp_text" type="submit" value="百度一下"><!--提交给action-->
</form>
</div>
<div id="footer">
<div >
<img src="../img/bbu.png" id="erv">
<br>
<b>百度</b>
</div>
<div id="footer_href">
<a href="https://www.baidu.com/cache/sethelp/help.html" name="" class="">把百度设为主页</a>
<a href="http://home.baidu.com/">关于百度</a>
<a href="http://ir.baidu.com/phoenix.zhtml">About Baidu</a>
<a href="http://e.baidu.com/">百度推广</a>
<br>
@2019 Baidu<a href="https://www.baidu.com/duty/">使用百度前必读</a>
<a href="http://jianyi.baidu.com/">意见反馈</a>
京ICP证030173号<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号 </a>
</div>
</div>
</body>
</html>
CSS外部声明代码
/*去掉内外边距*/
*{margin: 0;padding: 0;}
/*设置网页导航栏大小*/
#header{width: 100%;height: 45px}
/*设置子标签的样式*/
#header_nav{position: absolute;top: 25px;right: 90px}
/*给子标签添加浮动,并且删除无序列表的小黑点,并设置a标签之间的间距*/
#header_nav li{float: left;list-style: none;margin-left: 24px}
/*为a标签添加颜色,字体大小,比重,行高*/
#header_nav li a{color: #333333;font-size: 13px;font-weight: 700;line-height: 24px}
/*设置网页主题不分大小*/
#main{width: 100%;height: 384px; text-align: center}
#main img{margin-top: 60px ;width: 269px;height: 92px;margin-bottom: 21px}
/*设置搜索框对象*/
input[type=text]{height: 34px;width: 539px;border: solid 1px #4992ff;background-image: url("../img/inp1.png");background-repeat: no-repeat;background-position-x:500px;background-position-y: -1px}
input[type=submit]{height: 36px;width: 100px; font-size: 15px;color: #fff;background-color: #2d78f4;border: solid #2d78f4;letter-spacing: 1px;position: relative;right: 5px;top: 1px;}
/*设置网页底部大小*/
#footer{width: 100%;height: 206px;text-align: center}
/*给二维码添加样式*/
#erv{width: 65px;height: 65px;margin-top: 8px}
/*给百度两个字添加字体大小格式*/
b{font-size: 13px;}
/*给子div标签添加行高,字体大小,及其位置*/
#footer_href{line-height: 30px; font-size: 11px;margin-top: 15px}
/*给a标签中的字体添加颜色和字体间距*/
#footer_href a{color: gray;margin-left: 11px;}
/*使用伪类选择器给超链接标签添加颜色改变样式*/
#header_nav li a:hover{color: darkblue}
显示效果:
省略了右边栏的js.png
网友评论