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

0610背景与前景

2024-10-04 05:19:01   215人阅读

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

一.背景：
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背景与前景


联系
我们