前端知识复习：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. java自动化-数据驱动juint演示，上篇

    本文旨在帮助读者介绍,一般的全自动化代码接口,并简单介绍如何使用数据驱动来实现简单的自动化 在经过上述几个博客介绍后,相信读者对自动启动执行一个java编译过的class有了一定了解,也完全有能力去执 ...

  2. 【SQL】面面俱到 | 在SQL中使用CUBE和ROLLUP实现数据多维汇总

    偶然在网上看到一篇文章,讲到数据汇总,提到了CUBE,感觉有些晦涩,想试着自己表述一下.同时,个人也认为CUBE还是很有用的,对SQL或数据分析感兴趣的小伙伴不妨了解一下,或许有用呢! 先设定个需求, ...

  3. 启动VMware虚拟机时总是出现许可证到期提示怎么办？

    不知道大家有没有遇到过这个问题,每次当你打开VMware虚拟机时它总是会提示许可证到期,需要注册,还会出现许多报红的代码,下面就让小编带大家解决一下吧~ VMware教程 如果Fusion本身无法启动 ...

  4. 处女作《Web全栈开发进阶之路》出版了！

    书中源码下载地址:https://github.com/qinggee/WebAdvanced 01. 当初决定写博客的原因非常的纯洁:只要每个月写上 4 篇以上博客,月底的绩效奖金就多 500 块. ...

  5. C#ComboBox控件“设置 DataSource 属性后无法修改项集合”的解决方法

    在使用ComboBox控件时,遇到了重新绑定赋值出问题的情况.正常情况下,对于数据重新赋值的或者绑定数据源的时候,为了防止数据出现问题,都会先清空原来数据,所以就这样写了,但是没有相当恰恰这样写就出现 ...

  6. 解决VS2019中.net core WPF 暂时无法使用 Designer 的临时方法

    目录 解决 VS2019 中.net core WPF 暂时无法使用 Designer 的临时方法 安装 vs 2019 professional/enterprise版本 在vs的设置里,勾选.NE ...

  7. 【效率神奇】Github丧心病狂的9个狠招

    Github,一个被业内朋友成为「全球最大的同性交友社区」的平台. 小时候遇到不会的字可以查新华字典.后来写作文我们可以通过作文书.或者文摘去找合适的素材.同样,写代码可以去Github上找适合自己的 ...

  8. java~springcloud微服务目录索引

    回到占占推荐博客索引 最近写了不过关于java,spring,微服务的相关文章,今天把它整理一下,方便大家学习与参考. java~springcloud微服务~目录索引 springcloud~服务注 ...

  9. VS2017中使用组合项目_windows服务+winform管理_项目发布_测试服务器部署

    前言:作为一名C#开发人员,避免不了常和windows服务以及winform项目打交道,本人公司对服务的管理也是用到了这2个项目的组合方式进行:因为服务项目是无法直接安装到计算器中,需要使用命令借助微 ...

  10. Eclipse4JavaEE安装Gradle，并导入我们的Gradle项目

    第一步:下载Gradle Gradle下载链接,如下图,下载最新版本即可.下载下来的zip包,解压到一个目录即可,如F盘 第二步:配置环境变量 首先添加GRADLE_HOME,如下图 然后在Path下 ...