Home > Developer > Web Develop
This study material explains:
The importance of "box model, standard flow, floating and positioning" is emphasized in the layout and aspect of the electronic album through CSS.
First look at the "two-way linkage mode" of the electronic album diagram:
{When the mouse pointer passes through a picture (or a paragraph of text), the corresponding text (or a corresponding picture) is displayed in a special style}
The above section will appear in the (12) page style Synthesis---Flexible electronic album {Next}, here is just ahead of the experience.
1. Building the basic framework
The framework should mainly consider the specific structure and form of the album in the actual page, including the method of the overall arrangement of the photos, the user's possible browsing situation, whether the photos need to be adjusted automatically, and so on.
First, for array mode, different users may have different browsers. A user with a display resolution of "1024x768" may want to display a 5~6 thumbnail per line, or a user with a display resolution of "1280*1024" or want to hold 7~8 per row, widescreen users may want to show more per row. Second, even under the same browser, users are not necessarily able to enjoy the full screen, which requires photos to automatically arrange and line-wrapping. If you use <table> typesetting it is not possible to achieve this in any way.
For the details of the pattern, the photo information is usually around the side, the designers often do not want to redesign the overall framework, and in the hope that on the basis of the array framework, by directly modifying the CSS file can achieve the overall transformation. This is also impossible for <table> typesetting.
Taking into account the above requirements, each photo and other related information is separated by a <div> block, and according to the photo of the horizontal and vertical to set the corresponding CSS category, the code is as follows:
"Simple Case":
<!doctype html>
The above is the basic framework of the HTML section, each <div> block in the framework sets a number of different CSS categories, followed by the following one by one.
(1) in the category of <div> block properties, "Pic" is used primarily to declare all <div> blocks containing photos, unlike other <div> blocks that do not contain photos.
(2) in the "Pic" category, there are some "pt", some "LS", where PT (portrait) refers to the vertical direction of the photo, that is, the height of the photo is greater than the width, and LS (landscape) refers to the horizontal direction of the photo.
(3) Category "TN" refers to hyperlinks to thumbnails that distinguish other hyperlinks that may appear in the page. The various <li> tags under the <ul> tag are added to the corresponding CSS category for settings under detailed information.
So the basic framework is set up, using the same way, you can add more <div>, each <div> format is exactly the same. Just set the category by whether the photo is horizontal or vertical and enter the relevant text information. There are no CSS-style graphs set at this time:
because no styles have been set yet, everything is arranged from top to bottom .
2, make "pattern" electronic album.
First of all to understand the "pattern mode" implementation, it mainly requires the photo can be automatically based on the width of the browser to adjust the number of photos per row, in the CSS layout is exactly engraved with the float attribute two implementations. In addition, considering the need to arrange neatly, and the picture has horizontal display also has the vertical display, therefore expands the block to a square, and gives the picture the border. Let's look at the picture first:
a row can show more photos when the browser changes width
The following article describes the "simple case" to add the CSS part of the decoration:
{1} Implements the overall structure:
Div.pic{/*set each div to a fixed height and width, add a left float, and use margin to separate the adjacent Div*/Height:160px;width:160px;/*the size of each picture block*/float: Left;margin:5px; }div.pic img{/*set the IMG element in the Div, that is, the border of the image to none, because the image is in the link, and if you do not remove the border, the default coarse border will appear, affecting aesthetics. */Border:None; }
：
1, /* div Set fixed height and width add left floating , with margin Span style= "font-family: the song Body;" > The adjacent div separated by Span style= "font-family: ' Times New Roman ';" >*/
2./* sets the img element in div , that is, the border of the image to none, This is because the image is in the link , and if you do not remove the border, the default thick border will appear, affecting aesthetics. */
{2} Add Background "White" graph, cancel <ul> info:
Div.ls{background:URL (framels.jpg) no-repeat Center;/*background of the horizontal photo*/}div.pt{background:URL (framept.jpg) no-repeat Center;/*the background of the vertical photo*/}div.ls img{/*Horizontal Photos*/margin:0px;Height:90px;width:135px; }div.pt img{/*Vertical Picture*/margin:0px;Height:135px;width:90px; }Div.pic ul{/*Pattern mode, non-explicit photo information*/Display:None; }
/* Set the width of the image, if you confirm that the image is exactly the size of the pixel and 135 pixels, you can not set it. The function here is that if the size of the image is not exactly so large, it can be forced to display at the correct size * /
：
3./* Add a shaded border to a picture with a width greater than height: horizontal 90*125 pixels * /
4./* Add a shaded border to a picture with a width greater than height: horizontal 90*125 pixels */* Add a shaded border to a picture with a height greater than width: 135*90 pixels vertically */
5,/* Set the width of the image, if you confirm that the size of the image is exactly pixels and 135 pixels, you can not set. The function here is that if the size of the image is not exactly so large, it can be forced to display at the correct size * /
6, currently in the array mode, do not need to display the specific text information of the photo, so the <ul> tag display is set to none .
{3} adjusts the hyperlink block position to increase the background image when the mouse pointer passes through:
Div.ls a{Display:Block;/*defined as a block element*/padding:34px 14px 36px 11px;/*extend a hyperlink area to the entire background block*/}div.pt a{Display:Block;/*defined as a block element*/padding:11px 36px 14px 34px;/*extend a hyperlink area to the entire background block*/}div.ls a:hover{/*Modify background picture when mouse pointer passes*/background:URL (framels_hover.jpg) no-repeat Center;/*add an orange background to the horizontal direction picture with a width greater than height: 90*125 pixels horizontally*/}div.pt a:hover{background:URL (framept_hover.jpg) no-repeat Center/*add an orange background to the vertical direction picture with a height greater than the width: transverse 135*90 pixels*/}
/* Set the width of the image, if you confirm that the image size is exactly 90 pixels and 135 pixels, you can not set it. The function here is that if the size of the image is not exactly so large, it can be forced to display at the correct size */
"Pattern Mode":
7, set the hyperlink as a block element, and use the padding value to extend the scope to the entire div block "160px*160px" Range, and by adjusting 4 values, the effect of the photo is placed exactly in the white rectangular area of the background map.
8, take into account the protruding effect of hyperlinks, and then the mouse pointer after the photo is made two orange background, one for the horizontal photo, one for vertical photos.
3. Single-row mode
Let's look at the picture first:
, all photos are arranged vertically, and the right side of each photo displays detailed information about the photo.
The following continues to refer to the structure of the "Simple Case" HTML section described earlier, and theCSS section adds some CSS adornments. (some of the added CSS decorations are shown in pink)
{1} set the hyperlink for a picture to float to the left, and the photo information is not hidden :
div.pic{width:450px; height:160px; margin:5px; } div.pic img{Border:none; } div.pic a.tn{Float:left; }Div.ls{background:URL (framels.jpg) no-repeat left;/*background of the horizontal photo*/}div.pt{background:URL (framept.jpg) no-repeat left;/*background of vertical photo*/}div.ls img{/*Horizontal Photo*/ /*The image is set to a fixed width, height, in order to match the newly added background map, so that the picture looks more beautiful*/margin:0px;Height:90px;width:135px; }div.pt img{/*Vertical Photo*/margin:0px;Height:135px;width:90px; }Div.ls a{Display:Block;padding:34px 14px 36px 11px;/*extend a hyperlink area to the entire background block*/}div.pt a{Display:Block;padding:11px 36px 14px 34px;/*extend a hyperlink area to the entire background block*/}div.ls a:hover{background:URL (framels_hover.jpg) no-repeat Center; }div.pt a:hover{background:URL (framept_hover.jpg) no-repeat Center; }
"The added part of the CSS adornment is shown in pink " explanation: Because the a element in the DIV is set to the left float, the list text behind it wraps around it, thus appearing on its right.
：
{2} settings <ul> List's overall position, border and other properties; for three item list <li> add individual styles:
Div.pic ul{ margin:0 0 0 170px; padding:0 0 0 0.5em; Background: #dceeff; border:2px solid #a7d5ff; font-size:12px; List-style:none; Font-family:arial,helvetica,sans-serif; position:relative; top:50px; } Div.pic li{ line-height:1.2em; margin:0; padding:0; } Div.pic li.title{ font-weight:bold; Padding-top:0.4em; Padding-bottom:0.2em; border-bottom:1px solid #a7d5ff; Color: #0044586; } Div.pic li.canto{ color: #0068c9; margin:0 2px 0 13em; padding-left:5px; border-left:1px solid #a7d5ff; } Div.pic li.price{ color: #0068c9; Font-style:italic; Margin::-1.2em 2px 0 18em; padding-left:5px; border-left:1px solid #a7d5ff; }：
The basic method has been introduced here.
(11) Web-style synthesis---flexible e-albums {on}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
