首页 > 代码库 > 0610背景与前景

0610背景与前景

样式属性   [注:黑色加粗部分比较重要,要留心】

一.背景:
background-color:背景色 *
background-image:url(路径)  背景图片*
background-repeat:背景图片的平铺方式    其中包括  no-repeat,不平铺;repeat,平铺;repeat-x,横向平铺;repeat-y,纵向平铺    

                                                               另外背景图居中,设置背景图位置时,repeat必须为“no-repeat”
background-position:背景图片的位置 top bottom left right center 随意组合 如果要打开距离在单词后面加像素  例如:right top,表示把背景图放到右上角 

background-position:right 20px top 20px           这里表示背景图离右边20像素,离上边20像素

background-attachment:背景图是否随着滚动条滚动     其中包括  fixed,背景图是固定的的,不随字体滚动;scroll,表示背景随字体滚动
background-size:400px 400px       表示背景图的大小为宽400像素,高400像素(一般先写宽,再写高)

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        #text{
             width:400px;
             height:1000px;
             background-color:#3FF;
             background-image:url(../../55c7607611ec9935_jpg!180x180.jpg);
             background-repeat:no-repeat;
             /*background-position:right 20px top 20px;*/
             background-attachment:scroll;
             background-size:400px 400px;
        </style>
    <body>
        <div id="text"> </div>
    </body>

效果图为

技术分享

 

二.前景    

一般我们指文字、字体

关于字体大部分都为<font></font>打头

字体:
font-size:14px      字体大小,用像素表示,网页里面一般规定    普通正文,14px;页脚字体,12px;稍大点,16px*
font-family:字体样式     网页里面的字体我们一般用宋体和微软雅黑 *
color:文字颜色 (在这里注意,这里没有font)*
font-weight:bold;加粗 *
font-style:italic;倾斜
text-decoration:underline下划线  ;overline 上划线  ; line-throuth 是删除线   ; none去掉下划线(重点注意)

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        #text{
             width:400px;
             height:1000px;
             font-size:30px;
             font-family:微软雅黑;
             color:#3F6;
             font-weight:bold;
             font-style:italic;
             text-decoration:underline;
         }
        </style>
    <body>
        <div id="text">测试文字</div>
        <a href="http://www.mamicode.com/#" style="text-decoration:none">首页</a>     ————————————   这里就是去掉下划线的作用
    </body>
    </head>

 

三.对齐方式:
text-align:水平对齐方式 center居中 left左 right右 *
vertical-align:垂直对齐方式 middle居中 top上 bottom下 *
line-height:400px; 行高 *(注意:vertical-align和line-height要配合使用,同时存在,垂直对齐就必须存在行高)
text-indent:3px    首行缩进3像素,用像素表示 (用在<p></p>标签中做首行缩进)*

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        #text{
             width:400px;
             height:400px;
             background-color:#3FC;
             /*font-size:30px;
             font-family:微软雅黑;
             color:#3F6;
             font-weight:bold;
             font-style:italic;
             text-decoration:underline;*/
             text-align:center;
             vertical-align:middle;
             line-height:400px;
         }
        </style>
    <body>
        <div id="text">测试文字</div> 
    </body>
    </head>

 

四.边界和边框

1.margin(表外间距)

margin: 20px 0px 0px 20px ;   顺序依次为上-右-下-左,四个外边框顺时针顺序
margin-top:10px;    表示  上边外边框宽度为10像素
margin-right:10px;   表示  右边外边框宽度为10像素
margin-bottom:10px;   表示  下边外边框宽度为10像素
margin-left:10px;   表示  左边外边框宽度为10像素

margin:10px;    表示   四边外边框宽度均为10像素

<style type="text/css">
        #test{
            width:100px;
            height:100px;
            background-color:#69F;
            margin-top:30px;
            margin-left:30px;
            }
        </style>
        
    <body>
         <div id="test"></div>
    </body>

效果为:
技术分享

离上和左各30像素

 

 <style type="text/css">
        #test{
            width:100px;
            height:100px;
            background-color:#69F;
            margin:30px 0px 0px 30px;
            }
        </style>
        
    <body>
         <div id="test"></div>
    </body>

技术分享

表示离上右下左分别为30、0、0、30像素
<style type="text/css">
        #test{
            width:100px;
            height:100px;
            background-color:#69F;
            margin:30px;
            }
        </style>
        
    <body>
         <div id="test"></div>
    </body>

表示离上右下左各为30像素

2.padding(内容与单元格间距)

padding: 10px 10px 10px 10px;    表示顺序依次为上-右-下-左,内容与边框的四边间距顺时针顺序
padding-top:10px;    表示内容与边框的上间距为10像素
padding-right:10px;    表示内容与边框的右间距为10像素
padding-bottom:10px;    表示内容与边框的下间距为10像素
padding-left:10px;    表示内容与边框的左间

paddlig:10px;    表示   内容与边框的四边间距均为10像素

<style type="text/css">
        #test{
            width:100px;
            height:100px;
            background-color:#69F;
            padding:30px 0px 0px 30px;
            }
        #erji{
            width:50px;
            height:50px;
            background-color:#F03;
            }
        </style>
        
    <body>
         <div id="test">
            <div id="erji"></div>
         </div>
    </body>

3.border 表格边框

border: 1px solid #69F;   表示边框粗细为1像素、样式为实线、颜色为蓝色

border-width:5px;

border-style:solid;

border-color:blue;

border-top(right、bottom、left):5px solid blue   表示上(右、下、左)边框:5像素、实线、蓝色

 

 #test{
            width:100px;
            height:100px;
            padding:30px;
            border:1px solid #69F
        }
        </style>
        
    <body>
         <div id="test"></div>
    </body>

技术分享

border另一个用途

<style type="text/css">
        #test{
            width:0px;
            height:0px;
            border-top:100px solid #3F0;
            border-right:100px solid #C00;
            border-bottom:100px solid #FF0;
            border-left:100px solid #609;
            
        }
        </style>
        
    <body>
         <div id="test"></div>
    </body>


效果为技术分享


所以,如果把其中三遍颜色变为白色,就只会显示出一边的颜色,这样我们就可以做一些不规则的东西

 

五.列表与方块

list-style:none;     取消序号,即没有列表样式

list-style:circle;     序号变为圆圈,样式相当于无序

list-style-image:url(图片地址);   列表前面加图片,相当于图片做序号

list-style-position:outside;   序号在内容外

list-style-position:inside;   序号跟内容在一块

 

六.格式与布局

position:
absolute; 绝对定位(相对于浏览器边界)
fixed 固定位置
relative 相对定位(相对于该元素本该出现的位置)

具体来看:

absolute; 绝对定位(相对于浏览器边界)

 <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        #test{
            width:200px;
            height:200px;
            background-color:#66F;
            position:absolute;
            top:50px;
            right:50px;
            }
        .list{
            width:100px;
            height:500px;
            }
        </style>
    </head>
    
    <body>
    <div id="test"></div>
    
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    </body>

技术分享

 

当我们拉动滚动条时,它的位置也会随之改变

 

fixed 固定位置

 <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        #test{
            width:200px;
            height:200px;
            background-color:#66F;
            position:fixed;
            top:50px;
            right:50px;
            }
        .list{
            width:100px;
            height:500px;
            }
        </style>
    </head>
    
    <body>
    <div id="test"></div>
    
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    </body>

技术分享

在fixed下我们拉动滚动条,滚动条的位置是不变的

 

relative 相对定位,相对于该元素本该出现的位置:

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        #test{
            width:200px;
            height:200px;
            background-color:#66F;
            position:relative;
            top:50px;
            left:50px;
            }
        
        </style>
    </head>
    
    <body>
    这是一段话
    <span id="test">测试相对位置</span>
    </body>

技术分享

在原本应该出现的位置偏移了

注意,只要加了position,该元素就和其他元素不在同一层了,原本被挤下去下面的元素就会浮上来

*{
           width:0px auto;
           height:0px;
          }

只要写上这句话,那么网页里的<div></div>就可以居中了

七.流式布局

做网页布局

 <style type="text/css">
        *{
           width:0px auto;
           height:0px;
           }
        #menu{
            width:900px;
            height:35px;
            margin-top:20px;
            }
        .list{
            width:100px;
            height:35;
            float:left;
            text-align:center;
            line-height:35px;
            vertical-align:middle;
            }
        </style>
    </head>
    
    <body>
    <div id="menu">
         <div class="list">首页</div>
         <div class="list">产品中心</div>
         <div class="list">新闻中心</div>
         <div class="list">关于我们</div>
         <div class="list">联系我们</div>
    </div>
    </body>


float:left; right;
截断流:
<div style="clear:both"></div>
z-index:层级,数字越大越靠上

0610背景与前景