样式属性

*边界和边框border(表格边框,样式),magin (表位间距)padding(内容与单元格间距)

*列表与方块width,height,(top,botton,left,right)只有在绝对坐标情况下才有用

1.position:fixed锁定位置(相对于浏览器的位置)例网站的小弹窗

<head>在head里面
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>333333</title>
<style type="text/css">(锁定)相对于可是浏览器
#a
{
border:5px solid blue;
width:100px;宽
height:100px;高
margin:10px;边框
background-color:#0C6;
left:30px;左
bottom:20px;底
position:fixed;绝对锁定相对于浏览器	
}
</style>
</head>

<body>
<div id="a">xxxx</div>
</body>
</html>

 2 position:absolute

    1)注意在样式表中使用position的位置;

   2)同时在使用position定位是对于div的排版布局一定要有一个清晰地思路

3)absolute的使用比较多对于我们刚接触网页设计与编程使用比较频繁

*在这里差点个人感受对于参加培训机构或在校生们我们所做的这些伪网站,当真正进入企业实习是发现以前学习的都是一些理论产品;或许现在你自己也知道但需要的是改变。

“多去做大型的模块,去解决复杂的问题在实际开发中提升对语言的熟悉度”摘抄自CSDN博客 

3.position :relative()相对于默认位置移动

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>0513档</title>
<style type="text/css">
#a
{
	border:10px solid blue;
	width:100px;
	height:100px;
	margin:10px;
	background-color:#306;
	position:fixed;
	

	}
	#b
	{
		border:10px solid #066;
		width:100px;
		height:100px;
		margin:10px;
		background-color:#3F6;
		left:50px;
		top:50px;
		position:relative;
		}

</style>
</head>

<body>
<div id="a">a
</div>
<div id="b">b
</div>

</body>
</html>

图形大致就是a框在整个页面的左上角,而b框覆盖a一部分

顺带一连到分层

4 分层(z—index)

个人理解:就是在立体图图中的Z轴

例:

z-index:2;即为第2层(在不设置层数的情况下,系统默认都是一层)

5.float:left,right

*链接一部分overflow:hidden;//超出部分隐藏;scroll,会显示出滚动条

疑点何为流式布局的定义及使用

至于半透明效果<div class=box>透明区域</div>

//样式表中的代码;

.box

{

opacity:0.5;-moz-opacity:0.5;filter:alpha(opcity=50)

}

总结想要记住对于刚接触的朋友们就是多去在dw里多敲找几个可行的项目练练;增加熟悉度。

posted @ 2016-05-13 21:02  北宋小康  阅读(157)  评论(0)    收藏  举报