- 浏览: 458765 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
July01:
最近了解到一款StratoIO打印控件,功能如下:1、Html ...
JS操作XMLDOM(遍历和打印) -
lliiqiang:
我这边只要出现图表组件就报告2032号错误。
Flex 出现 Error #2032 是什么意思 -
全保生:
感谢!方法一:(已确认 可行)String username ...
jsp 的url传参中文乱码问题解决办法 -
dy804731771:
谢谢您的分享,对我有帮助
兼容的带样式的INPUT -
huang305585796:
火影头像好屌
FusionCharts统计图导出为图片或pdf
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>
发表评论
-
背景图片的透明方法
2012-11-24 10:32 5553很多时候需要给body添加一个背景图片,同时对北京图片稍微做透 ... -
获取DOM对象的当前(current)样式
2012-09-28 17:19 3476/** *获取页面某个元素当前的样式:(譬如获取当前I ... -
css文本样式系小结
2012-09-18 17:08 1238超链接带图标和文字, ... -
兼容的带样式的INPUT
2012-09-18 10:21 10963<style> /* 作用描述:给IN ... -
css hack积累
2012-09-07 14:57 1182<html xmlns:wfs=" ... -
常用脚本
2012-09-03 18:28 1009换行: -word-wrap:break-word; w ... -
table进阶
2011-10-27 23:56 1295<html> <head> ... -
关于字体的css
2011-10-07 23:00 1039<html> <head> ... -
阅读犀牛书小结
2011-09-11 17:33 1333<script src="JSLogge ... -
混合参数的写法
2011-09-10 13:58 1102<script src="JSLogge ... -
dl,ul,ol小结
2011-09-09 00:43 1209<ul style="list-styl ... -
setCookie
2011-09-04 11:20 1104function setCookie(c_name,va ... -
css实现shadow窗口
2011-08-31 23:07 1248/*关键点: 1 半透明的兼容写法:opacity: ... -
js杂记
2011-08-31 21:58 992滤镜说明: Alpha:设置透明层次 blu ... -
A标签美化checkbox
2011-08-31 16:00 2227引用地址: http://topic.csdn.net/u/ ... -
javascript和css兼容性小结
2011-08-02 22:05 2061XHTML和HTML之间的区别 1.XHTML 元素一 ... -
浏览器兼容的text-align写法
2011-07-23 13:44 7589<html> <head> ... -
EasyTip 简单Tip提示窗口
2011-07-17 16:08 1682<script src="JSLogge ... -
css小结
2011-07-16 13:19 1014<html> <style> ... -
三个div实现跨浏览器的text-align:center的效果
2011-02-25 17:11 2283<!DOCTYPE HTML PUBLIC " ...
相关推荐
下面,我们将深入探讨div+css布局的相关知识点。 1. **Div元素**:HTML中的`<div>`(division)元素是一个通用容器,用于组合HTML元素,为页面提供结构。通过设置`<div>`的类或ID属性,我们可以对多个元素进行分组...
在描述中提到的“table布局网页转换为div+CSS布局的转换软件”能够快速高效地完成这一转变,无论是对于简化网页代码,还是提升网页性能,都有显著效果。 软件支持绝对定位和流定位,这意味着它可以处理复杂的布局...
在网页设计领域,Div+CSS布局是现代网页开发的基础,它极大地提升了网页的可维护性和易用性。这个“Div+CSS布局入门+实例教程”是为初学者设计的,旨在帮助他们掌握这一核心技术。 Div(Division)是HTML中的一个...
这表明文档主要围绕Div和CSS布局技巧展开,且强调了项目表现层(即前端展示层)的重要性。标签“Div+CSS 布局大全.pdf”与标题一致,进一步确认了文档的分类和主要内容。在核心内容的摘录中,我们可以看到文档的结构...
【Div+CSS布局入门教程详解】 Div+CSS布局是网页设计中的重要技术,它通过分离样式和内容,使得网页设计更加灵活、可维护性更强。本教程将带你一步步入门Div+CSS布局,从基础概念到实际操作,帮助你掌握这种布局...
### div+css布局实例——淘宝网首页分析 #### 一、引言 随着互联网技术的不断发展,网站设计已经从简单的图文混排发展到了更加注重用户体验和交互性的阶段。在这个过程中,div+css布局作为一种灵活且高效的网页...
在网页设计领域,`div+css`是一种常用的技术,用于实现页面布局和样式控制。`div`元素作为容器,能够包裹其他HTML元素,而CSS(层叠样式表)则负责定义这些元素的外观和位置。在本教程中,我们将深入探讨如何使用`...
5. **增强可访问性**:对于无障碍浏览(Accessibility)来说,Div+CSS布局往往优于Table布局,因为它能更好地遵循WCAG(Web Content Accessibility Guidelines)指南。 在实际操作中,使用Table2CSS3.0.0工具时,...
本篇文章将重点围绕Div和CSS布局展开,探讨相关知识点。 首先,Div是HTML中的一个块级元素,全称为“division”,意为“分隔”或“分区”。在网页设计中,Div常被用作容器,用于组织和管理页面内容。通过设置Div的...
在网页设计中,`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`<div>`元素作为容器来组织内容,并利用CSS(层叠样式表)来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...
网页设计作为IT行业中重要的领域之一,其中的div+CSS布局技术是前端开发的基础,也是每个网站开发者必须掌握的核心技能。div元素和CSS样式表共同构成了现代网页设计的基础框架,通过合理使用div对页面进行布局,再...
在IT行业中,网页设计是至关重要的一个领域,而DIV+CSS布局则是现代网页设计的核心技术之一。本资源包“DIV+CSS布局大全-.zip”包含了深入学习CSS的基础知识和实践技巧,对于想要提升网页设计技能的初学者或者专业...
【循序渐进12天学会div+css布局】是一个逐步学习如何使用div和CSS进行网页布局的教程。这个教程旨在帮助初学者在12天内掌握div+css布局技术,以便能有效地创建和设计符合Web标准的网页。 在第一天的学习中,重点是...
这个压缩包文件"DIV+CSS布局练习"显然旨在帮助初学者通过实践掌握这一基础技能。以下是关于`DIV+CSS`布局的一些详细知识点: 1. **DIV元素**:`<div>`(division)是HTML中的一个通用容器元素,用于组织页面内容。...
### DIV+CSS布局详解 #### 一、概述 在现代Web开发中,**DIV+CSS布局**是一种常用的技术手段,用于构建网站结构和样式。它不仅能够帮助开发者更高效地组织网页内容,还能够实现更加美观的设计效果。本文将详细介绍...
《DIV+CSS布局网页》教学设计方案是一篇针对中等职业学校网页设计课程的教学设计,旨在帮助学生掌握使用DIV+CSS进行网页布局的核心技能。该方案荣获全国“创新杯”计算机类说课大赛一等奖,体现了其在教学创新和实践...