`
accpxudajian
  • 浏览: 458765 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

div+css布局

    博客分类:
  • CSS
阅读更多
position如果用好了比float好用。就怕用不好,用不好的话整个页面会摊痪。建议如果position不是很熟练的话最好还是用float,float记得清除就可以了。 
clear:both; /*清除浮动*/清除浮动主要是为了不让两边显示东西,这样它一条横线就是...一条横线,不会被左右的其它的层所干扰. 

a连接格式: 
/* 链接颜色 */ 
a:link {color: #1f3a87; text-decoration:none;} 
a:hover {color: #bc2931; text-decoration:underline;} 
a:active {color: #bc2931;} 
a:visited {color: #83006f;text-decoration:none;} 

/* 颜色属性 [定义规则,小写c加颜色名称] */ 
.cRed,a.cRed:link,a.cRed:visited{ color:Red; } 
.cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;} 
.cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;} 

/* 字体属性 [定义规则,小写f加属性名称] */ 
.fB {font-weight: bold;} 
.fI {font-style: italic;} 

//css中的类.属性:顶一个cRed的class,但是只有p标签才可以用。 
<style type="text/css"> 
p.cRed{//只使用语p标签的class样式 
color:red;} 
</style> 
<div class="cRed">ddddddddddddddd</div>//不标红 
<p class="cRed">ddddddddddddddd</p>//标红 

//细线文本框 
.thintx{ 
border:1px solid black; 
} 

div布局的两种方式: 
position:absolute;top:200px;left:400px;//相对于浏览器的定位 
position:relative;left:20px;top:20px;//relative是相对定位,是相对于前面的容器定位的。 

div+css布局样例: 
<HTML> 
<HEAD> 
  <TITLE>div+css+js </TITLE> 
  <style type="text/css"> 
.div_main{ 
width:80%; 
height:100%; 
background-color:gray; 
margin-left:100px; 
} 
.div_head{ 
width:100%; 
height:100px; 
background-color:blue; 
margin-top:10px; 
} 
.div_body{ 
width:100%; 
height:60%; 
margin-top:30px; 
background-color:white; 
} 
.div_foot{ 
width:100%; 
height:50px; 
margin-top:30px; 
background-color:yellow; 
} 
.div_button1{ 
position:relative; 
height:20px; 
left:533px; 
top:60px; 

} 
.div_button2{ 
position:relative; 
left:500px; 
height:20px; 
top:80px; 
} 
<!--//采取相对定位的按钮位置: 
.div_button1{ 
position:relative; 
height:20px; 
left:93%; 
top:60px; 

} 
.div_button2{ 
position:relative; 
left:86%; 
height:20px; 
top:80px; 
}--> 
//细线边框 
.thintx{ 
border:1px solid black; 
} 
input{ 
border:1 solid black; 
color:red; 
} 
  </style> 
</HEAD> 
<BODY style="background-color:black"> 
   <!--主体---> 
<div class="div_main"> 
   <!--head---> 
   <div id="" class="div_head"> 
           
    <div  class="div_button2"><input type="button" value="登陆"/></div> 
    <div  class="div_button1"><input type="button" value="推出"/></div> 
   
   </div> 
   <!--body---> 
   <div id="" class="div_body"> 
   <!--left---> 
    <div id="" style="float:left;width:20%;height:100%;background-color:red"> 
          <div id="" style="width:100%;height:50px;background-color:blue"></div> 
      <div id="" style="width:100%;height:50px;background-color:green"></div> 
      <div id="" style="width:100%;height:50px;background-color:blue"></div> 
      <div id="" style="width:100%;height:50px;background-color:green"></div> 
    </div> 
   <!--tab---> 
     <div id="" style="height:20%;width:100%;background-color:lightgreen"> 
        <div id="" style="width:10%;height:100%;float:left;background-color:green"></div> 
           <div id="" style="width:10%;height:100%;float:left;background-color:yellow"></div> 
     <div id="" style="width:10%;height:100%;float:left;background-color:green"></div> 
    </div> 
     <!--continer---> 
   <div id="" style="width:100%;height:80%;background-color:Brown;"> 
    <div id="" style="background-color:white;width:200px;height:200px;margin:100px;padding:50px;"> 
   <form> <input type="text" class="thintx" value="ddd" /></form> 
    </div> 
    </div> 
   </div> 
    <!--foot---> 
   <div id="" class="div_foot"></div> 
   
  </div> 
</BODY> 
</HTML> 

 

效果图>>
 

分享到:
评论

相关推荐

    div+css布局大全

    下面,我们将深入探讨div+css布局的相关知识点。 1. **Div元素**:HTML中的`&lt;div&gt;`(division)元素是一个通用容器,用于组合HTML元素,为页面提供结构。通过设置`&lt;div&gt;`的类或ID属性,我们可以对多个元素进行分组...

    table布局网页转换为div+CSS布局的转换软件

    在描述中提到的“table布局网页转换为div+CSS布局的转换软件”能够快速高效地完成这一转变,无论是对于简化网页代码,还是提升网页性能,都有显著效果。 软件支持绝对定位和流定位,这意味着它可以处理复杂的布局...

    Div+CSS布局入门+实例教程

    在网页设计领域,Div+CSS布局是现代网页开发的基础,它极大地提升了网页的可维护性和易用性。这个“Div+CSS布局入门+实例教程”是为初学者设计的,旨在帮助他们掌握这一核心技术。 Div(Division)是HTML中的一个...

    Div+CSS 布局大全.pdf

    这表明文档主要围绕Div和CSS布局技巧展开,且强调了项目表现层(即前端展示层)的重要性。标签“Div+CSS 布局大全.pdf”与标题一致,进一步确认了文档的分类和主要内容。在核心内容的摘录中,我们可以看到文档的结构...

    Div+CSS布局入门教程(一二三四)

    【Div+CSS布局入门教程详解】 Div+CSS布局是网页设计中的重要技术,它通过分离样式和内容,使得网页设计更加灵活、可维护性更强。本教程将带你一步步入门Div+CSS布局,从基础概念到实际操作,帮助你掌握这种布局...

    div+css布局实例淘宝网分析

    ### div+css布局实例——淘宝网首页分析 #### 一、引言 随着互联网技术的不断发展,网站设计已经从简单的图文混排发展到了更加注重用户体验和交互性的阶段。在这个过程中,div+css布局作为一种灵活且高效的网页...

    div+css布局制作箭头步骤流程样式 - div+css教程

    在网页设计领域,`div+css`是一种常用的技术,用于实现页面布局和样式控制。`div`元素作为容器,能够包裹其他HTML元素,而CSS(层叠样式表)则负责定义这些元素的外观和位置。在本教程中,我们将深入探讨如何使用`...

    Table转div+css工具

    5. **增强可访问性**:对于无障碍浏览(Accessibility)来说,Div+CSS布局往往优于Table布局,因为它能更好地遵循WCAG(Web Content Accessibility Guidelines)指南。 在实际操作中,使用Table2CSS3.0.0工具时,...

    CSS基础知识《Div+CSS 布局大全》 (PDF)值得一看!

    本篇文章将重点围绕Div和CSS布局展开,探讨相关知识点。 首先,Div是HTML中的一个块级元素,全称为“division”,意为“分隔”或“分区”。在网页设计中,Div常被用作容器,用于组织和管理页面内容。通过设置Div的...

    div+css布局制作横向带箭头步骤流程样式

    在网页设计中,`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`&lt;div&gt;`元素作为容器来组织内容,并利用CSS(层叠样式表)来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...

    网页设计div+CSS布局大全

    网页设计作为IT行业中重要的领域之一,其中的div+CSS布局技术是前端开发的基础,也是每个网站开发者必须掌握的核心技能。div元素和CSS样式表共同构成了现代网页设计的基础框架,通过合理使用div对页面进行布局,再...

    DIV+CSS布局大全-.zipCSS学习手册,学习CSS有用。

    在IT行业中,网页设计是至关重要的一个领域,而DIV+CSS布局则是现代网页设计的核心技术之一。本资源包“DIV+CSS布局大全-.zip”包含了深入学习CSS的基础知识和实践技巧,对于想要提升网页设计技能的初学者或者专业...

    循序渐进12天学会div+css布局

    【循序渐进12天学会div+css布局】是一个逐步学习如何使用div和CSS进行网页布局的教程。这个教程旨在帮助初学者在12天内掌握div+css布局技术,以便能有效地创建和设计符合Web标准的网页。 在第一天的学习中,重点是...

    DIV+CSS布局练习

    这个压缩包文件"DIV+CSS布局练习"显然旨在帮助初学者通过实践掌握这一基础技能。以下是关于`DIV+CSS`布局的一些详细知识点: 1. **DIV元素**:`&lt;div&gt;`(division)是HTML中的一个通用容器元素,用于组织页面内容。...

    DIV+CSS布局

    ### DIV+CSS布局详解 #### 一、概述 在现代Web开发中,**DIV+CSS布局**是一种常用的技术手段,用于构建网站结构和样式。它不仅能够帮助开发者更高效地组织网页内容,还能够实现更加美观的设计效果。本文将详细介绍...

    全国“创新杯”计算机类说课大赛一等奖作品:《DIV+CSS布局网页》教学设计方案.pdf

    《DIV+CSS布局网页》教学设计方案是一篇针对中等职业学校网页设计课程的教学设计,旨在帮助学生掌握使用DIV+CSS进行网页布局的核心技能。该方案荣获全国“创新杯”计算机类说课大赛一等奖,体现了其在教学创新和实践...

Global site tag (gtag.js) - Google Analytics