本周总结 前端第二次作业 模仿制作百度界面
2024-04-06 18:56:41
前端第二次作业：
制作百度界面：
https://www.baidu.com/
要求：
模仿制作，相似度达99%。
仿照https://www.runoob.com/css/css-tutorial.html
1、源代码
HTML:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度一下，你就知道</title><link rel="stylesheet" href="baidu.css">
</head>
<body><!--头部开始--><div class="header"><ul class="left"><li class="li_1"><a href="http://news.baidu.com" target="_blank">新闻</a></li><li class="li_1"><a href="https://www.hao123.com?src=from_pc" target="_blank">hao123</a></li><li class="li_1"><a href="http://map.baidu.com" target="_blank">地图</a></li><li class="li_1"><a href="http://tieba.baidu.com/" target="_blank">贴吧</a></li><li class="li_1"><a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频</a></li><li class="li_1"><a href="http://image.baidu.com/" target="_blank">图片</a></li><li class="li_1"><a href="https://pan.baidu.com?from=1026962h" target="_blank">网盘</a></li><li class="li_1" id="more_list"><div id="more_wrap"> <a href="http://www.baidu.com/more/" target="_blank">更多</a><div id="more_box"><ul><li class="more_li"><img src="data:images/zhidao.png" alt=""><div class="tag_more">知到</div></li><li class="more_li"><img src="data:images/baike.png" alt=""><div class="tag_more">百科</div></li><li class="more_li"><img src="data:images/fanyi.png" alt=""><div class="tag_more">翻译</div></li><li class="more_li"><img src="data:images/jiankang.png" alt=""><div class="tag_more">健康</div></li><li class="more_li"><img src="data:images/wenku.png" alt=""><div class="tag_more">文库</div></li><li class="more_li"><img src="data:images/xueshu.png" alt=""><div class="tag_more">学术</div></li><li class="more_li"><img src="data:images/yinyue.png" alt=""><div class="tag_more">音乐</div></li></ul></div></div></li></ul><div class="right"><div id="more_li"><span class="r_btn1"><a href="">设置</a></span><div id="more_menu"><ul><li><a href="">搜索设置</a></li><li><a href="">高级搜索</a></li><li><a href="">关闭预测</a></li><li><a href="">隐私设置</a></li><li><a href="">关闭热搜</a></li></ul></div></div><a class="r_btn2" href="">登录</a></div></div><!--头部结束--><!--主体部分开始--><div class="box"><div><div><img src="data:images/baidu_logo.png" alt="百度logo" title="百度一下，你就知道" class="imges"></div><form action="http://www.baidu.com/" target="_blank"><span><input type="text"></input><input type="submit" id="submit_size" value="百度一下" /></input></span></form><!-- 百度热搜和换一换 --><div class="isindex-wrap"><div class="hotandchange"><div class="hotserch">百度热搜<span class="r">></span></div><div class="change"><span><img src="data:images/转换.png" class="changeimg"></span><span><a href="" class="changeA">换一换</a></span></div></div></div></div><!-- 热搜内容 --><div><div class="baiduhot"><div class="left-hot"><ul><li class="title-content-title"><span class="top1">1</span><a href="https://www.baidu.com/s?wd=%E4%B8%8A%E6%B5%B7%E6%96%B0%E5%A2%9E%E6%9C%AC%E5%9C%9F88%2B770+%E6%97%A0%E6%AD%BB%E4%BA%A1%E7%97%85%E4%BE%8B&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">上海新增本土88+770 无死亡病例</a><span class="re">热</span></li><li class="title-content-title"><span class="top2">2</span><a href="https://www.baidu.com/s?wd=520&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">520</a><span class="xin">新</span></li><li class="title-content-title"><span class="top3">3</span><a class="title-content c-link c-font-medium c-line-clamp1 tag-width" href="https://www.baidu.com/s?wd=%E4%B8%AD%E5%9B%BD%E9%98%9F%E6%AD%A3%E5%BC%8F%E9%80%92%E8%A1%A5%E4%B8%9C%E4%BA%AC%E5%A5%A5%E8%BF%90%E6%8E%A5%E5%8A%9B%E9%93%9C%E7%89%8C&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">中国队正式递补东京奥运接力铜牌</a><span class="re">热</span></li></ul></div><div class="right-hot"><ul><li class="title-content-title1"><span class="other-top">4</span><a href="https://www.baidu.com/s?wd=%E4%B8%93%E5%AE%B6%E5%9B%9E%E5%BA%94%E4%B8%8D%E5%BB%BA%E8%AE%AE%E6%8E%8F%E7%A9%BA6%E4%B8%AA%E9%92%B1%E5%8C%85%E5%87%91%E9%A6%96%E4%BB%98&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">专家回应不建议掏空6个钱包凑首付</a><span class="xin">新</span></li><li class="title-content-title1"><span class="other-top">5</span><a href="https://www.baidu.com/s?wd=%E9%83%91%E5%B7%9E%E4%B8%80%E8%80%81%E5%B8%88%E6%BC%8F%E6%8E%8915%E5%90%8D%E8%80%83%E7%94%9F%E9%AB%98%E8%80%83%E6%8A%A5%E5%90%8D&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">郑州一老师漏掉15名考生高考报名</a><span class="re">热</span></li><li class="title-content-title1"><span class="other-top">6</span><a href="https://www.baidu.com/s?wd=%E8%81%94%E5%90%88%E5%9B%BD%EF%BC%9A17%E4%BA%BF%E4%BA%BA%E6%88%96%E9%9D%A2%E4%B8%B4%E7%B2%AE%E9%A3%9F%E5%8D%B1%E6%9C%BA&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">联合国：17亿人或面临粮食危机</a><span class="re">热</span></li></ul></div></div></div></div><!--主体部分结束--><!--底部开始--><div class="bottom"><div class="bottom_l"><ul><li><a href="https://home.baidu.com/" target="_blank">关于百度</a></li><li><a href="http://ir.baidu.com" target="_blank">About Baidu</a></li><li><a href="https://www.baidu.com/duty" target="_blank">使用百度前必读</a></li><li><a href="https://help.baidu.com/" target="_blank">帮助中心</a></li><li><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001"target="_blank">京公网安备11000002000001号</a></li><li><a href="https://beian.miit.gov.cn" target="_blank">京ICP证030173号</a></li><li><span>©2022Baidu</span></li><li><span>互联网药品信息服务资格证书 (京)-经营性-2017-0020</span></li><li><a href="http://www.baidu.com/licence/" target="_blank">信息网络传播视听节目许可证 0110516</li></ul></div></div><!--底部结束-->
</body></html>CSS:
/* 清除默认效果 */
* {padding: 0;margin: 0;color: #222;
}a {text-decoration: none;
}/* 头部导航 */
a:hover {color: #4e71f2;
}li {list-style: none;
}.header {height: 60px;line-height: 60px;text-align: center;
}/* 左侧导航栏 */
.header .left {float: left;position: absolute;left: 0px;top: 0px;z-index: 100;padding-left: 24px;
}.header .li_1 {float: left;font: 13px/23px Arial, sans-serif;color: #222;position: relative;margin-right: 24px;margin-top: 19px;/* display: inline-block; */}/* 右侧导航栏 */
.header .right {position: absolute;right: 0px;top: 0px;z-index: 100;height: 60px;padding-right: 24px;padding-left: 200px;float: right;}.right #more_li {color: #222;position: relative;margin-right: 24px;display: inline-block;font-size: 13px;
}.header .right .r_btn1 {display: inline-block;vertical-align: top;cursor: pointer;
}.right #more_menu {display: none;position: absolute;top: 48px;width: 84px;line-height: 23px;text-align: center;box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .15);border-radius: 12px;
}.right #more_menu li {margin-top: 9px;
}#more_li:hover #more_menu {display: block;
}.header .right .r_btn2 {display: inline-block;margin-top: 19px;background-color: #4e71f2;padding-left: 2px;font-size: 14px;height: 24px;width: 48px;color: #fff;line-height: 24px;border-radius: 6px;}#more_wrap {position: relative;display: block;
}#more_box {display: none;position: absolute;right: -12px;top: 30px;width: 300px;height: 223px;line-height: 15px;text-align: center;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);border-radius: 12px;background-color: #fff;/*box-shadow: 10 10;*/
}#more_box li {margin-left: 18px;
}#more_list:hover #more_box {display: block;
}#more_box img {height: 42px;width: 42px;border: 1px solid rgba(0, 0, 0, .03);border-radius: 12px;
}.tag_more {width: 42px;text-align: center;
}.more_li {float: left;line-height: 24px;margin-left: 12px;margin-right: 12px;margin-top: 16px;}/* 主体部分 */.box {width: 654px;height: 44px;margin: 200px auto 100px;position: relative;
}/* 输入框 */
input {outline: none;border: 2px solid #a7aab5;height: 44px;width: 550px;box-sizing: border-box;text-indent: 0px;font-size: 16px;border-radius: 10px 0 0 10px;
}/* 输入框聚焦 */
input:focus {color: #000;background-color: #fff;border-color: #4e6ef2 !important;height: 90px;border-radius: 10px 0 10px 10px;
}/* 百度一下 */
#submit_size {height: 44px;width: 108px;border: none;color: white;box-sizing: border-box;background-color: #4e6ef2;position: absolute;left: 550px;border-radius: 0 10px 10px 0;cursor: pointer;
}/* 百度图标 */.imges {text-align: center;display: inline-block;width: 270px;height: 129px;margin-left: -135px;position: absolute;top: -140px;left: 327px;
}/* 百度热搜和换一换 */
.isindex-wrap {width: 654px;height: 24px;margin-top: 45px;position: relative;text-align: left;
}.hotandchange {font-size: 14px;width: 654px;height: 24px;text-align: left;
}.hotserch {position: relative;float: left;font-weight: bold;line-height: 24px;
}.r {color: #8a8a8a;
}.changeimg {color: #8a8a8a;width: 16px;height: 16px;
}.change {position: relative;color: #8a8a8a;float: right;
}.changeA {color: #8a8a8a;
}.baiduhot div {width: 50%;overflow: hidden;float: left;line-height: 32px;
}.title-content-title {margin-right: 20px;float: left;height: 36px;line-height: 36px;font-size: 16px;
}.title-content-title1 {margin-left: 20px;float: left;height: 36px;line-height: 36px;font-size: 16px;
}.right-hot {float: right;line-height: 20px;
}.top1 {color: #fe2d46;
}.top2 {color: #f60;
}.top3 {color: #faa90e;
}.other-top {background: 0 0;color: #9195a3;
}.re {display: inline-block;width: 16px;height: 16px;background-color: rgb(255, 102, 0);color: aliceblue;font-size: 12px;text-align: center;border-radius: 4px;line-height: 16px;
}.xin {display: inline-block;width: 16px;height: 16px;background-color: rgb(255, 69, 91);color: aliceblue;font-size: 12px;text-align: center;border-radius: 4px;line-height: 16px;
}.shang {background-color: rgba(38, 90, 246, 0.84);display: inline-block;width: 16px;height: 16px;color: aliceblue;font-size: 12px;text-align: center;border-radius: 4px;line-height: 16px;
}/* 底部 */
.bottom {width: 100%;height: 40px;position: fixed;bottom: 0;background-color: #fbfbfb;line-height: 40px;font-size: 12px;
}.bottom_l li a {float: left;padding-left: 14px;color: #9195a3;
}.bottom_l li a:hover {color: #222;
}.bottom_l li span {float: left;padding-left: 14px;color: #9195a3;
}2、效果图
本周总结 前端第二次作业 模仿制作百度界面相关推荐
- 软件工程第二次作业——模仿网站
我以我的JS发誓 我以我的解释器宣告 将世界上所有的HTML汇聚 将世界上应有之css样式改变 集中所有的解释器和JS 将这网页为我所用 the Teleport Ultra 倾听我内心的愿望 让它实 ...
- web前端期末大作业——网页制作基础大二dw作业——动画漫展学习资料电影模板(6页)
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- 软件工程第二次作业——模仿主流网站：搜狗输入法
源码链接:https://gitee.com/tangjiahao/2017_software_engineering.git 原网页链接:https://pinyin.sogou.com/ 原网站: ...
- 第二次作业，制作调查问卷
网页搜索问卷星官网,注册账号之后进入主页面.点击创建问卷. 进入页面后点击创建按钮进行新页面的创建, 并输入问卷的调查名称 创建的新问卷 在工具栏中进行题型的选择(填空题) 对填空题进行编辑 在工具栏 ...
- 【web前端期末大作业】制作一个HTML+CSS保护动物宠物网页
- Android Studio 制作微信界面 下
主界面 上一篇文章的链接: Android Studio 制作微信界面 上_nazonomaster的博客-CSDN博客https://blog.csdn.net/nazonomaster/artic ...
- HTML5期末大作业：漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 计算机毕设网页设计源码
HTML5期末大作业:漫画网站设计--海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 计算机毕设网页设计源码 常见网页设计作业题材有 个 ...
- 学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
- web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
最新文章
- java中正则表达式要进行转义的字符。
- 探寻用户自定义定时任务的实践方案
- android sqlite 多对多,SQLite多对多的关系？
- php 流量,PHP 流量控制语句的顶替语法
- 徐明星解读区块链与物联网的重要联系
- python处理中文编码问题总结
- VS2017不能打开stdio.h等文件
- 微机计算机原理及应用马义德,微型计算机原理及应用答案讲述.doc
- WPF中监听剪贴板存在的Bug：OpenClipboard HRESULT:0x800401D0 (CLIPBRD_E_CANT_OPEN))错误
- 思科路由器的基本配置
- netty(7)--UDP实战
- ECPC-2015部分题解
- Vue中$emit()方法和props属性的区别与应用
- excel筛选中文或者筛选数字
- 操作系统学习笔记（五）---进程同步
- Microsoft Surface
- 微带线特性阻抗计算公式_几种计算微带线特性阻抗的方法.pdf
- 交互设计笔记（4）——理解用户：定性研究
- 居家办公以外一些有意思的事
- 八皇后问题（dfs）