Div+CSS总结
来源:互联网 发布:蝴蝶恶作剧软件 编辑:程序博客网 时间:2024/06/06 07:27
之前最早接触是在牛腩新闻发布系统中,当时看到这些自己是一头雾水,不过好在我们已经形成了这样的学习习惯,先实践在接触理论,这样再学习理论的时候就会想到当初我是怎样的迷茫,这样自己印象更深刻。
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前段界面设计的能力,同时也给自己增添了信心,没有不可能的,只有自己想不想不做。当你下定决心去做时候,不用去管是否成功,你只要去做就好,那么结果可想而知,一定会成功!
1 0
- 【CSS+DIV】CSS总结
- html div css 总结
- DIV+CSS兼容性问题总结
- DIV + CSS 总结
- CSS+DIV总结
- div + css 学习总结
- css+div 总结
- css+div 今日总结
- div+css 总结一
- DIV+CSS 总结
- 【总结】Div-CSS
- CSS+DIV总结
- div css布局总结
- div + css 布局总结
- div+css 圆角框总结
- div+css讲解总结
- CSS+DIV总结
- div css总结
- 工业4.0时代,我们引领未来
- Java集合中HashSet的实现原理
- 杭电2015'11校赛
- pku 3356(一个源串变换成目标串的最少步数,仅增删改3个操作)
- reason: '-[__NSCFNumber rangeOfCharacterFromSet:]: unrecognized selector sent to instance --iOS开发之崩溃
- Div+CSS总结
- Adobe的AIR
- OpenCv中cvCaptureFromFile返回NULL的问题
- hexo博客--搭建
- hdu 计算机学院大学生程序设计竞赛(2015’11)游乐场
- Http缓存
- Java集合之Map
- 你造SQL中的 Where 1=1 吗
- Swiftype添加站内搜索