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. Android事件的分发机制

    在分析Android事件分发机制前,明确android的两大基础控件类型:View和ViewGroup.View即普通的控件,没有子布局的,如Button.TextView. ViewGroup继承自 ...

  2. HTML学习(1)

    1.缩写和首字母缩写<abbr><acronym> <abbr title="etcetera">etc.</abbr> <a ...

  3. Avi视频生成缩略图时，提示“尝试读取或写入受保护的内存。这通常指示其他内存已损坏”

    需求:录制Avi格式视频成功后,使用DirectShow生成缩略图,由于视频录制时,宽高分辨率可调节,所以有些情况下,生成缩略图会抛出异常“尝试读取或写入受保护的内存.这通常指示其他内存已损坏”. 异 ...

  4. gc内存回收机制

    判断哪些对象可回收 GC是通过对象是否存活来决定是否进行回收,判断对象是否存活主要有两种算法:引用计数算法.可达性分析算法 引用计数算法 引用计数的算法原理是给对象添加一个引用计数器,每被引用一次计数 ...

  5. myql查询创建表语句SHOW CREATE TABLE table_name

    技术背景:刚开始学习MySQL时候,有时偷懒,会用SHOW CREATE TABLE 表名\G来复制表创建语句,可是当运行的时候总会因为"表名和列名上有单引号",提示语法错误不能运 ...

  6. C# string.format转义大括号--转

    转义大括号 左大括号和右大括号被解释为格式项的开始和结束.因此,必须使用转义序列显示文本左大括号或右大括号.在固定文本中指定两个左大括号 ("{{") 以显示一个左大括号 (&qu ...

  7. LINQ动态查询类--[DynamicLinqExpressions]

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.L ...

  8. Domino 8.5 WebService开发一例

    原文地址:Domino 8.5 WebService开发一例作者:bj木棉 需求是要调用一个Domino上的WebService/JAVA来实现与人事管理系统里的人员同步,就是在人事管理系统中增加用户 ...

  9. IIS开启伪静态后html静态页面无法访问的解决方法

    IIS开启伪静态后,发现原本存在的html静态页面无法访问了,显示的404错误.网上查了下,是因为实现伪静态就是使用 URLRewriter 来映射后缀,会把asp等动态页面映射成html,但是原来存 ...

  10. ARM汇编指令（未完待续）

    ARM指令自己在看的时候,看完之后就忘了,根本记不住,而且有些ARM汇编指令在平常的时候可能根本就用不到,所以也没必要把所有的ARM指令都去记忆,所以自己就想着不去一遍一遍的复习ARM指令,而是在平常 ...