:HTML5 | 0 0 7 - Optimized Portal-Picture material template recommendation免费ppt模版下载-道格办公

responsibility. To optimize the style of the portal, we can use HTML5 tags and CSS styles. First, we need to create a portal container and add a frame style to it. can use`

In 006, we modified the font in the block based on the local best default font.

This time, let’s optimize the “Portal”

Add a very sentimental frame!

Suddenly remembered a famous saying:

The so-called freedom must have restrictions

Haha, don't pull too far~

These days, Rounded Rectangle is a must-have for web development!

The essence of the rounded rectangle is:

Add a thin white border of 1px around the perimeter, and set a very small 3px rounded corner value.

Because of the hyperlink, the font is purple by default, which is very discordant, so it is not set to the pink in 004.

Use the Cyan that is close to the waves, #33FFFF, there is a full range of colors in 004~

Add the code as follows:

a {

color: #33FFFF;

border: 1px solid #33FFFF;

border-radius: 3px

The color attribute sets the font color. In fact, in CSS, the color code #rrggbb can be abbreviated as #rgb, namely #33FFFF, #3FF

border attribute, set border 1px, realize, lake blue

The border-radius property, set the rounded border.

Take a look at the effect:

Uh... always feel that something is wrong? !

frame! !

The outer frame is too close to the font, there is no distance beauty!

In addition, a line that comes with the hyperlink is too silly to put there!

We need to change him to a cute and sexy button

Add the code as follows:

a {

font-size: 55px;

background: #33FFFF;

color: #FFF;

border: 1px solid #33FFFF;

border-radius: 10px;

padding: 10px 66px;

text-decoration: none;

padding attribute, 10px on the top and bottom sides, 66px on the left and right sides

The text-decoration attribute, none is to remove the link underline.

Since the font was designed to be larger for advertising, the rounded rectangle is also enlarged.

Finally 除除除除——

Fish oil, if you like this series of HTML posts, you can go to the forum to subscribe ☞ HTML5 - Paodingjieniu This album~~

Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/HTML5%20%200%200%207%20%20Optimized%20Portal.html