1.认识CSS的 盒子模型。

2.CSS选择器的灵活使用。

3.实例:

a.图片文字用div等元素布局形成HTML文件。

b.新建相应CSS文件，并link到html文件中。

c.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

HTML代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>广州商学院</title>

    <link rel="stylesheet"type="text/css"href="../static/css/202.css">

</head>

<body >

     <div>

         <div class="img">

             <a href="http://www.gzcc.cn/html/xueyuanrongyu/">

                 <img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg">

             </a>

             <div class="desc"><a href="http://www.gzcc.cn" >学校荣誉</a></div>

         </div>

         <div class="img">

             <a href="http://www.gzcc.cn/html/banxuechengguo/">

                 <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg">

             </a>

             <div class="desc"><a href="http://www.gzcc.cn" >师生获奖</a></div>

         </div>

         <div class="img">

             <a href="http://www.gzcc.cn/html/xygk/ldgh/">

                 <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg">

             </a>

             <div class="desc"><a href="http://www.gzcc.cn">领导关怀</a></div>

         </div>

         <div class="img">

             <a href="http://i.gzcc.cn/cas/login?service=http%3A%2F%2Fi.gzcc.cn%2Fdcp%2Findex.jsp">

                 <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg">

             </a>

             <div class="desc"><a href="http://www.gzcc.cn" >数字广商</a></div>

         </div>

         <div class="img">

             <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">

                 <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg">

             </a>

             <div class="desc"><a href="http://www.gzcc.cn" >话说校园</a></div>

         </div>

         <div class="img">

             <a href="http://www.gzcc.cn/html/shipinxiaoyuan/">

                 <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg">

             </a>

             <div class="desc"><a href="http://www.gzcc.cn" >视频校园</a></div>

         </div>

         <div class="img">

             <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">

                 <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg">

             </a>

             <div class="desc"><a href="http://www.gzcc.cn" >全景校园</a></div>

         </div>

         <div class="img">

             <a href="http://www.gzcc.cn/html/xiaoyoufengcai/">

                 <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg">

             </a>

             <div class="desc"><a href="http://www.gzcc.cn" >校友风采</a></div>

         </div>

     </div>

     <div class="clearfloat">

         <img src="http://www.gzcc.cn/2016/images/yhdh/01.jpg">

         <img src="http://www.gzcc.cn/2016/images/yhdh/02.jpg">

         <img src="http://www.gzcc.cn/2016/images/yhdh/03.jpg">

         <img src="http://www.gzcc.cn/2016/images/yhdh/08.jpg"><br>

         <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg">

         <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg">

         <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg">

         <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg">

     </div>

</body>

</html>

css代码如下：

        img{

            width: 300px;

        }

       div .img{

            width: 130px;

            border: 1px solid #eeeeee;

            float: left;

            margin: 5px;

        }

        div.img img{

            width: 100%;

            height: auto;

        }

        div.desc{

            text-align: center;

            padding: 5px;

        }

        div.img:hover{

            border: 1px solid #222222;

        }

        .clearfloat{

            clear: both;

        }

结果如下：

CSS实例：图片导航块的更多相关文章

  1. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

  2. webpack4 前端框架基础配置实例-解决css分离图片路径问题

    1.安装nodejs 2. 需要全局和项目安装webpack和webpack-dev-server npm install webpack webpack-dev-server -g npm inst ...

  3. CSS实例：翻转图片、滚动图片栏、打开大门

    CSS 翻转图片主要用到的技术除了3D翻转和定位 ,还用到了一个属性 backface-visibility:visable|hidden;该属性主要是用来设定元素背面是否可见. 效果图如下: 具体的 ...

  4. CSS实例

    CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...

  5. CSS：CSS 实例

    ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...

  6. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  7. css图片居中，通过纯css实现图片居中的多种实现方法

    在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...

  8. CSS控制图片大小

    转载请注明来源:https://www.cnblogs.com/hookjc/ 1.CSS控制背景图片:    对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背 ...

  9. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

随机推荐

  1. caffe编译报错解决

    添加ssd中的一些层之后,编译报错: ../lib/libcaffe.so.1.0.0-rc5:对‘boost::match_results<__gnu_cxx::__normal_iterat ...

  2. chrome版本与对应的谷歌驱动（chromedriver）

    chrome版本与对应的谷歌驱动(chromedriver) 1.下载chromedriver:http://chromedriver.storage.googleapis.com/index.htm ...

  3. 封装||property

    封装 封装:主要是指在类的定义阶段将,以__开头的属性名进行变形..例如:__name ==> _People__name 封装的主要特点: 1.在类外部无法直接__name,想要在外部调用可以 ...

  4. cxf简单例子

    cxf 这里介绍在web跟非web中的发布以及调用 准备条件: 1,导入cxf的相关jar包,以maven项目为例 pom的配置文件为 <project xmlns="http://m ...

  5. 版本控制之GitHub亲手实验总结

        使用Git的基本方式是:第一种,在remote端创建一个repository,clone到本地,然后在本地把已有文件添加进来/在本地clone的目录下创建新文件,再add 提交等纳入git版本 ...

  6. python的mutable变量与immutable变量

    python的变量分为mutable(可变的)和immutable类型. mutable:dict, list immutable:int , string , float ,tuple..

  7. Spark代码中设置appName在client模式和cluster模式中不一样问题

    问题 Spark应用名在使用yarn-cluster模式提交时不生效,在使用yarn-client模式提交时生效,如图1所示,第一个应用是使用yarn-client模式提交的,正确显示我们代码里设置的 ...

  8. keras学习简单线性回归【1】

    转自:https://morvanzhou.github.io/tutorials/machine-learning/keras/2-1-regressor/ 总的代码的过程就是: 1.导入模块+创建 ...

  9. DLNg第三周：序列模型和注意力机制

    1.基础模型 将法语翻译为英语,分为编码和解码阶段,将一个序列变为另一个序列.即序列对序列模型. 从图中识别出物体的状态,将图片转换为文字. 先使用CNN处理图片,再使用RNN将其转换为语言描述. 2 ...

  10. python之进程（池）

    获得进程id import osfrom multiprocessing import Process def info(title): print(title) print('模块名:',__nam ...