zoukankan      html  css  js  c++  java
  • 样式属性第三弹

     <div style="400px; height:400px; background-image:url(../../%E8%AF%BE%E7%A8%8B%E8%80%81%E5%B8%88%E5%AE%9E%E4%BE%8B/10.10%E6%A0%B7%E5%BC%8F%E8%A1%A8/QQ%E5%9B%BE%E7%89%8720161030131800.png);"></div>
           

    上面代码:设置背景图,背景图这种情况是默认平铺的。在后面再加入

    background-repeat:no-repeat;

    显示,这是不平铺,平铺:repeat、不平铺no-repeat、横向平铺repeat-x、纵向平铺repeat-y。

    <div style="100px; height:100px; background-color:#3C9;"></div>

    上面代码:背景色,显示,但是背景图高于背景色。

    <div style="100px; height:100px; background-color:#0C0; background-position:center;background-image:url(../../%E8%AF%BE%E7%A8%8B%E8%80%81%E5%B8%88%E5%AE%9E%E4%BE%8B/10.10%E6%A0%B7%E5%BC%8F%E8%A1%A8/QQ%E5%9B%BE%E7%89%8720161030131800.png); background-repeat:no-repeat;"></div>

    上面代码:背景图中插入图片是居中的,但repeat必须是no-repeat,显示,放到上下左右,只需在 background-position后面输入right、top、botton、left就可。

    E%E7%89%8720161030131800.png); background-repeat:repeat-y;"></div>
            <div style="100px; height:100px; background-color:#0C0; background-position:;background-image:url(../%E5%9B%BE%E7%89%87/150358666450342800_a580xH.jpg); background-repeat:no-repeat; background-size:80px 80px;"></div>

    这个是可以改变插入的图片的大小,

      <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>样式表</title>
            <style type="text/css">
            #d2{ text-decoration:overline;}
            
            </style>
        </head>
        
        <body>
            
            <p id="d2">小孩坏坏</p>
        </body>

    这个是给文字加入了一条上划线,用的是text-decoration:overline;、如果加下划线,就在text-decoration后面加underline,删除线就在后面加line-through、而去掉下划线就加none。

            #d1{ font-size:16px;
                color:#C00;
                font-family:宋体;
                font-weight:bold;
                font-style:italic;}
            
            </style>
        </head>
        
        <body>
        <div id="d1">你好</div>

    上面代码:在样式中改变文字的大小、颜色、字体。显示:

     <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>样式表</title>
            <style type="text/css">
            a{
                    200px;
                    height:200px;
                    background-color:#C30;
                    text-decoration:none;}
            
            </style>
        </head>
        
        <body>
         <a href="QQ图片20161030131800.png">超链接</a>

    上面代码表示给超链接取消了下划线,加了背景色。显示

     <p style="text-indent:32px;">

    这个是写一段话前面的首行缩进前两个字的代码。

     <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>样式表</title>
            <style type="text/css">
            *{ margin:0 auto; padding:0;}
            
            
            </style>
        </head>
        

    这个代码代表所有的内容居中,边距和间距都为0,margin是边距,padding是间距。

     <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>样式表</title>
            <style type="text/css">
            *{ margin:0 auto; padding:0;}
            
            
            </style>
        </head>
        
        <body>
         
         
         
         
       
            <div style="600px; height:500px; background-color:#000; padding-top:100px">
            <div style="400px; height:300px; background-color:#F00; padding-top:100px">
            <div style="200px; height:100px; background-color:#FFF; padding-top:100px"></div>
            </div>
            </div>

    代码显示:

     
    
    
  • 相关阅读:
    MDX语法
    BI
    Lucene
    并行开发
    12 个最佳的免费网络监控工具
    ASP.NET 在IIS7.5下自定义404错误页面的方法
    MSBuild和Jenkins搭建持续集成环境
    MVC View显示详解(RenderBody,RenderPage,RenderSection,Partial)
    PDFsharp Samples
    C#获取程序集自动增加的版本号和编译时间
  • 原文地址:https://www.cnblogs.com/xiaohaihuaihuai/p/7646464.html
Copyright © 2011-2022 走看看