Div+CSS总结
2015-11-29 21:10
549 查看
之前最早接触是在牛腩新闻发布系统中，当时看到这些自己是一头雾水，不过好在我们已经形成了这样的学习习惯，先实践在接触理论，这样再学习理论的时候就会想到当初我是怎样的迷茫，这样自己印象更深刻。
DIV+CSS，用来进行网页设计和布局的，我们看到百度界面如此简洁，看到很漂亮的空间，这些不得不说是我们CSS的功劳。
1）Div的功能：对整个网页进行模块划分。
2）Css的功能：对网页样式进行修饰，使用户体验更佳。
接下来具体对这一阶段的学习做了一个总结，还是以导图的形式来整理自己的思路。
这是我理解的DIV＋CSS，可能还会有很多内容在不断更新，将来我们的网页会更简洁也会更绚丽，下面是我做的一个小例子，用实例让自己对这些内容进行强化。
该例子主要实现是设计一个个人的简历：
HTML代码
CSS样式
经过一番努力之后终于弄成了自己想要的效果，虽然还不太完美但能够自己设计自己的简历感觉非常棒，最重要是这个 feel 倍爽！
总结：
短暂几天的学习自己做了一个小例子，这个功能不大，但能够锻炼自己对与web前段界面设计的能力，同时也给自己增添了信心，没有不可能的，只有自己想不想不做。当你下定决心去做时候，不用去管是否成功，你只要去做就好，那么结果可想而知，一定会成功！
DIV+CSS，用来进行网页设计和布局的，我们看到百度界面如此简洁，看到很漂亮的空间，这些不得不说是我们CSS的功劳。
1）Div的功能：对整个网页进行模块划分。
2）Css的功能：对网页样式进行修饰，使用户体验更佳。
接下来具体对这一阶段的学习做了一个总结，还是以导图的形式来整理自己的思路。
这是我理解的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">142255@163.cjom</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 倍爽！
总结：
短暂几天的学习自己做了一个小例子，这个功能不大，但能够锻炼自己对与web前段界面设计的能力，同时也给自己增添了信心，没有不可能的，只有自己想不想不做。当你下定决心去做时候，不用去管是否成功，你只要去做就好，那么结果可想而知，一定会成功！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐