CSS常用操作-图片
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常用操作-图片的更多相关文章
- web前端学习（三）css学习笔记部分（3）-- css常用操作
5. CSS常用操作 5.1 对齐 使用margin属性进行水平对齐 <!DOCTYPE html> <html lang="en"> <head ...
- CSS常用背景图片定位方法
CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...
- CSS常用操作-对齐
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- HTML5学习笔记（十）：CSS常用操作
对齐 在 CSS 中,可以使用多种属性来水平对齐元素. 水平对齐 使用 margin 属性来水平对齐,可通过将左和右外边距设置为 "auto",来对齐块元素. 把左和右外边距设置为 ...
- css常用操作
对齐操作 1.使用margin属性进行水平对齐 margin-left:auto; margin-right:auto; 2.使用position属性进行左右对齐 3.使用fl ...
- CSS 常用操作
1.对齐 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- CSS常用操作-导航栏
1.垂直导航栏 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- CSS常用操作-分类
- 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码
css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...
随机推荐
- nyoj 2
#include <iostream> #include <stack> #include <string.h> #include <stdio.h> ...
- 跨域信息传递postMessage
var sendToParent = function(event, data, listener) { var message = { event: event, data: data, liste ...
- ASP.NET 2.0服务器控件开发的基本概念(转载)
利用ASP.NET 2.0技术,创建Web自定义服务器控件并不是一件轻松的事情.因为,这需要开发人员了解并能够灵活应用多种Web开发技术,例如,CSS样式表.客户端 脚本语言..NET开发语言.服务器 ...
- Debugging Failed Because Integrated Windows Authentication Is Not Enabled
To enable integrated Windows authentication Log onto the Web server using an administrator account. ...
- CodeSMART for VS.NET插件工具
今天无聊,想起以前看过的微软的Visual Studio的插件,所以就找了找. 微软的Visual Studio本身就非常强大了,但是仍然有不足的地方,比如下面要介绍的我喜欢的代码格式化功能的这个插件 ...
- AFNetworking3.0出现Error Domain=com.alamofire.error.serialization.response Code=-1016 "Request failed: unacceptable
在发送请求后一直报错, 浏览器解析却没有问题, 所以基本可以确定是AFNetworking的问题 下面是解决方法: AFHTTPSessionManager *manager = [AFHTTPSes ...
- Javascript 常用函数【1】
1:基础知识 1 创建脚本块 1: <script language=”JavaScript”> 2: JavaScript code goes here 3: </script&g ...
- 以下是jQuery和JavaScript实现相同操作的等价代码。
选择元素 Javascript代码 1.// jQuery 2.var els = $('.el'); 3. 4.// 原生方法 5.var els = document.queryS ...
- Ignatius and the Princess I
算法:搜索+优先队列+(递归输出结果) The Princess has been abducted by the BEelzebub feng5166, our hero Ignatius has ...
- securecrt简介
SecureCRT是最常用的终端仿真程序,简单的说就是Windows下登录UNIX或Liunx服务器主机的软件,本文主要介绍SecureCRT的使用方法和技巧 VanDyke CRT 和 VanDyk ...