IFE Baidu Front-end Technical College 2016 spring class first stage task (1-4) Summary

Detailed description of specific tasks can be referred to Http://ife.baidu.com/task/all

Specific code reference: Https://github.com/sunshineqt/webxt/tree/master/stage1

Meet the problem and solve:

Task 1:

1 Chinese characters

Add <meta charset= "Utf-8" to the

2 Method property value in form

Post and get two attribute values, generally choose post, high security. Get is the data that is fetched from the server, and post is the data that is sent to the server. Get is the URL where the parameter data queue is added to the Action property of the submission form, and the value corresponds to the field one by one in the form, which is visible in the URL. Post is the HTTP post mechanism that places the fields within the form with their contents in the HTML header, along with the URL address referred to by the Action property. The user does not see the process.

3 Picture Insert File path correct input format problem

4 Copyright Input Method at the bottom of the page

<p> All rights reserved &copy</p>

5 How do I set the uppercase 1 or lowercase 1 in an ordered list?

Based on the value of the Li tag, the setting starts from where.

<ol>

<li value= "1" > Ranking 1</li>

<li> rankings 2</li>

<li> rankings 3</li>

</ol>

6 Drop -down box with up and down arrows, and default check

Cities: <select name= "City" multiple size= "1" style= "height:18px" >

<option value= "Hefei" > Hefei </option>

<option value= "Beijing" selected> Beijing </option>

<option value= "Nanjing" > Nanjing </option>

<option value= "Hangzhou" > Hangzhou </option>

</select>

7 Picture List with text descriptions in the top right corner of each picture

<figure>

<figcaption> good-looking pictures </figcaption>

</figure>

81 rows in two columns.

<TD colspan= "2" >1000</td>

Task 2:

1 HTML link links external style sheet CSS file

<link rel= "stylesheet" type= "text/css" href= "external style sheet file name. css"/>

2 How to set the border properties of a div in HTML

(1.) Add an external style

<style>

. div1{border:3px Solid #000} </style>

<div class= "Div1" > This is div1</div>

Border is the border property, 1px is the width of the border 1 pixels, solid border style solid line, #000为边框的颜色 Black

(2.) Add an internal style

<div style= "border:1px solid #000" > This is div1</div>

If you want to set the color for the left or right border individually, define that, border-left:1px solid #000;

3 background of entire Web page? Background color?

Background color settings: Background-color:gray;

Background picture settings: Background-image:url ("images/background.jpg");

4. Alignment in the form

Place the elements in a form form in a table, and then implement the alignment of the form by setting the alignment of the element properties in the table.

5. The bottom of the copyright all the words how to place in the middle of a column

By setting the Padding property and the Text-align property

6 Font Bold

Font-weight:bold;

7 about submitting the Submit button full browser width issue

<p class= "P1" ><input type= "Submit" value= "Confirm Submit" Width= "100%" ></p>

Task 3:

1. Three-column layout with fixed-width middle-adaptive on both sides

In the body, place the middle div behind the left and right Div, then the left-hand side of the CSS, floating right

2. About the height of the three columns is different, the problem of the longest height overflow

Set the entire container CSS overflow property to auto, i.e. Overflow:auto;

The overflow property specifies what happens when the content overflows the element box.

Visible	The default value. The content is not trimmed and is rendered outside the element box.
Hidden	The content is trimmed and the rest is not visible.
Scroll	The content is trimmed, but the browser displays scroll bars to see the rest of the content.
Auto	If the content is trimmed, the browser displays scroll bars to see the rest of the content.
Inherit	Specifies that the value of the overflow property should be inherited from the parent element.

Task 4:

1. Questions about horizontal vertical centering of text

Line-height or padding can be set to height, etc.

2.div Horizontal Vertical centering problem

Set absolute positioning, left, top each accounted for 50%,margin-left-(WIDTH/2); Margin-top is-(HEIGHT/2)

3.div Corner arc problem

Relative to the parent element for absolute positioning, set the relative values of height, width, and Border-radius (the same value, forming a rounded arc), the other to set top, left, right, bottom value, according to the corner of the different locations to set, such as

width:50px;
height:50px;
Position:absolute;
top:0;

left:0;

border-radius:0 0 50px 0;

A rounded radian with a radius of 50 for the upper-left corner of the Div, which is divided into asphyxication according to a circle, observing the rounded shape of each corner of the div similar to which one-fourth of the circle, and then determining its position.

4. About fillet radians setting an issue that is not supported by IE browser

CSS hack (specific solution still to be pondered)

IFE Baidu Front-end Technical College 2016 spring class first stage task (1-4) Summary