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;}