HTML和CSS设计艺术浅谈.pptVIP

不懂代码的设计师不是一流的网页设计师 1、HTML的作用是什么？ 2、CSS基本样式属性介绍 3、CSS究竟是怎样对网页布局起作用的？ 4、网页布局错乱，bug频出的深层原因究竟是什么？ 5、CSS对网页布局最重要的属性有哪些？他们为何重要？ 6、div+CSS实现网页设计的一般流程是怎样的？ 概要 一、Html的作用 1、Html标签负责网页布局结构，是承载网页上内容的容器 一、Html的作用 2、容器观：每个HTML代码标签都可以看做是一个容器 这里是内容，它放置在div容器中！ div这里是内容，它放置在div容器中！/div 我是div标签，是一个容器，是一个四方的区域容器 我是透明的一般你是看不到我的，只能看到我里面的内容 我的宽度默认是自动的，浏览器有多宽我就有多宽 我的高度默认是内容把我撑起了的，内容多高我就多高 我里面还可以无限放置其他容器(标签) 如果你想看到我，可以给我设置CSS属性，让我更好看一点，同时让我里面的内容也更好看一点 一、Html的作用 3、布局结构：可以理解为容器与容器的嵌套关系，也就是标签与标签的包含结构关系 一、Html的作用 3、布局结构：可以理解为容器与容器的嵌套关系，也就是标签与标签的包含结构关系 一、Html的作用 3、布局结构：可以理解为容器与容器的嵌套关系，也就是标签与标签的包含结构关系 div div/div div div/div div/div div div/div /div /div div/div /div 二、容器的CSS样式属性 1、CSS基本样式属性 没有CSS样式修饰装饰，html代码只具有简单的自身的样式，而CSS可以改变容器和其内容的任何样式 文字内容 margin padding border Color ,font , background height width Float，position 二、容器的CSS样式属性 2、CSS样式怎么对容器起作用？ 1）直接写在代码中 div style=“color：#ff0000,font-size:14px”……/div 2）写在HTML代码中页头head标签中，只对当前页面起作用，在html代码中添加类名，或ID名 head style type=text/css .red{color:#ff0000} .orange{color:#ff6600} /style /head div class=“red”……/div div class=“orange”……/div div class=“orange red”……/div Html代码 CSS样式表stylesheet.css 二、容器的CSS样式属性 2、CSS样式怎么对容器起作用？ 3）样式写在单独的样式单中，通过外链的方式连接样式单 head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title link href=/style/stylesheet.css / /head div class=“red”……/div div class=“orange”……/div div class=“orange red”……/div .red{color:#FF0000} .blue{color:#0000FF} 三、几个重要的CSS样式属性 1、float： left、right、none div div1111111/div div2222222/div div3333333/div /div 1111111 2222222 3333333 1 222222 333 布局错位、乱掉的原因绝大部分和loat有关 三、几个重要的CSS样式属性 1、float： left、right、none div div style=“float:left”1111111/div div style=“float:left”2222222/div span style=“float:left”3333333/span /div 1111111 2222222 3333333 1、float会让任何元素变成一个没有宽度的块级框 2、有float属性的元素会让其他元素感知不到它存在，但是元素中的内容仍然会认为浮动元素是存在的。 三、几个重要的CSS样式属性 2、clear： left、right、both、none 1111111 Clear：both 3333333 清除，规定元素的哪一侧不能有浮动元素 请问你是浮动元素吗？ 是的话“你滚！” 请问你是浮动元素吗？ 是的话“你滚！”