前端知识复习：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. Guess 任意猜

    age_of_oldboy = 56 count = 0 while count <3: guess_age = int(input("guess age:")) if gu ...

  2. MATLAB——画图（经典）

    今天我发现一个非常奇怪的事情,如果你喜欢一样东西或者说是要干一件事,并不一定要把它所在领域的所有都做好, 只要做好你喜欢的就可以了,正如现在的我,突然想学习MATLAB(想画图)那么你只要把一些基础的 ...

  3. eclipse中去掉py文件中烦人的黄色弹框

    eclipse中写py文件,当鼠标点击在参数上时总是出现黄线的弹框,影响人操作,感觉特别烦,如下: 解决方案: windows--preferences--hover--pydev--hover取消选 ...

  4. 后端开发实践——Spring Boot项目模板

    在我的工作中,我从零开始搭建了不少软件项目,其中包含了基础代码框架和持续集成基础设施等,这些内容在敏捷开发中通常被称为"第0个迭代"要做的事情.但是,当项目运行了一段时间之后再来反 ...

  5. Django文件上传（经典上传方式）

    经典文件上传方式 创建URL from django.contrib import admin from django.urls import path from django.conf.urls i ...

  6. MySQL 上手教程

    安装 通过官网选择版本下载安装.Mac 上可通过 Homebrew 方便地安装: $ brew install mysql 检查安装是否成功: $ mysql --version mysql Ver ...

  7. JS原型--原型链

    构造函数-->原型--->prototype-->__proto__-->constructor-->原型链 构造函数    什么是构造函数?我理解构造函数就是可以用来生 ...

  8. 《k8s-1.13版本源码分析》- Informer 机制

    源码分析系列文章已经开源到github,地址如下: github:https://github.com/farmer-hutao/k8s-source-code-analysis gitbook:ht ...

  9. 卷积神经网络之AlexNet

    由于受到计算机性能的影响,虽然LeNet在图像分类中取得了较好的成绩,但是并没有引起很多的关注. 知道2012年,Alex等人提出的AlexNet网络在ImageNet大赛上以远超第二名的成绩夺冠,卷 ...

  10. 详解synchronized与Lock的区别与使用

    知识点 1.线程与进程 在开始之前先把进程与线程进行区分一下,一个程序最少需要一个进程,而一个进程最少需要一个线程.关系是线程–>进程–>程序的大致组成结构.所以线程是程序执行流的最小单位 ...