HTML和CSS设计艺术浅谈.ppt

1、不懂代码的设计师不是一流的网页设计师,1、HTML的作用是什么？ 2、CSS基本样式属性介绍 3、CSS究竟是怎样对网页布局起作用的？ 4、网页布局错乱，bug频出的深层原因究竟是什么？ 5、CSS对网页布局最重要的属性有哪些？他们为何重要？ 6、div+CSS实现网页设计的一般流程是怎样的？,概要,一、Html的作用,1、Html标签负责网页布局结构，是承载网页上内容的容器,一、Html的作用,2、容器观：每个HTML代码标签都可以看做是一个容器,这里是内容，它放置在div容器中！,这里是内容，它放置在div容器中！,我是div标签，是一个容器，是一个四方的区域容器 我是透明的一般你是看不到

2、我的，只能看到我里面的内容 我的宽度默认是自动的，浏览器有多宽我就有多宽 我的高度默认是内容把我撑起了的，内容多高我就多高 我里面还可以无限放置其他容器(标签) 如果你想看到我，可以给我设置CSS属性，让我更好看一点，同时让我里面的内容也更好看一点,一、Html的作用,3、布局结构：可以理解为容器与容器的嵌套关系，也就是标签与标签的包含结构关系,一、Html的作用,3、布局结构：可以理解为容器与容器的嵌套关系，也就是标签与标签的包含结构关系,一、Html的作用,3、布局结构：可以理解为容器与容器的嵌套关系，也就是标签与标签的包含结构关系, ,二、容器的CSS样式属性,1、CSS基本样式属性 没

3、有CSS样式修饰装饰，html代码只具有简单的自身的样式，而CSS可以改变容器和其内容的任何样式,文字内容,margin,padding,border,Color ,font , background,height,width,Float，position,二、容器的CSS样式属性,2、CSS样式怎么对容器起作用？,1）直接写在代码中,2）写在HTML代码中页头head标签中，只对当前页面起作用，在html代码中添加类名，或ID名, .redcolor:#ff0000 .orangecolor:#ff6600 ,Html代码,CSS样式表stylesheet.css,二、容器的CSS样式属性,

4、2、CSS样式怎么对容器起作用？,3）样式写在单独的样式单中，通过外链的方式连接样式单, 无标题文档 ,.redcolor:#FF0000 .bluecolor:#0000FF,三、几个重要的CSS样式属性,1、float： left、right、none, 1111111 2222222 3333333 ,1111111,2222222,3333333,1,222222,333,布局错位、乱掉的原因绝大部分和loat有关,三、几个重要的CSS样式属性,1、float： left、right、none, 1111111 2222222 3333333 ,1111111,2222222,3333

5、333,1、float会让任何元素变成一个没有宽度的块级框,2、有float属性的元素会让其他元素感知不到它存在，但是元素中的内容仍然会认为浮动元素是存在的。,三、几个重要的CSS样式属性,2、clear： left、right、both、none,1111111,Clear：both,3333333,清除，规定元素的哪一侧不能有浮动元素,请问你是浮动元素吗？ 是的话“你滚！”,三、几个重要的CSS样式属性, 1111111 2222222 3333333 ,1,222222,333,没有内容的空元素,1,222222,333,三、几个重要的CSS样式属性,3、魅力无穷的background,

6、background-color background-image background-repeat background-attachment background-position,三、几个重要的CSS样式属性,3、魅力无穷的background,三、几个重要的CSS样式属性,3、魅力无穷的background,元素可以理解为透明的， 可以看到的背景图片的区域 取决于元素本身的大小,如果一个元素既有背景颜色又有背景图片，那么这个元素的背景图片是在背景颜色的前一层上,三、几个重要的CSS样式属性,4、position：relative、absolute、fixed,让元素在另一个层面上展现的必须属性,Relative：使元素成为相对定位元素，位置相对于它自身,absolute：使元素成为绝对定位元素，位置相对与有定位属性的父元素节点(例),fixed：使元素成为绝对定位元素，位置相对浏览器窗口,四、实现网页布局的一般工作流程,1、根据设计图结构，构思网页html代码结构关系,四、实现网页布局的一般工作流程,2、根据设计图结构，编写html代码结构(包含关系)，先编写大的区块的结构关系,四、实现网页布局的一般工作流程,3、编