原图:

仿照的效果图:

源代码为:

<!DOCTYPE html&gt;
<html lang="en">

<head class="ui semantic">
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<!-- //<meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
<title>baidu</title>
<link href="http://ox6yf62u0.bkt.clouddn.com/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet">
<script src="http://ox6yf62u0.bkt.clouddn.com/jquery-2.1.4.min.js"></script>
<script src="http://ox6yf62u0.bkt.clouddn.com/semantic-ui/2.2.13/semantic.min.js"></script>
<style>
.topheader>a {
padding-right: 15px;
color: black;
background-color: #fff;
/* text-decoration:underline; */
font-weight: bold;
}

a {
text-decoration: underline;
color: rgba(109, 99, 99, 0.76);
font-size: 5px;
}

.bri {
display: inline-block;

right: 10px;
width: 60px;
height: 23px;

color: #fff;
background: #38f;
line-height: 24px;
font-size: 13px;
text-align: center;
overflow: hidden;
/*border-bottom: 1px solid #38f;*/
margin-left: 19px;
margin-right: 2px;
}
</style>
</head>

<body>
<!-- top link start -->
<div class="ui right aligned topheader fluid container" style="padding: 30px">
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#">学术</a>
<a href="#">登录</a>
<a href="#">设置</a>
<div href="#" class="bri" style1="background-color: rgba(7, 28, 219, 0.952);text-decoration: none;color:white;padding-right: 0;display:inline-block;width:70px;height:15px;">更多产品</div>
</div>
<!-- top link end -->
<div class="ui centered aligned grid container ">
<div class="row">
<div class="column" style="width: 270px;height: 129px;">
<img class="ui image" src="https://www.baidu.com/img/bd_logo1.png" alt="">
</div>
</div>
<div class="row">
<form class="column" style="width:640px;" method="GET" action="https://www.baidu.com/s" name="search">
<div class="ui fluid input action">
<input type="text" name="wd" placeholder="搜索...">
<button class="medium ui blue button" οnclick="document.forms['search'].submit();">百度一下</button>
</div>
</form>
</div>
</div>
<div class="ui one column center aligned stackable grid ">
<div class="column" style="padding-top: 140px;font-weight: bold;color:rgba(71, 66, 66, 0.822)">
<img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" alt="">
</br>手机百度
</div>
<div class="column" style="color:rgba(109, 99, 99, 0.76);font-size:5px">
<a href="#">把百度设为首页</a>
<a href="#">关于百度</a>
<a href="#">about baidu</a>
<a href="#">百度推广</a>
</br>
©2017 Baidu
<a href="#" style="text-decoration-line:underline">使用百度前必读</a>
<a href="#" style="text-decoration-line: underline">意见反馈</a>> 京ICP证030173号
<i class="marker icon"></i> 京公网安备11000002000001号
</div>
</div>
</body>

</html>

转载于:https://www.cnblogs.com/hanx/p/10591981.html

1700802088 韩晓忠相关推荐

  1. 香港中文大学(深圳)韩晓光教授招收三维数字人方向博士生

    来源:AI求职 香港中文大学(深圳) 香港中文大学(深圳)是一所经国家教育部批准,按中外合作办学条例设立的大学.大学传承香港中文大学的办学理念,优良学术传统,以"结合传统与现代,融会中国与西 ...

  2. 香港中文大学(深圳)韩晓光博士团队招聘博士后和工程师多名

    点击上方,选择星标或置顶,不定期资源大放送! 阅读大概需要15分钟 Follow小博主,每天更新前沿干货 转载自:PaperWeekly 韩晓光博士现为香港中文大学(深圳)助理教授.其研究方向包括计算 ...

  3. 博士申请 | 港中深韩晓光课题组招收与华为中央媒体院联合培养博士生

    合适的工作难找?最新的招聘信息也不知道? AI 求职为大家精选人工智能领域最新鲜的招聘信息,助你先人一步投递,快人一步入职! 香港中文大学(深圳) 香港中文大学(深圳)以创建一所立足中国.面向世界的一 ...

  4. 港中深、华为联合培养,韩晓光课题组招收三维视觉数字人方向博士生

    来源:机器之心 学校简介 香港中文大学(深圳)以创建一所立足中国.面向世界的一流研究型大学为己任,办学特色是国际化的氛围.中英并重的教学环境.书院制传统.通识教育.新型交叉学科设置和以学生为本的育人理 ...

  5. 夏新李晓忠辞职的启示:做品牌者先死么?

    导读: 文/磐石之心 摘要:看到夏新李晓忠总裁的辞职,笔者倍感可惜,看到国产手机份额的持续下降,以及利润的降低,倍感无奈,看到国产手机新军放弃品牌只求销量,笔者痛心疾首,到底国产手机的出路在何方?希望 ...

  6. 程序员开发什么小程序挣钱_作为程序员赚钱的5种独特方式

    程序员开发什么小程序挣钱 1.赚钱报告错误 (1. Make money reporting bugs) You can earn money by helping other companies f ...

  7. 面向对象及软件工程——团队作业2

    一.队伍成员 队长: 沈凤岐1700802033 队员: 苏鹏飞1700802017 陈朗1700802023 党虎飞1700802025 NABCD模型: 1) N (Need 需求) 现在,随着社 ...

  8. 面向对象及软件工程——团队作业3

    一. 代码规范 代码规范可以分成两个部分: a. 代码风格规范 主要是文字上的规定,看似表面文章,实际上非常重要. b. 代码设计规范 牵涉到程序设计.模块之间的联系.设计模式等方方面面的通用原则. ...

  9. 【学术快报】韩世辉课题组在《eLife》发表论文揭示群体冲突中复仇的神经生物学机制...

    来源:脑科学 在群体冲突中,看到对手伤害自己的队友会激发报复行为,去攻击对手.这一复杂社会行为贯穿人类历史,阐明其机理具有重要科学意义和社会价值.心理学研究提出对"内群体的爱"(i ...

最新文章

  1. 计算机改名后无法上网,CDEF磁盘分区无法修改名字修复方法
  2. jquery jcrop java_jcrop基本参数一览
  3. 求职Python开发,面试官最喜欢问的几个问题
  4. 深入浅出解释FFT(六)——深入理解fft变换
  5. [LeetCode] Isomorphic Strings - 字符串操作:数组计数字符个数问题
  6. 【LOJ166】拉格朗日插值2【拉格朗日插值】【NTT卷积】
  7. java null转换jason_常见java问题及解决办法汇总(干货可收藏)
  8. 函数式编程4-高阶函数
  9. 矩形窗函数的频谱图_读书笔记6-单频矩形脉冲信号
  10. 如何在引导程序中将容器垂直对齐
  11. Exescope等打开DLL,导出函数名称混乱的问题
  12. tv盒子管理助手android版本,TV盒子工具 管理电视盒子的好助手
  13. pyside6的MQTT客户端
  14. 协议将电子邮件交付服务器,什么协议用于将电子邮件交付给Internet上的邮件服务器?...
  15. 大企崛起的唯一“真相”!
  16. 练习 fullpage
  17. contiki学习笔记(三)contiki系统
  18. page_to_pfn 、virt_to_page、 virt_to_phys、page、页帧pfn、内核虚拟地址、物理内存地址linux内核源码详解
  19. tomcat7绿色版服务配置
  20. sketch插件开发_适用于Web开发人员的10个免费Sketch插件

热门文章

  1. 千道Java面试真题整理系列:MySQL灵魂五十问,在遇面试也不怕.
  2. 【转载】Python第三方库资源
  3. ionic3 生命周期方法
  4. WGCNA那么多图,都啥意思? 官网
  5. 【转】.NET引用Excel操作时无法关闭Excel.exe进程的解决方法
  6. 【其它】visio画泳道图/跨职能流程图
  7. 钉钉群添加机器人推送消息
  8. c#中的反射的高级语法_Kubernetes第3部分中的seccomp新语法以及一些高级主题
  9. 微信公众平台开发之微商城
  10. 模糊控制——(3)模糊自适应整定PID控制