前端知识复习：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. spss汉化详解

    今天写一下关于SPSS的汉化以及激活码 下载spss: 安装过程比较简单,主要就是激活码: 9DNCAF2O3QVDV7FBIO696OO6GWLNXZPPRYTPWF2PPX7C8T6Y24LMVV ...

  2. MATLAB R2017b安装及破解（安装详解）

    昨天知道有这个Matlab之后就开始想办法安装,今天为各位小伙伴解答昨天安装的过程,希望能够帮助到你们! 使用的镜像软件,我放在压缩包里面 如果你们感觉下载比较麻烦(可以直接发消息给我,我会发给你们的 ...

  3. postman-----使用CSV和Json文件实现批量接口测试

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } span ...

  4. Flask导入静态文件问题

    然而如果使用flask开发web,并且需要在本地导入已经写好的css js 文件或者image一系列,这些文件是静态文件,需要另外建一个文件夹static;并且在html文件修改导入方法,exampl ...

  5. Java Native Interface调用C++代码

    概述 Java Native Interface译为Java原生接口,简称JNI.Java并不是完美的,它的不足体现在运行速度要比传统的C++慢上许多,并且无法直接访问到操作系统底层,为此Java提供 ...

  6. Supervisor守护DotNet Core控制台程序

    Supervisor 相信对Linux系统很熟的都知道这个软件,基于Python写的一个守护进程软件.具体的介绍和使用我就不再赘述了. 使用asp.net core 部署在Linux常用的方法 我们可 ...

  7. volitale、synchronized、RetreenLock区别

    synchronized和RetreenLock锁区别 1.synchronized是java关键字,RetreenLock是个java类 2.synchronized无法获取锁状态,Lock可以判断 ...

  8. HTTP网络协议与手写Web服务容器

    Http协议 1.深入概念 Http:HyperText Transfer Protocol,即是超文本传输协议. 2.浅出概念(使用浏览器访问服务器端网页时需要遵循的一系列规则) Http:将各种不 ...

  9. 带着新人看java虚拟机03

    分享一篇博客:https://blog.csdn.net/yfqnihao/article/details/8289363,本篇有部分参考这篇博客!!! 还是继续说一下java虚拟机,为什么呢?因为我 ...

  10. H5单张、多张图片保存续篇

    前言 这篇是接上篇内容.还没看的可以看H5单张.多张图片上传这篇文章预热. 图片入库 本章我们就来看看如何让多种图片保存至数据库中.数据库:mysql   后端:.NET Core 我们回顾一下上篇我 ...