【CSS 基础 例子 图片拼合技术】的更多相关文章

CSS 基础 例子 图片拼合技术

利用background-position xpos ypos 就是以图片的左上角顶点为原点,往下和右都为正,反之为负,移动图片 如: background-position: 15px 20px;(指将图片向右移15px,向下移20px)  background-position: left -29px;(当中的left指从图片的最左端读起,-29px就是将图片向上移动29px) 例子: 原始图片: html代码:<!DOCTYPE html><html> <head>…

CSS 基础 例子 背景色 & 背景图片

背景简写形式 : body {background:#ffffff url('img_tree.png') no-repeat right top;} 一.背景色  background-color 二.背景图片 background-image background-repeat background-attachment background-position background-image 默认是水平和垂直平铺 设置  background-repeat 控制平铺方向,如repeat,r…

CSS 基础 例子 伪元素和伪类 & 区别

一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素     -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到效果 伪类种类 伪元素种类 二.基本例子 伪类: p>i:first-child {color;red} p下边的第一个子元素的颜色为红色 <p> <i>first</i> <i>second</i></p> 要达到同等效果,可以这…

CSS 基础 例子 定位及z-index

position 属性指定了元素的定位类型. position 属性的四个值: static    不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,right和z-index. relative  是相对其正常位置,它原本所占的空间不会改变,经常被用来作为绝对定位元素的容器块. absolute  相对于最近的已定位(非static)父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>,使元素的位置与文档流无关,因此不占据空间. fix…

CSS 基础 例子 display属性：block、inline和inline-block的区别

HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:display:block将元素设置成块级的,display:inline将元素设置成行级的. span的实际显示宽度和高度由其内容决定. 一.display:block的特点 1.block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. 2.blo…

CSS 基础 例子 水平 & 垂直对齐

一.元素居中对齐 margin:auto 水平居中对齐一个元素(如 <div>),即div本身在容器中的对齐,用margin:auto,而且,需要设置 width 属性(或者设置 100%),否则,居中对齐将不起作用. 二.文本居中对齐 text-align:center 文本在所在元素内水平居中对齐,可以使用 text-align: center; 三.图片居中对齐 margin:auto 而且放在块元素中  四.左右对齐-使用定位方式 position: absolute; 属性来对齐元素…

CSS 基础 例子 浮动float

一.基本概念 设置了float属性的元素会根据属性值向左或向右浮动,设置了float属性的元素为浮动元素,浮动元素会从普通文档流中脱离,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后的元素将围绕它. 浮动元素之前的元素将不会受到影响. 如果图像是右浮动,下面的文本流将环绕在它左边 浮动元素,不管原来是行内还是块元素,会变成块元素,可以设置宽高等属性 举个最基础的例子,基本的html代码,如下: <!DOCTYPE html> <html lang="en&qu…

CSS 基础 例子 行高line-height

“行高“指一行文字的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line-height 属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离. 一.line-height语法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比> | inherit 说明: line-height…

css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）

<!doctype html> <html> <head> <meta charset="UTF-8"/> <title>新手教程:CSS+DIV等宽格子堆砌瀑布流效果_酷站代码丨www.5icool.org</title> <style> *{padding:0;margin:0;} #wrap{position:relative;zoom:1;margin:0px auto;} #wrap li{w…

CSS 基础 例子 盒子模型及外边距塌陷

我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: 父子元素包含情况下的计算,父亲元素会把儿子元素的整个盒子(包括margin)的大小作为内容. 外边距塌陷(margin collapse),块元素的 top 与 bottom 外边距有时会合并(塌陷)为单个外边距(合并后最大的外边距),这样的现象称之为 外边距塌陷. 一般我们给元素设置背景色不会包…