• style里的文字 背景 样式以及边框


    <style>
            body{background:#FCC;}
            .c00 div{ margin:0 auto; padding:0;}
            #a01{ 500px; height:400px; background:#00F; padding-top:100px;}
            #a02{ 300px; height:200px; background:#903; padding-top:100px;}
            #a03{ 100px; height:100px; background:#0FF; color:#000; font-family:华文彩云;
                  font-size:24px; line-height:34px;}
            div marquee{ 100px; height:100px;}
            .c01{ 200px; height:200px; background:#9FF; position:fixed; top:30px; left:30px;
                   font-family:华文彩云; font-size:36px; font-weight:bold; font-style:italic; color:#0CF; text-align:center;
                  vertical-align:top 20px; line-height:200px; text-decoration:underline; text-indent:20px;}
                  <!--字体样式              字体大小       字体加粗               字体倾斜          字体颜色       字体水平居中(或靠右)-->
                  <!-- 字体垂直方向距离顶部20px 要配合line-height(行高)使用          下划线        首行缩进20像素   -->          
        </style>
        
        <body>
            <div class="c00">
                <div id="a01">
                    <div id="a02">
                        <div id="a03">
                            <marquee direction="down">
                                这就是div居中嵌套
                            </marquee>
                        </div>
                    </div>
                </div>
            </div>
           <!-- 使用margin进行上下位移时需要给边框
                   padding位移时需要自身减去相应的位移像素距离
                (因为padding内边距会给自身加上位移的像素距离
                 也可以设为负值使用)    
           -->
           
               <div class="c01">
                   <!--
                背景样式属性
                
                background-color:#222; 背景颜色     
                              -image: ;  背景图片
                              -attachment:fixed; 背景固定不随字体动
                                         :scroll; 背景随字体走动
                              -repeat:  选项决定是否平铺,x轴平铺 y轴平铺等;
                              -position: 定位  用选项固定图片位置
                
                字体样式属性
                font-family;    字体样式
                font-size;        字体大小    
                    -indent;    首行缩进多少像素
                    -weight:bold;   加粗
                    -style:italic;  倾斜
                    color:#0CF;  字体颜色
                
                text-align:center;  字体水平方向居中(或其他方向)
                vertical-align:top 20px;  字体垂直方向 距离顶部 20像素(必须配合行高属性使用)
                line-height:200px;  行高
                text-decoration:underline; 下划线
                               :line-through;  删除线
                               :overline;  上划线
                               
                边界,边框
                margih:   ;     外边距
                padding:    ;    内边距
                border:1px solid #222;     边框  1像素 实线 颜色为黑色;
                
                (margih:10px 10px 10px 10px ;  外边距  上右下左  分别为10 10 10 10    顺序是按照顺时针来的;)
                --->
                    
                        实验字体        
               </div>

        </body>

  • 相关阅读:
    spring boot 在idea中实现热部署
    spring boot jar的生成
    mongodb windows 开机启动
    使用阿里云RDS
    net core 使用ef生成实体类(SqlServer)
    在window下搭建即时即用的hyperledger fabric 的环境
    NET实现谷歌OCR的使用记录(CLOUD VISION API)
    kali 系列学习12-使用Wifite破解无线网络
    kali 系列学习10-渗透攻击MySQL数据库服务、PostgreSQL数据库服务、Tomcat服务和PDF文件
    kali 系列学习09-Kali-linux设置ProxyChains
  • 原文地址:https://www.cnblogs.com/bkyljk/p/7645224.html
Copyright © 2020-2023  润新知