前端知识复习：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. djiango的模板语言（template）

    老师的博客:http://www.cnblogs.com/liwenzhou/p/7931828.html 官方文档:https://docs.djangoproject.com/en/1.11/re ...

  2. 阿里云ecs centos7安装 postgresql 9.4

    rpm -Uvh http://yum.postgresql.org/9.4/redhat/rhel-7-x86_64/pgdg-centos94-9.4-3.noarch.rpm yum insta ...

  3. Linux iptables 配置规则

    Linux iptables 防火墙配置规则 前言:把网上我感觉不错iptables的访问规则都统一在这里,以后做参考. modprobe ipt_MASQUERADE modprobe ip_con ...

  4. 持续集成之 Nuget 进阶

    持续集成之 Nuget 进阶 Intro 之前介绍了一篇基于 Azure pipeline 的 nuget 包的持续集成配置,但是比较粗糙,这里介绍一下结合 Cake 实现更优雅的 nuget 包发布 ...

  5. Windows Server 2016-客户端退域的三种方法

    前边我们提到了客户端加域的操作方法,本章为大家补充域客户端退域的操作过程,包含图形化.netdom remove.Powershell三种方法,具体内容如下: 图形化退域方法: 1.Win键,计算机右 ...

  6. 如何在WSL下使用VS Code

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.本有由葡萄城技术团队翻译并整理 自微软开始宣布拥抱开源以来,我认为微软发布的最棒的两大功能是:Visual S ...

  7. Windows API编程（SDK编程）配置VS2017——出现LNK 2019错误的win32项目如何解决

    最近刚入门SDK编程,在 我终于知道为什么windowsApi学的人这么少了 这篇文章中,确实发现了这样的问题,我的教程使用VS2013->Windows桌面->win32,就诞生了能使用 ...

  8. 教程二 网页和lua交互修改openwrt

    硬件 http://zhan.renren.com/h5/entry/3602888498044209332 GL-iNet 1 首先安装 webserver之lighttpd  ,openwrt自带 ...

  9. window下编译jcef

    自行编译jcef过程中遇到了一些问题,现在记录如下. 参考的主要文章是jcef的官方介绍: https://bitbucket.org/chromiumembedded/java-cef/wiki/B ...

  10. Netty3：分隔符和定长解码器

    回顾TCP粘包/拆包问题解决方案 上文详细说了TCP粘包/拆包问题产生的原因及解决方式,并以LineBasedFrameDecoder为例演示了粘包/拆包问题的实际解决方案,本文再介绍两种粘包/拆包问 ...