文档章节

WEB基础03

x
 xwminren
发布于 2015/09/28 23:10
字数 1539
阅读 4
收藏 0
一,border box
	1,四边设置border:width  style color
	单边设置border-direction:width  style color
	-样式单位(常用):
		%:不同大小浏览器自动适应
		px:不同屏幕看到的是同样的大小
		em:调整行间距时采用
	-颜色
		#rrggbb
		#rgb 上者1、2位或3、4位或5、6位值相同时可以缩写为#rgb
		rgb(x%,x%,x%)rgb百分比值,如rgb(100%,0,0)
		表示颜色的英文单词:red,gold,silver,blue..
	-overflow:当内容溢出元素框(长宽固定)时如何处理
		-visible:直接显示在框外
		-hidden:隐藏溢出的文字
		-scroll:直接在右面和下面显示滚动条(不管是否溢出)
		-auto:没溢出不加滚动,溢出加滚动条
	2,box
		width和height指内容区域的宽度和高度,改变内边距、边框和外边距
	不会影响内容区域的尺寸,影响元素框总尺寸。
		元素实际占宽:width+2padding+2border+2margin
		元素实际占高:height+2padding+2border+2margin
		四边设置padding margin:20px
		单边设置padding margin:20px 30px 20px 30px(上右下左)
		单边设置padding margin -top、right、bottom、left
		单边设置padding margin:20px auto(横向居中对齐,针对水平设置)
二,背景
	-背景色background-color:#aaa
	-背景图片background-image:url("../../xxx.png");
		常用属性:
			background-repeat:
			 - repeat(水平竖向重复值)
			 - repeat-x
			 - repeat-y
			 - no-repeat(仅显示一次)
			background-position:
			 x% y%   x y   left   center   right   top   bottom
			background-attachment
			 默认值scroll,背景随文档滚动
			 可取 fixed,背景图像固定,不随页面其余部分滚动
三,文本格式化
	文本:
		指定字体:font-family:'字体1','字体2',..;
		字体大小:font-size:?px;
		字体加粗:font-weight:normal/bold;
	文本格式:
		文本颜色:color:value;
		文本排列:text-align:left、right、center;
		文字修饰:text-decoration:none、underline;
		行高:    line-height:value;
		首行文本缩进:text-indent:value;		
四,表格样式
	表格可以使用box模型(边框、内边距、宽高)以及文本格式化属性
	表格特有属性:border-collapse,合并相邻边框,separate/collapse
五,定位
	定位简介:定义元素框相对于其正常该出现的位置,或者相对于父元素,另一个
	元素甚至浏览器窗口本身的位置。
	1,流定位
		页面中块级元素都会从上到下一个接一个垂直排列(<p><div>等)
		注意:块级元素间垂直距离是由框的垂直外边距计算出来的
		页面中行内元素都在一行中从左到右水平排列(<span><a>等)
		可以使用水平内边距、边框和外边距调整它们间距。
	2,浮动定位
		1)让元素脱离普通流定位
		2)将浮动元素放置在父元素的左边或右边,左移右移直到外边缘碰到父元素或
		另一个浮动框边框
		3)浮动元素依旧位于父元素之内
		4)任何元素都可以浮动
		5)float:none、left、right。
		6)clear:用于清除浮动带来的影响
		<head>
			<title>左浮动</title>
			<style type="text/css">
			#d1,#d2,#d3{
				float:left;
			}
			</style>
		</head>
		<body>
			<div id="outter">
				<div id="d1">d1</div>
				<div id="d2">d2</div>      
				<div id="d3">d3</div>   
				<div style="border:0;clear:left;"></div>//这段话可以使外边框包住子元素框
			</div>
			<p>张三、李四、王五</p>    
		</body>

	3,相对定位
		元素框相对于它原来位置偏移某个距离
		设置相对定位:
			-首先设置position属性为relative
			-然后使用left属性/right属性设置水平方向偏移
			-也可使用top属性/bottom属性设置垂直方向偏移
	4,绝对定位
		将元素内容从当前定位中移除,释放空间
		使用偏移属性来固定元素的位置
		-首先要定义一个relative的祖先元素
		-如果没有定义relative的祖先元素,那他的位置是相对于body元素
		设置绝对定位:
			-首先设置position属性为absolute
			-然后使用left属性/right属性设置水平方向位置
			-也可使用top属性/bottom属性设置垂直方向位置
		(代码)
	5,堆叠顺序
		元素可能发生堆叠。
		z-index属性:
			-数值,数值越大表示堆叠顺序越高,离用户越近,可以设为负值,表示离用户更远。
		(代码)
	6,固定定位
		将元素内容固定在页面的某个位置,当用户向下滚动页面时元素框不会随着移动
		设置固定定位(相对于窗口固定不动)
			-首先要设置position属性为fixed
			-通过left、top、right、bottom这些偏移属性定义元素位置			
			<style type="text/css">
				.top{
					position:fixed;
					bottom:10px;
					right:10px;
				}
			</style>
			<div class="top">
				<a href="#">TOP</a>			
			</div>
六,列表样式
	1,list-style-type用于控制列表中列表项标志的样式
		-无序列表前原点会变为:
			-none:无标记
			-disc:实心圆,为默认值
			-circle:空心圆
			-square:实心方块
		-有序列表前数字会变为:
			-none:无标记
			-dicimal:数字,默认值
			-lower-roman:小写罗马数字(i iv v)
			-upper-roman:大写罗马数字(I IV V)
	2,list-style-image用于使用图像来替换列表项的标记
		取值  url(),指定图像作为有序或无序列表项的标志
		(代码)
七,显示方式
	元素默认显示方式:
		-块元素(<p>、<div>等)
		从上至下,可设置宽高
		-行内元素(<span>、<a>等)
		从左至右,不能设置宽高
		-行内块(<input>、<img>等)
		从左至右,能设置宽高
	可以使用display属性修改元素框的显示方式
	display取值:
		-none:不显示该元素,释放占用位置
		-block:将元素显示方式设置为块。如:可将行内元素<a>转换为块元素
		-inline:将元素显示方式设置为行内。如:可将块元素<p>转换为行内元素
		-inline-block:将元素显示方式设置为行内块。如:将行内元素<span>转换为行内块。
			(代码)
八,鼠标形状
	可以使用cursor属性指定显示给用户的鼠标光标形状(根据可视化暗示,提示进行的操作)
	cursor属性值:
		-default:默认箭头
		-pointer:手型
		-crosshair:十字
		-text:I
		-wait:等待(window现为转着的圆)
		-help:箭头加小问号


© 著作权归作者所有

上一篇: WEB基础02
下一篇: WEB基础01
x
粉丝 1
博文 10
码字总数 8101
作品 0
太原
私信 提问
郑州java/kind

#kind kind-permission Spring+SpringMVC+MyBatis+Shiro+MySQL+Redis+Maven+EasyUI+Bootstrap实现的通用权限管理系统 ,参考了一些优秀的开源项目. 项目结构 kind-perm-commmon 项目基础架构,...

郑州java
2017/08/14
0
0
【备忘】2017传智播客14期web前端与移动开发基础+就业班全套无加密

2017传智播客14期web前端与移动开发基础+就业班全套无加密 传智播客14期web前端与移动开发基础+就业班全套教程无加密 课程介绍 本教程是实战派课程!为传智最新web前端,结束日期为2016年12月...

qq_38155396
2017/06/30
0
0
C# Web Service 学习

Your first C# Web Service http://www.codeproject.com/Articles/863/Your-first-C-Web-Service Everything About REST Web Services - What and How - Part 1 http://www.codeproject.com/......

lgxn
2014/03/23
0
0
nodejs音乐播放器

iMusic 基于nodejs的音乐播放器 电脑端:node-webkit + angular + angular-material 移动端:react-native web管理端:express + mongoDB 导出数据 mongoexport --db imusic --collection m......

扬州炒饭
2016/01/08
506
0
Hasor 3.2.2 正式发布,携带了大量更新

Hasor v3.2.2 (2018-01-02) 新增 01. AppContextWarp 类,提供 AppContext 包装工具。 02. DataQL UDF 新增 manager 接口方便管理和注册。 03. DataQL 新增了 import 语法,现在可以导入另外一...

哈库纳
2018/01/02
840
1

没有更多内容

加载失败,请刷新页面

加载更多

Java的战争

本文来自微信公众号: 金捷幡(ID:jin-jiefan) ,作者:金捷幡,封面:拉里·埃里森(东方IC) 2019年5月,彻底撕破脸的特朗普掀起对华为的战争,谷歌被迫吊销了华为的Android授权。开源软...

Java领航员
33分钟前
1
0
超详细的LM3414MRX/NOPB规格参数介绍就在这里

超详细的LM3414MRX/NOPB规格参数介绍就在这里 描述 LM3414和LM3414MRX/NOPB是具有1-A 60 W(1)共阳极功能的恒流降压LED驱动器。它们适用于驱动单串3-W HBLED,效率高达96%。它们可接受4.5...

不能吃肉的仙女
40分钟前
1
0
Eclipse国内镜像源配置方法

Table of Contents 我们在国内从官网下载Eclipse以及插件非常慢,那么,有没有方法变快呢? 有,那就是使用国内的公开镜像源替换官方源。 1 下载Eclipse 首先,我们看一个链接地址: http:/...

求神
今天
5
0
java 请求服务

一.第一种基于java web http 请求服务,必须用tomcat 容器启动才能对外提供服务 在maven 工程中pox 文件导入jar <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>h......

zaolonglei
今天
5
0
HDFS工作机制——自开发分布式数据采集系统

需求描述: 在业务系统的服务器上,业务程序会不断生成业务日志(比如网站的页面访问日志) 业务日志是用log4j生成的,会不断地切出日志文件,需要定期(比如每小时)从业务服务器上的日志目...

须臾之余
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部