iframe标签使用、容器和语义化标签
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iframe的使用与容器初探</title> </head> <body> <h2>iframe当前页面打开其他页面</h2> <ul> <li><a href="http://baidu.com" target="main">baidu</a></li> <li><a href="http://bing.com" target="main">bing</a></li> <li><a href="http://sogou.com" target="main">sogou</a></li> <li><a href="http://so.com" target="main">360</a></li> </ul> <iframe srcdoc="<h2 align='center'>欢迎光临小站</h2>" frameborder="1" width="100%" height="400" name="main" style="float: left;"></iframe> <!-- 通用容器 --> <div>最常用的块级容器</div> <span>最常用的内联容器</span> 语义化标签 <header>头部</header> <main>main主体标签 <nav>导航</nav> <article>内容</article> <aside>边栏</aside> </main> <footer>底部</footer> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css初探
css，层叠样式表，设置HTML元素的布局和显示方式
实例
<!DOCTYPE html>
<html>
<head>
<!-- 外部样式表，引用css文件 -->
<link rel="stylesheet" type="text/css" href="">
<title>css初探以及css样式优先级</title>
<style>
/*内部样式，只适用于当前文档*/
p{
color: green;
}
</style>
</head>
<body>
<!-- 内联样式，只适用于当前标签/元素 -->
<p style="color: red;">样式优先级：内联样式>内部样式>外部样式</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
css的id, class与标签选择器的使用规则
实例
<!DOCTYPE html>
<html>
<head>
<title>css基本选择器</title>
<style>
#red {
color: red;
}
.green {
color: green;
}
p {
color: lightblue;
}
</style>
</head>
<body>
<p id="red">id选择器（单选）</p>
<p class="green">class选择器1（多选）</p>
<p class="green">class选择器2（多选）</p>
<p class="green">class选择器3（多选）</p>
<p>标签选择器</p>
<p>标签选择器</p>
<p>标签选择器</p>
<p>选择器优先级：【js】 > id > class > 标签</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
盒子模型的引入
一切皆盒子,盒子的width,height,margin,padding,border的实现展示
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型</title>
<style>
.box1{
border: 0.1px blue solid;
}
.box2{
width: 500px;
height: 500px;
border: 0.1px red solid;
margin: 0 auto;
}
p{
border: 0.1px green solid;
width: 250px;
height: auto;
padding-left: 16px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div>
<p style="margin-bottom: 0;">盒子p的宽高是绿色边框，字距离父div 1em=16px,浏览器默认</p><br>
<p style="margin-top: -16px; ">设置本盒子p2margin-top：-16px;上一个盒子p1的margin-bottom设为0,两个盒子之间没有间隔</p>
<p>设置所有盒子p的内边距padding-left为16px</p>
<p>盒子p为绿色边框，box2是红色边框，box1是蓝色边框</p>
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例