zoukankan      html  css  js  c++  java
  • CSS 颜色 字体 背景 文本 边框 列表 display属性

    1  颜色属性

    <div style="color:blueviolet">ppppp</div>
     
    <div style="color:#ffee33">ppppp</div>
     
    <div style="color:rgb(255,0,0)">ppppp</div>
     
    <div style="color:rgba(255,0,0,0.5)">ppppp</div>

    2  字体属性

    font-size: 20px/50%/larger
     
    font-family:'Lucida Bright'
     
    font-weight: lighter/bold/border/

    3  背景属性

    border:1px solid red;

    background-color: cornflowerblue; background-image: url('1.jpg'); background-repeat: no-repeat;(repeat:平铺满) background-position: right(左右距离) top(上下距离)(20px 20px);(横向:left center right)(纵向:top center bottom) 简写:
    <body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
    <div style=" 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

    eg:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
    
            span{
                display: inline-block;
                width: 18px;
                height: 20px;
                background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
                background-position: 0 -100px;
            }
        </style>
    </head>
    <body>
    
    
        <span></span>
    
    </body>
    </html>

     4.文本属性

    font-size: 10px;
    
    text-align: center;   横向排列
    
    line-height: 200px;   文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
    
    vertical-align:-4px  设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效
    
    text-indent: 150px;    首行缩进

    letter-spacing: 10px;  字母间距

    word-spacing: 20px;    单词间距

    text-transform: capitalize; 单词首字母大写

    5.边框属性

    border-style: solid; 边框样式实线 dashed是虚线
     
    border-color: red;   边框颜色
     
    border- 20px;  边框宽度
     
    简写:border:边框宽度 边框颜色 边框样式,例如
    border: 30px rebeccapurple solid;

    border-left boder-right boder-top boder-bottom

    6   列表属性

    ul,ol{   list-style: decimal-leading-zero;
             list-style: none;    除去列表样式 
        list-style: circle; list-style: upper-alpha; list-style: disc; }

    7  dispaly属性

    none 隐藏
    block 块元素
    inline 内联元素
    inline-block 内联元素具有块元素属性

     8.eg:表格居中

            #div1 {
                text-align: center;
            }
            #div2 {
                margin:50px auto;
                border: 5px red dashed;
                 500px;
                height: 500px;
            }
    
        </style>
    
    </head>
    <body>
    <!--action 定义表单数据提交地址-->
    
    <div id="div1">
    <div id="div2">
    <form action="http://127.0.0.1:8000/post_info" method="get" enctype="multipart/form-data">
        <!--单行文本框-->
        <input type="text" name="username" placeholder="请输入账号"><br><br>
        <!--密码框-->
        <input type="password" name="password" placeholder="请输入密码"><br><br>
        <!--单选框-->
        性别:<label><input type="radio" name="sex" value="1"></label>
        <label><input type="radio" name="sex" value="2"></label>
        <!--多选框-->
        <br><br>
        最喜欢的游戏:
        <label><input type="checkbox" name="fav" value="LOL">英雄联盟</label>
        <label><input type="checkbox" name="fav" value="shoot">喷射战士</label>
        <label><input type="checkbox" name="fav" value="zelder">塞尔达传说</label>
        <label><input type="checkbox" name="fav" value="mario">马里奥</label>
        <!--上传图片-->
        <br><br>
        <input type="file" name="pic">
        <!--多行文本框-->
        <br><br>
        <textarea name="text" cols="30" rows="10"></textarea>
        <!--下拉列表-->
        <br><br>
        <select name="city">
            <option value="gz">广州</option>
            <option value="sz">深圳</option>
            <option value="zh">中山</option>
        </select>
        <!--提交表单-->
        <input type="submit" value="提交">
        <!--重置表单-->
        <input type="reset" value="重置">
    </form>
    </div>
    </div>

    参考:https://www.cnblogs.com/yuanchenqi/articles/5977825.html

  • 相关阅读:
    leetcode 343. Integer Break(dp或数学推导)
    leetcode 237. Delete Node in a Linked List
    msdtc不可用
    常用反编译软件
    重建索引
    JAVA知识库
    DATAGRID显示序号
    VFLEXGRID8控件注册
    黑马2017年java就业班全套视频教程
    mybatis从入门到精通
  • 原文地址:https://www.cnblogs.com/icemonkey/p/10491991.html
Copyright © 2011-2022 走看看