用Html模仿百度一下你就知道
用Html模仿百度一下你就知道、、、、
-------------------------------
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style text="text/css"> .top{ width:100%; height:64px;} .top>.title{ height:64px; float:right;} .top>.title>span{ line-height:64px; float:right;} .top>.title>span>a{ font-size:13px; font-family:"宋体"; text-decoration:underline; color:#333} .top>.title>span>.bold{ font-weight:bold;} .list{ border:0; height:25px; width:60px; background:#36F; color:#fff;} <!-----> .logo{ height:130px; width:270px; text-align:center;} .search{ text-align:center;} .input{ width:540px; height:36px;} .btn{ border:0; width:100px; height:40px; background:#36F; font-size:15px; color:#fff;} <!------> .foot{width:100%; position:absolute; bottom:100px;} .foot>.link{ text-align:center; margin-bottom:10px;} .foot>.link>a{ font-size:12px; font-family:"宋体"; text-decoration:underline;} .copyright{ text-align:center;} p,p>a{ font-size:12px; font-family:"宋体"; color:#666;} </style> </head> <body > <div class="top" > <div class="title"> <span> <a class="bold" href="#">新闻</a> <a class="bold" href="#">hao123</a> <a class="bold" href="#">地图</a> <a class="bold" href="#">视频</a> <a class="bold" href="#">贴吧</a> <a href="#">登陆</a> <a href="#">设置</a> <input class="list" type="submit" value="更多产品" name="submit" /> </span> </div> </div> <!-----> <div class="body" > <div align="center" class="pic"> <img class="logo" src="bd_logo1.png" /> </div> <div class="search"> <form> <label for="search"></label> <input class="input" type="text" name="search" id="search" value="" /><input class="btn" type="submit" value="百度一下" name="submit" /> </form> </div> </div> <!-----> <div class="foot"> <div class="link"> <a href="#">把百度设为主页</a> <a href="#">关于百度</a> <a href="#">About Baidu</a> </div> <div class="copyright"> <p> ©2015 Baidu <a href="#">使用百度前必读</a> <a href="#">意见反馈</a> 京ICP证030173号 </p> </div> </div> <!-----> </body> </html>
用到的图片:
-----------------------------------------
------------------------------------------------------
--------------------------------------------------------------------
用Html模仿百度一下你就知道的更多相关文章
- java开发_模仿百度文库_OpenOffice2PDF_注意事项
在模仿百度文库的操作过程中,有很多朋友反映出来的一些问题,是我想起了写这篇blog. 主要是让大家在做的过程中注意一些东西,否则达不到想要的效果. 第一步:我们先从 java开发_模仿百度文库_Ope ...
- 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框
使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- 模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果)
模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...
- 模仿百度首页“元宵节汤圆”动图(js的定时任务:setInterval)
模仿百度首页“元宵节汤圆”动图:(js的定时任务:setInterval) 原理:需要一张切图,通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画 效果图: 切图地址: https://ss1 ...
- C# Winform模仿百度日历
想写博客不知道从何处开始,就从回忆开始吧. 第一个就从自定义日历控件开始 产生背景: 大概2015年时候有个项目要用到日历,用默认日历展示给用户看,用户毫不客气都说界面太丑,最好做成像百度日历那样方便 ...
- css模仿百度首页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 运用html常用标签和css定位等学做模仿百度导航页面
导航部分文字链接,鼠标触碰变颜色,除百度logo引用图片外,其它均代码编写.注释部分是一开始用的百度一下截图做的按钮,后来用div填充颜色写了一个按钮.效果图如下. HTML代码如下: <!DO ...
- ajax 模仿百度下拉
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- VUE模仿百度搜索框,按上下方向键及回车键实现搜索选中效果
逻辑介绍: 1.表单获取焦点时,显示搜索建议框 2.输入内容时,请求后台接口,并将返回的数据展示在搜索建议框内 3.表单获取焦点情况下,按键盘上下箭头可实现搜索列表项的切换,按回车可以选择当前激活的选 ...
随机推荐
- Iterator、for..of,for...in和自定义遍历器**
Iterator.for..of,for...in和自定义遍历器 Iterator: var arr = [1,2,3,4,5]; var ite = arr[Symbol.iterator](); ...
- 通过添加filter过滤器 彻底解决ajax 跨域问题
1.在web.xml添加filter <filter> <filter-name>contextfilter</filter-name> <filter-cl ...
- 用caffe一步一步实现人脸检测
学习深度学习已有一段时间了,总想着拿它做点什么,今天终于完成了一个基于caffe的人脸检测,这篇博文将告诉你怎样通过caffe一步步实现人脸检测.本文主要参考唐宇迪老师的教程,在这里感谢老师的辛勤付出 ...
- nyoj_762:第k个互质数
题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=762 直接给代码好了,容斥原理具体看<组合数学> #include<bi ...
- Docker初步了解
Docker 是什么 https://www.docker.com/ Docker 这个单词英文原意是码头工人,搬运工的意思,这个搬运工搬运的是各种应用的容器. 官方的说法是,Docker 是提供给开 ...
- DNS,TCP,IP,HTTP,socket,Servlet概念整理
DNS,TCP,IP,HTTP,socket,Servlet概念整理 常见的协议虽然很容易理解,但是看了之后过一段时间不看还是容易忘,笔记如下,比较零碎,勉强供各位复习.如有错误欢迎指正. D ...
- (转)rpm安装和卸载软件
场景:在Linux中经常需要安装一些rpm软件,但是有时候安装失误就需要卸载这些软件包. 1 过程记录 1.1 安装 rpm -i 需要安装的包文件名 举例如下: rpm -i example.rpm ...
- swift3.0 基础练习-构造对象并按要求进行排序(struct)
struct练手 构造10个学生(要求有学生的姓名.数学成绩.英语成绩),按照学生英语和数学平均分的成绩从小到大输出学生的姓名.数学成绩.英语成绩及平均分 创建一个学生构造体,包含 姓名 name 数 ...
- HTML随笔1
1.编号列表: <ol type="A" start="1"> //type中有"A","1",&qu ...
- [js高手之路] es6系列教程 - 箭头函数详解
箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过n ...