Day4
-
百度搜索界面的制作
效果如下
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body{
font-family: arial;
}
a{
color: #0000CC;
}
/*头部*/
#header{
width:100%;
text-align:end;
}
#img-baidu{
float: left;
height: 33px;
}
#shous-text {
height: 55px;
font-size:13px;
padding-top: 10px;
padding-right: 20px;
}
#shous-text a{
margin-left: 20px;
}
#content{
margin-top: 10px;
margin-left: 10px;
width:100%;
height:55px;
}
#content #searchitem input{
line-height:32px;
float:left;
width: 53%;
border:1px solid #000;
margin-left: 15px;
margin-top: 5px;
}
#content #shous #searchitem button{
background-color:#1E90FF;
color:#FFF;
width:90px;
height:34px;
float:left;
border:1px solid #1E90FF;
margin-top: 5px;
}
/*颈部*/
#title-baidu {
height: 38px;
width: 100%;
background-color:#f8f8f8;
border-top: 1px solid #ccc ;
border-bottom: 1px solid #ccc ;
}
#title-text {
margin-top: 7px;
margin-left: 85px;
width: 600px;
color: #666;
font-size: 14px;
}
#title-text span {
margin-left: 23px;
}
#title-text-1 span{
font-size: 12px;
color: #999;
}
/*身体*/
.body-baidu {
height: 100%;
padding-left: 6%;
}
.left-shou {
float: left;
width:50%;
}
.right-shou {
float: left;
padding-top: 50px;
width:300px;
}
#body-shou a {
color: #0000CC;
}
#neirou-right-bord {
border-left:1px solid #cccccc;
font-size: 13px;
height: 480px;
}
#neirou-right-bord div{
height: 15px;
margin-top: 10px;
padding-left: 10px;
}
#neirou-right-bord div a{
text-decoration:none;
}
#paiwei {
float: left;
height:14px ;
width: 14px;
color: #FFFFFF;
font-size: 12px;
text-align: center;
background-color: #8eb9f5;
}
#paiweikuan-bord {
border-bottom: 1px solid #F5F5F5;
padding-bottom: 12px;
}
#paiweikuan-bord a {
float: left;
}
</style>
<body>
<div>
<div id="header">
<div id="content">
<div id="shous" style="width: 65%;float: left;height: 55px">
<img id="img-baidu" src="img/badu-show-img/baidu_jgylogo3.gif" />
<div id="searchitem">
<input name="search" size="70" />
<button>百度一下</button>
</div>
</div>
<div id="shous-text">
<a href="#" style="color: #000000">百度首页</a>
<a href="#" style="color: #000000">设置</a>
<a href="#" style="color: #000000">登录</a>
</div>
</div>
</div>
<div id="title-baidu">
<div id="title-text">
<span id="title-text-span">网页</span>
<span id="title-text-span">资讯</span>
<span id="title-text-span">视频</span>
<span id="title-text-span">图片</span>
<span id="title-text-span">知道</span>
<span id="title-text-span">文库</span>
<span id="title-text-span">贴吧</span>
<span id="title-text-span">采购</span>
<span id="title-text-span">地图</span>
<span id="title-text-span">更多»</span>
</div>
</div>
<div class="body-baidu">
<div class="left-shou">
<div id="title-text-1" style="padding-top: 10px;margin-bottom: 10px;height: 30px;width: 100%">
<span>百度为您找到相关结果约9,700,000个</span><span style="color:#666;margin-left: 250px">¶搜索工具</span>
</div>
<div id="body-shou">
<a href="#">HTML 教程</a>
<p style="font-size: 13px;padding-right: 8%;margin-bottom: 5px;margin-top: 5px;color: #333333">在W3School 测试你的 HTML 技能! 开始HTML 测验!HTML 参考手册 在W3School,我们提供完整的 HTML 参考手册,其中包括标签、属性、颜色、实体等等。 HTML5 参考手册...</p>
<div style="font-size: 13px;">
<a style="color: green">https://www.w3school.com.cn/ht... ∇</a>
<span> - </span><a style="color: #666" href="">百度快照</a>
</div>
</div>
<div id="body-shou">
<a href="#">HTML 教程 | 菜鸟教程</a>
<p style="font-size: 13px;padding-right: 8%;margin-bottom: 5px;margin-top: 5px;color: #333333">
HTML 教程- (HTML5 标准) 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB ...
</p>
<div style="font-size: 13px;">
<a style="color: green">https://www.runoob.com/html/ht... ∇</a>
<span> - </span><a style="color: #666" href="">百度快照</a>
</div>
</div>
<div id="body-shou">
<a href="#">HTML5 - 随笔分类 - 梦想天空(山边小溪) - 博客园</a>
<p style="font-size: 13px;padding-right: 8%;margin-bottom: 5px;margin-top: 5px;color: #333333">
019年6月9日 - 摘要:梦想天空博客关注前端开发技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,...
</p>
<div style="font-size: 13px;">
<a style="color: green">https://www.cnblogs.com/lhb25/... ∇</a>
<span> - </span><a style="color: #666" href="">百度快照</a>
</div>
</div>
<div id="body-shou">
<a href="#">模板、网页模板、网站模板_站长素材</a>
<p style="font-size: 13px;padding-right: 8%;margin-bottom: 5px;margin-top: 5px;color: #333333">
提供各类模板下载:程序模板 网页模板 网站模板 个人网页模板 简历模板 个人网站模板 企业网站模板 flash网站模板 旅游网站模板模板免费素材下载
</p>
<div style="font-size: 13px;">
<a style="color: green">sc.chinaz.com/moban/ ∇</a>
<span> - </span><a style="color: #666" href="">百度快照</a>
</div>
</div>
<div id="body-shou">
<a href="#">HTML:HTML 快速入门 - CnPeng - 简书</a>
<p style="font-size: 13px;padding-right: 8%;margin-bottom: 5px;margin-top: 5px;color: #333333">
2018年8月22日 - <!DOCTYPE>位于文档的最前面,用于向浏览器说明当前.html文件使用的是哪种HTML或者XHTML标准规范。浏览器会按照此处指定的规范对html文件进行解析。...
</p>
<div style="font-size: 13px;">
<a style="color: green">简书社区 ∇</a>
<span> - </span><a style="color: #666" href="">百度快照</a>
</div>
</div>
<div id="body-shou">
<a href="#">HTML:HTML 快速入门 - CnPeng - 简书</a>
<p style="font-size: 13px;padding-right: 8%;margin-bottom: 5px;margin-top: 5px;color: #333333">
2018年8月22日 - <!DOCTYPE>位于文档的最前面,用于向浏览器说明当前.html文件使用的是哪种HTML或者XHTML标准规范。浏览器会按照此处指定的规范对html文件进行解析。...
</p>
<div style="font-size: 13px;">
<a style="color: green">简书社区 ∇</a>
<span> - </span><a style="color: #666" href="">百度快照</a>
</div>
</div>
<div id="body-shou">
<a href="#">HTML 表单 | 菜鸟教程</a>
<p style="font-size: 13px;padding-right: 8%;margin-bottom: 5px;margin-top: 5px;color: #333333">
HTML 表单和输入 HTML 表单用于收集不同类型的用户输入。 在线实例 创建文本字段 (Text field) 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本...
</p>
<div style="font-size: 13px;">
<a style="color: green">https://www.runoob.com/html/ht... ∇</a>
<span> - </span><a style="color: #666" href="">百度快照</a>
</div>
</div>
<div id="body-shou">
<a href="#">HTML(超文本标记语言) | MDN</a>
<p style="font-size: 13px;padding-right: 8%;margin-bottom: 5px;margin-top: 5px;color: #333333">
2019年8月24日 - HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描...
</p>
<div style="font-size: 13px;">
<a style="color: green">https://developer.mozilla.org/... ∇</a>
<span> - </span><a style="color: #666" href="">百度快照</a>
</div>
</div>
</div>
<div class="right-shou">
<div id="neirou-right-bord">
<div>
<div>
<span style="font-size: 14px"><b>搜索热点</b></span>
<a href="#" style="color: #0000CC;float: right">换一换</a>
</div>
<div id="paiweikuan-bord">
<span id="paiwei" style="background-color: red;">1</span><a href="#">周琦不敢出门见人</a><span style="float: right">1015万</span>
</div>
<div id="paiweikuan-bord">
<span id="paiwei" style="background-color: #ff8547;">2</span><a href="#">英内阁一大臣辞职</a><span style="float: right">921万</span>
</div>
<div id="paiweikuan-bord">
<span id="paiwei" style="background-color: #ffac38;">3</span><a href="#">中国男篮对战韩国</a><span style="float: right">602万</span>
</div>
<div id="paiweikuan-bord">
<span id="paiwei">4</span><a href="#">52岁保姆上吊身亡</a><span style="float: right">534万</span>
</div>
<div id="paiweikuan-bord">
<span id="paiwei">5</span><a href="#">陈赫赢了王思聪</a><span style="float: right">526万</span>
</div>
<div id="paiweikuan-bord">
<span id="paiwei">6</span><a href="#">李嫣晒爬山照</a><span style="float: right">446万</span>
</div>
<div id="paiweikuan-bord">
<span id="paiwei">7</span><a href="#">华尔街铜牛被砸</a><span style="float: right">425万</span>
</div>
<div id="paiweikuan-bord">
<span id="paiwei">8</span><a href="#">00后首夺大满贯</a><span style="float: right">424万</span>
</div>
<div id="paiweikuan-bord">
<span id="paiwei">9</span><a href="#">任嘉伦姐姐去世</a><span style="float: right">390万</span>
</div>
<div id="paiweikuan-bord">
<span id="paiwei">10</span><a href="#">海尔员工午休被开</a><span id="paiwei" style="background-color: red;float: left">新</span><span style="float: right">341万</span>
</div>
<div id="paiweikuan-bord">
<span id="paiwei">11</span><a href="#">华为P40或用鸿蒙</a><span style="float: right">320万</span>
</div>
<div >
<a style="float: right">查看更多>></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
