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. html 标签笔记

    <一.HTML 基础结构> <html>________________________________<head><title>无标题文档</t ...

  2. NumPy 广播机制（Broadcasting）

    一.何为广播机制 a.广播机制是Numpy(开源数值计算工具,用于处理大型矩阵)里一种向量化数组操作方法. b.Numpy的通用函数(Universal functions) 中要求输入的两个数组sh ...

  3. 【PyQt5-Qt Designer】工具箱(QToolBox)控件的使用

    工具箱(QToolBox)+toolButton+tabWidget 总体介绍 QToolBox类提供了一列选项卡的小部件(选项卡内含项目). 工具箱是一个小部件,它将选项卡一个一个的显示,当前项目显 ...

  4. AsyncStorage和Promise配合使用

    代码: AsyncStorage封装 import {AsyncStorage} from "react-native"; class DeviceStorage { //保存数据 ...

  5. RN无限轮播以及ScrollView的大小调节问题

    如果你的ScrollView的大小是全屏,height不能用,这种情况需要给ScrollView添加一个容器View,然后调节容器View的大小 无限轮播这里我使用的是一个第三方的插件react-na ...

  6. Delphi避免重复打开窗体

    取消自动创建窗体 Form1关键代码 implementation uses Unit2; {$R *.dfm} procedure TForm1.Button1Click(Sender: TObje ...

  7. 递归与非递归打印乘法口诀表--Scala（指令式、函数式思维练习）

    object Test extends App { def printMultiTable() { var i = 1 while (i < 10) { var j = 1 while (j & ...

  8. maven 安装 配置

    一.下载及安装 1.1 下载maven 3.1.1 先到官网http://maven.apache.org/download.cgi 下载最新版本(目前是3.1.1 ),下载完成后,解压到某个目录(本 ...

  9. [py]python的time和datetime模块获取星期几

    import time import datetime #今天星期几 today=int(time.strftime("%w")) print today #某个日期星期几 any ...

  10. 如何利用VMware安装XP系统

    如何利用VMware安装XP系统 百度经验 http://jingyan.baidu.com/article/215817f78ba0c51eda142322.html 1    运行分区工具 2   ...