编程题:
1.仿照百度首页,自己动手还原出来(仿站是初学者最佳的实践方式,而百度首页往往是最适合初学者联系的第一个页面)。
我们来看看百度首页:
1)用VS2013新建ASP.NET空网站,添加新项,建立名称为baidu的HTML文件,向其加入以下代码:
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title>百度一下,你就知道</title>
<link rel="stylesheet" type="text/css" href="css/baidu.css">
</head>
<body>
<div class="top">
<a href="http://news.baidu.com/"><span>新闻</span></a>
<a href="http://www.hao123.com/"><span>hao123</span></a>
<a href="http://map.baidu.com/"><span>地图</span></a>
<a href="http://v.baidu.com/i"><span>视频</span></a>
<a href="http://tieba.baidu.com/"><span>贴吧</span></a>
<a href="http://xueshu.baidu.com/"><span>学术</span></a>
<a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F">登录</a>
<a href="#" class="below">设置</a>
<button class="more">更多产品</button>
<div class="menu">
<div class="inner">
<span class="memo">搜索设置</span>
<span class="memo">高级搜索</span>
<span class="memo">关闭预测</span>
<span class="memo">搜索历史</span>
</div>
</div>
</div>
<div class="main">
<div class="midden">
<img src="img/baidu.png" alt="百度LOGO">
</div>
<div class="count">
<input type="text" id="text" οnfοcus="style" />
<input type="submit" class="button" value="百度一下" />
</div>
</div>
<div class="footing">
<div class="about">
<a href="https://www.baidu.com/cache/sethelp/help.html">把百度设为主页</a>
<a href="http://home.baidu.com">关于百度</a>
<a href="http://ir.baidu.com">About Baidu</a>
<a href="http://e.baidu.com/?refer=888">百度推广</a>
</div>
<div class="info">
<span class="copyright">©2017 Baidu</span>
<a href="http://www.baidu.com/duty/"class="copyright">使用百度必读</a>
<a href="http://jianyi.baidu.com/" class="copyright">意见反馈</a>
<span class="copyright">京ICP证030173号</span>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" class="copyright">京网公安备11000002000001号</a>
<img src="img/jinghui.png" class="gongan" alt="警徽" />
</div>
</div>
</body>
</html>
2)建立名称为baidu的css文件,向其加入以下代码:
body {
margin: 0px;
padding: 0px;
}
.top {
margin-top: 20px;
text-align: right;
}
.top a {
color: #333;
font-size: 13px;
margin-right: 10px;
}
.top a span {
font-weight: bold;
}
.top a:hover {
color: #0909F7;
}
.menu {
display: none;
background-color: red;
margin-left: 90.5%;
margin-top: .5%;
font-size: 15px;
position: relative;
float: right;
left: -66px;
top: -7px;
width: 80px;
height: 115px;
background-image: url(img/memu.png);
}
.inner {
position: relative;
left: -15px;
top: 15px;
}
.more {
height: 30px;
width: 75px;
background-color: #3385FF;
font-size: 12px;
color: #FFF;
border: solid;
}
.midden {
margin-top: 7%;
text-align: center;
}
.midden img {
width: 270px;
height: 129px;
}
.count {
margin-top: 20px;
text-align: center;
}
#text {
width: 540px;
height: 30px;
font-size: 16px;
}
.button {
height: 44px;
width: 100px;
background-color: #3385FF;
font-size: 15px;
color: #FFF;
border: solid;
margin-left: -10px;
border-style: none\9;
height: 36px\9;
}
.button:hover {
cursor: pointer;
}
.footing {
text-align: center;
margin-top: 24%;
}
.about a {
color: silver;
font-size: 12px;
}
.info {
margin-top:6px;
}
.copyright {
color:silver;
font-size: 12px;
}
.gongan {
width: 15px;
height: 15px;
}
项目结构如下所示:
点F5,运行结果如下所示:
以上代码参考来源于互联网。