Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use HTML and CSS technology to build a super marine team". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use HTML and CSS technology to build a super marine team."

one。 Applied knowledge points

1.2 Experimental knowledge points

Div layout

CSS relative positioning

Application of various attributes of CSS

1.3 Experimental environment

This lab environment uses a Ubuntu Linux environment with a desktop, and desktop programs may be used in the lab:

Firefox: browser, which can be used in courses that require a front-end interface. Just open the HTML/JS page written in the environment.

GVim: a very easy-to-use editor. The simplest use can be found in the course Vim Editor.

1.4 suitable for the crowd

This course is generally difficult, as long as you have learned basic HTML and CSS, you can do it.

II. Preparation for development

Go to the / home/shiyanlou/ directory and create a new blank document:

Name it Baymax.html (other names are fine, but the suffix name must be .html):

Open it using gedit and prepare to edit the code:

Third, the experimental steps

3.1Writing HTML

Here is the definition of the various parts of the body through div:

Baymax

3.2 add CSS style

Now that we have defined the elements of "big picture" with HTML, we need to use CSS to draw its style appearance.

Since Da Bai is white, in order to make it easier to identify, we set the background to dark. And then the first is the head:

Body {background: # 595959

Let's add eyes and mouth.

# eye, # eye2 {width: 11px; height: 13px; background: # 282828; border-radius: 50%; position: relative; top: 30px; left: 27px; / * rotate the element * /

A "big picture" of mini is beginning to emerge:

Then there is the torso and abdomen:

# torso, # belly {margin: 0 auto; height: 200px; width: 180px; background: # fff; border-radius: 47%; / * set border * /

Give "Da Bai" the heart that symbolizes life:

# heart {width:25px

Without hands and feet, it's cute and cute. "Da Bai" needs warm arms:

# left-arm, # right-arm {height: 270px; width: 120px; border-radius: 50%; background: # fff; margin: 0 auto; position: relative; top:-350px; left:-100px; transform: rotate (20deg); z-index:-1

Add fingers:

# l-bigfinger, # r-bigfinger {height: 50px; width: 20px; border-radius: 50%; background: # fff; position: relative; top: 250px; left: 50px; transform: rotate (- 50deg)

Add legs to Da Bai:

# left-leg, # right-leg {height: 170px; width: 90px; border-radius: 40% 30% 10px 45%; background: # fff; position: relative; top:-640px; left:-45px; transform: rotate (- 1deg); z-index:-2; margin: 0 auto

A complete picture appears on the web page.

Thank you for your reading, the above is the content of "how to use HTML and CSS technology to build a super Marine Corps understanding". After the study of this article, I believe you have a deeper understanding of how to use HTML and CSS technology to build a super Marine Corps understanding, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.