HTML框架&CSS

作者: 毛毛虫灾害 | 来源:发表于2017-01-17 14:35 被阅读45次

    html负责页面结构

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>框架</title>
    
    </head>
    <!--
    1)一个页面就包含在一个frame标签中
    2)有两个或两个以上的frame就需要放在frameset(框架集中)
    frameset框架集
    属性:
    cols:按照列的方向来划分框架
    rows:按照行的方向来划分框架
    以上两个属性的值填每个框架的比例和长度
    * 表示其他框架分配完之后剩下的比例
    
    -->
    <frameset rows="10%,*,10%">
        <frame src="头部页面.html">
        <frameset cols="20%,*">
            <frame src="左边页面.html">
            <frame name="main" src="中间主页面.html">
        </frameset>
        <frame src="底部页面.html">
    </frameset>
    
    <body>
    
    </body>
    </html>
    
    屏幕快照 2017-01-17 下午2.32.32.png

    css负责页面的美观

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css入门</title>
    <style type="text/css">
        a{
            font-size:24px;
            color:#0F0;
        }
    </style>
    </head>
    
    <body>
    <a href="xxxx" >超链接</a><br/>
    <a href="xxxx" >超链接</a><br/>
    <a href="xxxx" >超链接</a><br/>
    <a href="xxxx" >超链接</a><br/>
    </body>
    </html>
    

    css的使用方式
    1)行内样式
    注意:
    1)使用标签的style属性进行css控制,css写在style属性值中
    2)弊端:只能控制一个标签的样式
    <a href="xxxx" style="font-size:24px;">超链接</a>
    2)内部样式
    注意:
    1)使用style的标签进行css控制,css内容写在style标签体内
    2)一次控制多个标签的样式
    3)和html标签混杂在一起,不好维护。css内容无法在多个html页面中重用
    <style type="text/css">
    a{
    font-size:24px;
    color:#0F0;
    }
    </style>

    3)外部样式(推荐使用)
    注意:
    1)建立独立后缀为css的文件,css内容写在该文件中
    2)在使用css的html页面中,导入外部css文件

    <link href="01.css" rel="stylesheet"/>

    相关文章

      网友评论

        本文标题:HTML框架&CSS

        本文链接:https://www.haomeiwen.com/subject/pndmbttx.html