精华内容
下载资源
问答
  • 页面总数16个,风格统一。多媒体、表单、表格等等。漫威主题。红底黑字。可用做学习参考。未经本人授权,禁止用于商业用途。
  • 包含15个页面,div+css布局,使用表单元素、多媒体技术、表格等等
  • div+css布局制作箭头步骤流程样式 - div+css教程 案例源码 志峰创业室提供技术支持微信公众平台开发,是移动互联网开发API供应商,是移动互联解决供应商
  • DIV+CSS模拟题目

    2016-04-19 16:31:29
    DIV+CSS模拟题目
  • DIV+CSS做的三种图片滚动,轮播图片 1.2.3.4图片切换 电子相册
  • div+css div+css divcss布局入门教程 迅雷下载
  • 一个很好懂得CSS+DIV例子,适合新手看,页面也好看的例子
  • div+css网站布局案例精粹(第2版)50个案例赠送,书中30个案例在另一资源文件,因只能上传60MB文件,所以分开传。
  • DIV+CSS网站布局从入门到精通.PDF

    千次下载 热门讨论 2013-03-18 18:42:14
    本教程介绍了商业类型的网页设计,以及目前流行的DIV+CSS标准布局方法和实战技法。通过对十个经典案例进行分析,分别从不同类型网站的布局风格以及实现方法来讲解DIV+CSS网页布局和制作方法。本教程系统地讲解了CSS...
  • div+css设计页面框架

    2014-06-05 11:18:51
    div + css 设计的简单页面,也用到了gif动态图片,
  • DIV+CSS精美布局模板

    2015-10-14 17:20:35
    内含50套DIV+CSS 精美布局模板,简单修改便可以变成属于自己的网页,也可以作为布局设计的参考使用。
  • 关于网页制作课程的作业,使用DIV+CSS技术设计的个人主页,有需要的朋友可以下载,挺简洁的
  • DIV+CSS网页布局教程DIV+CSS网页布局技巧如何实现DIV+CSS网页布局.pdf
  • 50个div+css经典案例

    2011-11-16 14:56:57
    10个div+css经典案例,宠物网、电子产品类、个人网站、欢乐餐厅、科技公司、家居、咖啡店、旅游网站、冒险岛、美食、时代财富科技、中国音乐网。。。。提供给div+css的学习者,浏览器兼容性好!!!!
  • HTML后台模板(DIV+CSS

    千次下载 热门讨论 2014-04-17 23:24:58
    不错的后台模板,有需求的直接下,免费分享。
  • 七套最新div+css中文html模板免费下载

    千次下载 热门讨论 2013-03-27 13:48:54
    现在网上到处都是div+css模板,但是真正能用的到底有几个?你自己说! 无非是一些英文版的,但是国外的模板理念和国内的很不一样,英文的讲究框架合理,韩国的讲究视觉美,国内的刚好是二者的综合体。 现在模板界有...
  • DIV+CSS 源码DIV+CSS 
  • HTML网页设计制作大作业(div+css

    万次阅读 多人点赞 2020-11-25 16:19:36
    老师要求的十几个页面20几张图片以及一些跳转,使用div+css布局也基本上都有了。然后代码也有注释。也能够容易看得懂 部分代码 偷个懒,就用notepad打开。不用H-build打开了。哈哈哈 另外有同学要是需要源码的话...

    话不多说,直接上效果图:首页

    历史介绍
    历史介绍
    在这里插入图片描述
    行政区划:
    在这里插入图片描述
    地理环境
    在这里插入图片描述
    著名景点:
    在这里插入图片描述
    美食小吃
    在这里插入图片描述
    工艺品
    在这里插入图片描述
    联系我们
    在这里插入图片描述
    部分项目结构
    在这里插入图片描述
    老师要求的十几个页面20几张图片以及一些跳转,使用div+css布局也基本上都有了。然后代码也有注释。也能够容易看得懂

    部分代码
    在这里插入图片描述
    偷个懒,就用notepad打开。不用H-build打开了。哈哈哈
    另外有同学要是需要源码的话可以联系我呀。
    大家加油!奥利给!
    需要源码加扣扣1_6_0_1_9_9_8_8_4_1

    展开全文
  • DIV+CSS网站布局从入门到精通》[附书与源码].rar 《DIV+CSS网站布局从入门到精通》[附书与源码].rar 《DIV+CSS网站布局从入门到精通》[附书与源码].rar 《DIV+CSS网站布局从入门到精通》[附书与源码].rar 《DIV+...
  • div+css制作的个人网站

    2011-03-09 16:45:29
    全都是用div+css来完成的 包括布局
  • 网页设计(二)——DIV+CSS布局1

    千次阅读 2020-07-11 14:38:02
    前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者。...DIV+CSS布局 DIV+CSS布局概念 DIV+CSS布局方式并不是一种新的语言或者体系,它就是html语言中的一部分。 简单来说就是把标签中的样式...

    前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者。最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~

    网页设计系列源于早几年在学校网站工作做入门培训时的一些讲稿,有关HTML+CSS框架的编程,比较基础。当时为了给入门的同学更多感性认识,提供了很多小实例,这里也都给出来了。
     

    目录

    DIV+CSS布局

    DIV+CSS布局概念

    DIV标签

    DIV标签——盒子模型

    CSS概念

    CSS的优先次序

    使用CSS

    CSS选择器

    CSS选择器——元素选择器

    CSS选择器——元素选择器——实例3

    CSS选择器——类选择器

    CSS选择器—— ID选择器

    CSS选择器——派生(后代)选择器

    CSS选择器——实例4


    DIV+CSS布局

     

    DIV+CSS布局概念

    DIV+CSS布局方式并不是一种新的语言或者体系,它就是html语言中的一部分。

    简单来说就是把标签中的样式和部分属性,放到另外一个文件中,通过一定语法将它们联系起来,浏览器通过CSS中的语句来决定html中DIV(之前提到过,div为html中的一种标签)如何在页面中显示

    这种布局中,div承载的是内容,而css承载的是样式

    具体什么是CSS将在后面讲到。

     

    DIV标签

    <div>标签的使用方法和其他标签的使用方法完全一样,在网页中它的性质和<p>是一样的,均为块级元素。

    DIV本身就是容器性质的,它的主要作用就是承载内容,让css有一个作用的对象,当然其他标签也可以作为css的作用对象,但div有着一些其他标签不具有的优势,例如div之间可以任意嵌套,<p>标签之间是不可以嵌套的。

    一般我们利用盒子模型来理解div。

     

    DIV标签——盒子模型

    每个div都可看做是一个装了东西的盒子,盒子具有宽度(width)高度(height),盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)。尽管这些边距都是空白的,但它们在布局中却能够发挥意向不到的作用,往往只要通过设置边距的大小就可以实现定位。

     

    下图中的border为夸张版,但可以帮助大家认清border的地位:

     

    CSS概念

     

    在了解div之后,我们可以开始学习CSS了。

    CSS 指层叠样式表 (Cascading Style Sheets),它的作用主要是提供对文档外观的更好更全面的控制,而且不干扰文档的内容

    CSS能够很好地解决内容与表现分离的问题 ,极大地提高了工作效率。

     

    CSS的优先次序

    样式表有四种,它们的优先次序从 依次为
     

            浏览器缺省设置(默认设置)

            外部样式表

            内部样式表(位于<head>标签内部)

            内联样式(在HTML元素内部设置)

    了解样式表的优先级非常重要,因为有时候无论怎么修改自己的样式表都无法达到预期的效果,那么你可以尝试去找找是否有其他样式表覆盖了你要的效果。

     

    使用CSS

    前面的例子中其实已经使用过CSS了,如实例2.5中的:

        <p style="color:red;">Love</p>

    这里使用的就是之前说的CSS样式

    不过这里要讲的是如何使用外部样式表,建立起html文档和css文档之间的联系需要用到<link>标签。

    具体的联系操作为:在html文档的头部,即<head>标签中写入<link   rel= " stylesheet "   type= " text/css "  href= "样式文件名.css " />,就可以建立起两者之间的联系,浏览器在阅读html文档的时候会自动地到相应的CSS文件中读取样式

    内部样式表将在后面提到(一般情况下均使用外部样式表)

     

    CSS的基础语法是选择器+一条或多条声明,即:

          选择器名 {声明1;声明2; ...  ;声明}

    如:

     

    CSS选择器

    CSS中有很多选择器,下面几种选择器是最常用的:
     

    元素选择器

    类选择器

    ID 选择器

    后代选择器(派生选择器

    下面分别介绍。

     

    CSS选择——元素选择器

    元素即html标签,如p、img、title、h1、div等

    下面一句为在css中对<p>标签进行设置的实例:

                    p{color:red;font-size:66px;}

     如果多个标签同时需要用到同一种样式,可以这样             

                    h1,p,strong{color:blue;}

     后面我们会讲到更加简便的方法来实现对多个标签的设置

     

    CSS选择器——元素选择——实例3

     

    HTML文档中的代码片段,其创建、打开方式可参见《网页设计(一)——HTML基础概念》的实例2(https://blog.csdn.net/csyzcyj/article/details/107283767):

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="simple3.css" />
    </head>
    <body>
    <h1 align="center">元素选择器示例1</h1>
    <div>I love CSU</div>
    <p>chinadxscy.csu.edu.cn</p>
    <hr/><!--用于划分界线-->
    <h1 align="center">元素选择器示例2</h1>
    <div>I love CSU</div>
    <p style="color:red">chinadxscy.csu.edu.cn</p>
    </body>
    </html>

    CSS文件(注意上面的html中已规定CSS文件名为"simple3.css")代码:

    div,p{color:blue;}

    说明一下,CSS文件的创建与HTML类似,即打开记事本,在里面键入上方的CSS代码,而后保存,将后缀名改为css。注意,在本例中,由于html中已规定CSS文件名为"simple3.css",故CSS文件名需设置为"simple3.css"。

    打开html的效果如下:

    另外,注意两点:

    ①:选择器优先次序,这里体现了内联样式高于外部样式表;

    ②:CSS文件中每写一条需要以分号结束

     

    CSS选择器——选择器

    使用类选择,我们要给div或者标签加上一个class属性,如:

      HTML片段:

      <div class="im">I love CSU</div>

      对应CSS中:

      .im{font-size:35px;color:red;}

    前面说到的多个标签使用同种样式的时候可以这么写:

                             h1,p,strong{color:blue;}

    其实可以给每个标签都加上一个相同的class属性之后,只要写成

                            .类名{样式}

    ps:h1strong等标签都是内部已经设定了一定格式的标签,实际运用中我们可以通过自行调整css样式来实现,不一定要用内定了格式的标签

    效果可参见实例4。

     

    CSS选择器—— ID选择器

    ID选择器与类选择器类似,使用前也需要给标签加上一个ID属性,如:

    HTML片段:

      <div id="st">I love CSU</div>

    CSS对应片段:

      #st{font-size:35px;color:blue;}

     

    不过两者最大的区别在于,类选择器的类名可以是多个标签公用的,而ID选择器则是唯一。(尽管你在测试时发现可能可以用,但是这是错误的写法!在将来用到更高级的内嵌编程段<JavaScript>时会出现问题)

     错误示例:

      <div id="st">I love CSU</div>

      <div id="st">chinadxscy.csu.edu.cn</div>

    效果可参见实例4。

     

    CSS选择器——派生(后代)选择器

    这种选择器主要是用于设置内嵌的标签样式

    如:

      HTML片段:

      <p>中国大学生<strong></strong>网</p>

      CSS样式对应片段:

      p strong{color:red;font-size:60px;}

    上面的语句只会使得<p>标签中的创字样色改变,而不会对其它字起作用。

    效果可参见实例4。

     

    CSS选择器——实例4

    HTML代码如下:

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="simple4.css" />
    </head>
    <body>
    
    <h1 align="center">类选择器示例</h1>
    <div class="im">I love CSU</div>
    <p class="im">chinadxscy.csu.edu.cn</p>
    
    <hr/><!--用于划分界线-->
    
    <h1 align="center">ID选择器示例</h1>
    <div id="st">I love CSU</div>
    <p id="st">chinadxscy.csu.edu.cn</p>
    
    <hr/><!--用于划分界线-->
    
    <h1 align="center">派生选择器示例</h1>
    <p>中国大学生<strong>创</strong>业网</p>
    
    </body>
    </html>

    CSS文件代码如下:

    /*类选择器*/
    .im{font-size:35px;color:red;}
    /*ID选择器*/
    #st{font-size:35px;color:blue;}
    /*派生选择器*/
    p strong{color:red;font-size:60px;}

    打开HTML文件后效果如下:

     

    下一篇DIV+CSS布局将介绍CSS样式。

     

    附网页设计系列的文章链接:

    网页设计(一)——HTML基础概念:https://blog.csdn.net/csyzcyj/article/details/107283767

    网页设计(二)——DIV+CSS布局1:https://blog.csdn.net/csyzcyj/article/details/107284087

    网页设计(三)——DIV+CSS布局2:https://blog.csdn.net/csyzcyj/article/details/107284655

    网页设计(四)——DIV+CSS布局3:https://blog.csdn.net/csyzcyj/article/details/107285198

    网页设计(五)——marquee标签:https://blog.csdn.net/csyzcyj/article/details/107285901

    网页设计(六)——基于HTML+CSS框架的网页设计实例:https://blog.csdn.net/csyzcyj/article/details/107286067

     

    转载注明出处:https://blog.csdn.net/csyzcyj/

    展开全文
  • 基于jq.模仿select动作。。 好看使用。很不错。欢迎大家给意见、
  • div+css网页布局设计模板源代码

    热门讨论 2011-04-09 19:02:00
    div+css网页布局设计模板源代码。比较精炼,纯divcss布局,色彩搭配的很好。共6个网站。
  • div+css实现bookstore div+css实现网上书店网页div+css实现网上书店网页
  • DIV+CSS网页布局实例

    万次阅读 多人点赞 2019-03-16 21:07:57
    一、效果预览 说明:非常基础的IDV+CSS,实现了一般网站布局。CSS样式也比较基础,一些像定位等属性都没有使用。 二、代码实现 1、主体结构 (1)标签结构 ...(2)CSS样式 ...div class=&amp;qu

    一、效果预览

    说明:非常基础的IDV+CSS,实现了一般网站布局。CSS样式也比较基础,一些像定位等属性都没有使用。
    在这里插入图片描述

    二、代码实现

    1、主体结构
    (1)标签结构
    在这里插入图片描述
    (2)容器样式
    在这里插入图片描述
    2、头部
    (1)头部标签
    在这里插入图片描述
    (2)头部样式、
    在这里插入图片描述
    3、导航
    (1)标签结构
    在这里插入图片描述
    (2)CSS样式
    在这里插入图片描述
    4、主体
    (1)主体标签
    在这里插入图片描述

    <!-- 主体 -->
    		<div class="middle">
    			<!-- 主体左栏 -->
    			<div class="middle-left">
    				<div class="middle-left-top">
    					第一栏
    				</div>
    				<div class="middle-left-bottom">
    					<div class="middle-left-bottom-first">
    						第二栏
    					</div>
    					<div class="middle--left-bottom-second">
    						第三栏
    					</div>
    				</div>
    			</div>
    			<!-- 主体中栏 -->
    			<div class="middle-mid">
    				<div class="middle-mid-top">
    					第四栏
    				</div>
    				<div class="middle-mid-bottom">
    					<div class="middle-mid-bottom-first">
    						第五栏
    					</div>
    					<div class="middle-mid-bottom-second">
    						第六栏
    					</div>
    				</div>
    			</div>
    			<!-- 主体右栏 -->
    			<div class="middle-right">
    				<div class="middle-right-first">
    					第七栏
    				</div>
    			
    				<div class="middle-right-second">
    					第八栏
    				</div>
    				<div class="middle-right-third">
    					第九栏
    				</div>
    		
    			</div>
    		</div>
    

    (2)主体样式
    在这里插入图片描述

    		/*主体样式*/
    		.middle{
    			background-color:lightgreen;
    		}
    		.middle::after{
    			content:"";
    			clear: both;
    			display: block;
    		}
    
    
    		.middle-left,.middle-mid,.middle-right{
    			width:390px;
    			float: left;
    			border:1px solid red;
    		}
    		.middle-left,.middle-mid{
    			margin-right: 10px;
    		}
    
    		.middle-left{
    			background-color: green;
    		}
    		.middle-mid{
    			background-color: blue;
    		}
    		.middle-right{
    			background-color: yellow;
    		}
    		
    		/*主体左栏样式*/
    		.middle-left-bottom::after{
    			content:"";
    			clear: both;
    			display: block;
    		}
    		.middle-left-bottom-first,.middle--left-bottom-second{
    			float: left;
    			margin:10px;
    			border:1px solid red;
    			width:160px;
    
    		}
    		.middle-left-bottom-first,.middle--left-bottom-second{
    			height:200px;
    			background-image: url(./image/mid-left-bottom.jpg);
    		}
    		.middle-left-top{
    			margin:10px;
    			height:100px;
    			background-image: url(./image/mid-left-top.jpg);
    		}
    		/*主体中栏样式*/
    		.middle-mid-bottom-first,.middle-mid-bottom-second{
    			float: left;
    			margin:10px;
    			border:1px solid red;
    			width:160px;
    			height:200px;
    			background-image: url(./image/mid-left-bottom.jpg);
    		}
    		.middle-mid-top{
    			margin:10px;
    			height:100px;
    			background-image: url(./image/mid-left-top.jpg);
    		}
    
    		/*主体右栏样式*/
    	
    		.middle-right::after{
    			content:"";
    			clear: both;
    			display: block;
    		}
    		.middle-right-first{
    			margin:10px;
    			height:100px;
    			background-image: url(./image/mid-left-top.jpg);
    		}
    		.middle-right-second,.middle-right-third{
    			float: left;
    			margin:10px;
    			border:1px solid red;
    			width:160px;
    			height:200px;
    			background-image: url(./image/mid-left-bottom.jpg);
    		}
    

    5、底部
    (1)标签结构

    <!-- 底部 -->
    		<div class="footer">
    			<img src="./image/footer.jpg" alt="">
    		</div>
    

    (2)底部样式

    /*底部样式*/
    		.footer{
    			background-image: url(./image/footer.jpg);
    		}
    

    布局前划分结构非常重要,这样就不容易造成混乱。这样我们就实现了一个非常简单的DIV+CSS网页结构布局。

    展开全文
  • 通用后台管理系统模板 DIV+CSS 通用后台管理系统模板 DIV+CSS 通用后台管理系统模板 DIV+CSS
  • DIV+CSS技术在诚欣电子商城系统中的应用为切入点对DIV+CSS技术进行深入的探讨。首先对DIV+CSS网页重构技术进行了讨论;然后对DIVCSS技术在诚欣电子商城系统的页面设计中的应用进行了分析与讨论,同时给出了具体...
  • DIV+CSS布局基本流程及实例介绍

    千次阅读 2020-02-24 14:51:16
    都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称。DIV+CSS布局是现在非常流行的布局方法,替代了...

    都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称。DIV+CSS布局是现在非常流行的布局方法,替代了原来的表格布局。下面我们先来看下学习DIV+CSS布局的基本步骤:

     

    DIV+CSS

     

     

    一、认清学习的要求

    1、弄清目的,首先要认识为什么要学习CSS?
    2、心态不能急,如果你很急躁,否则会很快丧失兴趣。
    3、坚持,这个不是一到两天的事情,是一个漫长的过程(至少两个月)。


    二、基础学习

    1、了解CSS作用是什么?(即CSS、html和js的关系是什么,html结构重要性)
    2、css基础知识、css属性样式
    3、html

    上面几点,一般都是很快的掌握了,也不需要做到精通,了解大概就可以。

    差不多时候,开始在网上找一些psd设计稿,自己做做看,做完之后发现问题,并把他们进行总结。


    三、学会分析别人网页布局

    当你做psd设计的代码,发现问题,可能找不到答案或没有人帮你回答,也不要急,这时最好看看别人网页的布局结构,主要看html布局框架,进行借鉴(当然网上还有很多结构代码很槽糕)。然后了解美工图如何分析、如何使用PS工具切出需要的素材、如何使用这些切出的图片素材进行布局、布局技巧、兼容性解决与避免等。

    总之:就是让自己布局时候能知道大的布局结构如何布局,建立布局思想与技巧。
    新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。

    四、代码的规范

    当你看完很多别人的网页代码之后,你会发现,他们都有规范,这些规范网上有很多,你需要总结和背诵,当然不是死记硬背,主要在切图上多做多实践,熟了就能记住。


    五、大量练习

    练习是从始到终的,不要断,即使找一些简单的网页进行布局实践,开始可能开发很慢,会遇到很多小问题,也不急。


    制作DIV CSS网页前思考布局:
     

    首先我们拿到一张网页美工图片我们将从上下、上中下、左右、上中(中包括左右)下布局框架来思考。

     

    下面通过一个实例讲解下CSS布局分析,我们以DIV CSS5列表页面分析css布局:

     

    制作DIV CSS网页前思考布局

     

    首先我们可以分析出我们DIV CSS布局重构此页面结构框架,我们可以看出是上、中、下结构,其中又包括了左右结构。

    由此我们就要写此页面CSS和html时候就先从上到下从外到内原则写CSS与html。

    我们首先建一个web的文件夹并在此文件夹里新建html页面命名为index.html,CSS文件命名为index.css。这里有个诀窍就是可以导入模板方式来建CSS与html初始页面,然后将CSS文件引用到html,再在CSS模板的基础上再写再添加CSS。

     

    以下是index.html的html代码:

    以下为引用的内容:

    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
     
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xml="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type"content="text/html;charset=gb2312"/> 
    <title>css布局案例实验页面-www.DIV CSS5.com.cn</title> 
    <link href="index.css"rel="stylesheet"type="text/css"/> 
    </head>copyrightwww.DIV CSS5.comDIV CSS5  
    <body> 
    <div id="header">我是头部(上)</div> 
    <div id="centers"> 
    <div class="c_left">我是中的左</div> 
    <div class="c_right">我是中的右</div> 
    <div class="clear"> </div> 
    </div> 
    <div id="footer">我是底部(下)</div> 
    </body> 
    </html> 
    

     

    index.css的CSS代码如下:
    以下为引用的内容:

    body,div,address,blockquote,iframe,ul,ol,dl,dt,dd,li,dl,h1,h2,h3,h4,h5,h6,p,pre,table,  
     
    caption,th,td,form,legend,fieldset,input,button,select,textarea{margin:0;padding:0;  
     
    font-weight:normal;font-style:normal;font-size:100%;font-family:inherit;}  
    ol,ul,li{list-style:none;}  
    img{border:0;}  
    body{color:#000;background:#FFF;text-align:center;font:12px/1.5Arial,Helvetica,sans-serif;}  
    .clearfix:after{clear:both;content:".";display:block;height:0pt;visibility:hidden;overflow:hidden;}  
     
    .clear{clear:both;height:1px;margin-top:-1px;width:100%;}  
     
    .dis{display:block;}  
    .undis{display:none;}  
     
    /*此上面代码是初始CSS模板,下面是新写CSS布局框架代码*/  
     
    #header,#centers,#footer{width:100%;margin:0auto;  
     
    clear:both;font-size:18px;line-height:68px;font-weight:bold;}  
    #header{height:68px;border:1pxsolid#CCCCCC;}  
    #centers{padding:8px0;}  
    #footer{border-top:1pxsolid#CCCCCC;background:#F2F2F2;}  
     
    #centers.c_left{float:left;width:230px;border:1pxsolid#00CC66;  
     
    background:#F7F7F7;margin-right:5px;}  
    #centers.c_right{float:left;width:500px;border:1pxsolid#00CC66;background:#F7F7F7}  
    

    你可以考出此两段代码新建个试试。


    按以下步骤来建设一个网站的页面:

    1、顶部部分,其中包括了LOGO、MENU和一幅Banner图片;


    2、页面中间部分,那就是我们的主体了,要求打开首页快速,所以我们在网站发布的信息设计为三列。


    3、底部,包括一些版权信息。


    根据以上设想,我们定义如下div的结构
     

    DIV结构如下:
      
    │body {} /*这是一个HTML元素*/
      
    └#Container {} /*页面层容器*/
         
    ├#Header {} /*页面头部*/
         
    ├#MianBody {} /*页面主体*/
         
    │ ├#mainbody-left {} /*主体页面左边*/
         
    │ └#mainbody-center {} /*主体页面中间*/
    │ └#MainBody -right{} /*主体页面右边*/
     
    └#footer {} /*页面底部*/


    用DIV+CSS做一个导航栏是非常容易的,而且我们可以通过css来对导航栏的样式方便的作出调整。用div设置导航栏一般就用<ul>和<li>标签。

    4、高度显示效果不同
    一般情况下只需要使用height: 100px;即可,当显示效果不同时,则可以_height: 100px;来对IE6的高度进行设置。

    5、嵌套效果不不同.
    有些情况下如果div中嵌套的图片大于外层div的高度,则IE6中对高度的设置始终无效,这时要注意对该css添加overflow属性,overloaw:hidden,则可隐藏超出边界的部分。


    DIV+CSS网页布局常用的一些基础知识整理

     

    一.文件命名规范

    全局样式:global.css;
    框架布局:layout.css;
    字体样式:font.css;
    链接样式:link.css;
    打印样式:print.css;

    二.常用类/ID命名规范

    页 眉:header
    内 容:content
    容 器:container
    页 脚:footer
    版 权:copyright 
    导 航:menu
    主导航:mainMenu
    子导航:subMenu
    标 志:logo
    标 语:banner
    标 题:title
    侧边栏:sidebar
    图 标:Icon
    注 释:note
    搜 索:search
    按 钮:btn
    登 录:login
    链 接:link
    信息框:manage
    ……

    常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn“等等。

     

    CSS书写规范

     

    CSS书写规范及方法


    一. 常规书写规范及方法

    1. 选择DOCTYPE:

    XHTML 1.0 提供了三种DTD声明可供选择:

    过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:

     

     

    XML/HTML代码

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>  
    

    严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下:

     

    XML/HTML代码

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>  
    

    框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:

     

    XML/HTML代码

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“> 
    

    理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。
     

     

    2. 指定语言及字符集:

    为文档指定语言:

    XML/HTML代码

    <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>  
    

    为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言;

    如常用的语言定义:

     

    XML/HTML代码

    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />  
    

    标准的XML文档语言定义:

     

    XML/HTML代码

    <?xml version=”1.0″ encoding=” utf-8″?>  
    

    针对老版本的浏览器的语言定义:

     

    XML/HTML代码

    <meta http-equiv=”Content-Language” content=” utf-8″ />  

    为提高字符集,建议采用“utf-8”。

     

    3. 调用样式表:

    外部样式表调用:

    页面内嵌法:就是将样式表直接写在页面代码的head区。 如:

     

    XML/HTML代码

    <style type=”text/css”><!– body { background : white ; color : black ; } –> </style>  
    

    外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。

     

    XML/HTML代码

    <link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />  
    

    在符合web标准的设计中,推荐使用外部调用法,可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。


    4、选用恰当的元素:

    根据文档的结构来选择HTML元素,而不是根据HTML元素的样式来选择。例如,使用P元素来包含文字段落,而不是为了换行。如果在创建文档时找不到适当的元素,则可以考虑使用通用的div 或者是span;

    避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式;

    尽可能少地使用标签和结构嵌套,这样不但可以使文档结构清晰,同时也可以保持文件的小巧,在提高用户下载速度的同时,也易于浏览器对文档的解释及呈视;


    5、派生选择器:

    可以使用派生选择器给一个元素里的子元素定义样式,在简化命名的同时也使结构更加的清晰化,如:

     

    XML/HTML代码

    .mainMenu ul li {background:url(images/bg.gif;)}  
    

     

     

    6、辅助图片用背影图处理:

    这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理,可以在不改动页面的情况下通过CSS样式来进行改动,如:

     

    XML/HTML代码

    #logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}  
    

     

     

    7、结构与样式分离:

    在页面里只写入文档的结构,而将样式写于css文件中,通过外部调用CSS样式表来实现结构与样式的分离。



    8、文档的结构化书写:

    页面CSS文档都应采用结构化的书写方式,逻辑清晰易于阅读。如:

     

    XML/HTML代码

    <div id=”mainMenu”>  
    <ul>  
    <li><a href=”#” >首页</a></li>  
    <li><a href=”#” >介绍</a></li>  
    <li><a href=”#” >服务</a></li>  
    </ul>  
    </div>  
      
    /*=====主导航=====*/   
    #mainMenu {   
    width:100%;   
    height:30px;   
    background:url(images/mainMenu_bg.jpg) repeat-x;   
    }   
    #mainMenu ul li {   
    float:left;   
    line-height:30px;   
    margin-right:1px;   
    cursor:pointer;   
    }   
    /*=====主导航结束=====*/  
    

     

     

    9、鼠标手势:

    在XHTML标准中,hand只被IE识别,当需要将鼠标手势转换为“手形”时,则将“hand”换为“pointer”,即“cursor:pointer;”


    二.注释书写规范

    1、行间注释:

    直接写于属性值后面,如:

     

    XML/HTML代码

    .search{   
    border:1px solid #fff;/*定义搜索输入框边框*/   
    background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/   
    }  
    

     

     

    2、整段注释:

    分别在开始及结束地方加入注释,如:

     

    XML/HTML代码

    /*=====搜索条=====*/   
    .search {   
    border:1px solid #fff;   
    background:url(../images/icon.gif) no-repeat #333;   
    }   
    /*=====搜索条结束=====*/  
    

     

    css+div样式属性

     

     

    三.样式属性代码缩写

    1、不同类有相同属性及属性值的缩写:

    对于两个不同的类,但是其中有部分相同甚至是全部相同的属性及属性值时,应对其加以合并缩写,特别是当有多个不同的类而有相同的属性及属性值时,合并缩写可以减少代码量并易于控制。如:

     

    XML/HTML代码

    #mainMenu {   
    background:url(../images/bg.gif);   
    border:1px solid #333;   
    width:100%;   
    height:30px;   
    overflow:hidden;   
    }   
    #subMenu {   
    background:url(../images/bg.gif);   
    border:1px solid #333;   
    width:100%;   
    height:20px;   
    overflow:hidden;   
    }  
    

     

    两个不同类的属性值有重复之处,刚可以缩写为:

     

    XML/HTML代码

    #mainMenu,#subMenu {   
    background:url(../images/bg.gif);   
    border:1px solid #333;   
    width:100%;   
    overflow:hidden;   
    }   
    #mainMenu {height:30px;}   
    #subMenu {height:20px;}  
    

     

     

    2、同一属性的缩写:

    同一属性根据它的属性值也可以进行简写,如:

     

    XML/HTML代码

    .search {   
    background-color:#333;   
    background-image:url(../images/icon.gif);   
    background-repeat: no-repeat;   
    background-position:50% 50%;   
    }   
    .search {   
    background:#333 url(../images/icon.gif) no-repeat 50% 50%;   
    }  
    

     

     

    3、内外侧边框的缩写:
     

    在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的,当这四个属性值不同时也可直接缩写,如:

     

    XML/HTML代码

    .btn {   
    margin-top:10px;   
    margin-right:8px;   
    margin-bottom:12px;   
    margin-left:5px;   
    padding-top:10px;   
    padding-right:8px;   
    padding-bottom:12px;   
    padding-left:8px;   
    }  
    

    则可缩写为:

     

    XML/HTML代码

    .btn {   
    Margin:10px 8px 12px 5px;   
    Padding:10px 8px 12px 5px;   
    }  

    而如果当上边与下边、左边与右边的边框属性值相同时,则属性值可以直接缩写为两个,如:

     

    XML/HTML代码

    .btn {   
    margin-top:10px;   
    margin-right:5px;   
    margin-bottom:10px;   
    margin-left:5px;   
    }  
    

    缩写为:

     

    XML/HTML代码

    .btn {margin:10px 5px;}  
    

    而当上下左右四个边框的属性值都相同时,则可以直接缩写成一个,如:

     

    XML/HTML代码

    .btn {   
    margin-top:10px;   
    margin-right:10px;   
    margin-bottom:10px;   
    margin-left:10px;   
    }  
    

    缩写为:

     

    XML/HTML代码

    .btn{margin:10px;}  
    

     

     

    4、颜色值的缩写:

    当RGB三个颜色值数值相同时,可缩写颜色值代码。如:

     

    XML/HTML代码

    .menu { color:#ff3333;}  

    可缩写为:

     

    XML/HTML代码

    .menu {color:#f33;}  
    

     

    新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。

    四.hack书写规范 

    因为不同浏览器对W3C标准的支持不一样,各个浏览器对于页面的解释呈视也不尽相同,比如IE在很多情况下就与FF存在3px的差距,对于这些差异性,就需要利用css 的hack来进行调整,当然在没有必要的情况下,最好不要写hack来进行调整,避免因为hack而导致页面出现问题。
     

    1、 IE6、IE7、Firefox之间的兼容写法:

    写法一:

     

    XML/HTML代码

    IE都能识别*;标准浏览器(如FF)不能识别*;   
    IE6能识别*,但不能识别 !important,   
    IE7能识别*,也能识别!important;   
    FF不能识别*,但能识别!important;   
    根据上述表达,同一类/ID下的CSS  hack可写为:   
    .searchInput {   
    background-color:#333;/*三者皆可*/   
    *background-color:#666 !important; /*仅IE7*/   
    *background-color:#999; /*仅IE6及IE6以下*/   
    }  
    

    一般三者的书写顺序为:FF、IE7、IE6.



    写法二:

    IE6可识别“_”,而IE7及FF皆不能识别,所以当只针对IE6与IE7及FF之间的区别时,可这样书写:

     

    XML/HTML代码

    .searchInput {   
    background-color:#333;/*通用*/   
    _background-color:#666;/*仅IE6可识别*/   
    }  
    

     

    写法三:

     

    XML/HTML代码

    *+html 与 *html 是IE特有的标签, Firefox 暂不支持。   
    .searchInput {background-color:#333;}   
    *html .searchInput {background-color:#666;}/*仅IE6*/   
    *+html .searchInput {background-color:#555;}/*仅IE7*/  
    

     

    屏蔽IE浏览器:

    select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

     

    XML/HTML代码

    *:lang(zh) select {font:12px  !important;} /*FF的专用*/   
    select:empty {font:12px  !important;} /*safari可见*/  
    

     

    IE6可识别:

    这里主要是通过CSS注释分开一个属性与值,注释在冒号前。

     

    XML/HTML代码

    select { display /*IE6不识别*/:none;}
    

     

    IE的if条件hack写法:

    所有的IE可识别:

     

    XML/HTML代码

    <!–[if IE]> Only IE <![end if]–>  
    只有IE5.0可以识别:   
    <!–[if IE 5.0]> Only IE 5.0 <![end if]–>  
    IE5.0包换IE5.5都可以识别:   
    <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>  
    仅IE6可识别:   
    <!–[if lt IE 6]> Only IE 6- <![end if]–>  
    IE6以及IE6以下的IE5.x都可识别:   
    <!–[if gte IE 6]> Only IE 6/+ <![end if]–>  
    仅IE7可识别:   
    <!–[if lte IE 7]> Only IE 7/- <![end if]–>  
    


    2、清除浮动:
     

    在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。

     

    XML/HTML代码

    select:after {   
    content:”.”;   
    display:block;   
    height:0;   
    clear:both;   
    visibility:hidden;   
    }
    展开全文
  • div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示,可以根据窗口的大小自动调节所显示的大小! DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格...
  • 大学生网页设计至做作业成品,dreamweaver/frontpage网页大作业,大学生课程设计,中学生网页制作作业作品模板免费下载。http://wy.yilushang.net

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 857,516
精华内容 343,006
关键字:

div+css