CSS3+DIV网页样式与布局从入门到精通（微课精编版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

4.4　案例实战

图像在网页设计中的作用很重要，恰当地使用背景图像能够设计出非常漂亮、精致的页面效果。下面将结合多个案例介绍图像在网页制作中的魅力。

4.4.1　设计图文混排版式

视频讲解

在网页中经常会看到图文混排的版式，不管是单图还是多图，也不管是简单的文字介绍还是大段正文，图文版式的处理方式是比较简单的。在本节案例中所展示的图文混排效果，主要是文字围绕在图片的旁边进行显示。

【操作步骤】

第1步，启动Dreamweaver，新建网页，保存为test.html，在<body>标签内输入以下代码，代码中省略部分段落文本，读者可以参考本节案例源代码进行补全。

     <div class="pic_news">
         <h2>儿童节的来历</h2>
         <p><img src="images/1.jpg" alt="" /><p>
         <p>六一儿童节，也叫“六一国际儿童节”，每年6月1日举行，是全世界少年儿童的节日。</p>
         <p>……</p>
     </div>

第2步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式，设置图片的属性，将其控制到内容区域的左上角。

     <style type="text/css">
     .pic_news { width: 500px; /* 控制内容区域的宽度，根据实际情况考虑，也可以不需要 */ }
     .pic_news h2 {
         font-family: "隶书";
         font-size: 24px;
         text-align: center;
         }
     .pic_news img {
         float: left; /* 使图片旁边的文字产生浮动效果 */
         margin-right: 16px;
         margin-bottom: 16px;
         height: 250px;
         }
     .pic_news p { text-indent:2em; /* 首行缩进2个字符 */
         }
     </style>

简单几行CSS样式代码就能实现图文混排的页面效果，其显示效果如图4.32所示，其中重点内容就是将图片设置为浮动，float:left就是将图片向左浮动。

图4.32　图文混排的页面效果

4.4.2　设计按钮

视频讲解

本例设计的纯CSS按钮具有如下特点。

☑　不需要图片和JavaScript。

☑　支持3种按钮状态：正常、悬停和激活。

☑　可以应用到任何HTML元素，如a、input、button、span、div、p、h3等。

☑　安全兼容不支持CSS3的浏览器，如果不兼容CSS3，则显示没有渐变和阴影的普通按钮。

本案例设计的按钮效果如图4.33所示。按钮在正常状态下有边框的渐变和阴影，在鼠标经过时按钮会显示比较暗的渐变效果，当按下鼠标时会翻转渐变，并显示一个像素的下沉效果，按钮字体颜色加深。

图4.33　设计精致的按钮

本例主要代码如下。

4.4.3　设计花边框

视频讲解

本例使用CSS3多背景设计花边框，使用background-origin属性定义仅在内容区域显示背景，使用background-clip属性定义背景从边框区域向外裁剪，效果如图4.34所示。

图4.34　设计花边框效果

本例主要代码如下。

4.4.4　设计图片镶边特效

视频讲解

本例使用背景图像为照片设计镶边效果。这里为img元素定义一个默认的阴影样式，这样当在网页中插入一个图像时，它会自动显示为阴影效果，如图4.35所示。

其实定义这样的默认样式比较简单，首先需要在图像编辑器中设计一个4像素高、1像素宽的渐变阴影，如图4.36所示。

图4.35　为图像定义默认的阴影样式

图4.36　设计一个渐变阴影图像

然后在网页中定义如下样式即可。注意，在定义底边内边距时，考虑到底边阴影背景图像可能要占用4个像素的高度，因此要多设置4像素。左右两侧的阴影颜色可以根据网页背景色适当调整深浅。

4.4.5　设计发光的球体

视频讲解

本例使用CSS3径向渐变制作圆形球体，主要利用多重背景进行设计，然后使用径向渐变叠加设计球体和发光的光晕效果，如图4.37所示。

图4.37　设计发光的球体

本例主要代码如下。

     <style type="text/css">
     * {margin: 0; padding: 0;}
     div {
         width: 300px; height: 300px; margin: 50px auto;
         border-radius: 100%;
         background-image: radial-gradient(8em circle at top, hsla(220,89%,100%,1), hsla(30,60%,60%,.9));
     }
     </style>
     <div></div>

4.4.6　设计图标

视频讲解

本例通过CSS3径向渐变制作圆形图标按钮，用到的知识点主要包括：使用radial-gradient属性定义网页背景，以及按钮被激活状态的径向渐变效果；使用background-image属性定义多重背景效果，其中一个为浅灰色亮面，另一个是深陷的暗点；使用background-position属性把这两个绘制的背景图像叠加在一起；使用background-size属性定义多重背景显示大小为16px*16px，然后按默认状态平铺显示。设计效果如图4.38所示。

图4.38　定义网页麻点背景效果

使用@font-face命令导入外部字体font/icomoon.eot，定义字体图形效果。

使用radial-gradient属性为按钮标签定义径向渐变，设计立体按钮效果，使用border-radius: 50%;声明定义按钮圆形显示，使用box-shadow属性为按钮添加投影效果。

使用text-shadow属性为按钮文本定义阴影效果，当鼠标经过按钮时，使用text-shadow属性设计文本发亮显示。

当按钮被激活时，使用box-shadow属性定义按钮内阴影，增亮按钮效果，使用radial-gradient设计环形径向渐变效果，为按钮添加晕边效果。

示例效果如图4.39所示。

图4.39　设计径向渐变图标按钮效果

主要页面代码如下。

4.4.7　设计图片水印

视频讲解

本例利用opacity属性设计水印特效，同时利用CSS定位技术实现水印与图片重叠显示，演示效果如图4.40所示。

图4.40　设计水印特效

【操作步骤】

第1步，启动Dreamweaver，新建一个网页，保存为test.html。

第2步，构建一个简单的HTML结构。设计一个包含框（<div class="watermark">），主要是为水印图片能够在照片上精确定位提供一个参照，并把它们都捆绑在一起，避免在网页中随处浮动。插入的第1幅图片为照片，第2幅图片为水印图片，代码如下。

     <div class="watermark">
         <img src="images/bg.jpg" class="img" width="400">
         <img src="images/logo.png" class="logo" width="100">
     </div>

在没有任何样式的情况下，显示如图4.41所示的效果。

图4.41　插入图像后的效果

第3步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后准备输入样式。

第4步，首先定义包含元素为相对定位，这样能够保证水印图片定位在照片上面。由于div元素默认显示块状态元素，宽度为100%，此时无法精确定位内部的水印。如果固定宽度，就使设计失去了灵活性，还需要确定包含元素和照片的宽度。具体样式如下。

第5步，下面定义一个类样式，设计阴影图片效果。

     .img {
         background: white;
         padding: 5px 5px 9px 5px;
         background: white url(images/shad_bottom.gif) repeat-x bottom left;
         border-left: 2px solid #dcd7c8;
         border-right: 2px solid #dcd7c8;
     }

第6步，定义水印透明度和精确定位的位置，具体样式如下。

IE使用专有的CSS滤镜filter:alpha(opacity)来定义对象的透明度，而Moz Family浏览器使用私有属性-moz-opacity来定义，对于标准浏览器来说，一般都支持标准属性opacity。上面的样式定义水印图片的透明度为0.4，位于照片的右下角。

上一章目录下一章