1.练习目的

练习使用html,scc,js

完成界面样式，用ul标签实现文本框下拉，通过js完成添加列表内容等功能

2.效果

3.程序代码

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>baidu</title>
  7.     <style>
  8.         div.list {
  9.             position: absolute;
  10.             margin: auto;
  11.             width: 550px;
  12.             height: 260px;
  13.             top: 150px;
  14.             left: 40px;
  15.         }
  17.         ul {
  18.             margin: 0;
  19.             padding: 0;
  20.         }
  22.         ul li {
  23.             width: 543px;
  24.             cursor: pointer;
  25.             position: relative;
  26.             padding: 2px 0 2px;
  27.             background: #ffffff;
  28.             color: rgb(71, 103, 150);
  29.             font-size: 15px;
  30.             transition: 0.2s;
  31.             -webkit-user-select: none;
  32.             -moz-user-select: none;
  33.             -ms-user-select: none;
  34.             user-select: none;
  35.             list-style-type: none;
  36.         }
  38.         ul li:hover {
  39.             background: #ddd;
  40.         }
  42.         input.inputer {
  43.             -web-kit-appearance: none;
  44.             -moz-appearance: none;
  45.             font-size: 1.4em;
  46.             height: 36px;
  47.             width: 540px;
  48.             border: 1px solid #c8cccf;
  49.             color: #6a6f77;
  50.             position: absolute;
  51.             margin: auto;
  52.             top: 110px;
  53.             left: 40px;
  54.         }
  56.         input[type=text]:focus {
  57.             border: #317EF3 1px solid;
  58.         }
  60.         div.search-bar {
  61.             width: 700px;
  62.             height: 700px;
  63.             position: absolute;
  64.             margin: auto;
  65.             top: 15%;
  66.             left: 0;
  67.             right: 0;
  68.         }
  70.         img.pic {
  71.             position: absolute;
  72.             margin: auto;
  73.             top: 0;
  74.             left: 0;
  75.             right: 0;
  76.         }
  78.         #button {
  79.             color: #FFF;
  80.             width: 100px;
  81.             height: 40px;
  82.             background: #317EF3;
  83.             border: 0px;
  84.             padding: 0px;
  85.             position: absolute;
  86.             margin: auto;
  87.             top: 110px;
  88.             left: 584px;
  89.         }
  91.         .ul1 li {
  92.             display: inline;
  93.             margin-right: 10px;
  94.         }
  96.         .topright {
  97.             float: right
  98.         }
  100.         .bottom {
  101.             height: 20px;
  102.             width: 500px;
  103.             position: absolute;
  104.             margin: auto;
  105.             left: 0;
  106.             right: 0;
  107.             bottom: 50px;
  108.         }
  109.     </style>
  110. </head>
  112. <body>
  113.     <div class="topright">
  114.         <ul class="ul1">
  115.             <li>
  116.                 <a href="www.baidu.com">糯米</a>
  117.             </li>
  118.             <li>
  119.                 <a href="www.baidu.com">新闻</a>
  120.             </li>
  121.             <li>
  122.                 <a href="www.baidu.com">hao123</a>
  123.             </li>
  124.             <li>
  125.                 <a href="www.baidu.com">地图</a>
  126.             </li>
  127.             <li>
  128.                 <a href="www.baidu.com">视频</a>
  129.             </li>
  130.             <li>
  131.                 <a href="www.baidu.com">贴吧</a>
  132.             </li>
  133.             <li>
  134.                 <a href="www.baidu.com">登录</a>
  135.             </li>
  136.             <li>
  137.                 <a href="www.baidu.com">设置</a>
  138.             </li>
  139.             <li></li>
  140.         </ul>
  141.     </div>
  142.     <div class="search-bar">
  143.         <img src="baidu.jpg" alt="" class="pic">
  144.         <input type="text" class="inputer" id="inputer" onfocus="display()" onblur="undisplay(this)">
  145.         <button class="btn-search" id="button" onclick="newElement()">百度一下</button>
  146.         <div class="list">
  147.             <ul class="dropdown-list" id="dropdown-list">
  148.                 <li>Coffee</li>
  149.                 <li>Milk</li>
  150.             </ul>
  151.         </div>
  152.     </div>
  153.     <div class="bottom">
  154.             &copy;2016 baidu<a href="http://www.baidu.com/duty/">使用百度前必读</a> 京ICP证030173号
  155.     </div>
  156. </body>
  157. <script>
  158.     var list = document.getElementById("dropdown-list");
  159.     var input = document.getElementById("inputer");
  160.     window.onload = function () { list.style.display = "none"; }
  161.     input.addEventListener("click", display);
  162.     function newElement() {
  163.         var li = document.createElement("li");
  164.         var inputValue = input.value;
  165.         var t = document.createTextNode(inputValue);
  166.         li.appendChild(t);
  167.         if (inputValue != '') {
  168.             list.appendChild(li);
  169.         }
  170.         input.value = "";
  171.     }
  172.     function display() {
  173.         list.style.display = "";
  174.     }
  175.     function undisplay(x) {
  176.         var y;
  177.         var i;
  178.         var obj_lis = list.getElementsByTagName("li");
  179.         for (i = 0; i < obj_lis.length; i++) {
  180.             obj_lis[i].onclick = function () {
  181.                 x.value = this.innerHTML;
  182.             }
  183.         }
  184.         setTimeout(function () { list.style.display = "none"; }, 200);
  185.     }
  186. </script>
  188. </html>

4.总结

通过短期的学习，对html、css、js有了一些了解，但是发现要把众多的元素组合起来实现效果比想象的还要复杂，需要学习和积累。

练习html,css,js仿制百度首页的更多相关文章

  1. 2019.4.9 HTML+CSS写静态百度首页

    静态百度首页 4.10更新 更改所有样式为内部引入 换行全部换成使用边距实现 链接:https://pan.baidu.com/s/1iFNnQNw4PUtdj3MjlV-LZA 提取码:5b2i

  2. html+css 百度首页练习

    这几天看完了<css权威指南>,写了个百度页面,不带js的纯静态,主要目的就是掌握页面布局,字体颜色之类的没有深究. 写完了觉得很简单,毕竟一开始觉得只要模仿的像就行,但是缩小了浏览器窗口 ...

  3. 模仿百度首页“元宵节汤圆”动图（js的定时任务：setInterval）

    模仿百度首页“元宵节汤圆”动图:(js的定时任务:setInterval) 原理:需要一张切图,通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画 效果图: 切图地址: https://ss1 ...

  4. 一款基于jQuery的仿百度首页滑动选项卡

    今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   ...

  5. CSS&JS定位器

    一.CssSelector定位器 1.概述 CssSelector是效率很高的元素定位方法,Selenium官网的Document里极力推荐使用CSS locator,而不是XPath来定位元素,原因 ...

  6. 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  7. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  8. html布局小练习（百度首页）

    绝对定位百度首页练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  9. vs合并压缩css,js插件——Bundler & Minifier

    之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...

随机推荐

  1. Angular记录(7)

    文档资料 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_fun ...

  2. HDU 2717(* bfs)

    题意是在一个数轴上,每次可以一步到达当前位置数值的 2 倍的位置或者数值 +1 或数值 -1 的位置,给定 n 和 k,问从数值为 n 的位置最少多少步可以到达数值为 k 的位置. 用广搜的方法,把已 ...

  3. 079、监控利器 sysdig （2019-04-26 周五）

    参考https://www.cnblogs.com/CloudMan6/p/7646995.html   sysdig 是一个轻量级的系统监控工具,同时他还原生支持容器.通过sysdig我们可以近距离 ...

  4. 打开即时通讯服务器openfire的大门

    1.什么是即时通讯 你现在最常用的软件是什么,如果我没有猜错,应该是QQ和微信,是的,他们就是即时通讯软件. 一个可以让你无时无刻,只要有网络就能够沟通的工具,就是即时通讯工具.那么本教程,我们主要以 ...

  5. Redis的集群搭建

    一.集群的搭建 1.准备工作 (1)安装ruby环境 redis集群管理工具redis-trib.rb依赖ruby环境,首先需要安装ruby环境: yum -y install ruby yum -y ...

  6. Element-UI标签页el-tabs组件的拖动排序实现

    ElementUI的标签页组件支持动态添加删除,如下图: 但是这个组件不支持标签之间的拖动排序.那么我们自己怎样实现这个功能呢? 有一个叫vuedraggable的组件(https://github. ...

  7. LeetCode第十五题-找出数组中三数和为0的答案

    3Sum 问题简介: 给定n个整数的数组nums,是否有元素a,b,c在nums中,使a + b + c = 0? 找到数组中所有唯一的三元组,它们的总和为零 注:解决方案集不得包含重复的三元组 例如 ...

  8. 基于Spring注解搭建SpringMVC项目

    在2018寒冬,我下岗了,因为我的左脚先迈进了公司的大门.这不是重点,重点是我扑到了老板小姨子的怀里. 网上好多教程都是基于XML的SpringMVC,想找一篇注解的,但是写的很模糊,我刚好学到这里, ...

  9. Java位运算原理及使用讲解

    前言日常开发中位运算不是很常用,但是巧妙的使用位运算可以大量减少运行开销,优化算法.举个例子,翻转操作比较常见,比如初始值为1,操作一次变为0,再操作一次变为1.可能的做法是使用三木运算符,判断原始值 ...

  10. 结合jira搭建自动化测试平台

    mysql 语句查看 python manage.py sqlmigrate your_app_name 0001 代码如下 #coding=utf8 #https://jira.readthedoc ...