C# div、css
目录:
注:本教程要求对html和css有基础了解。
一、CSS布局属性
Width:设置对象的宽度(width:45px)。
Height:设置对象的高度(Height:45px;)。
Background:设置对象的背景颜色、背景图像。
1.背景颜色
background:#09F;
2.背景图像
background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;
repeat-x代表横向重复,还可以设置repeat-y。
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能。
Float属性有left、right、none三个值,none默认属性不用管,主要是left和right两个属性最常用。
举例:
1.float:left属性
1
|
|
2.float:right属性
Margin: Margin属性用于设置两个元素之间的距离。(注:在IE6中默认是此属性的双倍值,如何解决请看hack css)
Margin属性设置值说明:
1.单独设置
margin-left:20px;设置左边
margin-right:20px;设置右边
同理上下分别是margin-top:20px;、margin-bottom:20px;
2.简写设置
Margin:10px;设置对象四周。
Margin:10px 5px;设置对象上下为10px,左右为5px;
举例:
Padding: Padding属性用于设置一个元素的边框与其内容的距离。
1.单独设置
padding-left:20px;设置左边
padding-right:20px;设置右边
同理上下分别是padding-top:20px;、padding-bottom:20px;
2.简写设置
padding:10px;设置对象四周。
padding:10px 5px;设置对象上下为10px,左右为5px;
Clear: Clear属性主要是清楚float属性设置的效果,使用Float属性设置一行有多个DIV后(多列),最好在下一行开始之前使用Clear属性清楚一下浮动,否则上面的布局会影响到下面。
1、如何在上面的例子中橙色方块的下面另起一行放置一个黑色方块。
我们直接在html中加入一个div试试
我们看到kwstu-kid3跑到1、2的下面去了,原因就是应为kwstu-kid2使用了float属性,解决方法可以直接在kwstu-kid3里面加入clear属性
2、还有一种布局中常见的问题,此处一定要看。
我们把最外层kwstu属性的高度去了,看看什么效果。
跟我们想象的不一样吧,我们想象中应该是kwstu层把kid1和kid2包裹住才对,为什么没有达到我们要的效果呢,原因就是应该kid1和kid2使用了float属性,此时可以使用clear属性清楚一下即可。
一般情况都是在css里面创建一个.clear公共清除浮动类,直接使用一个div调用即可
此问题还有一个解决办法:直接在kwstu样式中加入overflow:hidden;属性即可。
2.还有一个初学div时经常遇到的问题,如果把上边的clear层去掉,然后再在kwstu层下面开始一行新的布局,然后在下面新的div中使用margin-top属性,肯定不管用。这个地方是初学者布局中肯定要遇到的问题,一定要注意。
解决办法:
在kwstu层和kwstu1层直接加一个清除浮动层即可。
一、CSS文本属性
C# div、css的更多相关文章
- 动态添加div及对应的js、css文件
动态添加div及对应的js.css文件 在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用 ...
- 一、CSS概述 二、CSS的选择器(认识) 三、CSS样式和属性(练习) 四、重构商城首页DIV+CSS(页面布局)(重点) 浮动/更改显示方式
一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...
- HTML、CSS、JS对unicode字符的不同处理
unicode字符的不同表示法 unicode字符在html.css和js中的表示方法均不相同,下面分别作介绍. 原文发表于这里 css表示法 首先来一段很常见的bootstrap的字体图标代码: . ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 新手理解HTML、CSS、javascript之间的关系
http://www.cnblogs.com/dreamingbaobei/p/5062901.html 工作多年,一直忙忙碌碌的应用各种技术,现在不忙了,问问自己究竟在做什么,究竟会什么竟答不上来, ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- Javascript、CSS和IMG之网页执行探索
测试环境:windows/chrome 实例1:页面中仅有图片 <html xmlns="http://www.w3.org/1999/xhtml"> <head ...
- python学习-day14-前端之html、css
一.Html 1.本质:一个规则,浏览器能任务的规则 2.开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) ***** ...
- 前端html、Javascript、CSS技术小结
简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页 ...
随机推荐
- wcf客户端捕获异常
直接使用Exception进行捕获,然后在监视器中查看具体是哪一个异常 System.Exception {System.ServiceModel.Security.MessageSecurityEx ...
- android滑动删除的多种实现方式(一)
个人习惯,先上图 同事是个妹子(这点很重要),写滑动删除动能的时候用到了SwipeLayout,然后悲催的是,滑动时间被拦截了,解决方法先不提,在(一)中先讲解SwipeLayout下载listvie ...
- 有关Spring Batch
在使用Spring Batch时,在无法实现StepListener的情况下,如何使用ExecutionContext呢. 解决办法,使用宣言@BeforeStep或@AfterStep.
- Git error: hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused b
hint: Updates were rejected because the remote contains work that you dohint: not have locally. This ...
- BZOJ4195 [Noi2015]程序自动分析(离散化+并查集)
4195: [Noi2015]程序自动分析 Time Limit: 10 Sec Memory Limit: 512 MB Submit: 689 Solved: 296 [Submit][Sta ...
- PHP函数:PHP_SELF
php_self是php的内置变量,记作$php_self,其作用是实现“页内跳转”.这里的页内跳转不同等于html的书签之类的跳转,而是php程序通过URL的尾参数的改变在同一个程序里提供不同的We ...
- openStack 性能开测-2
- CSS 属性 - 伪类和伪元素
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...
- 使用ECharts报表统计公司考勤加班,大家加班多吗?
最近个项目已经连续加班1个月多,因为公司经常有在外面客户现场或出差的情况,人事每个月初会把上个月的份考勤打卡记录全部发出来,让我们对自己的考勤,突然想到可根据大家打卡时间记录统计每天工作时间,看大家是 ...
- Win7 64位安装MySQL
1.Win7 64位 安装MySQL5.5版本 安装文件的执行:会提示“已经停止工作”: 2.我下载了mysql-installer-community-5.7.11.0.msi,可以安装成功,中途需 ...