练习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 ...
随机推荐
- Vue打包优化之分析工具webpack-bundle-analyzer
// 1. 安装 cnpm install webpack-bundle-analyzer --save-dev // 2. 在/build/webpack.prod.conf.js文件中引入 con ...
- 转载---JavaScript执行机制
很好的一篇文章,原地址 JavaScript执行机制 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不 ...
- VMware 安装 Mac OS 注意事项
Ø 简介 本文主要介绍使用 VMware 安装 Mac OS 的注意事项,主要包括一下内容: 1. 安装参考 2. 使用 VMware 运行 Mac OS 虚拟机注意事项 3. 解决 M ...
- git知识总结-3.gitignore文件说明
1.前言 一般我们总会有些文件无需纳入 Git 的管理,也不希望它们总出现在未跟踪文件列表. 通常都是些自动生成的文件,比如日志文件,或者编译过程中创建的临时文件等. 在这种情况下,我们可以创建一个名 ...
- 爬虫 http原理,梨视频,github登陆实例,requests请求参数小总结
回顾:http协议基于请求响应的方式,请求:请求首行 请求头{'keys':vales} 请求体 :响应:响应首行,响应头{'keys':'vales'},响应体. import socket soc ...
- Gitlab_ansible_jenkins三剑客③Ansible的安装及使用
一台服务器可能会安装不同的python应用,不同的应用可能使用的模块版本不同,如果都安装在同样的环境下容易冲突,为了避免冲突,引入virtualenv 这个包管理工具进行环境的隔离 使用pip安装之前 ...
- mysql 锁的现象和解决
2018-12-3 14:43:11 星期一 数据库锁了的现象: 一个进程进程一直在尝试更新, 而且杀不掉, 重启mysql以后还是会有; 一个update语句执行了很久; 写的业务都不可以, 查询也 ...
- C++ opentracing zipkin
Useful page : https://github.com/openzipkin/b3-propagation & other official websites Steps to ru ...
- Oracle 数据库监听无法连接上、监听HANG住、监听无响应、TNS-12560
环境: Windows server 2003 Oracle 11.2.0.1 问题: 一套老数据库在运行了很久后,突然就连接不上了,提示监听异常. 处理: 1.CMD命令行检查监听状态:无监听 2. ...
- python学习：一
第三章:实践题作业 1.编写一个名为 collatz()的函数,它有一个名为 number 的参数.如果参数是偶数,那么 collatz()就打印出 number // 2, 并返回该值.如果 num ...