index.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

      <link href="style9.css" type="text/css" rel="stylesheet">

 </head>

 <body>

     <div class="container">

         <div class="image">

       <a href="#" target="_self">

           <img src="img.jpg" alt="风景" width="360px" height="360px">

       </a>

       <div class="text">八月份的维多利亚</div>

     </div>

     <div class="image">

       <a href="#" target="_self">

           <img src="img.jpg" alt="风景" width="360px" height="360px">

       </a>

       <div class="text">八月份的维多利亚</div>

     </div>

     <div class="image">

       <a href="#" target="_self">

           <img src="img.jpg" alt="风景" width="360px" height="360px">

       </a>

       <div class="text">八月份的维多利亚</div>

     </div>

     <div class="image">

       <a href="#" target="_self">

           <img src="img.jpg" alt="风景" width="360px" height="360px">

       </a>

       <div class="text">八月份的维多利亚</div>

     </div>

     <div class="image">

       <a href="#" target="_self">

           <img src="img.jpg" alt="风景" width="360px" height="360px">

       </a>

       <div class="text">八月份的维多利亚</div>

     </div>

     <div class="image">

       <a href="#" target="_self">

           <img src="img.jpg" alt="风景" width="360px" height="360px">

       </a>

       <div class="text">八月份的维多利亚</div>

     </div>

     <div class="image">

       <a href="#" target="_self">

           <img src="img.jpg" alt="风景" width="360px" height="360px">

       </a>

       <div class="text">八月份的维多利亚</div>

     </div>

     <div class="image">

       <a href="#" target="_self">

           <img src="img.jpg" alt="风景" width="360px" height="360px">

       </a>

       <div class="text">八月份的维多利亚</div>

     </div>

     <div class="image">

       <a href="#" target="_self">

           <img src="img.jpg" alt="风景" width="360px" height="360px">

       </a>

       <div class="text">八月份的维多利亚</div>

     </div>

     <div class="image">

       <a href="#" target="_self">

           <img src="img.jpg" alt="风景" width="360px" height="360px">

       </a>

       <div class="text">八月份的维多利亚</div>

     </div>

     <div class="image">

       <a href="#" target="_self">

           <img src="img.jpg" alt="风景" width="360px" height="360px">

       </a>

       <div class="text">八月份的维多利亚</div>

     </div>

     <div class="image">

       <a href="#" target="_self">

           <img src="img.jpg" alt="风景" width="360px" height="360px">

       </a>

       <div class="text">八月份的维多利亚</div>

     </div>

     </div>

 </body>

 </html>

css:

 body{

     margin:10px auto;

     width:%;

     height:auto;

 }

 .image{

     border:2px solid darkgray;

     width:auto;

     height:auto;

     float:left;

     text-align: center;

     margin:5px;

 }

 img{

     margin:5px;

     opacity: 0.6; /*透明度操作0~1,1完全不透明，0完全透明*/

 }

 .text{

     font-size:12px;

     margin-bottom: 5px;

 }

 a:hover{ /*鼠标放上去更改颜色*/

     background-color: navy;

 }

效果：

CSS常用操作-图片的更多相关文章

  1. web前端学习（三）css学习笔记部分（3）-- css常用操作

    5.  CSS常用操作 5.1  对齐 使用margin属性进行水平对齐 <!DOCTYPE html> <html lang="en"> <head ...

  2. CSS常用背景图片定位方法

    CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...

  3. CSS常用操作-对齐

    index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  4. HTML5学习笔记（十）：CSS常用操作

    对齐 在 CSS 中,可以使用多种属性来水平对齐元素. 水平对齐 使用 margin 属性来水平对齐,可通过将左和右外边距设置为 "auto",来对齐块元素. 把左和右外边距设置为 ...

  5. css常用操作

    对齐操作 1.使用margin属性进行水平对齐     margin-left:auto;    margin-right:auto; 2.使用position属性进行左右对齐      3.使用fl ...

  6. CSS 常用操作

    1.对齐 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  7. CSS常用操作-导航栏

    1.垂直导航栏 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  8. CSS常用操作-分类

  9. 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

    css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...

随机推荐

  1. Windows与自定义USB HID设备通信说明.

    1 ．   所使用的典型 Windows API CreateFile ReadFile WriteFile 以下函数是 DDK 的内容: HidD_SetFeature HidD_GetFeatur ...

  2. 【网络流#8】POJ 3469 Dual Core CPU 最小割【ISAP模板】 - 《挑战程序设计竞赛》例题

    [题意]有n个程序,分别在两个内核中运行,程序i在内核A上运行代价为ai,在内核B上运行的代价为bi,现在有程序间数据交换,如果两个程序在同一核上运行,则不产生额外代价,在不同核上运行则产生Cij的额 ...

  3. mvc和webapi同一解决方案调试办法

    今天在研究WebApi的时候,用mvc端直接请求webapi接口,发现怎么也请求不了,自己搞了半天,猜测可能是webapi没有完全启动吧,解决办法是将解决方案属性改为多启动项目,具体方法如下: 直接运 ...

  4. 基于AFNetworking3.0的网络封装

    1.创建名为HTTPMethod(自己随便起名字)的头文件 2.导入AFNetworking头文件(在github上下载最新版): #import "AFNetworking.h" ...

  5. 迭代器（iterator） 与 traits 编程技法

    看了候哥的<STL源码剖析>的迭代器那一章,在这里将思路稍微疏理一下 迭代器 迭代器模式的定义:提供一种方法,在不需要暴露某个容器的内部表现形式情况下,使之能依次访问该容器中的各个元素. ...

  6. 控件真的很好用，突然感觉自己以前研究Discuz！NT366源码的方式很2了

    控件真的很好用,突然感觉自己以前研究Discuz!NT366源码的方式很2了,就是按钮上的或其他控件上的图片哪里去了?

  7. showModalDialog-父窗体子窗体

    showModalDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口. farther.html --------------------------- ...

  8. Axure自动幻灯片制作

    1.打开axure7,开始. 2.拖一个占位符组件到布局上(当然也可以是矩形.图片之类的),大小270*170,作为幻灯片的第一张片子,双击写上“第一张片子”. 3.拖一个矩形,设置形状为椭圆,调整大 ...

  9. jquery validation插件使用

    首先需要引入jQuery.js和jquery.validate.js 以下面代码为例: <form id="mainform"> <fieldset> &l ...

  10. [Laravel 5 教程学习笔记] 一、Windows下安装Laravel 5

    最近看到一些统计,说是Laravel是目前PHP框架中使用最多的,所以就想来学习下.之前其实也想过学习这个框架,但是每次到第一步安装的时候就卡住了,无奈  .之前用ThinkPHP的时候,下载完放到网 ...