<!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. js对象和jQuery对象的区别

    (1)js对象的三种基本定位方式 (A)通过ID属性:document.getElementById() (B)通过NAME属性:document.getElementsByName() (C)通过标 ...

  2. Handler注意事项

    一. Handler与Thread的区别. Handler与调用者处于同一线程,如果Handler里面做耗时的动作,调用者线程会阻塞.Android UI操作不是线程安全的,并且这些操作必须在UI线程 ...

  3. java程序引用别的jar包打包方法

    参考文章:http://www.cnblogs.com/lanxuezaipiao/p/3291641.html 目前亲测:eclipse打包: 1.不需要手动写mainfest.inf 先利用ecl ...

  4. 通过反射将一个java对象的属性值转换为一个Map

    将一个java对象的属性值转换为一个Map: import java.beans.BeanInfo;import java.beans.Introspector;import java.beans.P ...

  5. RTSP协议-中文定义

    RTSP协议-中文定义 转自:http://blog.csdn.net/arau_sh/article/details/2982914 E-mail:bryanj@163.com 译者: Bryan. ...

  6. Spring策略模式的实现

    场景: 有时候一个业务方法有多个实现类,需要根据特定的情形进行业务处理. 例如:商店支付,我们可以使用支付宝.微信扫描农行.xxx行的快捷支付(而不是微信支付.支付宝支付二维码)购买商品. 实现代码( ...

  7. Spring Boot启动的报错 Stopping service [Tomcat]

    我遇到的问题是项目中使用java_websocket的WebSocketClient,由于性能要求,需要再Controller直接继承WebSocketClient, 在项目启动过程中调试进入spri ...

  8. Linux系统管理_主题02 ：管好文件（1）_2.2 列出文件和文件属性_chmod_ls

     用户(user)是能够获取系统资源的权限的集合.Linux 中的用户可 以分为三类: 1. 根用户(root):具有系统全部权限的用户: 2. 普通用户:其使用系统的权限受到一定限制: 3. 系统 ...

  9. 【使用新版mysql驱动的改变】---记忆犹新

    关于 版本的问题: 之前安装数据库的时候  安装的mysql 8.0  脚本文件来自5.7 的数据库 maven版本3.5.3 jdk1.8 tomcat 9 跑maven项目的时候  遇到各种问题 ...

  10. HTML5 a标签的down属性进行图片下载

    a标签中的down属性时HTML5新增的属性,此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件.目前该属性的兼容性如下: 具体代码实现: /* 主要原理:利用a标签的do ...