Div+CSS总结

    之前最早接触是在牛腩新闻发布系统中，当时看到这些自己是一头雾水，不过好在我们已经形成了这样的学习习惯，先实践在接触理论，这样再学习理论的时候就会想到当初我是怎样的迷茫，这样自己印象更深刻。

    DIV+CSS，用来进行网页设计和布局的，我们看到百度界面如此简洁，看到很漂亮的空间，这些不得不说是我们CSS的功劳。

       1）Div的功能：对整个网页进行模块划分。

       2）Css的功能：对网页样式进行修饰，使用户体验更佳。

    接下来具体对这一阶段的学习做了一个总结，还是以导图的形式来整理自己的思路。

   

    这是我理解的DIV＋CSS，可能还会有很多内容在不断更新，将来我们的网页会更简洁也会更绚丽，下面是我做的一个小例子，用实例让自己对这些内容进行强化。

    该例子主要实现是设计一个个人的简历：

     HTML代码

	

		
个人简历
		

			

			
			

				
			
			
			
基本信息
			

			  

                

                  
姓名：
                  
张思思
                  
性别：
                  
女
                
                

                  
年龄：
                  
20
                  
民族：
                  
汉
                
                

                  
籍贯：
                  
河北廊坊
                  
学历：
                  
本科
                
                

                  
地址：
                  
河北廊坊安次区100号
                
                

                  
E-Mail:
                  
[email protected]
                
                

                  
邮编：
                  
065000
                  
联系电话:
                  
21233021
                
              
			
		
		

		

			
教育经验
			
2012.9-2016.6  廊坊师范学院 本科 生物技术专业				
			
		
		

		

			
基本技能
			

				
熟悉C/C++语言，Delphi
				熟悉HTML，CSS ，JavaScript				
				
了解java，php 
			
			
		
		

	

        CSS样式

/* CSS Document */
#profile{
	width:400px;
}
#profile h4{
	text-align:center;
	font-size:18px;
}
#profile .part{
	border-top:dobule #cccccc;
	padding-top:5px;
	margin:0px 5px;
}
#profile .part .title{
	font-size:95%;
	font-weight:bold;
	background: #FFB6C1;
	width:8em;
}
#profile .part .content{
	padding:15px;	
	font-size:80%;
	
}
#profile .part #photo{
	float:right;
	border:#555555 solid 1px;
	width:100px;
	height:110px;
}

          经过一番努力之后终于弄成了自己想要的效果，虽然还不太完美但能够自己设计自己的简历感觉非常棒，最重要是这个 feel 倍爽！

                               

      总结：

      短暂几天的学习自己做了一个小例子，这个功能不大，但能够锻炼自己对与web前段界面设计的能力，同时也给自己增添了信心，没有不可能的，只有自己想不想不做。当你下定决心去做时候，不用去管是否成功，你只要去做就好，那么结果可想而知，一定会成功！

 

    

转载于:https://www.cnblogs.com/zsswpb/p/5771626.html