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 ...
随机推荐
- JSP九个隐式对象及作用域
out:JspWriter实例对象,作用域为page(页面执行期) 向客户端输出内容 request:HttpServletRequest实例对象,作用域为request(用户请求期) 请求信息 re ...
- lab3
lamp: 在阿里云linux(Ubuntu)上安装Apache mysql php : apt-get install mysql_server mysql_client php5 php_mysq ...
- Freemarker常用技巧(三)
freemarker模板解析过程 例如:一个freemarker表达式<body> ${hello} </body>,会被解析成三个部分,分别是<body>${he ...
- Maven 镜像
http://mvnrepository.com/http://search.maven.org/http://repository.sonatype.org/content/groups/publi ...
- 在java代码中显示json字符串（怎么避免json字符串中双引号在java代码中显示）
String log = "eyJvcmRlckluZm8iOnsiaWQiOjEwNzQwNCwib3JkZXJJZCI6MjczNjQyMSwicHJvZHVjdENvZGUiOjQ1N ...
- myeclipse插件安装
MyEclipse插件安装 安装1: HELP->MuEclipse Configuration Center.切换到SoftWare选项卡. 点击 add site 打开对话框,在对话框中na ...
- 【C#编程基础学习笔记】4---Convert类型转换
2013/7/24 技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社区:www.credream.com [C#编程基础学习笔记]4---Convert类型转换 ...
- Div在BOdy中居中
<h1 style="position: absolute; width: 500px; height:200px; left:%; top:%; margin-left:-250px ...
- Js打开网页后居中显示
使用JavaScript定义打开网页后居中显示,并可为窗口设置大小,使用“window.open”方法打开新窗口:先来看完整的代码及调用方法: <html xmlns="http:// ...
- CMD 下 进入 ORACLE
.sqlplus /nolog .connect sys/orcl@ORCL as sysdba .select sysdate from dual exit;