The last section of the study, there are a few points, you can pay attention to. or recommend doing so.
Class can set multiple values-CSS style reuseYou can set multiple class values for a tag so that we can apply a style to each class. If the label has multiple classes, it applies multiple styles to the tag. And then the other tags require the reuse of some of the styles, only need to set the class is good.
To set values for multiple classes, just separate each value with a space. The following example sets the background color, height, width, and frame, and then the DIV has more than one class:
div make page Layout suggestionsThe whole page first from top to bottom into a number of pieces, each piece according to the following ideas.
Write the first level div, you can set the background color, if you need to set height (height) and vertical Center (line-height), set the height is fixed height, we want to ensure that the internal elements are not exceeded. Without height, the height of this div is propped up by internal elements.
Do not set the width. So that it can fill a whole block.
Then write the second Div, which sets the width of a pixel. This allows you to limit the contents of your entire block to this area. If the page width is too small, scroll bars will appear at the bottom of the page without confusing the content.
The third layer can begin to write your content, you can continue to use Div can also use other tags, width can use the percentage. Continue to use pixels OK, but if the second width to adjust, and the width of the inside is a percentage, it seems to be automatically adjusted. If you use float, don't forget to clear it at last.
<body><div class="lv1" style="background-color: #dddddd;height: 48px;line-height: 48px;"> <div class="lv2" style="width: 800px;"> <div style="width: 30%;float: left;">左边的内容</div> <div style="width: 70%;float: left;">中间的内容</div> <div style="clear: both;"></div> </div></div></body>
Recommendations for IMG TagsThe IMG tag (image) in the A tag, which may be opened on IE, has a blue border on the outermost side. Although I have tried on my own IE11, and there is no, maybe the old version still has this problem. The color of this border should be the color of the hyperlink font, and all we have to do is remove the bounding rectangle outside of the IMG. The procedure is also very simple, write an IMG tag Selector, set border to 0 without a border. We can always add a tag selector to the head to avoid this problem without worrying about what happens to clients that don't have a similar problem:
CSS SupplementsThe previous section of the CSS content is not finished, this section continues to talk about the following.
Positioning-positionThe Position property defines the positioning mechanism used to establish the element layout.
fixed-fixed to a location in the windowposition: fixed;: Fixed to a location in the window. Combine top, right, botom and left to determine the fixed position.
In the lower right corner of the page, place a button that returns to the top and position it with position:
There is no way to return to the top of the effect, we also need to learn from the next JavaScript to achieve a click back to the top of the page.
Then implement a menu that always appears at the top of the page:
Like the previously learned float, the DIV is no longer full line after using the position style. We set the left and right properties so that he is full on both sides. The following menu 2 does not have the effect of setting left and right.
Also, because of the use of position, there is a layered effect. The contents of the following DIV tags are also displayed from the top of the page. In order not to let the menu cover the main content, we set the margin (Margin-top) to the following Div. Separate the contents of the two parts.
absolute-Absolute PositioningBoth this and the fixed are the decision to locate. So the main to look at and fixed the difference. Change the Position property in the example above back to the top to absolute to see the effect. At first glance, it looks the same, but if the scroll wheel is found, he will move together. That is, after the absolute is absolutely positioned, it is fixed on top of the parent element.
The example of the above menu is also changed to absolute, the menu is still on the top of the page, but down the Flow page, the menu will roll up the screen.
Ablolute Single Application scenario is not many, mainly combined with the following to be spoken relative positioning together. Position an element absolutely to another relative positioned element.
relative-relative positioningAs mentioned in the test absolute above, he is absolutely positioned on its parent element. In the example above, the actual decision is to locate the entire page. If you want to position it in another element, simply adding an element tag to the outer layer is useless. You also need to add this attribute to the element to be position: relative; recognized as the parent tag of the absolute.
<body><div style="height: 50px;width: 100px;border: 1px solid black;position: relative;"> <div style="background-color: red;position: absolute;bottom: 0;left: 0;right: 0;">相对定位</div></div></body>
Set offset : There are also top, right, bottom, left properties. The offset set here. If you set the Offset property, the offset is relative to its normal position.
Positioning in the middle of the screenAfter using the Position property, the margin: 0 auto Center is not implemented by the. So what's the center going to do now?
The offset property can use pixels (px) as well as percentages. Set to 50% the center is natural. But this position is the starting position of the element, which is the upper-left corner instead of the center. So we have to calculate the height and width of the element, and use the margin to hold the element back:
<body><div style="background-color: red;height: 80px;width: 80px;position: fixed;top: 50%;left: 50%;margin-top: -40px;margin-left: -40px;">正中间</div></body>
Layering (Z-index)When the position attribute is applied to an element, a hierarchy occurs. The position element will always be on top of other standard elements. The following example, regardless of the order of the Div, is the position element in the upper layer:
<body><div style="position: fixed;top: 20px;left: 20px;background-color: red;height: 70px;width: 70px;"></div><div style="height: 100px;width: 100px;background-color: blue;"></div></body>
So, we divide the page into 2 layers. Then there are 2 layers, which can be 3 layers or even multilayer.
The Z-index property sets the stacking order of the elements. Works only on positioned elements (for example, Position:absolute;). The larger the value, the outer layer, which can be negative. Not set the words should be 0
<body><div style="z-index: 10;position: fixed;top: 30px;left: 30px;background-color: yellow;height: 50px;width: 50px;"></div><div style="z-index: 5;position: fixed;top: 20px;left: 20px;background-color: red;height: 70px;width: 70px;"></div><div style="height: 100px;width: 100px;background-color: blue;"></div></body>
In the example, if the Z-index is not set, or the value is set, then the hierarchy relationship is indeterminate. The order of the labels is adjusted, and the effect will be different (the following labels will cover the front). Once the Z-index is set, we can determine the hierarchical relationship of the positioned elements.
Transparency-opacityThe above has learned the level of the page, the lower page will be covered by the upper page. Here we can set the Opacity property of the label, so that the upper page does not completely cover the following content, but a bit of transparency.
Opacity properties, transparency. The value range is from 0.0 (fully transparent) to 1.0 (completely opaque).
<body><div style="font-size: 48px">网页的内容</div><div style="opacity: 0.8;background-color: #dddddd;position: fixed;top: 0;left: 0;bottom: 0;right: 0"></div></body>
Summary-Comprehensive application We can design a page like this. Normally displays normal content (this is the first layer). When we click on a button to submit data, we need to block out the user's actions on the previous page content. There is a second layer, translucent overlay, as in the case of transparency. Then pop a form (the third layer) in the middle of the page and let the user submit the data. This three-layer code is probably like this:
Open the page directly, should only show the first layer of content, the other two layers temporarily set up display :none; hidden. Here JS has not learned, the content of the webpage can add a button, trigger a JS, modify. The display property in the disappear is changed to unset (which is not set). Here we can only temporarily change the first look at the effect. After the modification, the contents of the second and third layers are displayed. The content of the page is overwritten first, and the user cannot select the first layer of content at this time. Then the middle is a popup interactive interface where the user can enter a content submission form, or other interactive content that will be learned later.
Overflow handling-overflowLet's take a look at the example showing the picture. Find a bigger picture and put it in a div. Div sets the height and width of the smaller point. The effect is as follows:
<body><div style="height: 100px;width: 80px;"> </div><div style="background-color: red;">看看这个内容在哪里</div></body>
Although the div sets the scope, the image in the div is displayed in normal size and is not subject to the size of the previous DIV tag, which overflows. A div is added to the back, and you can see that it is displayed after the range of the previous Div.
To deal with this problem, we can also set a size for the image, for example: style="height: 100%" . This displays the entire picture, but adapts to a single dimension.
The point here is to handle the processing rules for overflow content (image size unchanged) by setting the overflow property in the Div.
overflow: hidden;: The content is trimmed and the rest is not visible.
overflow: auto;: If the content is trimmed, the browser displays a scroll bar to view the rest of the content.
overflow: scroll;: Ditto, same as auto.
Here is an example of a picture, but in practice, there may be situations where overflow can be handled. General picture processing more should be set an IMG size, do a zoom. And in a limited size area to display a lot of text, more suitable for use overflow:
<body><div style="background-color: #dddddd;height: 100px;width: 150px;overflow: auto;"> 这个属性定义溢出元素内容区的内容会如何处理。 如果值为 scroll 或 auto，则会提供一种滚动机制。 如果值为 hidden，则溢出的部分会被修剪并隐藏。 默认值是 visible。</div>
: Hover pseudo-ClassThe CSS property will not take effect until the mouse is moved over the element. The following is an example of a menu that has been implemented with hover, which changes the style when the mouse is placed on it:
In addition here a label style setting is also worth reference. This is set display: inline-block; so that the height of a tag can fill the height of the entire div. If you comment out the height of the display,a tag, only the height of the text (you can see the effect by hovering over the mouse). The transverse width is recommended here with the inner margin (padding).
Background image-backgroundBefore we used to set the background color with background, we can also use the picture as the background. The code is as follows:
<body><div style="background-image: url(‘1.jpg‘);height: 800px;width: 600px"></div></body>
The effect here is repeated using this image to tile the entire area. The proportions of the pictures do not change, and the extra parts are cropped out.
Web Color Gradient BackgroundThe effect of the gradient background can be achieved by using the tiling feature. Make a 1-pixel, 1000-pixel gradient image, do a gradient in this picture, and then use it as a background image. After being tiled, it is a gradient color background. This method should be generic.
Restricting the orientation of tilesBased on the above, add a Background-repeat property to display the picture to tile.
<body><div style="background-image: url(‘1.jpg‘);height: 800px;width: 600px;background-repeat: no-repeat"></div></body>
background-repeat: no-repeat: Tile is not allowed
background-repeat: repeat-x: Tile only horizontally
background-repeat: repeat-y: Tile only vertically
Position the background map (keyed)There is such a picture:
Well, it's a picture of a lot of small icons, and now you're going to show one of those icons. We can do this:
<body><div style="background-image: url(‘2.png‘);background-repeat: no-repeat;border: 1px solid black;height: 20px;width: 20px;"></div></body>
This shows the first icon is not a problem, if you want to display the following icon, we need to move the image up, this uses the Background-position property, the background map to do a positioning:
<body><div style="background-image: url(‘2.png‘);background-repeat: no-repeat;background-position: 1px -119px;border: 1px solid black;height: 20px;width: 20px;"></div></body>
Background-position-x and background-position-y are individually adjusted for the x and Y axes.
The Background property can also be abbreviated as follows: background: url(2.png) 1px -119px no-repeat; picture path, longitudinal displacement, lateral displacement, whether tiled.
The advantage of this is that a single request has several icons, reducing the number of interactions between the client and the server. If each small icon holds a separate picture, a request may also be initiated each time a new icon is acquired. So for this small icon can be spliced in a picture to use.
Summary-Classroom ExercisesMake an input box with an icon on the right, similar to this:
Use the above-mentioned positioning and background image method to position the icon to the right of the box.
It is important to note that the input range to the right is smaller than the entire border, otherwise the rightmost content will be blocked by the icon.
<body><div style="height: 24px;width: 150px;position: relative;"> <input type="text" style="height: 24px;width: 125px;padding-right: 25px;" /> <span style="background: url(2.png) 1px -119px no-repeat; display: inline-block; height: 20px;width: 20px; position: absolute;top: 5px;right: 0;"></span></div></body>
Python Automation Development Learning 15-css Supplemental content
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
