重要部分：
<iframe src:""></ifame>调出内联框架，属性可以为：name/src/heght/width/frameborder(内联框架边框)/scrolling（滚动条）/align
部分实例：
1、基础的元素属性展示/
<iframe src="右边导航栏.html" name="right"height="500"width="900"frameborder="0"scrolling-="auto" align="center" ></iframe>
2、利用a标签，targer属性调出内联框架/
<a href="表格作业.html" target="right">周二作业</a>
。
代码部分：
实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mainleft</title>
<style>
.mainleft{
height: 500px;
border: solid 1px;
text-align: center;
width: 170px;
}
ul{
margin: 0px 0px 0px 0px;
list-style: none;
height: 500px;
padding: 0;
}
li{
line-height: 80px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div class="mainleft">
<ul>
<li><a href="右边导航栏.html" target="right">个人管理</a></li>
<li><a href="表格作业.html" target="right">周二作业</a></li>
<li><a href="xiajilogo.html"target="right">周三作业</a></li>
<li><a href="">周四作业</a></li>
<li><a href="">周五作业</a></li>
<li><a href="">休息中</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="0"cellpadding="0"cellpadding="0"align="center"width="1100"> <tr> <td colspan="2"> <iframe src="头部.html" name="top" height="120"width="1100"frameborder="0"scrolling="no"></iframe> </td> </tr> <tr> <!--左侧内容区--> <td> <iframe src="左边导航栏.html" name=""height="500"width="200"frameborder="0"scrolling="no" align="center"></iframe> </td> <!--右侧内容区--> <td> <iframe src="右边导航栏.html" name="right"height="500"width="900"frameborder="0"scrolling-="auto" align="center" ></iframe> </td> </tr> <tr> <td colspan="2"> <iframe src="底部标签.html" name="footer" height="130"width="100%"frameborder="0"scrolling="no"></iframe> </td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
-
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mainright</title>
<style>
.mainright {
width: 900px;
height: 500px;
background: #DC143C;
}
.span01 {
padding: 15px;
display: block;
}
.span02,
.span03 {
background: orange;
width: 850px;
height: 35px;
display: block;
text-align: center;
margin: 10px 0px 0px 10px;
line-height: 35px;
}
.td1 {
width: 850px;
height: 20px;
border: solid 1px;
line-height: 20px;
padding: 10px;
}
td {
border: dashed 1px;
height: 270px;
}
.logo {
width: 150px;
height: 150px;
background: black;
margin: auto;
margin-top: -30px;
}
.mainbox {
width: 223px;
height: 273px;
display: table-cell;
vertical-align: middle;
}
li {
list-style: none;
text-align: left;
}
ul {
line-height: 18px;
margin: 0;
padding: 5px;
}
hr {
border: dashed 1px;
background: black;
width: 98%;
}
.mainbox3 {
line-height: 40px;
width: 223px;
height: 274px;
}
</style>
</head>
<body>
<div class="mainright">
<span class="span01"><span style="color: #1E90FF;">当前位置：</span>软文管理 > 软文列表</span>
<hr style="text-align: center;" color="darkgray">
<span class="span02">提醒《新广告法》今起实施，一文读懂你可能看晕了的新法与雷区，点击查看：新广告法解读</span>
<span class="span03">工作时间星期一 ~ 星期六 ，上午9:00~下午18:30。周日可在后台自助提交稿件，周一安排发布。</span>
<table style="margin-top: 20px;">
<td colspan="3" class="td1">我的个人信息</td>
<tr>
<td class="td2" rowspan="3" width="25%">
<div class="mainbox">
<div class="logo"></div>
<span style="text-align: center;display: block; margin-top: 5px;">
<a href="">编辑资料</a>
|
<a href="">修改头像</a>
</span>
</div>
</td>
</tr>
<tr>
<td class="td3" rowspan="3" width="50%">
<ul>
<li>硕石网络，欢迎您！</li>
<hr>
<li>所属角色：超级管理员</li>
<hr>
<li>账号余额：56194.30元</li>
<hr>
<li>提现金额：0元</li>
<hr>
<li>上次登录时间：2018-03-17 15:49:04</li>
<hr>
<li>上次登录IP：59.34.11.37</li>
<hr>
<li>联系客服：</li>
<hr>
</ul>
</td>
</tr>
<tr>
<td class="td4" rowspan="3" width="25%">
<div class="mainbox3">
<span><strong style="color: cornflowerblue;">资讯中心</strong></span>
<div>
<ul>
<li> 软文云售后协议</li>
<li>来自创始人的一封信</li>
<li>平台禁止发布稿件类型</li>
</ul>
</div>
<span><strong style="color: cornflowerblue;">发稿帮助</strong></span>
<div>
<ul>
<li>后台已添加包新闻、包网页媒体</li>
<li>软文云发布教程及编辑器使用方法</li>
<li>春节后媒体不稳定通知</li>
</ul>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>foorer</title>
<style>
.footer{
height:120px;
border: solid 1px;
}
p{
text-align: center;
color: #A52A2A;
font-weight: bold;
}
</style>
</head>
<body>
<div class="footer">
<p>
软文云（RUANWENYUN.CN） @2010-2016 ALL RIGHT RESERVED.
</p>
<p>
粤ICP备16086293号-1版权所有：广州硕石网络科技有限公司 软文云 专注低价软文推广
</p>
<p>
软文云是国内首家专注低价发稿的软文推广营销平台，低成本，速度快，让您的信息瞬间铺满整个网络！
</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
-
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻网站购物车添加</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 300px;
}
table {
background: url(images/background.jpeg);
}
img {
width: 90px;
}
td {
border: solid 1px;
text-align: center;
height: 60px;
}
th {
border: solid 1px;
height: 40px;
}
a {
text-decoration: none;
color: black;
}
.tr1>td {
height: 40px;
}
</style>
</head>
<body>
<div>
<table cellspacing="1px" width="900" height="200">
<colgroup span="1" style="background: darkorange"></colgroup>
<colgroup span="2" style="background:"></colgroup>
<colgroup span="1" style="background: darksalmon"></colgroup>
<colgroup span="3" style="background: "></colgroup>
<colgroup span="1" style="background: lightgreen"></colgroup>
<thead>
<caption style="border: solid 1px;height: 40px;line-height: 40px;font-size:1.5em;font-weight:bold;">软文网站售卖类目</caption>
</thead>
<tbody>
<tr style="background: deeppink;">
<th>分类</th>
<th>网站logo</th>
<th>媒体名称</th>
<th>收录效果</th>
<th>案例</th>
<th>价格</th>
<th>添加购物车</th>
<th>打包</th>
</tr>
<tr>
<td>科技</td>
<td><img src="images/1.png"></td>
<td>中国日报</td>
<td>不包收录</td>
<td>
<a href="ruanwenyun.cn/price.php">[案例]</a>
</td>
<td>50元</td>
<td>[添加]</td>
<td rowspan="2">
<a href="">打包2个</a>
</td>
</tr>
<tr>
<td>家居</td>
<td><img src="images/2.png"></td>
<td>TOM-新闻</td>
<td>不包收录</td>
<td>
<a href="ruanwenyun.cn/price.php">[案例]</a>
</td>
<td>70元</td>
<td>[添加]</td>
</tr>
<tr>
<td>微商</td>
<td><img src="images/3.png"></td>
<td>腾讯网</td>
<td>不包收录</td>
<td>
<a href="ruanwenyun.cn/price.php">[案例]</a>
</td>
<td>10元</td>
<td>[添加]</td>
<td rowspan="4">
<a href="">打包4个</a>
</td>
</tr>
<tr>
<td>汽车</td>
<td><img src="images/4.png"></td>
<td>网易网</td>
<td>不包收录</td>
<td>
<a href="ruanwenyun.cn/price.php">[案例]</a>
</td>
<td>50元</td>
<td>[添加]</td>
</tr>
<tr>
<td>资讯</td>
<td><img src="images/5.png"></td>
<td>新浪网-新闻</td>
<td>不包收录</td>
<td>
<a href="ruanwenyun.cn/price.php">[案例]</a>
</td>
<td>240元</td>
<td>[添加]</td>
</tr>
<tr>
<td>娱乐</td>
<td><img src="images/6.png"></td>
<td>搜狐网</td>
<td>不包收录</td>
<td>
<a href="ruanwenyun.cn/price.php">[案例]</a>
</td>
<td>300元</td>
<td>[添加]</td>
</tr>
<tr>
<td>医疗</td>
<td><img src="images/7.png"></td>
<td>凤凰网</td>
<td>不包收录</td>
<td>
<a href="ruanwenyun.cn/price.php">[案例]</a>
</td>
<td>70元</td>
<td>[添加]</td>
<td rowspan="2">
<a href="">合并打包2个</a>
</td>
</tr>
<tr>
<td>农业</td>
<td><img src="images/8.png"></td>
<td>21CN</td>
<td>不包收录</td>
<td>
<a href="ruanwenyun.cn/price.php">[案例]</a>
</td>
<td>80元</td>
<td>[添加]</td>
</tr>
</tbody>
<tfoot>
<tr class="tr1" style="background: #ffffff;">
<td colspan="8">
<a href="">[首页]</a>
<a href="">[上一页]</a>
<a href="">[1]</a>
<a href="">[2]</a>
<a href="">[3]</a>
<a href="">[4]</a>
<a href="">[5]</a>
<a href="">[下一页]</a>
<a href="">[尾页]</a>
<a href="">[ ]跳转到</a>
</td>
</tfoot>
</tr>
</table>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
-
手抄部分：
