1.CSS的三种嵌套方式（其实是四种，但是有2种是一样的效果）
CSS（Cascading Style Sheet－ “层叠样式表”或“级联样式单” ）制作网页时采用CSS技术，可以有效地对页面布局、字体、颜色、背景和其它效果实现更加精确的控制，可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。“Cascading” 即在同一个Web文档中可以有多个样式表存在，根据所在的位置，拥有不同的优先级。优先级越高，就会被最后在显示时采用。从样式表插入的形式来看可以分为三种：1、内联式样式表：利用现有的HTML标记把特殊的样式加入到那些由标记控制的信息中。2、嵌入式样式表：嵌入到HTML文件的头部中去（<html>和<body>标记之间），使用<Style>…</Style>容器装载，例如：<style> p {color : blue ; font-weight : bold} </style>对页面中所有<p>标记都起作用。 3、外部式样式表：一种保存在外部的样式表文件，外部文件以.CSS为扩展名，例如:<link rel=stylesheet href="main- sheet.css" type="text/css">
2.CSS选择器
下面是我写的例子：
/**demo.css**//*页面 分3类 固定宽度页面 流式页面 响应式页面 border:1px solid black; 边框 margin: 100px auto;居中 4个值：顺时针方向 margin:200px auto; 外边距 padding:10px; 内边距*//* 谁的规则越复杂，谁的优先级越高*//*E[ID]属性选择器*//* (.) 点是class选择器*//* #是id选择器*/*{margin:0;padding:0; }/*html{margin:0;padding:0;font-size:16px;color:#000;}*//*div{width:600px;height:600px;border:1px solid black}*//*.demo_box{width:1000px;height:500px;border:1px solid black; margin: 100px auto; background:black;color :#fff;}.chlid_box{width:100px;height:200px;border:1px dashed red;margin:200px auto; padding:10px; text-align: center;}.demo_box.chlid_box.demo_img{width:5px;height:5px;}*//*div[id]{font-size : 4em;}*//*#demo{font-size : 4em;}*//*ul>div{font-size:2em;}*//*.item_box:before{font-size: 4em;content: url('#');}*//*li:hover{font-size: 2em;}*/.content_left{width: 19%;height: 500px;float: left;border: 1px solid #000;}.content_right{width:69%;height: 500px;float: left;border: 1px solid #000;}.demo_iframe{width:100%;}
3.iframe的使用
Html5中的新特性
下面是我写的例子
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link type="text/css" rel="stylesheet" href="demo.css"></head><body><!--<><frameset> 作者：offline时间：-07-09描述：不能放iframe 在frameset中<frame></frame></frameset><iframe></iframe>--><div class="content_left"><ul><li><a href="" target="demo_iframe">淘宝</a></li><li><a href="" target="demo_iframe">W3</a></li><li><a href ="" target="demo_iframe">百度</a></li></ul></div><div class="content_right"><iframe src ="" name="demo_iframe" class='demo_iframe' height="500" frameborder=0 /></div></body></html>
效果如下：
大家举例的时候不要以京东为例，如果以京东为例就会发生跳转到另一个页面，我猜测应该是京东的页面会有一个新的GET请求，请读者牢记
