<!DOCTYPE html>
<html lang="en">
<head>
<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>百度</title>
<link rel="stylesheet" href="baidu.css">
</head>
<body>
<header>
<div class="header">
&nbsp;&nbsp;成都： 28℃&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;良&nbsp;&nbsp;53&nbsp;&nbsp;|&nbsp;&nbsp;<u>换肤</u>&nbsp;&nbsp;&nbsp;&nbsp;<u>消息</u>&nbsp;&nbsp;&nbsp;&nbsp;<u>显示频道</u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>新闻</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>hao123</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>地图</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>视频</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>贴吧</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>学术</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>设置</u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div class="gd"><b>&nbsp;更多产品</b></div>
</header>
<section>
<div class="tp">
<img class="tutu" src="baidu.png">
</div>
<div class="section">
<div class="srk">
<div class="baidu">百度一下</div>
<div class="png">
<img src="camera.png">
</div>
</div>
</div>
</section>
<footer>
<div class="footer">
<div class="sy"><u>设为首页</u>&nbsp;&nbsp;©2019&nbsp;Baidu&nbsp;<u>使用百度前必读</u>&nbsp;<u>意见反馈</u>&nbsp;京ICP证030173号
<br>京公网安备11000002000001号</div>
</div>
</footer>
</body>
</html>
 
.header{
background-color: #ffffff;
color: #435862;
font-size: 10px;
border-bottom: 1px solid #ebebeb;
border-left: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
line-height: 20px;
}
.tutu{
margin: auto;
display: block;
padding-top: 151px;
width: 170px;
height: 55px;
}
.tp{
width: 100%;
}
.section{
width: 100%;
}
.srk{
margin: auto;
display: block;
margin-top: 30px;
border: 1px solid #b7b7b7;
line-height: 35px;
width: 530px;
height: 29px;
}
.baidu{
color: white;
background-color: #3389ff;
width: 100px;
height: 31px;
text-align: center;
float: right;
margin-top: -1px;
margin-right: -1px;
margin-bottom: 2px;
}
.png{
float: right;
padding-right: 10px;
padding-top: 1px;
}
.footer{
width: 100%;
}
.sy{
margin: auto;
display: block;
margin-top: 300px;
position: absolute;
left: 620px;
font-size: 10px;
color: #b7b7b7;
text-align: center;
line-height: 20px;
}
.gd{
line-height: 20px;
font-size: 11px;
color: white;
background-color: #3389ff;
width: 60px;
height: 24px;
position: absolute;
right: 5px;
top: 0;
padding-top: 5px;
padding-left: 5px;
}

html和css制作百度界面的更多相关文章

  1. Adobe Edge Animate –使用css制作菜单

    Adobe Edge Animate –使用css制作菜单 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 效果图:

  2. 个人练习：使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...

  3. 【转】CSS制作图形速查表-存档

      http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...

  4. 利用Java EE里jsp制作登录界面

    jsp连接数据库.百度经验. 1.在新建的Project中右键新建Floder 2.创建名为lib的包 3.创建完毕之后的工程目录 4.接下来解压你下载的mysql的jar包,拷贝其中的.jar文件 ...

  5. electron制作聊天界面(仿制qq)

    效果图: 样式使用scss和flex布局 这也是制作IM系统的最后一个界面了!在制作之前参考了qq和千牛 需要注意的点 qq将滚动条美化了 而且在无操作的情况下是不会显示的 滚动条美化 ::-webk ...

  6. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  7. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  8. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  9. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

随机推荐

  1. Graphics 使用一点点注意

    Form_Load 事件下绘制的结果会被 paint 刷新掉.也就等于没有绘制一样. Graphics g = this.CreateGraphics(); g.DrawRectangle(new P ...

  2. 转 MySQL: Starting MySQL….. ERROR! The server quit without updating PID file解决办法

    http://blog.sina.com.cn/s/blog_637e04c9010117ri.html 1 问题 [root@localhost mysql]# /etc/rc.d/init.d/m ...

  3. requestLibrary API

    requestLibrary API Keyword Arguments Documentation Create Ntlm Session alias, url, auth, headers={}, ...

  4. spring-boot集成6：集成redis实现字典缓存功能

    Why redis? redis是基于内存的key-value系统,可以用作缓存中间件或者消息中间件,spring-boot提供了方便的方式和redis集成. 1.maven依赖 <!--red ...

  5. CAN总线多节点通信异常分析及解决

    一.CAN物理层特征 CAN收发器的作用是负责逻辑电平和信号电平之间的转换.即从CAN控制芯片输出逻辑电平到CAN收发器,然后经过CAN收发器内部转换将逻辑电平转换为差分信号输出到CAN总线上,CAN ...

  6. python-linux-集群nginx

    一命令基本格式 ----cd ~ 家 ----cd / 根 ---cd ..  上级 ----pwd  当前路径 ----ls -l   -a  -h ----权限rwxrwxrwx  755 二文件 ...

  7. lower_bound( )和upper_bound( )的常见用法

    lower_bound( )和upper_bound( )都是利用二分查找的方法在一个排好序的数组中进行查找的. 在从小到大的排序数组中, lower_bound( begin,end,num):从数 ...

  8. Python动态地声明变量赋值

    通过exec().globals()和locals() # 通过exec() for i in range(1, 4): # 第一次循环 i=1 时,会执行字符串中的python语句 ex1 = &q ...

  9. Origin

    1.简单的使用 http://wenku.baidu.com/link?url=K1ThI9a-Ws_Rk28K28kBEc9uNRN7k4vHV4pxfieMCaLeA4rGotRAnk8fxCUm ...

  10. Linux-android 模拟器使用

    1.把sdcard挂载到一个文件夹 mkdir sdcard sudo mount -o loop sdcard.img sdcard 日志在sdcard下lm-kill文件下查看 注解: http: ...