43 Restore serial HTML font and font size, text interface

First, restore the font and font size

1. The use of fireworks slice and add text function can be used to locate what we want is the text font, line height, and how much, but in fact very low, we hand-picked.

2. Note that point: in the enterprise development, if a text box is stored, so under normal circumstances we will be padding the box to the left as a reference, not to the right padding as a reference, because the right of padding will be errors (the last word of each line does not fit, and can only change one line, leading to the right side of the line from the original but too big)

Second, the text interface

1. Make a web page order

(1) to clear all the margins

 

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{

            margin:0;padding:0

        }

(2) from the outside to the inside

(3) from the top down

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {

            margin: 0;

            padding: 0

        }

        div{

            margin:0 auto;

            Sizing-Box : border-Box ; 

            width : 372px ; 

            height : 232px ; 

            border : 1px Solid # 666 ; / * color is a two color, there should be six, but the same can be omitted if the two as one, i.e., the line color full name 666666 # * / 

            padding : 15px ; 

        } 

        h1 of { 

            font-Family : "Microsoft yahei" ; 

            font-size : 18px ; 

            border-bottom : 1px Solid ; 

            padding-bottom: 10px ; 

        } / * we set the overall layout with div tag, using a span to the details set inside portion, is provided below .... NEW * / 

        span { 

            font-size : 14px ; / * there is also a priority , inherited characteristic small label tag large, while attributes will cover their original settings inherited property * / 

        } 

        UL { 

            List-style : None ; / * this review we remove the front row of dots * / 

            margin- Top : 10px ; } 
        UL Li { 
            line-height : 30px ; / * reviewed high line * /


        



            border-bottom:1px dashed;

            padding-left:20px;

            font-size:12px;

            font-family:"微软雅黑";

            font-color:#242424;

        }

</style>

</head>

<body>

<div>

    <h1>最新文章/<span>NEW Articles</span></h1>

    <ul> <! - here also review the representation of entries and shortcuts: ul> li * 5 together with the Tab -> 

        < li > Excellent nationals </ li > 

        < li > powerful football </ li > 

        < li > fertile Jiangxi </ li > 

        < li > fast hardware like 800 </ li > 

        < li > there are invincible I </ li > 

    </ ul > 

</ div > 

</ body > 

</ HTML >

By the above example, we demonstrate step by step how to achieve out of our website, this layout static pages are written in accordance with the above distribution.

Fourth, the source code:

d119_edit_static_webpage_of_word.html

address:

https://github.com/ruigege66/HTML_learning/blob/master/d119_edit_static_webpage_of_word.html

2.CSDN: https: //blog.csdn.net/weixin_44630050 (Xi Jun Jun Moods do not know - Rui)

3. Park blog: https: //www.cnblogs.com/ruigege0000/

4. Welcomes the focus on micro-channel public number: Fourier transform, personal account only for technical exchanges, backstage reply "gifts" big data acquisition Java Learning Video Package

43 Restore serial HTML font and font size, text interface

Guess you like