Div+CSS总结
之前最早接触是在牛腩新闻发布系统中，当时看到这些自己是一头雾水，不过好在我们已经形成了这样的学习习惯，先实践在接触理论，这样再学习理论的时候就会想到当初我是怎样的迷茫，这样自己印象更深刻。
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总结的更多相关文章
- 前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- div+css页面右侧底部悬浮层
效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...
- DIV+CSS规范命名大全
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...
- DIV+CSS 清除浮动方法总结
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...
- 十天学会<div+css>横向导航菜单和纵向导航菜单
纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
- DIV+CSS布局网站基本框架
html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- DIV+CSS常用的网页布局代码
单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...
- div+css实例教程
DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离. 对于初学者来说,可能比较模糊不熟悉.毕竟,样式布局需要通 ...
- DIV+CSS:页脚永远保持在页面底部
页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...
随机推荐
- consul多数据中心搭建 【h】
自建IDC后面简称own.阿里云机房ali.腾讯云机房txown机房:内网10.10.10.0/24,边界节点,10.10.10.100/101.xxx.80.xxxali机房:内网10.10.10. ...
- linux 保留yum安装后的rpm包
在linux上,使用yum安装,默认安装完成之后会删除下载的rpm包:想要yum安装软件后,还保留安装包,那么需要修改/etc/yum.conf配置文件中的keepcache参数. [root@bog ...
- python断点
pycharm怎么debug单步调试 1.打开一个Pycharm的界面,需要选中编辑器中的左侧. 2.点击Run---->Debug运行 3.点击箭头,向下运行 4.可以看到代码运行到下一条 5 ...
- kmeans 对表达量进行聚类
代码如下 df = pd.read_csv("../kmeans/gene.fpkm.csv",header=None) print df.head() #去掉第一行 tdf = ...
- API总结
1. 什么是Webservice WebService就是一个应用程序向外界暴露出一个能通过Web进行调用的API,也就是说能用编程的方法通过 Web 来调用这个应用程序.我们把调用这个WebServ ...
- 一天一个Linux命令，第三天cat命令
命令:cat (中文猫的意思) 解释:cat命令连接文件并打印到标准输出设备上(如显示器),cat经常用来显示文件的内容 注意:当文件较大时,文本在屏幕上迅速闪过(滚屏),用户往往看不清所显示的内容. ...
- ApachShiro 一个系统 两套验证方法-（后台管理员登录、前台App用户登录）同一接口实现、源码分析
需求: 在公司新的系统里面博主我使用的是ApachShiro 作为安全框架.作为后端的鉴权以及登录.分配权限等操作 管理员的信息都是存储在管理员表 前台App 用户也需要校验用户名和密码进行登录.但是 ...
- sql 数据库实时增量更新
---一下sql可以添加到作业中每秒执行一次 数据过多会消耗性能 --数据表如下,其中字段pid mid time price_type是一个组合主键--pid mid time price pr ...
- Matlab M文件变量检测与传递
M文件中变量的检测与传递 可变数量的输入输出变量(varargin,vararout): Matlab的输入输出变量数量可变,并具有以下特点: 可变输入输出变量必须在正常变量之后 varargin和v ...
- Java隐式类型转换和强制类型转换
一.强制类型转换 char 和 整型之间的类型转换 char a7 = 'a'; System.out.println(a7); System.out.println( (int)a7 ); Syst ...