zoukankan      html  css  js  c++  java
  • CSS 样式表

    CSS:层叠式样式表

    一,对层标签进行操作

    I。层标签的宽度,高度,底色

    基本格式:

    <div ></div>

    "          " 中:       (宽度)      100px/50%;         100px表示宽度为100个像素(px必须有)/50%表示占网页宽度的一半(如果嵌套在一个层标签中,占该层标签的50%)

                              (高度)      height:100px/50%;        100px表示高度为100个像素(px必须有)/如果嵌套在一个层标签中,占该层标签的50%(最外层层标签无法使用%,未知网页长度)

                              (背景色)   background-color:red;     red可以#颜色代码也可以

    II。层标签中文字样式的修改(加粗,倾斜,下划线,字体,大小,颜色)

    格式:<div ></div>

    "         "中:          (加粗)             font-weight:100/bold;

                               (倾斜)             font-style:italic;           

                               (下划线)          text-decoration:underline;  

                               (大小)             font-size:10px;         (正常浏览一般12px-16px)

                               (颜色)             color:red/#颜色代码;

                               (字体)             font-family:黑体;

    常用的是这几个,其它的在按出:后会自动弹出,随用随调取。

    III.流式布局    (将浏览器内容自动适应浏览器大小)

    格式:<div ></div>

    "          "中:             float:left/right         (left,流式布局是以左侧为基准 。 right,流式布局时以右侧为基准)    

                                   margin-left/right/top/ bottom            (left,层标签左侧间距。right,层标签右侧间距。top,层标签上部间距。bottom,层标签底部间距。)   

    IV。将层标签定位到网页中间

    观察此图,可知层标签并没有设置到网页正中央,他是以层标签左上角的点为基准,而不是以层标签的中心作为中心点,所以应该将以左上角点为基准,左右各减去自身宽度,高度的一半的像素:

    格式:<div ></div>

    "                "中:            border:5px solid red;                  (层标签外框宽度5个像素,实线,颜色是红色)

                                        position:abslute;                         (绝对定位,定位层标签左上角的点)

                                        margin-left/right/top/ bottom            (left,层标签左侧间距。right,层标签右侧间距。top,层标签上部间距。bottom,层标签底部间距。) 

    二,层标签分组使用

    I。对层标签进行分组(可以把分组后个层标签看成一个文件(有多个单一层标签元素))

    <head>

    <style type="text/css">

    .组名{width:                                ;

            height:                                ;

             …………(各种标签格式)          ;

          }

    </style>

    </head>

    <body>

    <div class="组名"></div>

    <div class="组名"></div>

    <div class="组名"></div>

    </div>

    分组后的层标签按照<head>内的格式统一。

    三,背景

    I。背景图片

    格式:

    <body margin: 0px; padding: 0px;">background-repeat:选择背景放置方式">

    II。层标签贴边(层标签和HTML页边框没有缝隙)

    代码:

    <head>

    * {
        margin:0px;
        padding:0px;
       }

    </head>

  • 相关阅读:
    wamp5配置及 phpmyadmin密码修改问题
    mysql存储过程详解
    office2013的破解方法
    java jdk配置环境变量
    打包Asp.Net 网站成为一个exe 方便快捷的进行客户演示
    CUDA的学习
    深度学习3线性回归,逻辑回归
    三维重建学习1特征提取
    深度学习2线性回归,逻辑回归
    特征学习2
  • 原文地址:https://www.cnblogs.com/changxiaosen/p/6647989.html
Copyright © 2011-2022 走看看