CSS Basic Learning 19: CSS layout of the text mix, image signature, multi-image stitching and picture effects

Learning CSS layout Positioning and floating, we can easily make a lot of typesetting and content stitching. Let's do a few simple examples today and present

The easy-to-use layout of the popular div+css. And by the way, CSS3 new style properties Box-shadow and property transform.

A picture-and-text mixed row

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
：

Two-image signature
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
：

Three multi-figure stitching
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
：

Four image effects
Before we make this example, we will briefly introduce the new style properties of CSS3: Box-shadow (Border Shadow) and transform (rotation effect). In
Learn CSS When learning a lot of box model of the style properties, to combine will also make a good effect. Take a look at it in detail : css3box-
Shadow Property and Css3transform properties. 
(1) Border Shadow properties: Box-shadow
Set the shadow of an element, but you can also add a shadow effect without a border
Syntax rules:
BOX-SHADOW:APX bpx CPX #xxxxxx;
BOX-SHADOW:APX bpx CPX RGB (0,0,0,0.1);
The APX represents the horizontal movement, the BPX represents the vertical movement, the CPX represents the blur distance of the shadow, and the last face is the color value.
(2) Rotation effect properties: Transform
Sets the rotation of the element, applying a 2D or 3D transformation to the element. This property allows us to rotate, scale, move, or skew elements.
Transform:rotate (angle unit is deg); Define 2D rotation Specify the angle in the parameter, angle represents the angle.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
：


CSS Basic Learning 19: CSS layout of the text mix, image signature, multi-image stitching and picture effects