Case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #f5f5f5;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}
.item {
width: 230px;
height: 322px;
padding: 30px 20px;
background-color: #fff;
box-sizing: border-box;
}
a {
color: #333;
text-decoration: none;
font-size: 14px;
color: #666;
}
.item .album {
text-align: center;
}
.item .album img {
width: 150px;
height: 150px;
}
.item .desc p {
line-height: 24px;
margin-top: 25px;
/* one line display...method */
/* overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; */
/* Multiple lines are omitted to display, if the text in the p element cannot be displayed normally, you need to set the width of the parent element*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.item.desc.price {
color: #e1251b;
}
.item .desc .price .symbol,
.item .desc .price .float {
font-size: 12px;
}
.item .desc .price .integer {
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
<div class="item">
<a href="#">
<div class="album">
<!-- The referrerpolicy attribute is used to solve the problem that network pictures cannot be displayed -->
<img
src="//i2.wp.com/img12.360buyimg.com/jdcms/s150x150_jfs/t1/129042/8/23901/164867/62451158E5a292e4c/5b754fa08ceea9c8.jpg.webp"
alt="" referrerpolicy="no-referrer">
</div>
<div class="desc">
<p>Midea (Midea) air fryer large-capacity household multi-functional electric fryer intelligent timing oil-free low-fat fryer temperature-controlled fried chicken and potato machine bar air oven EDB (4.5 liters) is only replaced for one year and will be new in February 2022</p>
<div class="price">
<span class="symbol">￥</span>
<span class="integer">399.</span><span class="float">00</span>
</div>
</div>
</a>
</div>
</body>
</html>
Realize the effect:
Background settings
background-image is used to set the background image of the element
- Will overlay (not cover) on top of background-color
If multiple images are set
- The first image set will be displayed on top, and other images will be stacked below in order
Note: If the element has no specific width and height after setting the background image, the background image will not be displayed
background-repeat is used to set whether the background image should be tiled
Common settings are
- repeat: tiling
- no-repeat: no tiling
- repeat-x: Only tile in the horizontal direction
- repeat-y: Tile only in the vertical direction
<style>
.box {
width: 500px;
height: 500px;
background-color: #f00;
background-image: url(./imgs/kobe01.jpg), url(./imgs/kobe02.png);
background-repeat: no-repeat;
}
</style>
<body>
<div class="box"></div>
</body>
background-size is used to set the size of the background image
- auto: default value, displayed in the size of the background image itself
- cover: Scale the background image to completely cover the elements, and the background image may not be visible
- contain: Scale the background image, the width or height is covered with elements, but the image maintains the aspect ratio
: percentage, relative to the background positioning area - length: specific size, such as 100px
background-position is used to set the specific position of the background image in the horizontal and vertical directions
Mainly used for image subject positioning
- You can set specific values such as 20px 30px;
- The horizontal direction can also be set: left, center, right
- The vertical direction can also be set: top, center, bottom
- If only one direction is set, the other direction defaults to center
background-attachment
Determining the position of the background image is in
Viewport
Fixed inline, or scrolls with the containing block.
The following 3 values can be set
- scroll: This key attribute value indicates that the background is fixed relative to the element itself, rather than scrolling with its content
- local: This key property value indicates that the background is fixed relative to the content of the element. If an element has a scrolling mechanism, the background will scroll with the element’s content.
- fixed: This key property value indicates that the background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background will not scroll with the element’s content.
img, as an important part of web content, such as advertising pictures, LOGO pictures, article pictures, product pictures
background-image, optional. Yes, it can make the web page more beautiful. None, and does not affect the user’s ability to obtain complete information about the content of the web page
emmet syntax
Emmet (
Formerly
Zen Coding)
is one that can substantially
Improve front-end development efficiency
A Tool
.
- In the process of front-end development, a large part of the work is to write HTML and CSS codes. If you write them manually, the effect will be very low.
- VsCode has built-in Emmet syntax, and after entering the abbreviation in the suffix .html/.css, press the Tab/Enter key to automatically generate the corresponding code
! and html:5 can quickly generate a complete structure of html5 code
>(offspring) and + (sibling)
- div>ul>li
- div + div>p>span + i
- div + p + ul>li
y
* (multiple) and ^ (upper level)
- ul>li*5
- div + div>p>span^h1
- div + div>p>span^^^^h1
coderwhy
() (grouping)
- div>(header>ul>li*2>a) + footer>p
Attribute (id attribute, class attribute, common attribute) {} (content)
- div#header + div#main>.container>a[href]
- a[href=”http://www.baidu.com”]{Baidu look}
$(number)
- ul>li.item$*5
Implicit tags
CSS Emmet
Structural pseudo-class
:nth-child
:nth-child(1)
- Is the first child element in the parent element
:nth-child(2n)
- n stands for any positive integer and 0
- It is the even-numbered child element in the parent element (the 2nd, 4th, 6th, 8th…) Synonymous with: nth-child(even)
:nth-child(2n + 1)
- n stands for any positive integer and 0
- It is the odd-numbered child element (1st, 3rd, 5th, 7th…) in the parent element Synonymous with: nth-child(odd)
nth-child(-n + 2)
- Represents the first 2 child elements
:nth-last-child( )
The syntax of :nth-last-child() is similar to that of :nth-child(), the difference is: nth-last-child() counts forward from the last child element
- :nth-last-child(1), represents the last child element
- :nth-last-child(-n + 2), representing the last 2 child elements
:
nth-of-type() is similar to :nth-child()
- The difference is: nth-of-type() only counts elements of the same type when counting
:nth-last-of-type() is similar to :nth-of-type()
- The difference is: nth-last-of-type() counts forward from the last child element of this type
negation pseudo-class
The format of :not() is :not(x)
- x is a simple selector
- Element selectors, universal selectors, attribute selectors, class selectors, id selectors, pseudo-classes (except negative pseudo-classes)
:not(x) means
Elements other than x
Other common pseudo-classes (know):
- :first-child, equivalent to :nth-child(1)
- :last-child, equivalent to :nth-last-child(1)
- :first-of-type, equivalent to :nth-of-type(1)
- :last-of-type, equivalent to :nth-last-of-type(1)
- :only-child, is the only child element in the parent element
- :only-of-type, is the only child element of this type in the parent element
The following pseudo-classes are occasionally used:
- :root, the root element, is the HTML element
- :empty represents a completely blank element inside
Form
Use of input elements
- type: the type of input
- text: text input box (plain text input)
- password: text input box (cipher text input)
- radio: radio button
- checkbox: checkbox
- button: button
- reset: Reset
- submit: Submit form data to the server
- file: file upload
- readonly: read only
- disabled: disabled
- checked: checked by default, only available when type is radio or checkbox
- autofocus: When the page loads, automatically focus
- name: name, which can be used to distinguish data types when submitting data to the server
- value: value
For other values of type type and other attributes of input, check the documentation:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
The form can realize the button effect:
- Normal button (type=button): use the value attribute to set the button text
- Reset button (type=reset): resets all form elements of the form it belongs to (including input, textarea, select)
- Submit button (type=submit): Submit the form data of the form it belongs to to the server (including input, textarea, select)
The label element is generally used in conjunction with the input to indicate the title of the input
label can follow
An input binding, click on the label
can
Activate the corresponding input
become selected
Use of radio
We can set the type to radio to turn it into a radio box, only radios with the same name value have the radio function
Use of checkbox
We can set the type type to checkbox to become a multi-selection box:
Belong to the same type of checkbox, the name value should be consistent
Use of textarea
Common properties of textarea:
- cols: number of columns
- rows: number of rows
Css settings for scaling
- Disable scaling: resize: none;
- Horizontal scaling: resize: horizontal;
- Vertical scaling: resize: vertical;
- Horizontal and vertical scaling: resize: both;
Use of select and option
option is a child element of select, an option represents an option
select common attributes
- multiple: Multiple selections are possible
- size: how many items to display
option common attributes
- selected: selected by default
Common properties of form
form is usually used as the parent element of the form element:
- form can operate the entire form as a whole;
- For example, reset the entire form;
- For example, submit the data of the entire form;
The common attributes of form are as follows:
action
- Request URL for submitting form data
method
- Request method (get and post), the default is get
target
- Where to open the URL (refer to the target of the a element)