【CSS的入门】

已于 2022-09-18 17:08:03 修改
阅读量511 收藏
点赞数 2
分类专栏： css 文章标签： css
于 2022-04-15 23:29:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46839072/article/details/124205537
版权

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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点击（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;
}

③案例样式展示：

在这里插入图片描述

꒰ঌsnail໒꒱
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第一次WEB作业 简单的HTML+CSS
痴心少女的程序梦的博客
09-14 6640
这里写代码片 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .head{ width
HTML和css入门作业
m0_43416037的博客
12-10 313
1<!DOCTYPEhtml> 2<htmllang="en"> 3<head> 4<metacharset...
html css入门作业
m0_62237233的博客
06-23 189
一、将五环（奥运）放在网页中间 两栏布局
前端基础——CSS
happyhappy666的博客
12-02 287
1、font: font-family:字体 多个字体之间使用逗号分隔 多个字体依次在计算机中寻找，找到就使用，否则就默认为微软雅黑 font-size：字体大小，单位px 默认16px font-weight:字体粗细 700或bold 加粗 400或normal 不加粗 注意，没有单位 font-style:italic 斜体 不倾斜是normal font：复合属性，可以连写 有顺序 font:font-style font-weight font-size/line-height font-
前端入门:CSS（全）
最新发布
weixin_48449322的博客
08-21 1266
CSS 1.基本入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范，<style>可以编写css的代码 语法： 选择器{ 声明1; 声明2; 声明3;
CSS入门PPT
01-19
CSS入门，适合初学者，基础的CSS操作 CSS(Cascading Style Sheet)级联样式单（层叠样式表） HTML5建议把页面外观交给CSS控制。 优点： 表达效果丰富 （元素样式、精确定位） 文档体积小（重复定义 提高传输速度 ...
CSS入门教程篇
10-30
### CSS入门教程篇 #### 一、CSS简介与基本语法规范 **CSS**（Cascading Style Sheets）即层叠样式表，它是一种用于增强HTML文档样式的语言，主要用于控制网页内容的外观呈现，如颜色、布局等。CSS使得内容与表现...
css 入门基础教程
09-25
总的来说，CSS入门基础教程涵盖了基本语法、选择器、注释和不同类型的样式表，这些都是学习CSS的基础。掌握这些知识后，可以进一步学习更复杂的布局技巧、响应式设计、动画和过渡效果，以及CSS预处理器等进阶主题。
css入门入门入门入门
05-23
01_CSS快速入门.mp4可能涵盖了CSS的基础知识，包括选择器的使用、盒模型、浮动和定位，这些都是CSS初学者需要掌握的基础技能。盒模型定义了元素的尺寸，包括内容、内边距、边框和外边距。浮动和定位则是布局中的重要...
CSS入门讲解
10-11
WEB项目第二天，HTML和CSS入门讲解，内容还是比较详细的
css初学者例题
m0_71251536的博客
06-14 90
1.做一个三角形 2.绝对定位的盒子居中算法 用transform:translate使盒子居中 3，input框取消边框 4，textarea文本域放拖拽 5，表单或图片与文字的对齐方式（vertical-align 也可以解决图片底部空白缝隙的问题）...
CSS初学习及练习
qq_45284063的博客
06-03 205
目标：1、掌握CSS基础属性 2、根据需求搜索对应CSS属性 知识：CSS常用选择器
CSS入门学习笔记例题详解（一）
哈哈
09-13 642
优先级：行内样式>ID选择器>类选择器>标签选择器原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式后加载会覆盖先加载的同名样式。
CSS入门 练习
DonkeyL's
02-19 1947
CSS入门 练习CSS练习1 -- 画三角形CSS练习2 -- 画太极 CSS练习1 – 画三角形 代码： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;style type="text/css&
CSS基础练习500题
qq_37637914的博客
04-23 639
基础部分 浏览区缺省设置，外部样式表，内部样式表，内联样式，这四个的优先度如何。 颜色的表示方式有哪些。 怎样同时使用多个选择器 使用一下ID选择器 使用一下类选择器 现有10个div，有的有title属性，有的没有，使用属性选择器选中有title这个属性的div 现有10个div，有的有title属性，有的没有这个属性，带有title属性的，值也不一样，现使用属性选择器选中属性值是demo的div。 现有10个div，有的有title属性，有的没有这个属性，带有title属性的，值也不一样，现使用属性选择
h5+css
shutingB的博客
06-29 671
CSS样式 课程目标 1.css引入方式（重点） 2.css选择器（重点） 3.css盒子模型（重点） 4.css3常见效果（重点） 1. 级联样式表 1.1 css介绍 引用百度百科 1.2 css概述 层叠样式表其实就是对静态页面进行装饰，但是，特别要注意的点是：通常建议表现形式与页面内容分离（例如：人就是内容，穿着打扮就是表现形式） 2. css引入方式 2.1 行内样式 行内样式（将样式直接写在标签上），需要使用style属性 <p style="colo
html CSS相关练习
guoqingru0311的博客
07-13 189
CSS相关练习练习一：css实现翻页样式效果改善：（使用ul-li列表方式实现）2、导航栏： 练习一：css实现翻页样式 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现翻页效果</title> <style type="text/css"> .box{
js网页制作11
m0_62788719的博客
10-31 127
js网页制作11
css常用demo练习
SundayGoG的博客
05-30 1777
1.横向弹性布局，溢出的部分换行 flex布局实现不同分辨率屏幕显示效果不同，”自适应布局“ (flex-flow是flex-direction和flex-wrap的复合属性） display:flex; flex-flow:wrap; white-space: nowrap; text-overflow: ellipsis; 2.文字多余部分用省略号表示 over-flow:hidden; white-space:nowarp; text-overflow:ellipsis; 3.弹性布局，水平均匀间
CSS入门与优势解析
下面是一个简单的CSS入门示例： ```html <!DOCTYPE html> 第一个css程序 <!-- 在部分内使用标签来写CSS --> <link rel="stylesheet" href="css/style.css"> 我是一级标题 ``` 在这个例子中，`<style>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值