框架集、css

来源：互联网发布：苏州中移软件编辑：程序博客网时间：2024/05/18 09:19

使用框架集能将一个页面分成几个独立显示的区域，当我们对某个区域进行操作时不会影响其他区域。

1.html

2.html

3.html

test代码

<html>    <!--用clos参数将页面按列进行分割，参数数值代表分割的比列，也可用像素来表示-->    <frameset cols="50%,50%">      <frame src="1.html">      <frame src="2.html">    </frameset></html>

test页面

test代码

<html>    <!--用rows参数将页面按行进行分割-->    <frameset rows="50%,50%">      <frame src="1.html">      <frame src="2.html">    </frameset></html>

test页面

test代码

<html>    <!--用frameset包含frameset的方法来实现将页面从行和列两个方向进行分割-->    <frameset rows="50%,50%">      <frame src="1.html">      <!-- *表示剩余的比例-->         <frameset cols="80%,20%">        <frame src="2.html">        <frame src="3.html">      </frameset>    </frameset></html>

test页面

css(cascading style sheet):层叠式样式表。作用是给网页统一的设置样式，它相比与直接用html进行样式设计有以下优点

1.css提供了更多的功能 2.使用css可以将内容与显示风格完全分离，维护更加方便

使用各种选择器来设置样式

<html>    <head>    <style>      p{font-size:14px;color:red}      .a{font-size:16px;color:green}      #b{font-size:18px;color:yellow}      *{font-size:20px;color:blue}      p.a{font-size:22px;color:#FF500C}      ul li{font-size:24px;color:purple}    </style>    </head>    <body>      <!--标记选择器的使用-->      <p>提莫队长正在待命</p>      <ul>         <!--类选择器的使用-->         <li class="a">我于杀戮之中绽放</li>         <!--ID选择器的使用-->         <li id="b">亦如黎明中的花朵</li>      </ul>      <!--继承选择器的使用-->      <p class="a">狂野将使他们感到畏惧</p>  <ul>  <li>你说说到底是谁应该呆在博物馆  </ul>  规则就是用来打破的  <ol>  <li>黎明就在眼前  </ol>    </body> </html>

页面

常用的伪类是A标记的四个伪类，分别代表链接的四种状态，未点击，悬停，点击，访问过

<HTML> <HEAD><style>    a{color:blue;}         a:link { font-size: 14px; color: blue; }a:visited { font-size: 12px; color: green; }    a:hover { font-size: 16px;  color: purple; }a:active { font-size: 18px;  color: yellow; } </style> </HEAD> <BODY><a href="http://www.163.com">网易</a><br><a href="http://www.baidu.com">百度</a><br> </BODY></HTML>

页面

总结：

1、在style标记中书写注释不能用的格式，应该使用/*...*/的格式。

2、css中A标记四个伪类的书写要按照一定的顺序，顺序为link、visited、hover、active。

3、在使用A标记的四个伪类时应该应该使用有效的网络地址，不然visited和link样式会变得无效。

阅读全文

0 0