css的入门
一、css的基础语法和选择器
1、什么是结构和表现分离?
在页面中,使用html搭建页面的结构(页面的内容),不使用标签的属性设置样式, 标签的样式全部在CSS中设置。
2、什么是CSS?
层叠样式表(Cascading Style Sheet)
CSS3是新版本的CSS,与老版本(CSS2.1)相比在性能和成 本上有大的提升
3、如何使用?
(1)行内容嵌入式
给标签添加style属性 – 行内式 注:行内样式仅对当前的 HTML 标签起作用,也就是说,如果我们希望多个标签使用同一个样式,则需要设置多次。各个样式声明之前一定要用分号“;”隔开哟,否则会失效。
示例:
①代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="color:blue;">
西安电子科技大学
</p>
</body>
</html>
②页面展示
(2)页面嵌入式
使用 style双标签嵌入CSS规则 – 嵌入式 注:只影响当前页面的标签。不能使内容与表现分离,本质上没有体现CSS的优势。
示例:
①代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
p{
color: aqua;
}
</style>
<body>
<p>
西安邮电大学
</p>
</body>
</html>
②页面展示
(3)链接式
先创建独立的CSS文件,然后在页面中使用标签链接外部的CSS文件 – 链入式。(推荐使用)
示例:
①html代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="../css/demo.css">
<body>
<p>
西安邮电大学
</p>
<h2>
西北政法大学
</h2>
</body>
</html>
②css代码展示
body{
text-align: center;
}
p{
color:aqua
}
h2{
color: brown;
}
③页面展示
(4)导入式
和链入式同样是先创建独立的CSS文件,然后在页面里使用下列代码条来导入–导入式( 推荐使用)
示例:
<style type="text/css">
@import url(../css/demo.css);
或
@import "../css/demo.css";
</style>
①html代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
@import url(../css/demo.css);
/* @import "../css/demo.css"; */
</style>
</head>
<body>
<p>
西安邮电大学
</p>
<h2>
陕西师范大学
</h2>
</body>
</html>
②css代码展示
body{
text-align: center;
}
p{
color:aqua
}
h2{
color: brown;
}
③页面展示
4、样式的定义
(1)基本格式如下
选择器{
属性1:值1;
属性2:值2;
}
5、css有哪些常用基础选择器
(1)标签名选择器:
标签名{
属性名:值;
}
(2)id选择器:
给标签设置id属性,通过id属性值选择标签。标签的id属性值不能重复
#id属性值{
属性名: 值;
}
(3)类选择器:
给标签设置class属性,通过class属性值选择标签。标签的class属性值可以重复。
.class属性值{
属性名:值;
}
(4)通配符选择器:
通配符(*),可以匹配页面中的任何元素
*{
属性名:值;
}
二、文本样式属性
1、常用的字体样式
属性 | 解释说明 |
---|---|
font-size | 设置字号(文字的大小) |
font-family | 设置字体。前提(本地机上安装有字体) |
font-style | 字体样式(eg:斜体…) |
font-weight | 字体加粗(100~900,数值越大字体越粗) |
@font-face | 设置服务器端字型。是CSS3新增加的样式属性 |
2.拓展(长度单位)
(1)相对单位:
表示 | 解释说明 |
---|---|
px | 像素,相对于屏幕的分辨率.(比较稳定和精确 ) |
em | 元素的字体高度。相对于父元素的属性值进行计算。通常参 照 < b o d y > <body> <body>的font-size (任意浏览器的默认字体为16px。1em = 16px) |
rem(root em) | 元素字体的高度。参照 < h t m l > <html> <html>根元素的字体的大小 |
(2)绝对单位:
表示 | 解释说明 |
---|---|
in | 英寸,1in = 2.54cm 12英寸 = 1英尺 |
pt(points) | 点,印刷的度量单位.1英寸 = 72pt |
cm | 厘米 |
mm | 毫米 |
3、常用的文本样式
属性 | 解释说明 |
---|---|
color | 定义文本的颜色( 颜色的表示方式:①颜色名:red、blue、green②十六进制眼神:#rgb/ #rrggbb 每个颜色分量的取值在0~f之间 ③函数:rgb(r,g,b) 每个颜色分量的取值在0~255之间,rgba(r,g,b,a) 新增加的a为颜色透明度,它的取值范围为0-1。) |
letter-spacing | 设置子间距(字符和字符之间的距离) |
word-spacing | 属性用于定义英文单词之间的间距,对中文字符无效。 |
line-height | 行高 |
text-align | 内容的对齐方式(left、center、right) |
属性 | 解释说明 |
---|---|
text-transform | 控制英文的大小写 |
none | 不做转换 |
capitalize | 单词首字母大写 |
uppercase | 所有字符全部转换成大写 |
lowercase | 所有字符全部转换成小写 |
属性 | 解释说明 |
---|---|
text-decoration | 设置文本的下划线、上划线、删除线 |
none | 没有装饰 |
underline | 下划线 |
overline | 上划线 |
line-through | 删除线 |
属性 | 解释说明 |
---|---|
text-indent | 设置首行文本的缩进 |
text-shadow | 设置文本的阴影效果 p{text-shadow:1px 1px 2px rgba(0,0,0,.3);} 第一个值:表示水平偏移量。可以为负值。 第二个值:表示垂直偏移量。可以为负值。 第三个值:表示阴影半径。不能为负值。 第四个值:表示阴影的颜色 |
属性 | 解释说明 |
---|---|
text-overflow | 文本的溢出效果(结合overflow属性使用) |
clip | 当对象内文本溢出时不显示省略标记(…),而是将溢出的部分裁切掉。 |
ellipsis | 当对象内文本溢出时显示省略标记(…)。 |
以上文本样式小练习:
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
@import"../css/004.css";
</style>
<body>
<header>
西安邮电大学
</header>
<p>
西安政法大学
</p>
<p id="p1">
西安电子科技大学
</p>
<p id="p2">practice is very important</p>
<p id="p3">practice is very important</p>
<p>
<a href="">大唐芙蓉园</a>
</p>
<p class="pt">
AAA<br/>
BBB<br/>
CCC<br/>
</p>
<p class="pi">
AAAAAAAAA
</p>
</body>
</html>
css代码:
*{ /*可以匹配页面所有的元素*/
margin:0;
padding:0;
}
body{
margin-top: 0px;/*表示body的上边界为0*/
}
header{
width: 100%;
height: 50px;
/* background-color: #ccc; */
text-align: center;
line-height: 50px;/*行高*/
/* font-size: 默认像素 参考电脑的分辨率*/
/* font-size: 2em;1em=16px任意浏览器的默认字体为16px; em参照body的font-size设置的*/
font-size: 1rem; /*元素字体的高度。参照<html>根元素的字体的大小*/
font-weight: 800;
font-family: 宋体;
text-shadow: 3px 1px 2px rgb(0,0,0,.3); /* 3px阴影水平模糊 1px阴影垂直模糊
2px表示模糊半径 第四位表示阴影颜色 前两位可以为负值可以改变阴影方向 后两位不可以*/
}
*{
color: royalblue;
}
#p1{
letter-spacing: 16px; /* 字符之间的距离 */
}
#p2{
letter-spacing: 16px; /* 字符之间的距离 */
text-transform: lowercase;/*所有字符小写 */
text-decoration: line-through;/*删除线 */
}
#p3{
word-spacing: 10px;/*只能表示单词之间的距离*/
text-transform:capitalize;
}
a{
text-decoration: none;
}
.pt{
text-indent: 50px;/*设置首行的文本缩进*/
}
.pi{
overflow: hidden;
width: 50px;
/* text-overflow: clip; */
text-overflow: ellipsis;
}
页面展示:
三、文本样式练习示例
1.示例一
①html代码块如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
@import"../css/zuoye1.css";
</style>
</head>
<body>
<p id="p1">旅途</p>
<p id="p2">人生是一条旅途</p>
<p id="p3">无论这条路是长还是短</p>
<p id="p4">是平坦还是崎岖</p>
<p id="p5">你都必须坚定的走下去</p>
<p id="p6">直至终点</p>
<p class="s1">充实自己</p>
<p class="s1">充实生活</p>
<p class="s1">永远善待生活</p>
<p class="s1">用自己最大的热情</p>
<p class="s1">歌唱人生之歌</p>
<p class="s2">这是一条旅途</p>
<p class="s2">在这里</p>
<p class="s2">我们相聚在一起</p>
<p class="s3">坐上了一辆幸福的列车</p>
<p class="s3">驶向明天</p>
<p class="s3">驶向未来</p>
</body>
</html>
②css代码块如下:
body{
text-align: center;
}
#p1{
font-size: 30px;
font-weight: bold;
font-family: 黑体;
}
#p2{
font-style:italic;
}
#p3{
text-decoration: line-through;/*删除线 */
}
#p4{
font-family:华文彩云;
}
#p5{
font-size: 20px;
font-style: italic;
}
#p6{
color:red;
}
.s1{
font-family: 华文新魏;
}
.s2{
font-style:italic;
text-decoration: line-through;/*删除线 */
}
.s3{
font-family: 宋体;
font-family: 黑体;
}
③案例样式展示:
2.示例二
①html代码块如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
@import"../css/zuoye2.css";
</style>
</head>
<body>
<h3>持之以恒,谁也不能随随便便成功</h3>
<hr/>
<p id="p1">发布:2022-4-10 点击(118)</p>
<hr/>
<p>
<div>
2022期19班张伟<br/>
<p class="t1">
学习日语已将近-一个月,现在正处于一个入门]阶段,学习方法对我们来说很重要。下面,我来稍微说
说自己在这一个月里是怎样对待日语的学习的。</p>
<p class="t1">
首先,要端正态度。现在学习日语是我们自己的事,要有渴望去学习的热情,而不是完成老师给的任
务就可以了。目前我们的课程安排地相当紧,每天要接受很多新的单词,还有语法。所以要充分的做好复
习和预习工作。课上要打起十二分的精神跟着老师的步伐,稍不留神就有可能掉队,这就需要提前做好必
要的预习。课后,把学过的单词和语法在回顾一 下,要做到对今天所学的内容没有任何疑惑,所谓温故而
知新嘛!我们都在抱怨课程安排的太紧,但是学习这件事,不是缺乏时间,而是缺乏努力,课程既然这样安
排,就肯定有它存在的道理,此时学习的苦只是暂时的,而未学到的痛苦相信我们有些人已有所体会。</p>
<p class="t1">
另外,还有很重要的一点,就是信心,你要相信自己一定能够把日语学好,持之以恒,谁也不能随随
便便成功,它来自彻底的自我管理和毅力。</p>
<p class="t1">
最后,所有同仁都顺利毕业,并取得成功。
</p>
</div>
</body>
</html>
②css代码块如下:
h3{
text-align: center;
}
#p1{
text-align: center;
}
hr{
color:rgb(0,0,0,.3);
}
.t1{
text-indent: 50px;
}
div{
margin: 70px;
}
③案例样式展示:
3.示例三(个人简历表格练习)
①html代码块如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
@import url("../css/zuoye5jianli.css");
</style>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<td colspan="3"><font class="s1">(基本信息)</font></td>
<td><font id="t1">简历更新日期:2009-04-30</font></td>
</tr>
<tr>
<td class="d1"><font class="c1">姓名:</font></td>
<td colspan="2"><font>张三</font></td>
<td rowspan="4"></td>
</tr>
<tr><td class="d1"><font class="c1">身份证号码:</font></td>
<td colspan="2">32010419781202081x</td>
</tr>
<tr><td class="d1"><font class="c1">性别:</font></td>
<td colspan="2">男</td>
</tr>
<tr>
<td class="d1"><font class="c1">出生年月:</font></td>
<td colspan="2">1978.12.02</td>
</tr>
<tr>
<td class="d1"><font class="c1">民族:</font></td>
<td>汉族</td>
<td class="d1"><font class="c1">政治面貌:</font></td>
<td>共青团员</td>
</tr>
<tr>
<td class="d1"><font class="c1">婚姻状况:</font></td>
<td>未婚</td>
<td class="d1"><font class="c1">视力:</font></td>
<td></td>
</tr>
<tr>
<td class="d1"><font class="c1">户籍所在地:</font></td>
<td>南京市秦淮区</td>
<td class="d1"><font class="c1">身高:</font></td>
<td>0(cm)</td>
</tr>
<tr>
<td class="d1"><font class="c1">现居住地:</font></td>
<td colspan="3">南京市秦淮区</td>
</tr>
<tr>
<td colspan="4"><font class="s1">(目前从事工作情况)</font></td>
</tr>
<tr><td class="d1"><font class="c1">现工作单位:</font></td>
<td><font>***</font></td>
<td class="d1"><font class="c1">参加工作年度:</font></td>
<td>1998年</td>
</tr>
<tr><td class="d1"><font class="c1">目前从事岗位:</font></td>
<td>信息工程</td>
<td class="d1"><font class="c1">从事现岗位时间:</font></td>
<td>8年</td>
</tr>
<tr><td class="d1"><font class="c1">现职称级别:</font></td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="4"><font class="s1">(受教育情况)</font></td>
</tr>
<tr>
<td class="d1"><font class="c1">学历:</font></td>
<td>本科</td>
<td class="d1"><font class="c1">毕业年度:</font></td>
<td>1998</td>
</tr>
<tr>
<td class="d1"><font class="c1">所学专业:</font></td>
<td colspan="3">涉外会计</td>
</tr>
<tr>
<td class="d1"><font class="c1">毕业院校:</font></td>
<td colspan="3">金陵科技学院</td>
</tr>
<tr>
<td class="d1"><font class="c1">外语及水平:</font></td>
<td colspan="3">英语,普通英语六级;法语,一般</td>
</tr>
<tr>
<td class="d1"><font class="c1">学习简历:</font></td>
<td colspan="3">1995/1--1998/9金陵科技学院金融学</td>
</tr>
<tr>
<td class="d1"><font class="c1">继续教育情况:</font></td>
<td colspan="3"></td>
</tr>
<tr>
<td class="d1"><font class="c1">工作简历:</font></td>
<td colspan="3">2000/3--2008:南京嘉腾科技有限公司<br/>
所属行业:计算机软件<br/>
EximbillsEnterprise项目经理<br/>
1.负责产品国际市场发展环境的分析,包括区域电信发展环境,重点运营商经营发展战略、投资方向和客户需求的分析;侧重海外高端运营商的市场培育、机会挖掘;<br/>
2.负责海外片区市场投资空间的中长期预测以及进行所辖区域市场竞争格局的分析.参与市场规划,定期输出所辖区域的市场策略(市场目标选择,市场竞争策略,产品策略以及合作策略等);为产品的市场规划和重大市场营销活动提供支持<br/>
3.在IBMWebsphere平台上用Java设计并开发国际结算系统EximBills企业级版本,
参与系统设计过程,并撰写英文系统文档。用MSProject编写项目计划,沟通各项目经理,海外市场销售团队与公司管理层,控制项目目标与公司整体战略之间的平衡。<br/>
4.协调渣塔银行StandardCharteredBankMegellan项目,协助项目经理沟通银行客户,保持中东公司实施团队与南京研发中心系统开发版本的一致。为银行提供系统技术咨询服务并分五个阶段将整个项目
</td>
</tr>
<tr>
<td class="d1"><font class="c1">个人技能及特长:</font></td>
<td colspan="3">
1.金融业务理论<br/>
2.Java软件开发<br/>
3.精通SQLServer开发<br/>
3.英语,法语流利<br/>
4.有较强的国际视野和跨文化沟通能力。<br/>
</td>
</tr>
<tr>
<td class="d1"><font class="c1">成果及获奖情况:</font></td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="4"><font id="s1">(求职意向)</font></td>
</tr>
<tr>
<td class="d1"><font class="c1">求职意向:</font></td>
<td colspan="3">信息技术经理/主管,科研人员,科研管理人员</td>
</tr>
<tr>
<td class="d1"><font class="c1">期望工作地点:</font></td>
<td colspan="3">南京市</td>
</tr>
<tr>
<td class="d1"><font class="c1">薪酬要求:</font></td>
<td>面议</td>
<td class="d1"><font class="c1">工作方式:</font></td>
<td>全/兼职</td>
</tr>
<tr>
<td class="d1"><font class="c1">对新工作的期望:</font></td>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="4"><font class="s1">(其他资料)</font></td>
</tr>
<tr>
<td class="d1"><font class="c1">兴趣爱好:</font></td>
<td colspan="3"></td>
</tr>
<tr>
<td class="d1"><font class="c1">自我评价:</font></td>
<td colspan="3">多年Java软件开发经验,英语,法语流利,有较强的国际视野和跨文化沟通能力。MCSE,MCDBA,MCSD</td>
</tr>
<tr>
<td colspan="4"><font class="s1">(联系方式)</font></td>
</tr>
<tr>
<td class="d1"><font class="c1">联系电话:</font></td>
<td>025-84589702</td>
<td class="d1"><font class="c1">住宅电话:</font></td>
<td>025-84589702</td>
</tr>
<tr>
<td class="d1"><font class="c1">移动电话:</font></td>
<td>13951725880</td>
<td class="d1"><font class="c1">联系人:</font></td>
<td></td>
</tr>
<tr>
<td class="d1"><font class="c1">E-MAIL:</font></td>
<td>xxxxxx@hotmail.com</td>
<td class="d1"><font class="c1">个人主页:</font></td>
<td></td>
</tr>
<tr>
<td class="d1"><font class="c1">聊天账号:</font></td>
<td colspan="3"></td>
</tr>
<tr>
<td class="d1"><font class="c1">通讯地址:</font></td>
<td colspan="3">()</td>
</tr>
</table>
</body>
</html>
②css代码块如下:
table{
margin: 0 auto;
width: 60%;
height: auto;
}
#t1{
color: red;
font-style: italic;
}
.s1{
color: blue;
font-weight: bolder;
font-family: 宋体;
}
.d1{
text-align: right;
width: 150px;
}
.c1{
font-weight: bold;
font-family: 宋体;
}
③案例样式展示
4.示例四(个人简历表单练习)
①html代码块如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<style type="text/css">
@import url("../css/zuoye6.css");
</style>
<body>
<form action="">
<table border="1" cellspacing="0"*>
<tr>
<td class="d1"><font class="c1">*</font>姓名</td>
<td colspan="3">
<label><input type="text"></label>
<font class="c1">*</font>
出生日期
<label>
<input type="date">
</label>
</td>
</tr>
<tr>
<td class="d1"> <font class="c1">*</font>身份证号码</td>
<td colspan="3"><label><input type="text"></label>
<font class="qian">
长度15位或18位,必须和出生日期、性别相对应
</font></td>
</tr>
<tr>
<td class="d1"> <font class="c1">*</font>性别</td>
<td colspan="3">
<label>
<select>
<option value="">--请选择--</option>
<option value="">男</option>
<option value="">女</option>
</select></label>
<label>
<select name="s1" >
<option value="">--请选择--</option>
<option value="">汉族</option>
<option value="">少数民族</option>
<option value="">其他民族</option>
</select></label></td>
</tr>
<tr>
<td class="d1">婚姻状况</td>
<td colspan="3">
<label>
<select name="s1" >
<option value="">--请选择--</option>
<option value="">未婚</option>
<option value="">已婚</option></select>
</label>
政治面貌
<label>
<select name="s1">
<option value="">--请选择--</option>
<option value="">共青团员</option>
<option value="">中共党员</option>
<option value="">民主党派</option>
<option value="">群众</option>
<option value="">其它</option></select>
</label>
</td>
</tr>
<tr>
<td class="d1">户口所在地</td>
<td colspan="3"><label>
<select name="s1">
<option value="">J江苏省</option>
<option value="">N南京市</option>
<option value="">南京市鼓楼区</option>
<option value="">南京市玄武区</option>
<option value="">南京市建邺区</option>
<option value="">南京市秦淮区</option>
<option value="">南京市栖霞区</option>
<option value="">南京市雨花台区</option>
<option value="">南京市浦口区</option>
<option value="">南京市六合区</option>
<option value="">南京市江宁区</option>
<option value="">南京市高淳区</option>
<option value="">南京市溧水区</option>
</select>
</label>
现居住地<label>
<select >
<option value="">南京市鼓楼区</option>
<option value="">南京市玄武区</option>
<option value="">南京市建邺区</option>
<option value="">南京市秦淮区</option>
<option value="">南京市栖霞区</option>
<option value="">南京市雨花台区</option>
<option value="">南京市浦口区</option>
<option value="">南京市六合区</option>
<option value="">南京市江宁区</option>
<option value="">南京市高淳区</option>
<option value="">南京市溧水区</option>
</select>
</label>
</td>
</tr>
<tr>
<td class="d1">身高</td>
<td colspan="3"><label><input type="text"></label><font class="qian">单位:厘米</font></td>
</tr>
<tr>
<td class="d1">视力状况</td>
<td colspan="3"><label><input type="text"></label><font class="qian">请用文字描述您的视力情况</font></td>
</tr>
<tr>
<td>现工作单位名称</td>
<td><label><input type="text"></label><br/>
<label><input type="checkbox" ></label><font class="qian">申请职位(发送简历)时发送现工作单位名称(不推荐选择)</font>
</td>
</tr>
<tr>
<td class="d1"><font class="c1">*</font>现工作职位名称</td>
<td colspan="3"><label><input type="text"><font class="qian">如:公司部门经理</font>
</label></td>
</tr>
<tr>
<td class="d1">现职称级别</td>
<td colspan="3">
<label>
<select>
<option value="">--请选择--</option>
<option value="">学员</option>
<option value="">初级</option>
<option value="">中级</option>
<option value="">副高</option>
<option value="">高级</option></select>
</label></td>
</tr>
<tr>
<td class="d1">现从事工作级别</td>
<td><label>
<select>
<option value="">--请选择--</option>
<option value="">高级决策层(CEO,EVP,GM...)</option>
<option value="">高级职位(管理类)</option>
<option value="">高级职位(非管理类)</option>
<option value="">中极职位(两年以上工作经验)</option>
<option value="">初极职位(两年以下工作经验)</option>
<option value="">学生</option>
</select>
</label></td>
</tr>
<tr>
<td class="d1"><font class="c1">*</font>现从事职位类别</td>
<td><label>
<select >
<option value="">--请选择--</option>
<option value="">计算机软件</option>
<option value="">销售管理</option>
<option value="">市场/营销</option>
<option value="">销售人员</option>
<option value="">计算机硬件</option>
<option value="">互联网开发及应用</option>
<option value="">咨询/顾问</option>
<option value="">交通运输服务</option>
<option value="">翻译</option>
<option value="">建筑工程/道桥/园艺</option>
<option value="">银行</option>
<option value="">行政/后勤</option>
<option value="">其它</option>
</select></label>
<label>
<select>
<option value="">IT-管理</option>
<option value="">首席技术执行官CTO</option>
<option value="">技术总监/经理</option>
<option value="">信息技术经理/主管</option>
<option value="">信息技术专员</option>
<option value="">项目总监</option>
<option value="">项目经理</option>
<option value="">项目主管</option>
<option value="">项目执行/协调人员</option>
<option value="">其他</option>
</select>
</label>
</td>
</tr>
<tr><td class="d1">从事现职位年限</td>
<td colspan="3"><label>
<select >
<option value="">--请选择--</option>
<option value="">1年</option>
<option value="">2年</option>
<option value="">3年</option>
<option value="">4年</option>
<option value="">5年</option>
<option value="">6年</option>
<option value="">7年</option>
</select>
</label></td>
</tr>
<tr>
<td class="juzhong" colspan="4"><button type="button">保存以上修改</button></td>
</tr>
</table>
</form>
</body>
</html>
②css代码块如下:
table{
margin: auto;
width: 60%;
height: 1200px;
background-color: rgb(248, 246, 246);
}
select{
width: 130px;
}
input{
width: 130px;
}
/* c1是指给*改变颜色 */
.c1{
color: red;
}
/* qian是指给注释文字,颜色变浅 */
.qian{
color: darkgrey ;
}
/* d1是将特定单元格内容靠右 */
.d1{
text-align: right;
}
/* juzhong是将最后的保存修改按钮居中显示 */
.juzhong{
text-align: center;
}