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

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前段界面设计的能力，同时也给自己增添了信心，没有不可能的，只有自己想不想不做。当你下定决心去做时候，不用去管是否成功，你只要去做就好，那么结果可想而知，一定会成功！

Div+CSS总结的更多相关文章

  1. 前端之DIV+CSS布局

    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...

  2. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  3. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  4. DIV+CSS规范命名大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  5. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  6. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  7. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  8. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

  9. div+css实例教程

    DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离. 对于初学者来说,可能比较模糊不熟悉.毕竟,样式布局需要通 ...

  10. DIV+CSS:页脚永远保持在页面底部

    页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...

随机推荐

  1. servlet 标红的错误笔记

    错误原因,没有添加来自Tomcat服务器的jar包依赖. 解决方法

  2. 【转帖】MIPS构架：曾经是英特尔的“眼中钉”

    MIPS构架:曾经是英特尔的“眼中钉” https://www.eefocus.com/mcu-dsp/363953 <处理器史话>之十一 2016-06-17 08:02 作者:付丽华预 ...

  3. 【转帖】处理器史话 | 服务器CPU市场的战役， AMD、Intel和ARM的厮杀

    处理器史话 | 服务器CPU市场的战役, AMD.Intel和ARM的厮杀 https://www.eefocus.com/mcu-dsp/377300   说完了个性鲜明的消费类电子,接下来聊一聊通 ...

  4. sql查询出现1055 this is incompatible with sql_mode=only_full_group_by

    今天在测试服务器上突然出现了这么一个MySQL的问题,同样的代码正式服没有问题,那肯定就是出在了配置上,查了一下原因才明白原来是数据库版本为5.7以上的版本, 默认是开启了 only_full_gro ...

  5. Windows的socket编程

    ################服务端 1.准备工作导入头文件 #include<WinSock2.h> #pragma comment(lib, "ws2_32.lib&quo ...

  6. A Simple Question of Chemistry

    #include<stdio.h> int main() { int i, l; ]; ]; l = ; ) { l++; } ; a[i]!= && i<l; i+ ...

  7. 【题解】Luogu P5398 [Ynoi2018]GOSICK

    原题传送门 二次离线莫队 二次离线莫队的做法参考第十四分块(前体)的题解 我们需要考虑从(1,i)如何推到(1,i+1) 我们算过了a[i]的答案,考虑加入a[i]的贡献 我们需要在a[i]的所有约数 ...

  8. 深度学习Tensorflow相关书籍推荐和PDF下载

    深度学习Tensorflow相关书籍推荐和PDF下载 baihualinxin关注 32018.03.28 10:46:16字数 481阅读 22,673 1.机器学习入门经典<统计学习方法&g ...

  9. Zookeeper学习笔记（三）——java客户端代码操作

    Zookeeper客户端java代码操作 上篇博客记录了shell命令操作zookeeper集群的方式,这次尝试采用java代码来操作.通过查阅API,发现并不困难. 1. 首先获得客户端与服务器的连 ...

  10. java之struts2之文件上传

    1.在大多数应用中,都有文件上传功能.有两种文件上传的方式,一种是自己去解析http协议,获取文件上传的内容.另一种是通过第三方插件来实现文件上传.第三方插件一般有两种,smartfileupload ...