html静态网页制作中div+css的浅运用
2015-09-06 08:42
676 查看
在基地实训的这些日子，对于javaweb静态网页布局也有了些理解，博主在此与大家分享一下这几天总结的经验。
当然博主算是相对的初学者（毕竟大学前三年混过来的），写代码也要用dreamweaver辅助，求不喷，对于我的理解指点就好。
使用html制作静态网页首先要对一个网页的布局有大体的了解。
一个网页就好比一个人，主要的无非就是头、身体。头就是个标题，给人以明示的作用，一眼望去就能认出你是谁，没有头大家都一样，既不美观也不好识别；身体就是内容，一个人或胖或瘦或高或矮，全在于身体，而古语有云：“匙桃不上个村夫，文墨胸中一点无。曾把空虚揣出骨，恶声赢得满江湖。”这也充分说明一个人的身体就是一个人的内涵，美的所在，值得探索的地方。（这里就谈最简单的静态网页制作）所以一个网页也包括头和身体，也就是<head>和<body>。
而<head>和<body>只是搭建了一个网页的框架和内容，这样的网页单调、丑陋且无生机，好比在ie打开一个记事本。所以为了美我们就要去是修饰网页。
面对简单的静态网页布局，我们完全可以在.html文件中直接添加修饰，但是面对庞大的繁重的静态网页布局，完全在.html文件中进行添加修饰，这样只会增加麻烦；又如果是在<head>中添加修饰，会使整个代码头的分量很重，变成“大头鬼”，这样代码也会显得冗杂并且十分不现实。所以我们引入.css文件来辅助我们修改装饰静态网页布局，极大的便利了我们静态网页布局的流程。
所谓的css就是通过找到我们事先在代码中做好的标记，在css上对应进行统一的布局修改，下面我们就来简单谈下css的运用：
1、css一般由选择符（selector），属性（property），属性值（value）三部分组成。
2、css的基本语法结构：selector｛property1:value;property2:value;...｝
3、选择符的作用是在文档中选择使用样式的元素和内容，简单说就是对应html中相应的标记，选择符主要分为通配选择符（*），类型选择符（p）,ID选择符（#），类选择符（.）,包含选择符（上下级用空格隔开），择符分组（一次定义几个选择符的样式）。
4、css的属性：（1）字体属性：字体选择font-family；字体大小font-size，字体样式font-style，字体加粗font-weight，字母小写转大写font-variant，字体综合font；
（2）文本属性：文本颜色color，文本修饰text-decoration，文本水平对齐text-align，文本垂直对齐vertical-align，文本书写方向direction，缩进：text-indent，行高：line-height，空白：white-space；
（3）背景属性：背景颜色：background-color，背景图片：background-imge,背景图片重复：background-repeat，背景图片位置：background-position，背景图片附件属性background-attachment；
（4）边框属性：边框样式：border-style（top，right，bottom，left），边框宽度：border-width，边框颜色：border-color；
（5）内边距属性：padding；内边距属性：margin；
（6）css未访问连接：link，已访问链接：visited，鼠标悬停链接：hover，激活链接：active；
（7）css布局属性：定位方式：position，层叠顺序：z-index，浮动属性：float，清除浮动：clear，超出内容：overflow，显示：visibility
（这里博主要插一句，在写css时，要注意格式和所对应的选择符，而且属性间的分号不要忘，尤其是最后的，博主也是经常马虎出错，检查也是比较麻烦的。）
既然我们引入了css来辅助我们布局通过代码编写的的静态网页，如果我们的代码杂乱无章，毫无标记，就算用css来修饰布局也会很繁琐，修改起来也十分麻烦，所以我们这时又引入了层元素<div>的使用，来规划我们的代码方便了理解，简化了工作量，节省了时间。
对于<div>，即为页面的分割元素，可以理解为div将身体分为不同部分，例如手，脚，胸等，所以<div>中,可以包含文本内容，图片，表单等。通过<div>将不同的元素移动到页面的任意位置，实现简单粗略的规划和布局，而且也可以创建多个<div>,这些<div>可以并列，也可以嵌套，甚至可以重叠。
<div>的用法也比较简单：<div>内容</div>，以此实现分层，为了区分不同的<div>,这里又引入了<div>的属性：
1、标记属性：id；2、标题属性：title；3、类属性：class；4、制定语言属性：lang；5、文本显示方向属性：dir；6、定义级联样式属性：style；7、对齐属性：align；8、取消自动换行属性nowrap（example：<div id=" "></div>)。
由于<div>中控制元素呈现的属性很少，而且不能定义<div>的宽度和高度，所以就更依赖于div与css的联用来实现网页布局的呈现。
然而不是引入div+css就可以做好页面的布局，对于一个静态网页的布局，一定要在书写代码前勾勒出所制作的网页实际的大体布局，做好框架分好模块，列出条理，理清思路，然后再开始写代码，进而利用div+css辅助，这样才会使静态网页的制作更简洁高效。
以上便是博主做的小小总结，希望各位看官有什么异议可以给我补充，不吝赐教。
当然博主算是相对的初学者（毕竟大学前三年混过来的），写代码也要用dreamweaver辅助，求不喷，对于我的理解指点就好。
使用html制作静态网页首先要对一个网页的布局有大体的了解。
一个网页就好比一个人，主要的无非就是头、身体。头就是个标题，给人以明示的作用，一眼望去就能认出你是谁，没有头大家都一样，既不美观也不好识别；身体就是内容，一个人或胖或瘦或高或矮，全在于身体，而古语有云：“匙桃不上个村夫，文墨胸中一点无。曾把空虚揣出骨，恶声赢得满江湖。”这也充分说明一个人的身体就是一个人的内涵，美的所在，值得探索的地方。（这里就谈最简单的静态网页制作）所以一个网页也包括头和身体，也就是<head>和<body>。
而<head>和<body>只是搭建了一个网页的框架和内容，这样的网页单调、丑陋且无生机，好比在ie打开一个记事本。所以为了美我们就要去是修饰网页。
面对简单的静态网页布局，我们完全可以在.html文件中直接添加修饰，但是面对庞大的繁重的静态网页布局，完全在.html文件中进行添加修饰，这样只会增加麻烦；又如果是在<head>中添加修饰，会使整个代码头的分量很重，变成“大头鬼”，这样代码也会显得冗杂并且十分不现实。所以我们引入.css文件来辅助我们修改装饰静态网页布局，极大的便利了我们静态网页布局的流程。
所谓的css就是通过找到我们事先在代码中做好的标记，在css上对应进行统一的布局修改，下面我们就来简单谈下css的运用：
1、css一般由选择符（selector），属性（property），属性值（value）三部分组成。
2、css的基本语法结构：selector｛property1:value;property2:value;...｝
3、选择符的作用是在文档中选择使用样式的元素和内容，简单说就是对应html中相应的标记，选择符主要分为通配选择符（*），类型选择符（p）,ID选择符（#），类选择符（.）,包含选择符（上下级用空格隔开），择符分组（一次定义几个选择符的样式）。
4、css的属性：（1）字体属性：字体选择font-family；字体大小font-size，字体样式font-style，字体加粗font-weight，字母小写转大写font-variant，字体综合font；
（2）文本属性：文本颜色color，文本修饰text-decoration，文本水平对齐text-align，文本垂直对齐vertical-align，文本书写方向direction，缩进：text-indent，行高：line-height，空白：white-space；
（3）背景属性：背景颜色：background-color，背景图片：background-imge,背景图片重复：background-repeat，背景图片位置：background-position，背景图片附件属性background-attachment；
（4）边框属性：边框样式：border-style（top，right，bottom，left），边框宽度：border-width，边框颜色：border-color；
（5）内边距属性：padding；内边距属性：margin；
（6）css未访问连接：link，已访问链接：visited，鼠标悬停链接：hover，激活链接：active；
（7）css布局属性：定位方式：position，层叠顺序：z-index，浮动属性：float，清除浮动：clear，超出内容：overflow，显示：visibility
（这里博主要插一句，在写css时，要注意格式和所对应的选择符，而且属性间的分号不要忘，尤其是最后的，博主也是经常马虎出错，检查也是比较麻烦的。）
既然我们引入了css来辅助我们布局通过代码编写的的静态网页，如果我们的代码杂乱无章，毫无标记，就算用css来修饰布局也会很繁琐，修改起来也十分麻烦，所以我们这时又引入了层元素<div>的使用，来规划我们的代码方便了理解，简化了工作量，节省了时间。
对于<div>，即为页面的分割元素，可以理解为div将身体分为不同部分，例如手，脚，胸等，所以<div>中,可以包含文本内容，图片，表单等。通过<div>将不同的元素移动到页面的任意位置，实现简单粗略的规划和布局，而且也可以创建多个<div>,这些<div>可以并列，也可以嵌套，甚至可以重叠。
<div>的用法也比较简单：<div>内容</div>，以此实现分层，为了区分不同的<div>,这里又引入了<div>的属性：
1、标记属性：id；2、标题属性：title；3、类属性：class；4、制定语言属性：lang；5、文本显示方向属性：dir；6、定义级联样式属性：style；7、对齐属性：align；8、取消自动换行属性nowrap（example：<div id=" "></div>)。
由于<div>中控制元素呈现的属性很少，而且不能定义<div>的宽度和高度，所以就更依赖于div与css的联用来实现网页布局的呈现。
然而不是引入div+css就可以做好页面的布局，对于一个静态网页的布局，一定要在书写代码前勾勒出所制作的网页实际的大体布局，做好框架分好模块，列出条理，理清思路，然后再开始写代码，进而利用div+css辅助，这样才会使静态网页的制作更简洁高效。
以上便是博主做的小小总结，希望各位看官有什么异议可以给我补充，不吝赐教。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS兼容问题大全
- css3中-webkit-text-size-adjust详解
- CSS 让标点符号不出现在行首
- CSS文本属性（上）
- css简介
- 背景图片自适应
- css样式表1
- CSS 属性 :before && :after的用法，伪类和伪元素的区别
- 【笔记-前端】div+css排版基础，以及错误记录
- css样式表2
- CSS强制性换行word-break与word-wrap的使用
- css sprites
- 闲聊CSS之关于clearfix--清除浮动[转]
- css:清除浮动
- 前台html的样式调试
- CSS选择符及优先级计算
- CSS设置滚动条样式
- CSS3属性选择器与(:not)选择器
- CSS相关博客
- CSSborder制作小三角形