个人简介 - HTML/CSS简单页面实例

用 div + css 控制页面

1.position属性：

• absolute（绝对定位）：参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT（下面简称TRBL）进行定位。

在没有设定TRBL，默认依据父级的做标原始点为原始点。

如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

• relative（相对定位）：是相对于前面的容器定位的。其层叠通过z-index属性定义。

相对于其最接近的一个参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位。

当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

• fixed（固定定位）

表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化

2.margin属性：元素的外边距

有margin-top，margin-right，margin-bottom，margin-left（上，右，下，左）四个方向

margin *同时设置四个外边距

margin **分别设定上下，左右外边距

margin *** 分别设定上，左右，下外边距

margin ****分别设定上，右，下，左外边距（顺时针方向）

3.border-radius：圆角半径

先编辑好一个div块，在.demo里面添加代码：

.demo{
	width:150px;
	height:80px;
	border:2px solid #f36;
	background:#CCC;
}

• border-radius只有一个值，四个角具有相同的圆角设置《上，下两个效果等价》

.demo{
border-radius: 10px;
}
 
  
.demo{
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
 
  
 
  
 
  
效果：
 
   
  
 
   
设置两个值，此时top-left等于bottom-right并且他们取第一个值；
 
  
 
  top-right等于bottom-left并且他们取第二个值，也就是说元素 左上角和右下角相同，右上角和左下角相同 
  
 
  
.demo{
border-radius: 10px 20px;
}
.demo{
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
}
效果： 
  
 
   
  
 
  
 
  
 
  
 
   
“/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径，他们两都遵循TRBL（上右下左）的顺序原则。代码如下：
 
  
 
  
.demo{
border-radius: 10px 15px 20px 30px / 20px 30px 15px;
}

.demo{
	border-top-left-radius: 10px 20px;
	border-top-right-radius: 15px 30px;
	border-bottom-right-radius: 20px 10px;
	border-bottom-left-radius: 30px 15px;
}
效果： 
  
 
  

 
  




	
	
	
	



	

		

			

				

					

						不怀旧，正青春
					
					

						

							
首页
							
职业
							
技术
							
VIP
						
					
					

						
					
					

						

							
						
					
				
			
			

			
		
		

			沉默是害怕的借口，傻笑是委屈的理由。
		
	

 
  
 CSS样式 
  
 
  
 
  
*
{
	margin: 0px;
	padding: 0px;
	
}

body
{
	background-color: aliceblue;
}

.wra
{
	width: 80%;
	height: 1000px;
	background-color: aqua;
	margin: 0px auto;
}

.head
{
	width: 100%;
	height: 90px;
	background-color: azure;
	margin: 0px auto 0px;
}

.head_na
{
	padding-bottom: 30px;
	padding-top: 30px;
	width: 100%;
	height: 30px;
	position: relative;/* 相对定位。具体请看下面解析 */
}

.head_title
{
	float: left;
	font-family: sans-serif;
	font-size: 30px;
	color: antiquewhite;
}

ul
{
	margin-left: 40px;
	float: left;          /* 向左浮动 */
	list-style-type: none;/* 去掉无序列表前面的点 */
	padding-top: 6px;
	padding-bottom: 6px; 
}

li
{
	padding-left: 10px; 
	display: inline;  /* 转换为内联标签《在一行显示，没有宽高属性》 */
}

a:link,a:visited      /* 初次加载，点击过后 */
{
	font-weight: bold;
	color: darkgray;
	text-align: center;
	padding: 6px;
	text-decoration: none;/* 去掉下划线 */
}

a:hover,a:active /* 鼠标在超链接上，点击超链接时 */
{
	color: dimgray;
}

.head_img img /* 直接指定img，对其设置样式 */
{
	border-radius: 30px; /* 四个角具有相同的圆角半径 */
	display: inline;	 
	width: 26px;
	height: 26px;
	box-shadow: 0 1px 1px rgba(0 0 0 0.3); /* [投影方式，向内] X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 颜色 */
	float: right;
}

.head_sop
{
	float: right;
	width: 100px;
	height: 26px;
	position: relative;
	margin-right: 50px;
}

form input
{
	height: 23px;
	border-radius: 30px;
}

.foot
{
	padding-top: 10px;
	text-align: center;
	font-size: 10px;
	color: darkgray;
}