返回
网页设计(div+css).ppt

网页设计(div+css).ppt

ID：48162071

大小：707.50 KB

页数：35页

时间：2020-01-16

网页设计(div+css).ppt_第1页
网页设计(div+css).ppt_第2页
网页设计(div+css).ppt_第3页
网页设计(div+css).ppt_第4页
网页设计(div+css).ppt_第5页
资源描述：

《网页设计(div+css).ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、DIV+CSS布局Div+Css特点DIV+CSS是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位Div+CSS布局的优势代码精简表格的嵌套问题速度问题方便搜索引擎的搜录重构页面的方便性盒状编程模型DIV+CSS通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具

2、备这些属性一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了，演示的相关文件

前言

正文内容

CSS盒子模式

正文内容

转变思想

正文内容

3、

熟悉步骤

正文内容

演示文件DIV+CSS设计思路用div来定义语义结构；然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；最后在这个CSS定义的盒子内加上内容，如文字、图片等设计效果图分析页面布局形式设置主要4个盒子将盒子装入Body盒子

4、eader"> 定义整体样式body{ font-family:Arial,Helvetica,sans-serif; font-size:12px; margin:0pxauto; height:auto; width:760px; border:1pxsolid#006633; }分别定义各个盒子样式#header{ height:100px; width:760px; b

5、ackground-image:url(headPic.gif); background-repeat:no-repeat; margin:0px0px3px0px; }设置更小的盒子#nav{ height:25px; width:760px; font-size:14px; list-style-type:none; } #navli{float:left; } #navlia{ color:#000000; text-decoration:none; padding-top:4px;display:block; ……}最终盒状模

6、型结构代码

  • 首页
  • 文章
  • 相册
  • Blog
  • 论坛
  • 帮助

    • 前言

    第一段内容

    理解CSS

    7、盒子模式

    第二段内容

    客服中心

    8、QQ留言

    9、网站管理

    10、会员登录

    11、

    Copyright©2006-2008KeithDan.AllRightsReserved

    演示代码练习一个实例初始效果图设计布局与规划顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；内容部分又可分为侧边栏、主体内容；底部，包括一些版权信息。布局与规划分析结构分析DIV结构如下： 　　│body{}/*这是一个HTML元素

    12、，具体我就不说明了*/└#Container{}/*页面层容器*/├#Header{}/*页面头部*/├#PageBody{}/*页面主体*/│　├#Sidebar{}/*侧边栏*/│　└#MainBody{}/*主体内

    当前文档最多预览五页，下载文档查看全文

    此文档下载收益归作者所有

    当前文档最多预览五页，下载文档查看全文
    温馨提示：
    1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。
    2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
    3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。
    4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。