简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML手册实战
Blogger Information
Blog 9
fans 0
comment 0
visits 6105
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML手册实战
橙汁的博客
Original
870 people have browsed it

html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="static/style/reset.css">
    <link rel="stylesheet" href="static/style/css.css">
    <title>手册</title>
</head>
<body>
    <div class="w100 header bg-d4d4d4">手册</div>
    <div class="w100 warp">
        <div class="menu fl bg-eee">
            <ul>
                <strong>HTML 教程- (HTML5 标准)</strong>
                <li><a href="html/html-1.html" target="content">HTML 教程</a></li>
                <li><a href="html/html-2.html" target="content">HTML 简介</a></li>
            </ul>            
        </div>
        <div class="content fl">
            <iframe name="content" frameborder="0" width="100%"></iframe>
        </div>
    </div>
</body>

CSS

reset.css

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400
}

blockquote,
body,
button,
dd,
div,
dl,
dt,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

em,
i {
    font-style: normal;
}

a:active,
a:hover {
    outline: 0
}

a {
    text-decoration: none
}

a cite {
    font-style: normal;
    *cursor: pointer
}

img {
    border: none
}

li {
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

button,
input,
optgroup,
option,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    outline: 0
}

pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word
}

body {
    line-height: 24px;
    font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif；
}

hr {
    height: 1px;
    margin: 10px 0;
    border: 0;
    clear: both
}

a {
    color: #333;
    text-decoration: none
}

a:hover {
    color: lightseagreen;
    font-weight: bold;
}

.w100 {
    width: 100%;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.m {
    margin: 0 auto;
}

.pos-re {
    position: relative;
}

.pos-ab {
    position: absolute;
}

.dis-bl {
    display: block
}

.bg-d4d4d4 {
    background-color: #d4d4d4
}

.bg-eee {
    background-color: #eee
}

style.css

body{padding: 20px;}
hr{background-color: #d4d4d4}
h2{font-size: 36px;padding: 10px 0;}
h3{font-size: 22px;padding: 5px 0;}
p{line-height:2em;margin-bottom:5px;color:#333;font-size: 14px;}

css.css

/* header */
.header{height: 60px;line-height:60px;text-indent:2em;font-size: 30px;color:#555;}
/* content */
.warp{min-height: 800px;}
.menu{width: 20%;min-height: 800px;}
.menu strong{font-size: 16px;padding: 10px 0;display: block;}
.menu li a{text-indent:1em;display: block;}
.content{width:80%;min-height: 800px;}
.content iframe{min-height: 800px;}

4.jpg








Correction status：qualified

Teacher's comments：你应该是安装了代码格式化的插件了, 非常的整齐.... 功能是实现了, 思路也是对的, 剩下的就是多写多看了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！