1. CSS floating
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.wrapper{
width: 600px;
margin: 0 auto;
border: 1px solid #000000;
}
.box1,.box2{
width: 200px;
height: 150px;
}
.box1{
background-color:#ff0000 ;
float: left;
}
.box2{
background-color:#55aa00 ;
float: right;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</html>
2. Floating layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.info-show{
width: 600px;
padding: 20px;
border:1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.head-scuipture{
float: left;
text-align: center;
margin: 20px;
background-color: #fff;
}
.head-scuipture .photo{
width: 200px;
height: 300px;
border: 1px solid #ccc;
text-align: cennter;
display: table-cell;
vertical-align: middle;/* 垂之举中 */
}
.discript{
width: 340px;
float: left;
height: 290px;
border: 1px solid #ccc;
padding: 10px 0 0 20px;/* 上/右/下/左 */
}
</style>
</head>
<body>
<div class="info-show">
<div class="head-scuipture">
<div class="photo">头像</div>
<div class="txt">姓名</div>
</div>
<div class="discript">描述</div>
</div>
</body>
</html>
3. Box model
4. Tables and lists
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<style>
table,td{
border: 1px solid #666;
border-collapse: collapse;
margin: 0 auto;
width: 500px;
}
</style>
</head>
<body>
<table >
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>
</body>
</html>
list style
5. Carousel
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<link rel="stylesheet" href="carouse.css">
</head>
<body><!-- .carousel>ul.carouse-imgs>li*3>a[href=#]>img[src=banner_0$.jpg alt=banner] -->
<div class="carousel">
<!-- 1.轮播组图 -->
<ul class="carouse-imgs">
<li><a href="#"><img src="img/banner_01.jpg" alt="banner"></a></li>
<li><a href="#"><img src="img/banner_02.jpg" alt="banner"></a></li>
<li><a href="#"><img src="img/banner_03.jpg" alt="banner"></a></li>
</ul>
<!-- 2.控制器 .prev+.next前后翻页-->
<div class="prev"></div>
<div class="next"></div>
<!-- 3.计数器 -->
<div class="count">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
a{
text-decoration: none;
}
.carousel{
width: 1000px;
height: 300px;
margin: 0 auto;
background-color: #444;
position: relative;/* 相对定位 */
overflow: hidden;
}
.carouse-imgs{
width: 99999px;
}
.carouse-imgs img{
width: 1000px;
height: 300px;
}
.carouse-imgs li{
float: left;
}
.prve{
width: 45px;
height: 45px;
background-image: url(banner.jpg);
position: absolute;/* 绝对定位 */
left: 50px;
top: 50%;
margin-top: 16px;
}
.next{
background-image: url(banner.jpg);
right: 50px;
}
.count{
width: 1000px;
height: 10px;
position: absolute;
bottom: 25px;
}
.count ul{
width: 120px;
height: 10px;
margin: 0 auto;
background-color: #f00
}
.count ul li {
width: 10px;
height: 10px;
background-color: #666;
opacity:.5 ;
float: left;
border-radius:50% ;/* 圆角 */
}
.count.active{
background-color: #ffc392;
opacity: 1;
}6. Positioning
7. BFC and IFC
BFC&IFC
FC:Fomatting Context (formatting context). It is a concept in the CSS2.1 specification. It is a rendering area in the page
, and has a set of rendering rules, which determine how its child elements will be positioned, as well as the relationship and interaction with other elements.
Divided into: BFC and IFC.
1) BFC: block-level format context
a) Conditions for forming BFC
i) floating element (float value other than none)
ii) positioning element (position(absolute/fixed))
iii) display (value is inline-block/table- When cell/table-caption)
iv) overflow (when the value is hidden/auto/scroll)
b) BFC characteristics (rules)
i) The inner boxes will be placed one by one in the vertical direction
ii) The distance in the vertical direction will be Overlay, the value is determined by the maximum margin value (if you don’t want to overlay, you need to turn the box into an independent box) iii
) The BFC area will not overlap the float element area
iv) When calculating the height of the BFC, the floating element also participates in the calculation
of v ) BFC is an independent container on the page, and the child elements inside the container will not affect the elements outside
c) The role of BFC
i) Solve the problem of margin overlap (add independent BFC)
ii) Solve the problem of floating height collapse (add overflow:hidden to the parent)
iii) Solve the problem of encroaching floating elements (add overflow:hidden to clear the float)
2) IFC: internal Inline (row-level) formatting context
a) Conditions for forming IFC
i) font-size
ii) line-height
iii) height
iv) vertical-align
b) IFC characteristics (rules)
i) IFC elements will be arranged in a row from left to right alignment
ii) all elements on a line will form a line box in that area
iii) the height of the line width is the height of the containing box, and the height is the height of the tallest element in the line box
iv) floated elements will not be in the line box , and the floating element will compress the width of the line box
v) When the width of the line box cannot accommodate the child element, the child element will be displayed on the next line, and a new line box will be generated
vi) The elements of the line box follow text-align and vertical- align
6. The height of the container:
height = line-height + vertical-align
8. Web page layout tab
header: header
nav: navigation bar
aside: sidebar
main: main body
section: block
article: article
footer: footer
9. Semantic tags
1) mark: highlight (row level)
2) details (description) and summary (abstract): generally used for term explanation or for encapsulating a block, etc. 3)
meter: define weight and measure
attributes: value/min/max
4 )progress: progress bar
attribute: value/min/max
5)dialog: dialog box or window
6)figure: used to combine elements (generally used to combine the title, picture and picture description of a picture, etc.)
10. HTML5 common attributes
1) contentEditable
converts the label into an editable state. Available for all labels. Its value is true/false.
2) hidden
hides the element. It is generally used to pass a value or when a certain condition is met, the execution content is displayed. The default value is hidden.
3) data-*
is used to store private custom data of pages or applications. Generally used for passing values.
4) multiple
stipulates that multiple contents can be selected in the input field. Used in form components, such as file/select.
5) The required
constraint form unit must enter a value before submission. It is used in form components and needs to be used in conjunction with the submit button.
6) pattern
is used to validate the pattern of the input field. It is used in form components and needs to be used in conjunction with the submit button.
Form components
1) color: color
2) email: mailbox
3) tel: phone number
4) url: URL
5) number: number
6) range: range
7) search: search
8) date: date
9) datetime: datetime
10 ) datetime-local: the current date and time
11) year: year
12) month: month
13) time: time
form attribute
1) formaction: modify the place where action data is submitted
2) formenctype: modify the type of form request
3) formmethod: modify the method of data submission
4) form: set which form the form element belongs to
5) novalidate: do not verify
the 1input attribute
1) autocomplete: autocomplete is
used to help the user input, each input content, whether the browser saves the input value for future use. Values are:
on/off, default is on.
In order to protect sensitive data (such as user accounts, passwords, etc.) and avoid unsafe storage of them by the local browser, it is generally necessary to close them.
2) autofocus: automatic focus
3) step: step size
4) multiple: multiple selection
5) pattern: regular match
6) placeholder: input prompt
7) required: must input