DIV CSS的方法对该页面进行划分成若干DIV块

div+css对网页进行布局

div+css对网页进行布局首先在页面整体上进行div标签划分内容区域,然后再用css进行定位,最后再对相应的区域添加内容. 1.用div将页面划分拿到网站页面图后,首先将分析页面分为哪几块,然后用DIV划分出各个内容区域,一般页面有页面顶部. 轮播图.主体内容.菜单主导航.页面底部(footer又叫脚注)几个部分构成,每个部分分别由自己的id来标识. 如图: 2.设计各内容块的位置页面内容确定后,则需要根据内容本身去考虑页面的版型,例如菜单.双栏.左右中, 大型网站和一些门户网站大都使用

利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>中国石油大学</title> </head> <style> *{ margin: 0px auto; padding: 0px; } .top-head{ width: 100%; height

div+css 左右两列自适应高度，以及父级div也跟着自适应子级的高度（兼容各大浏览器）

DIV+CSS规范命名大全

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 DIV CSS命名目录命名规则说明重要CSS命名 CSS命名参考表命名技巧我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明: - TOP 1).所有的命名最好都小写 2).属性的

div+css实现未知宽高元素垂直水平居中

div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用会对页面性能造成影响,而且能用CSS实现的干嘛用JS呢,嘿嘿 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>div+

div+css实现的左右两个等高div

工作当中我们经常会有这样的需求,尤其是在一些内容页面或者网站后台管理页面:左边的div的高度会随着右边的div的内容的增加儿增加,右边div的高度也会随着左边div的内容的增加而增加,也就是左右两侧两个等高的div.如果不借助JS,而是单纯的使用div+css的方法该怎么实现呢?见代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>div+css实现的

div+css命名规范大全

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率, 我们开发DIV+CSS网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明: 1).所有的命名最好都小写2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"3).每个标签都要有开始和结束,且要有正确的层次,

div+css基础教程

本文存下来作为备忘. 第一节了解div+css 一.什么是div+css div元素是html(超文本语言)中的一个元素,是标签,用来为html文档内大块(block-level)的内容提供结构和背景的元素.div的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由div标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制. css是英语cascadingstyle sheets(层叠样式表单)的缩写,它是一种用来表现 html 或 xml 等文件式样的计算

[转]HTML DIV+CSS 命名规范大全

原文链接常用DIV+CSS命名大全集合,即CSS命名规则我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明 1.所有的命名最好都小写 2.属性的值一定要用双引号("")括起来,且一定要有值如 class="helloweb" , id="helloweb" 3.每个标签都要有开始和结束,且要有正确的层次,排版有规律工整 4.空元素要有结束

(一)初识div+css

关于div+css,一直以来都是听其名,而不知其为何.今天看了半天的视频,终于对此略有了解,感觉挺好的,相比之前的table布局页面,div+css就是一把页面布局利器!! div全称division(分割.分开.部门),css全称Cascading style sheet(层叠式样式表) 网页的布局分为三个时期:table布局,table+css布局(过渡时期),div+css布局(当前主流) 相对于div+css布局,table布局的缺点:1.显示样式和数据绑定在一起:2.布局的灵活度不高:

CSS技巧----DIV+CSS规范命名大全集合

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 DIV CSS命名目录命名规则说明重要CSS命名 CSS命名参考表命名技巧我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明: - TOP 1).所有的命名最好都小写2).属性的值

使用DIV+CSS布局网站的优点和缺陷

随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,从实际应用情况来看,此种方法绝对好于表格制作页面的方法. 如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉.比较上手:但是,它却阻碍了一种更好的.更有亲和力的.更灵活的,而且功能更强大的网站设计方法——DIV+CSS. CSS网页布局的意义体现在如下方面: 一.使页面载入得更快由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小.相对于表格嵌套的方式,DIV

常用DIV+CSS命名大全集合

一.命名规则说明: - TOP 1).所有的命名最好都小写 2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5" 3).每个标签都要有开始和结束,且要有正确的层次,排版有规律工整 4).空元素要有结束的tag或于开始的tag后加上"/" 5).表现与结构完全分离,代码中不涉及任何的表现元素,如style.font.bgColor.border等 6).<

DIV+CSS布局的优势和弊端

DIV+CSS的优势1.符合W3C标准.这保证您的网站不会因为将来网络应用的升级而被淘汰.2.对浏览者和浏览器更具亲和力.由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形.这样就支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是什么,您的网站都能很好的兼容.3.使页面载入得更快.页面体积变小,浏览速度变快,由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小.相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的

div+css样式表的id,class的常用命名规则

div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 Banner 导航 nav 子导航 subNav 菜单 menu 子菜单 subMenu 搜索 search 滚动 scroll 页面主体 main 内容 content 标签页 tab 文章列表 list 提示信息 msg 小技巧 tips 栏目标题 title 加入 joinus 指南 guild

DIV+CSS 入门

玩一小会儿前csdn什么时候,页面上的加qq而微博,我认为这是美好的.牛腩完成.运营商也开始了他真正的学习B/S之旅. 刚開始的时候,我不知道<div>是什么也不清楚CSS用来干什么的,敲完了回过头来再看,好像明确了一些.BS正在进门中 .写的不正确各位多多指正. CSS 总体来说css中包含各种各样的样式属性.用于控制字体,颜色,对齐方式和边距,这些仅仅是网页样式的一些方面. css的样式属性分为两大类. 布局属性:由影响网页上元素位置的属性(如边距填充对其等等)组成 . 格式化属性

div+css学习笔记一（转）

div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中背景图片 ie6 ie7 margin 杂谈分类: 网页制作 1.IE6中用了float之后导致margin-left/right双倍边距解决方法加上display:inline; 这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间. 2.居中问题:如果在body中设置了text-align:center,则div在IE中能居中,但是在FF中不能居中,如要在FF中也

正确认识 DIV+CSS 概念

今天看到神采飞扬发表于前端观察的<DIV+CSS 请不要再忽悠人了>,讲的挺有深意的,尤其对于新手如何正确认识div,学习web标准,使用web标准建站应该有很大帮助.转载过来,共同分享. 在大约两年前,DIV+CSS是一对很诱人的组合,会用DIV+CSS制作网页的人,常常会被人赞以大拇指的,记得06年初的时候,我用div+css布局的一个纯静态网站还拿了学校网页设计比赛的一个奖. 今天,尽管提到DIV+CSS,还会有很多人热情高涨,但是我会对他摇头了:DIV+CSS不是一切,更不是某些人所谓

网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘

网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特效让网页“亮”起来,这些都是新一代网页设计者最关注的话题.本书详细介绍了使用网页DIV-+CSS布局的方法,详解了国内外站点关于网页特效实现的精华案例,并由资深设计师结合实际开发经验,加以归纳.综合而成网页布局设计中特效实现的精彩实例. <网页DIV+CSS布局和动画美化全程实例(附光盘)>由陈

DIV+CSS 让同一行的图片和文字对齐【转藏】

DIV+CSS 让同一行的图片和文字对齐 DIV+CSS 让同一行的图片和文字对齐在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align:middle; 代码: <style> a img{border:none} .testdiv *{ vertical-align:middle; } </style> <div class=&

巧妙使用div+css模拟表格对角线

首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见的作法是用图片的方式来处理,还有就是用vml来画对角线,能不能用html+css方式来实现呢?答案是肯定的,下面我们来摸拟一个表格对角线. 原理: 用边框线来摸拟斜线,我们知道,如果将一个DIV的边框线设置得足够宽并定义了不同的颜色时,其相邻的两条边框线交界处就是斜线.知道了这个原理,我们就可以用b

DIV CSS的方法对该页面进行划分成若干DIV块

热门专题