前端知识复习：JS选中变色

上篇文章 ：前端知识复习：Html DIV 图文混排（文字放在图片下边）

Js选中图片效果

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title></title>
    <style type="text/css">
        img {
            width:200px;
            height:200px;
        }
        .list li {
            float: left;
            display: inline;
            margin: 5px;
        }
        .p{
            text-align:center;
        }
        #div_img1 {
            padding-bottom: 50px;
        }
    </style>
 </head>
 <body>

     <div>
         <center><h1>图文混排</h1></center>
         <div id="div_img1">
             <ul class="list">
                 <li>
                     <img src="portfolio/1.jpg" align="bottom">
                     <div class="p">秀丽的风景1</div>
                 </li>
                 <li>
                     <img src="portfolio/2.jpg" align="bottom">
                     <div class="p">秀丽的风景2</div>
                 </li>
                 <li>
                     <img src="portfolio/3.jpg" align="bottom">
                     <div class="p">秀丽的风景3</div>
                 </li>
                 <li>
                     <img src="portfolio/4.jpg" align="bottom">
                     <div class="p">秀丽的风景4</div>
                 </li>
                 <li>
                     <img src="portfolio/5.jpg" align="bottom">
                     <div class="p">秀丽的风景5</div>
                 </li>

                 <li>
                     <img src="portfolio/6.jpg" align="bottom">
                     <div class="p">秀丽的风景6</div>
                 </li>
             </ul>

         </div>

         <div id="div_img2">
             <ul class="list">
                 <li>
                     <img src="portfolio/7.jpg" align="bottom">
                     <div class="p">秀丽的风景7</div>
                 </li>
                 <li>
                     <img src="portfolio/8.jpg" align="bottom">
                     <div class="p">秀丽的风景8</div>
                 </li>
                 <li>
                     <img src="portfolio/9.jpg" align="bottom">
                     <div class="p">秀丽的风景9</div>
                 </li>
                 <li>
                     <img src="portfolio/10.jpg" align="bottom">
                     <div class="p">秀丽的风景10</div>
                 </li>
                 <li>
                     <img src="portfolio/11.jpg" align="bottom">
                     <div class="p">秀丽的风景11</div>
                 </li>

                 <li>
                     <img src="portfolio/12.jpg" align="bottom">
                     <div class="p">秀丽的风景12</div>
                 </li>
             </ul>
         </div>
     </div>

  </body>
 </html>

前端知识复习： JS选中变色的更多相关文章

  1. 前端知识复习：Html DIV 图文混排（文字放在图片下边）

    Html知识复习之图文混排 练习练习基础 先上效果图: 废话不多说,直接贴代码: <!DOCTYPE html> <html xmlns="http://www.w3.or ...

  2. 前端知识复习二（js）

    JS的作用 页面特效 移动端 异步交互(AJAX) 服务器端开发(node.js) 由ECMAScript和dom(操作网页上的api).bom组成(操作浏览器的部分api) 输出到页面内容 cons ...

  3. 【前端知识体系-JS相关】对移动端和Hybrid开发的理解？

    1.hybrid是什么,为何使用hybrid呢? 概念: hybrid就是前端和客户端的混合开发 需要前端开发人员和客户端开发人员配合完成 某些环节也可能会涉及到server端 大前端:网页.APP. ...

  4. 【前端知识体系-JS相关】JS基础知识总结

    1 变量类型和计算 1.1 值类型和引用类型的区别? 值类型:每个变量都会存储各自的值.不会相互影响 引用类型:不同变量的指针执行了同一个对象(数组,对象,函数) 1.2 typeof可以及检测的数据 ...

  5. 【前端知识体系-JS相关】组件化和React

    1. 说一下使用jQuery和使用框架的区别? 数据和视图的分离,(jQuery数据和视图混在一起,代码耦合)-------开放封闭原则 以数据驱动视图(只关注数据变化,DOM操作被封装) 2.说一下 ...

  6. 【前端知识体系-JS相关】ES6专题系列总结

    1.如何搭建ES6的webpack开发环境? 安装Node环境 node -v // 10.14.1 安装NPM环境 npm -v // 6.4.1 安装babel npm install @babe ...

  7. 前端知识总结--js原型链

    js的原型链听着比较深奥,看着容易晕,梳理一下还是比较容易懂的 (先简单写下,后续有时间再整理) 简而言之 原型链:就是js的对象与对象之间,通过原型组成建立的层层关系,构成了整个链条,称之为原型链  ...

  8. 【前端知识体系-JS相关】JS-Web-API总结

    2.1 DOM操作 2.1.1 DOM的本质是什么? <!-- DOM树:二叉树 --> /* <?xml version="1.0" encoding=&quo ...

  9. 【前端知识体系-JS相关】你真的了解JavaScript编译解析的流程吗？

    1. JS编译解析的流程 1.1 JS运行分三步 语法分析(通篇扫描是否有语法错误),预编译(发生在函数执行的前一刻),解释执行(一行行执行). 1.2 预编译执行分五步 创建AO对象(Activat ...

随机推荐

  1. 显著性检测(saliency detection)评价指标之sAUC（shuffled AUC）的Matlab代码实现

    AUC_shuffled.m function [score,tp,fp] = AUC_shuffled(saliencyMap, fixationMap, otherMap, Nsplits, st ...

  2. C语言文件 "w+"与"wb+"区别

    这是我今天碰到的问题,现在已经解决, 希望我的整理能够帮助到你们! w+以纯文本方式读写,而wb+是以二进制方式进行读写. mode说明: w 打开只写文件,若文件存在则文件长度清为0,即该文件内容会 ...

  3. uiautomator——简单的将自动化测试与截图对比相结合使用的小例子！

    1.在使用uiautomator进行自动化测试过程当中,执行某些动作之后,要进行判断是否已执行的动作成功时,需要添加检查点来判断,因此添加判断点除了使用id.text.view等方式进行之外,存在一种 ...

  4. Python核心编程

    对<Python核心编程>的褒奖" The long-awaited second edition of Wesley Chun's Core PythonProgramming ...

  5. 【转】AB实验设计思路及实验落地

    这篇文章会讨论: 在什么情况下需要做 AB 实验 从产品/交互角度,如何设计一个实验 前端工程师如何打点 如何统计数据,并保证数据准确可信 如何分析实验数据,有哪些数据需要重点关注 附:如何搭建前端实 ...

  6. linux根目录下的各文件夹含义说明

    在早期的 UNIX 系统中,各个厂家各自定义了自己的 UNIX 系统文件目录,比较混乱. Linux 面世不久后,对文件目录进行了标准化,于1994年对根文件目录做了统一的规范, 推出 FHS ( F ...

  7. 从壹开始 [ Id4 ] 之二║ 基础知识集合 & 项目搭建一

    前言 哈喽大家又见面啦,感觉好久没更新了,这几天看了一本书<解忧杂货铺>,嗯挺好的,推荐一下

  8. flask下载excel

    flask 应用的基本结构: htmlweb.py -- static -- templates 将 bootstrap.min.css 放到 static 文件夹下,在 templates 文件夹下 ...

  9. xamarin开发android收集的一些工具

    xamarin开发android收集的一些工具 工欲善其事,必先利其器,从16年下半年开始做xamarin相关的开发,平时使用的一些工具和google插件给大家分享一下,都有下载地址,持续更新. Vi ...

  10. [译]PEP 342--增强型生成器：协程

    PEP原文 : https://www.python.org/dev/peps/pep-0342/ PEP标题: Coroutines via Enhanced Generators PEP作者: G ...