您的位置：首页 > Web前端 > JavaScript

Web前端开发精品课HTML CSS JavaScript基础教程第二十三章课后编程题答案

2017-12-08 17:10 1481 查看
编程题：

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" onfocus="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，运行结果如下所示：



以上代码参考来源于互联网。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航