Div+CSS总结

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

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

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

       2)Css的功能:对网页样式进行修饰,使用户体验更佳。

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

    Div+CSS总结_第1张图片

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

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

     HTML代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>个人简历</title>
<link  type = "text/css" rel ="stylesheet"  href="style.css"/>
</head>

<body>
	<div id ="profile">
		<h4>个人简历</h4>
		<div class ="part">
			<HR width="100%" color=#987cb9 SIZE=1 />
			
			<div id ="photo">
				<imag src="#">
			</div>			
			<div class = "title">基本信息</div>
			<div class ="content">
			  <table width="249" border="0">
                <tr>
                  <td width="50">姓名:</td>
                  <td width="65">张思思</td>
                  <td width="62">性别:</td>
                  <td width="54">女</td>
                </tr>
                <tr>
                  <td>年龄:</td>
                  <td>20</td>
                  <td>民族:</td>
                  <td>汉</td>
                </tr>
                <tr>
                  <td>籍贯:</td>
                  <td>河北廊坊</td>
                  <td>学历:</td>
                  <td>本科</td>
                </tr>
                <tr>
                  <td>地址:</td>
                  <td colspan="3">河北廊坊安次区100号</td>
                </tr>
                <tr>
                  <td>E-Mail:</td>
                  <td colspan="3">[email protected]</td>
                </tr>
                <tr>
                  <td>邮编:</td>
                  <td>065000</td>
                  <td>联系电话:</td>
                  <td>21233021</td>
                </tr>
              </table>
			</div>
		</div>
		<HR width="100%" color=#987cb9 SIZE=1 />
		<div class ="part">
			<div class ="title">教育经验</div>
			<div class ="content">2012.9-2016.6  廊坊师范学院 本科 生物技术专业				
			</div>
		</div>
		<HR width="100%" color=#987cb9 SIZE=1 />
		<div class ="part">
			<div class ="title">基本技能</div>
			<div class ="content">
				<p>熟悉C/C++语言,Delphi
				熟悉HTML,CSS ,JavaScript				</p>
				<p>了解java,php </p>
			</div>			
		</div>
		<HR width="100%" color=#987cb9 SIZE=1 />
	</div>
</body>
</html>

        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 倍爽!

                                Div+CSS总结_第2张图片

      总结:

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

 

    


你可能感兴趣的:(Div+CSS总结)