zoukankan      html  css  js  c++  java
  • CSS基础3

    --css列表


    导航条、文章列表使用

      • list-style  一条声明设置所有属性
      • list-style-image    图像设置为列表项标记
      • list-style-position 标记的放置位
      • list-style-type       列表项标记的类型

    >list-style-type:

    disc  默认,实心圆

    cilcle  空心园       square  实心方体

    decmial 数字        decimal-leading-zero  0开头数字(01,02.....)

    lower-roman 小写罗马数字  upper-roman  大写罗马数字

    lower-alpha  小写英文字母  upper-alpha   大写英文字母

    >list-style-image

    url(位置)

    >list-style-position:

    inside  放在文本以内,环绕文本根据标记对齐。

    outside  默认值,文本左侧,放在文本外,不根据标记对齐

    inherit

    >list-style:

    格式:list-style:  list-style-type:  list-style-position:  list-style-image:

    css队列设置很少,,列表设置主要综合使用css其他声明进行设置。

    用<ul>创建一个导航菜单

    <!--方案-->
    li{ float:left; 100px; background-color: text-align:center; }
    <!--方案二-->
    li{
    display:inline-block;
    100px;
    background-color:
    text-align:center;
    }

    >css表格


    birder-collapse:collapse  合并单元格  tr才会有边框

    border-spacing:水平  垂直  单元格边框之间的距离

    caption-side:button  标题下面

    empty-clls:

    table-layout:fixed   表格布局算法


     

    >css轮廓和框模型  border(边框)  marging(外边距)(0 0 0 0);padding(内边距)(0 0 0 0);

    边框和轮廓同:存在于元素周围

           颜色、类型、宽度设置      

           默认为不显示          

        不同:边框布局、轮廓参与布局

           轮廓边框外

    border:_px   _px  _px  _px;

    border-radius:_px  _px  _px  _px;

    box-shadow:_px  _px  _px  _px;


     

    >outline-style:  轮廓样式

    none  默认无    double  双线

    dotted  点状    grovave  3D凹槽轮

    doshed  虚线    ridge    3D凸槽轮

    solid   实线    inset   3D凹边

    outset  3D凸边


     

    >css框模型

    (Box Model)规定了元素处理元素的内容、内边距、边框和外边距的方式。

    >css边框

     围绕元素内容和内边距的一条或多条线

    属性border,设置边框的样式、宽度和颜色。

    方法一:

    border-color:_  _  _  _ 

    border-_  _  _  _

    border-style:_  _  _  _

    方法二:各条单独设置

    border-top-color(上边框颜色)

    border-top-style(   样式)

    border-top-width(   宽度)

    方法三:

    border-width:-top  -right  -bottom  -left

    border-style:

    border-color:


     

    >css圆角边框

    一条命令中对左上、右上、右下、左下四个角进行设置

    border-radius:top-left  top-right  bottom-right  bottom-left

    分别设置:

    border-top-left-radius:

    border-top-right-radius:

    border-bottom-right-radius:

    border-bottom-left-radius:

    分别设置可设置每个角的纵横弧度值。


     

    >css盒子阴影

    box-shadow:h-shadow  v-shadow  blur  suread  color  inset

    h-shadow必须水平阴影,允许负值

    v-shadow必须垂直阴影,允许负值

    biur   可选  模糊距离

    spread   可选  阴影的尺寸

    color    可选  阴影的颜色

    inset    可选  外部阴影(outset)改为内部阴影


     

    >css盒子旋转

    属性:transform  旋转

    应用2D或3D转换。该属性允许元素旋转、缩放、移动或倾斜。

    语法:transform:rotate(_deg)


     

    >css定位:

    块级元素:(前后都有换行符)<div>  <h1>~<h6>  <p>  <form>  <ul>  <ol>  <hr>  <table>等

    行内元素:<a>  <em>  <strong>  <img>  <br>  <input>

    (内联元素)<label>  <span>  <textarea>  <select>等

    属性  display改变生成框的类型。

    将属性设置为block:让行内元素像块级元素

          display:none让元素设置为没有框  该框及所有内容就不在显示,不占空间

    none  此元素不会被显示

    block  块级元素,前后带有换行符

    inline  内联元素,前后没有换行符

    inline-block  行内块元素

    table-cell    作为一个表格单元格显示

    三种定位机制:普通流、浮动和绝对定位

    使用position属性:4种不同定位

    static  框正常生成,块级生成矩形框,行内创建一个或多个框,置于父元素中

    布局:

    position(定位):值 relative(相对)  absolute(绝对)  fixed(固定)  top(上)  bottom(下) left(左)  right(右)

    浮动:

    float:left  right

    cleat:left  right  both

     

    有些压力总是得自己扛过去,说出来就成了充满负能量的抱怨。寻求安慰无济于事,还徒增了别人的烦恼。而但你独自走过艰难险阻,一定会感谢当初一声不吭要牙坚持这的自己。没人在乎你怎样在深夜痛苦,也没人在乎你辗转反侧要熬过几个秋。外人只看结果,自己独撑过程。等我们都明白了这个道理,便不会再在人前矫情,四处诉说以求安慰。
  • 相关阅读:
    Wannafly Winter Camp 2020 Day 7D 方阵的行列式
    [CF1311F] Moving Points
    [CF1311E] Construct the Binary Tree
    [CF1311D] Three Integers
    [CF1311C] Perform the Combo
    [CF1311B] WeirdSort
    [CF1311A] Add Odd or Subtract Even
    Wannafly Winter Camp 2020 Day 7A 序列
    SP7258 SUBLEX
    Wannafly Winter Camp 2020 Day 6J K重排列
  • 原文地址:https://www.cnblogs.com/Yokemadman/p/10097953.html
Copyright © 2011-2022 走看看