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 TagFlowLayout完全解析 一款针对Tag的布局(转)

    一.概述 本文之前,先提一下关于上篇博文的100多万访问量请无视,博文被刷,我也很郁闷,本来想把那个文章放到草稿箱,结果放不进去,还把日期弄更新了,实属无奈. ok,开始今天的博文,今天要说的是Tag ...

  2. Android（java）学习笔记255：JNI之JNI概念

    1. JNI是什么? java native interface (java本机接口) 比如方法声明: public final native Class<?>  getClass(): ...

  3. JNI Java调用C代码 示例

    Activity public class MainActivity extends ListActivity {     static {         System.loadLibrary(&q ...

  4. div中实现居中

    今天纠结了大半天的居中,把学到的先记录下来,还没完全弄清楚,发现网上原创的技术贴并不算多,大多都是相互转载.(ps.先安利一个大神的帖集,昨天才发现的,内容丰富,语言,呃...很幽默,一般都是图文并茂 ...

  5. java RSA签名

    try{ //1初始化秘钥 KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("RSA"); key ...

  6. BestCoder Round 59 (HDOJ 5500) Reorder the Books

    Problem Description dxy has a collection of a series of books called “The Stories of SDOI”,There are ...

  7. 数据库的事务处理必须满足ACID原则，ACID分别是指什么

    http://blog.csdn.net/dingxingmei/article/details/39270375

  8. Dapper事务操作

    1.报错信息: 如果分配给命令的连接位于本地挂起事务中,ExecuteNonQuery 要求命令拥有事务.命令的 Transaction 属性尚未初始化. 出现这种原因是在执行Execute语句时,没 ...

  9. union关键字 与大小端模式

    union 关键字(主要用来压缩空间,如果一些数据不可能同一时间同时用到,可是考虑使用union) union关键字声明的变量称之为联合体变量: (1)联合体变量只配置一个足够大的空间来容纳最大长度的 ...

  10. ebay如何确定同一电脑登陆了多个账号，以及同一账号登陆过多台电脑

    转自hilton 的BLOG http://jimqu.blog.51cto.com/105370/654691 一切要从ebay的买家保护说起 ebay作为一个电子商务平台,之所以可以汇聚如此众多的 ...