<!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. wait_timeout 和 interactive_timeout

    wait_timeout 和 interactive_timeout Table of Contents 1. 参数说明 2. 原代码 3. interactive_timeout覆盖wait_tim ...

  2. EclipseADT编写单元测试代码的步骤

    1. 写一个类 extends AndroidTestCase 2. 写一个测试方法    a.必须是public     b.必须抛出异常给操作系统 public void textAdd()thr ...

  3. 用python做线性规划

    scipy.optimize.linprog(c, A_ub=None, b_ub=None, A_eq=None, b_eq=None, bounds=None, method='simplex', ...

  4. 树莓派(Linux)添加USB外接硬盘

    1.显示系统的硬盘设备以及分区 sudo fdisk -l 显示设备名,例如/dev/sda1 2.树莓派默认不支持NTFS文件系统,如果需要支持则要安装相应的软件包 sudo apt-get ins ...

  5. DRF之APIView源码解析

    目录 Django项目中的代码如下 APIView源码解析 源码解析总结 Django项目中的代码如下 urls.py中: from django.conf.urls import url from ...

  6. CentOS7安装openjdk8+环境变量配置

    CentOS7安装openjdk8+环境变量配置 步骤: 使用yum命令安装openjdk yum clean yum install -y java-1.8.0-openjdk-1.8.0.212. ...

  7. 安装vsftpd

    通用安装和配置 1.下载安装包并安装 wget http://mirror.centos.org/centos/7/os/x86_64/Packages/vsftpd-3.0.2-25.el7.x86 ...

  8. button与subit区别

    submit介绍   submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了.如果表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常都必须把su ...

  9. MySQL知识篇-nmon监控

    说明1:监控MySQL服务器资源不止一种方式,这种nmon监控图形化.历史记录查询笔记方便,便于MySQL优化后,对比其效率不同,资源利用率不同. 说明2:摘抄自https://www.cnblogs ...

  10. 【FFMPEG】使用ffmpeg类库打开流媒体

    版权声明:本文为博主原创文章,未经博主允许不得转载. 使用ffmpeg类库进行开发的时候,打开流媒体(或本地文件)的函数是avformat_open_input(). 其中打开网络流的话,前面要加上函 ...