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. idea+maven+springboot+mybatis+springmvc+shiro

    springboot就是把创建项目简单化,省去了以往的配置mybatis.springmvc的繁琐过程. 搭建web应用三个主要功能,请求和响应,数据库交互,权限配置. 一.idea创建项目 (1) ...

  2. xadmin与django-rest-framework的集成（1）

    什么是xadmin?什么是django-rest-framework? xadmin是开源的一个类似于django自带的后台管理系统admin的开源模块,它基于bootstrap3框架,内置强大的插件 ...

  3. bzoj3733 [Pa2013]Iloczyn 搜索

    正解:搜索 解题报告: 先放下传送门QwQ umm其实并不难,,,最近在复建基础姿势点所以都写的是些小水题QAQ 首先考虑如果能构造出来一定是因数凑起来鸭,所以先把因数都拆出来,然后就爆搜 几个常见的 ...

  4. winform接收全局的快捷键

    public class NativeWIN32 { public NativeWIN32() { } /* ------- using WIN32 Windows API in a C# appli ...

  5. Matlab中添加路径与去除路径

    今天在使用Matlab调用内部的PCA函数的时候,报错: 错误使用 pca输入参数太多. 如下图所示: 网上查找原因之后发现是因为我之前下载过开源的工具包toolbox,并且将它的路径add到了Mat ...

  6. 使用poi读写excel文件

    使用poi库测试了一下读取excel文件,效果不错,跟大家分享一下. 第一列是数值型,第二列是字符型,代码如下: package poi; import java.io.FileInputStream ...

  7. JavaScript substr() 字符串截取函数使用详解

    substr 定义和用法 substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符. 语法 stringObject.substr(start,length) 如果 length ...

  8. Filter & Listener

    一 监听器的概述 监听器就是一个实现了特定接口的Java类,用于监听另一个Java类的方法调用或属性的改变.当被监听对象发生上述事件后,监听器某个方法将会立即被执行. 即用来监听其他对象的变化,主要应 ...

  9. laravel用crud之index列出产品items

    前面我们说了laravel用crud修改产品items-新建resource controller和routing,现在我们要把产品items罗列出来,需要修改路由和模板,一起随ytakh来看看把 1 ...

  10. git add 所有文件

    git add 多个文件的格式介绍 git提交修改之前要add然后commit,假如我用git clone远程服务器文件到本地,然后我如果修改了其中几个文件要提交,我必须一个个的如: $git add ...