码迷,mamicode.com
首页 > Web开发 > 详细

html入门-4

时间:2016-11-26 18:05:09      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:text   相互转换   sof   容器   log   block   mic   jpg   com   

html入门-4

一.文本样式:

  1.text-align:(水平对齐方式)

        left(居左)  center(居中)   right(居右

 技术分享

 技术分享

 技术分享

  2.text-indent:(缩进

    单位:em(字符)  px(像素

 技术分享

 技术分享

技术分享

  3.line-height:(行高

 技术分享

 技术分享 

   4.cursor:(光标

      pointer(手型指针技术分享       wait(等待技术分享

      help (帮助技术分享            text(文本光标技术分享

二.边框样式: border

  1.top ()  bottom() left() right(

     2.width (线宽

       3.style:solid(实线)  dashed (滑线)   dotted(点线

    4.color (颜色

 技术分享

技术分享

  注意:合成样式中方位属性(top,bottom等)直接跟在border后面 !

三.元素与块元素

  •  块元素:

    1.独占一行

    2.设置宽高有用

 技术分享

 技术分享

  • 行元素:

    1.行元素是紧挨着上一个元素显示,不会独占一行

    2.设置宽高没有用

 技术分享

 技术分享

  • 行&块元素 可以相互转换

    display:  block  转成块元素

技术分享 

    display: inline   转成行元素

技术分享

    display: inline-block   转成行块元素,变成行元素,但是具有块元素的特点(可以设置宽高)

 

四.精灵技术( css spirit )

  1.background-image

  2.background-color

  3.background-position(位置

    left    center    right

    top    center    bottom

  4.background-repeat:(平铺方式

        no-repeat(不平铺) repeat-x(水平平铺) repeat-y(竖直平铺

  5.background-attachment:(固定

  6.background合成样式

    background : url(“./img/1.jpg”) no-repeat center top fixed;

技术分享

 技术分享技术分享

 

  7.把容器的宽高 设置成 目标图片 的大小(宽&高 )

  8.调节background-position坐标值

 

五.盒模型

  1.padding:   盒子里面的内容 距离 盒子四周的距离, 可以简单的理解为"div"

    padding:20px;                      (内容到四周边框的距离为20px

    padding-top:10px;              (内容到上边框的距离为10px)

    padding-right:20px;           (内容到右边框的距离为20px)

    padding-bottom:30px;      (内容到下边框的距离为30px)

    padding-left:40px;              (内容到左边框的距离为40px)

    padding:10px 20px;             (内容到上、下边框的距离均为10px,到左、右边框的距离均为20px)

    padding:10px 20px 30px;  (内容到上边框的距离为10px,到左、右边框的距离均为20px,到下边框的距离为30px)

 技术分享

 技术分享

 技术分享

技术分享

  2.margin:  盒子&盒子之间的距离

     方位属性与padding一样,不设(top等)方位属性时默认为四边

 技术分享

 技术分享

 技术分享

 技术分享

html入门-4

标签:text   相互转换   sof   容器   log   block   mic   jpg   com   

原文地址:http://www.cnblogs.com/wangyihong/p/6104478.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!