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. linux中切换用户方式su和su -的区别

    Using su The  su  command allows users to open a terminal window, and from that terminal start a sub ...

  2. 【iOS之轮播视图、自定义UIPageControl】

    基于UISrollView实现的无限循环轮播视图. 实现的思路:使用三个UIImageView不断循环利用,始终将最中间一个View显示在UIScrolView的contentSize上,每次滚动后, ...

  3. C# KTV 系统 SQL数据库连接 C# 应用窗体

    ---恢复内容开始--- 五道口 北大青鸟校区 KTV项目 指导老师: 袁玉明  SQL数据库关系图 第一步: private void DoubleClicklvContry() { ]!=null ...

  4. DedeCMS批量替换栏目文件保存目录的方法

    学点sql还是很有必要的.   有时候由于栏目太多,但是要修改一下栏目的保存目录.一个一个修改真的有点费事和慢.所以想了一个方法来批量修改栏目的保存目录.就是批量替换: update dede_arc ...

  5. <bean id="validator" class="org.springframework.validation.beanvalidation.LocalValidatorFactoryBean"/>

    <bean id="validator" class="org.springframework.validation.beanvalidation.LocalVal ...

  6. Ajax调用webService（一） 不跨域。

    注:需要的js文件与组件(jquery-1.4.2.min.js和Newtonsoft.Json) 同域:要调用的webservice与ajax请求页面在同一个网站下(本文中都是本地测试). 数据库( ...

  7. react相关

    react 简单入门 ant 蚂蚁金服react组件 redux 阮一峰入门react material-ui组件库 webpack入门 http://www.jianshu.com/p/42e115 ...

  8. 优化JavaScript脚本的性能

    循环 循环是很常用的一个控制结构,大部分东西要依靠它来完成,在JavaScript中,我们可以使用for(;;),while(),for(in)三种循环,事实上,这三种循环中for(in)的效率极差, ...

  9. 【插件】WordPress缓存最佳组合：DB Cache Reloaded Fix + Hyper Cache

    DB Cache Reloaded Fix是一个出色的WordPress数据库缓存插件,可以大大减少对数据库的请求次数. Hyper Cache 是非常小巧但很强大的WordPress缓存插件,设置简 ...

  10. 添加view类图中的二级菜单

    void CFafdsafasdfasfasView::OnLButtonDown(UINT nFlags, CPoint point) { // TODO: Add your message han ...