练习html,css,js仿制百度首页
1.练习目的
练习使用html,scc,js
完成界面样式，用ul标签实现文本框下拉，通过js完成添加列表内容等功能
2.效果
3.程序代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>baidu</title>
<style>
div.list {
position: absolute;
margin: auto;
width: 550px;
height: 260px;
top: 150px;
left: 40px;
}
ul {
margin: 0;
padding: 0;
}
ul li {
width: 543px;
cursor: pointer;
position: relative;
padding: 2px 0 2px;
background: #ffffff;
color: rgb(71, 103, 150);
font-size: 15px;
transition: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
list-style-type: none;
}
ul li:hover {
background: #ddd;
}
input.inputer {
-web-kit-appearance: none;
-moz-appearance: none;
font-size: 1.4em;
height: 36px;
width: 540px;
border: 1px solid #c8cccf;
color: #6a6f77;
position: absolute;
margin: auto;
top: 110px;
left: 40px;
}
input[type=text]:focus {
border: #317EF3 1px solid;
}
div.search-bar {
width: 700px;
height: 700px;
position: absolute;
margin: auto;
top: 15%;
left: 0;
right: 0;
}
img.pic {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
}
#button {
color: #FFF;
width: 100px;
height: 40px;
background: #317EF3;
border: 0px;
padding: 0px;
position: absolute;
margin: auto;
top: 110px;
left: 584px;
}
.ul1 li {
display: inline;
margin-right: 10px;
}
.topright {
float: right
}
.bottom {
height: 20px;
width: 500px;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 50px;
}
</style>
</head>
<body>
<div class="topright">
<ul class="ul1">
<li>
<a href="www.baidu.com">糯米</a>
</li>
<li>
<a href="www.baidu.com">新闻</a>
</li>
<li>
<a href="www.baidu.com">hao123</a>
</li>
<li>
<a href="www.baidu.com">地图</a>
</li>
<li>
<a href="www.baidu.com">视频</a>
</li>
<li>
<a href="www.baidu.com">贴吧</a>
</li>
<li>
<a href="www.baidu.com">登录</a>
</li>
<li>
<a href="www.baidu.com">设置</a>
</li>
<li></li>
</ul>
</div>
<div class="search-bar">
<img src="baidu.jpg" alt="" class="pic">
<input type="text" class="inputer" id="inputer" onfocus="display()" onblur="undisplay(this)">
<button class="btn-search" id="button" onclick="newElement()">百度一下</button>
<div class="list">
<ul class="dropdown-list" id="dropdown-list">
<li>Coffee</li>
<li>Milk</li>
</ul>
</div>
</div>
<div class="bottom">
©2016 baidu<a href="http://www.baidu.com/duty/">使用百度前必读</a> 京ICP证030173号
</div>
</body>
<script>
var list = document.getElementById("dropdown-list");
var input = document.getElementById("inputer");
window.onload = function () { list.style.display = "none"; }
input.addEventListener("click", display);
function newElement() {
var li = document.createElement("li");
var inputValue = input.value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue != '') {
list.appendChild(li);
}
input.value = "";
}
function display() {
list.style.display = "";
}
function undisplay(x) {
var y;
var i;
var obj_lis = list.getElementsByTagName("li");
for (i = 0; i < obj_lis.length; i++) {
obj_lis[i].onclick = function () {
x.value = this.innerHTML;
}
}
setTimeout(function () { list.style.display = "none"; }, 200);
}
</script>
</html>
4.总结
通过短期的学习，对html、css、js有了一些了解，但是发现要把众多的元素组合起来实现效果比想象的还要复杂，需要学习和积累。
练习html,css,js仿制百度首页的更多相关文章
- 2019.4.9 HTML+CSS写静态百度首页
静态百度首页 4.10更新 更改所有样式为内部引入 换行全部换成使用边距实现 链接:https://pan.baidu.com/s/1iFNnQNw4PUtdj3MjlV-LZA 提取码:5b2i
- html+css 百度首页练习
这几天看完了<css权威指南>,写了个百度页面,不带js的纯静态,主要目的就是掌握页面布局,字体颜色之类的没有深究. 写完了觉得很简单,毕竟一开始觉得只要模仿的像就行,但是缩小了浏览器窗口 ...
- 模仿百度首页“元宵节汤圆”动图（js的定时任务：setInterval）
模仿百度首页“元宵节汤圆”动图:(js的定时任务:setInterval) 原理:需要一张切图,通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画 效果图: 切图地址: https://ss1 ...
- 一款基于jQuery的仿百度首页滑动选项卡
今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- CSS&JS定位器
一.CssSelector定位器 1.概述 CssSelector是效率很高的元素定位方法,Selenium官网的Document里极力推荐使用CSS locator,而不是XPath来定位元素,原因 ...
- 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）
模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...
- html布局小练习（百度首页）
绝对定位百度首页练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- vs合并压缩css,js插件——Bundler & Minifier
之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...
随机推荐
- datable中table.row() not a funtion 解决方法
解决办法一: 改为.DataTable({ (初始化时候) 解决办法二: 或者改为var data = myTable.api().row( this ).data();(获取值的时候)
- ModBus-RTU详解
Modbus 一个工业上常用的通讯协议.一种通讯约定.Modbus协议包括RTU.ASCII.TCP.其中MODBUS-RTU最常用,比较简单,在单片机上很容易实现.虽然RTU比较简单,但是看协议 ...
- Android AVD启动报错： This AVD's configuration is missing a kernel file! Please ensure the file "kernel-qemu" is in the same location as your system image.
启动Android SDK manager重新下载安装
- luogu P3810 三维偏序（陌上花开）cdq分治
题目链接 思路 对一维排序后,使用$cdq$分治,以类似归并排序的方法处理的二维,对于满足$a[i].b \leq a[j].b$的点对,用树状数组维护$a[i].c$的数量.当遇到$a[i].b&g ...
- 20165337《网络对抗技术》week1 Exp0 Kali安装
1.下载kali kali官网:https://www.kali.org 在官网中下载,并且在VMvare里打开 2.修改视图 进去之后虚拟机界面很小,需要修改视图来调整 3.网络设置 4.文件夹共享 ...
- Numpy 多维数组简介
 NumPy是一个功能强大的Python库,主要用于对多维数组执行计算.NumPy这个词来源于两个单词-- Numerical和Python.NumPy提供了大量的库函数和操作,可以帮助程序员轻松地 ...
- 使用Mermaid画图
流程图的示例 时序图的示例 甘特图的示例 FAQ 很多时候,你想解释自己的想法/代码,但是用语言来表达会很啰嗦,并且读者也不易理解.一般这种情况下,我们都会想使用图解来解释.但是,我们也不会想下载那些 ...
- Resharper使用详解(转)
万恶的360文档 解除复制的限制 Ctrl + Shift + i 打开控制台,也可以鼠标右键,选最后一个检查也可以打开控制台,输入: setInterval = null; //将内置无限循环函数设 ...
- Linux库多重依赖
源文件: //world.cpp #include <stdio.h> void world(void) { printf("world.\n"); } //hello ...
- Zypper常用命令
Zypper是OpenSUSE和企业版SUSE中软件包管理器ZYpp的命令行接口. 主要用于:1.管理软件包:zypper可用来安装.删除.更新和查询本地或远程的软件包.2.管理仓库:zypper可用 ...