html/css学习笔记（一）

阅读更多

之前也学过几天html/css，但是这2个星期里自我感觉进步最快，简单总结下。。。

 

一、循序渐进之html/css

 

- ul/li ol/li dl/dt/dd
- block inline元素
- box model---padding margin
- class VS  id
- clear 
- position
- media queries

二、必杀技

clearfix 比如当父元素no float, 子元素float, 并且高度大于父元素时，这样父元素无法被撑开，可用该必杀技
position: relative 比如想解决radiobutton 图标和字不在一行的问题
margin: 0 auto  比如解决横向居中的问题
visibility:hidden 和 display:none的使用场景 

三、推荐一个无敌网站

http://learnlayout.com/ 超级适合学前端开发的新手

 

四、我的作业：

    gmail.html

	
		
		
	
	
		

		

				
			
				
			
			
				
			
				
[email protected]
			
		
		

			
			

				

					
Inbox
					
Starred
					
Important
					
Sent Mail
					
Drafts
					
Backlog
				
			
			

				

				
			
			

				

					
xiaoli
					
xiaohong
					
xiaohe
					
xiaozhao
					
xiaoli
					
xiaoxiao
				
			
	
		
		

			

				
 xiaoli
				
 welcome to TW
				
Apr,8th,2013
			
			

				
 Xiaoli
				
 TW policy
				
Apr,8th,2013
			
			

				
 Xiaoli
				
 TW policy
				
Apr,8th,2013
			
			

				
 Xiaoli
				
 TW policy
				
Apr,8th,2013
			
			

				
 Xiaoli
				
 TW policy
				
Apr,8th,2013
			
			

				
 Xiaoli
				
 TW policy
				
Apr,8th,2013
			
		
		

				

					
New Message
					
Recipients
					
Subject
					

					

						
					
				

			
		
	
	

 

 

 

gmail.css

 

.skin{
	/*max-width: 800px;
	margin: 0 auto*/
}
.header{
	height: 50px;
	border:1px solid grey;
	background: #D8D8D8
}

.logo{
	display: block;
	height: 50px;
	width: 200px;
	float: left;
}

.input{
	display: block;
	float: left;
	padding: 10px 50px;
	height: 20px;
	width: 100px;
}

.search_button{
	display:block;
	float: left;
	width: 60px;
	height: 30px;
	margin-top: 10px
}
.user{
	display: block;
	float: right;
	height: 30px;
}
.left_pannel{
	background: #D8D8D8;
	width: 200px;
	height: 600px;
	float: left;
}

.compose{
	display: block;
	float: left;
	width: 80px;
	margin: 10px auto;
}
.left_pannel .ul{
	display: block;
	list-style: none;
	width: 60px;
	margin:0px;
	padding:15px;

}
.hr{
	width:200px;
	size:1px;
	color:#848484;
}
.right_pannel{
	float:left;
	position: absolute;
	margin-left: 200px;
	height: 600px;
}
dd.time{
	float: right;
	width: 100px;
	border-bottom: 1px solid #D8D8D8;
}
dt{
	float: left;
	width: 80px;
	border-bottom: 1px solid #D8D8D8;
	padding-left: 5px;
}
dd.subject{
	width: 300px;
	float: left;
	border-bottom: 1px solid #D8D8D8;

}
.new_message{
	position: absolute;
	right: 10px;
	bottom: 10px;
	border: 1px solid black;
	height: 300px;
	width: 300px;
	background-color: white
}

.new_message ul {
	list-style: none;
	margin:0px;
	padding:0px;
}
.new_message li {
	text-align: left;
	margin:0px;
	padding:10px;
}
.new_message ul li.title{
	background-color: black;
	color: white;
	border-bottom: 1px solid #848484;

}
.new_message ul li.recipients{
	color: #848484;
	border: 1px solid #848484;
	height: 10px;

}
.new_message ul li.subject{
	color: #848484;
	border-bottom: 1px solid grey;
	height: 10px

}

.new_message ul li.body{
	color: #848484;
	height: 120px

}
.new_message ul li.submit{
	background-color: #D8D8D8;
}

 

五、心得

1.任务驱动，比如，模拟Gmail

2.针对同一个作业持续完善 

3.网站关于前端开发很多资料，要针对开发过程中遇到的问题一点一点google解决

4. 将html/css各种属性和具体场景关联记忆

 

今天就总结到这里。。。

 

 

 

• 
• 大小: 294.4 KB

• 查看图片附件