zoukankan      html  css  js  c++  java
  • 网页页面布局

    1.用表格组织排列网页

    表格标签:<table></table>

    行标签:<tr></tr>

    表格标题标签:<th></th>

    列标签:<td></td>

    <table border="1">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>

    另外表格还可以嵌套。

    frame属性:frame 属性规定外侧边框的哪个部分是可见的

    void 不显示外侧边框。
    above 显示上部的外侧边框。
    below 显示下部的外侧边框。
    hsides 显示上部和下部的外侧边框。
    vsides 显示左边和右边的外侧边框。
    lhs 显示左边的外侧边框。
    rhs 显示右边的外侧边框。
    box 在所有四个边上显示外侧边框。
    border 在所有四个边上显示外侧边框。

    参考:http://www.w3school.com.cn/tags/tag_table.asp

    2.css(Cascading Style Sheets级联样式表)格式化页面

    样式结构由css根据层次结构决定,从而实现级联效果;可将CSS级联机制看成一种继承的关系父亲的特征传递给子女,但子女有会更特殊的特征,即基样式规则覆盖整个样式表,但可被更具体的样式规则覆盖。

    2.1应用样式的三种方法

    外部样式表:将一组css样式规则保存为一个独立的.css文件,在每个页面的开头(<head>内)用<link/>指定该文件;如

    <head>

     <link rel="stylesheet" type="text/css" href="[css文件路径]" />

    </head>

    .css

    body{

    font-size:12pt;

    ……

    }

    内部样式表:通过<style>标签将一组css规则放在页面中,这些样式规则只对其所在的页面有效;如 

    <style type="text/css">
    div{
    margin-left=10px;
    margin-right=10px;

    内联样式表:通过style属性直接将一个或多个css属性放在标签内;如

    <table style="100px; height:100px">

    2.2样式类

    定义的特殊格式文本称为样式类,如

    h1.silly{font:36pt;}

    <h1 class="silly"></h1>

     2.3css修改链接外观

    Link:尚未访问

    Hover:鼠标指向

    Active:被激活

    Visited:访问

    每种链接状态对应一种css伪类,伪类是应用于元素元素状态的一种特殊样式类。

    a:Link{font-weight:Bold;…}

    2.4堆叠顺序

    z-index样式属性,值较大的元素叠在值元素较小的上面。

    2.5id和class的区别

    理论上是说id是针对具体的一个标签,一个页面中唯一,而class是一类,可以多个,不过我实际中试过用id定义多个如<a id="a"><a id="a">也是正常的。

    3.框架frame

    标签<frame></frame>

    frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。如:

    <html>
    <frameset cols="25%,50%,25%">
      <frame src="frame_a.htm" />
      <frame src="frame_b.htm" />
      <frame src="frame_c.htm" />
    </frameset>
    </html>

    重要事项:您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过,如果您需要为不支持框架的浏览器添加一个 <noframes> 标签,请务必将此标签放置在 <body></body> 标签中!

  • 相关阅读:
    杭电1005
    幂运算
    oj题目分类
    js判断手机或Pc端登陆.并跳转到相应的页面
    sessionStorage或localStorage实现注册登录demo
    html5手机端定位
    微信小程序开发基础知识总结
    eCharts.js使用心得
    前端性能优化--图片懒加载(lazyload image)
    19 款仿 Bootstrap 后台管理主题下载,finrUI控件,好用的ui框架
  • 原文地址:https://www.cnblogs.com/siliconvalley/p/3100455.html
Copyright © 2011-2022 走看看