CSS实例：图片导航块

认识CSS的盒子模型。
CSS选择器的灵活使用。
实例:
1. 图片文字用div等元素布局形成HTML文件。
2. 新建相应CSS文件，并link到html文件中。
3. CSS文件中定义样式
  1. div.img：border,margin,width,float
  2. div.img img：width，height
  3. div.desc：text-align,padding
  4. div.img:hover：border
  5. div.clearfloat：clear


<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>图片</title>    <link rel="stylesheet" type="text/css" href="../static/css/daohangl.css"></head><body><div class="recommend">    <div class="img">        <a href=""> <img src="http://img17.3lian.com/201612/21/6310c81f8385d0e991b5336805695b50.jpg"></a><br>       <div class="desc"><a href="">春天</a></div>    </div>    <div class="img">        <a href=""><img src="http://img1.3lian.com/2015/a1/137/d/37.jpg"></a><br>        <div class="desc"><a href="">夏天</a></div>    </div>

    <div class="img">         <a href=""><img src="http://img17.3lian.com/d/file/201703/03/0840bd7fcb29a3dca53723e66c7d11ee.jpg"></a><br>       <div class="desc"><a href="">秋天</a></div>    </div>    <div class="img">        <a href=""><img src="http://img1.3lian.com/2015/a1/136/d/200.jpg"></a><br>       <div class="desc"><a href="">冬天</a></div>    </div></div><div class="clearfloat">    <img src="http://img17.3lian.com/201612/21/6310c81f8385d0e991b5336805695b50.jpg"><br>    <img src="http://img1.3lian.com/2015/a1/137/d/37.jpg"><br>    <img src="http://img17.3lian.com/d/file/201703/03/0840bd7fcb29a3dca53723e66c7d11ee.jpg"><br>    <img src="http://img1.3lian.com/2015/a1/136/d/200.jpg"><br></div></body></html>

div.img {    border: 1px solid #000000;    width: 180px;    float: left;    margin: 5px;}

div.desc {    text-align: center;    padding: 5px}

div.img img {    width: 100%;    height: auto;}

div.img:hover {    border: 1px red;}

.clearfloat {    clear: both;}

运行结果：

转载于:https://www.cnblogs.com/zhuyinyinyin/p/7698024.html

CSS实例：图片导航块相关推荐

html把图片做成导航条背景,DIV+CSS背景图片导航菜单的实现方法
导航菜单通常的做法是用ul li,但是ul li纯文本方式的导航菜单实现的效果比较简单,我们可以使用背景图片来实现菜单的个性化设置.让我们开始吧: 先看效果图: 仅这一张图片,我们实现一个横行CSS菜 ...
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端javascript:;" onClick="javascript:tagshow(event, '%BF%AA%B7%A2');" target=&qu ...
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
目录概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
html5导航按钮,CSS实例:超酷的网站导航按钮
CSS实例:超酷的网站导航按钮互联网发布时间:2009-04-02 19:35:20 作者:佚名我要评论网页制作Webjx文章简介:本文一步一步手把手教你打造一个极酷的三层分离的标 ...
php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上，如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
HTML和CSS实例讲解
转载地址:http://www.zcool.com.cn/article/ZMTYzNDA0.html 主要讲一个网页的HTML和CSS实例,怎么实现网页的效果图! 实际网页效果图的实现是简单兴趣是 ...
css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...
html图片隐藏文字,怎样用CSS隐藏图片背景的文字内容
这次的案列是怎样用CSS隐藏图片背景的文字内容,我们先使用使用background背景是将图片设为背景显示:然后使用text-indent缩进是隐藏a链接内容和链接标签是对文字设置锚文本链接.下面就是 ...
html背景图片的隐藏,CSS隐藏图片背景上方的文字内容
使用CSS样式隐藏图片作为背景图片上方的文字内容此类问题我们常见于LOGO处使用,我们想让图片作为背景,而图片上方放A链接文字内容,但html锚文本功能仍然正常也能鼠标点击使用. 一.用到的CSS单 ...

CSS实例：图片导航块

CSS实例：图片导航块相关推荐

最新文章

热门文章