实训目标：

(1)掌握CSS基本概念、CSS类型及4种CSS样式定义的方法。
(2)掌握CSS中字体、排版、颜色、背景、列表等属性设置。
(3)掌握DIV和SPAN标记语法,学会使用相关CSS属性来定义样式。

实训内容

(1)定义4种样式表,并学会引用。
(2)自定义外部样式表,并能在Web页面中导人或链接外部样式表。
(3)使用CSS盒模型的MBPC(margin、border、padding、content)来精确定位网页元
素,运用段落、字体、颜色、背景及列表等CSS专有的属性进行页面精细加工。
(4)区别CSS选择符类型，并能灵活运用各种选择符完成样式的定义。

实训项目

(1)设计《中国教育网络》杂志简介页面。
(2)设计《京东商品导购》页面。

什么是CSS？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

项目一 设计《中国教育网络》杂志简介

实训要求

(1)利用多种CSS样式表设计《中国教育网络》杂志简介页面。
(2)学会综合运用DIV+CSS进行页面布局设计。

实训内容

(1)定义行内样式表(内嵌样式表/内联样式表)。
(2)定义内部样式表。
(3)导入(嵌人)外部样式表。
(4)链接外部样式表。
(5)无序列表的定义与应用。
(6)定义列表的定义与应用。
(7)标题字标记的使用。

知识点：

（1）span标记

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

（2）链接link标记

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
实例
链接一个外部样式表：

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

（3）多种样式表的定义

  • 行内样式表。行内样式表是通过标记的style属性来进行设置的，行内样式优先级最高，如下所示：
<div style="background: #ffff33; width: 100%; height: 100px;">
  • 内部样式表。内部样式表是在HTML的head标记中通过style标记来定义的，具体格式如下所示：
<style type = "text/css">
	.div1{
		text-align: center;
	}
	h2{
		text-align: center;
	}
	p{
		text-indent: 2px;	/*首行缩进2字符*/
	}
</style>
  • 链接外部样式表。链接样式表通过link标记的href属性加载外部样式表文件，样式表文件名必须带后缀.css，否则不能加载，同时对type、rel属性进行设置，格式如下所示：
<link type="text/css" rel="stylesheet" href="layout_link.css"/>
  • 导入外部样式表。导入样式表通过该@import url（“样式表文件名”），格式中@与import必须连在一起写，两者之间不能有空格，并以分号结束，否则也不能加载外部样式文件。
<style type="text/css">
	@import url("layout_import.css");
</style>

CSS样式的优先级顺序从高到低分别为：

行内样式——>ID样式——>类样式——>标记样式

实训过程：

先建立一个layout_import.css文件：

#div0{border:1px solid #cccccc; width:850px; height:1500px; margin:5px auto;}
#div3{padding-left:40px; font-size:14px; clear:both; text-indent:2em;}
#div4{height:160px; margin:10px auto; padding-left: 40px;}

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset="utf-8">
		<meta name="keywords" content="Web前端开发，网页设计">
		<title>CSS</title>
		<style type = "text/css">
			@import url("layout_import.css");
			.div2{
				width: 100%; background: #F0F0F0; height: 120px; line-height: 1.5em; padding: 10px auto;
			}
			li{
				float: left;
				width: 33%;
			}
		</style>
	</head>
	<body>
		<div id="div0">
			<div class="div1" style="background: white; width: 100%; height: 80px; text-align: center; padding: 10px auto; ">
				<h2>《中国教育网络》杂志简介</h2>
				<h4>2016-03-03</h4>
			</div>
			<div class="div2">
				<h3>>>推荐阅读</h3>
				<ul>
					<li>COST论坛“迎新”系列视频讲座</li>
					<li>技术应用升级百所高校IPv6蝶变</li>
					<li>教育信息化关注“十二五”规划</li>
					<br>
					<li>2010下一代互联网发展和应用论坛</li>
					<li>教育信息化服务器应用突破壁垒</li>
					<li>强调应用移动IPv6发展空间</li>
				</ul>
			</div>
			<div id="div3">
				<p>2004年12月，《中国教育网络》杂志正式出版发行。经国家新闻出版署、科技部批准,教育部主管,教
育部科技发展中心主办，中国教育和科研计算机网(CERNET)承办的国家级权威科技期刊《中国教育网络》
正式出版发行。</p>
				<p>立足教育网络，服务于教育信息化，《中国教育网络》关注和解读国家信息化发展政策，全面报道中国
教育网络建设现状及成就，研究探讨教育网络建设的经验与问题。介绍国际上先进的网络技术、理念,及
时报道相关政策及重大事件,广泛反映围绕教育信息化的各种重大应用及重大事件，为领导、专家、师生及
技术人员提供借鉴。</p>
				<p>依托高校及社会各界的优秀专家，《中国教育网络》突出权威性、政策性、前瞻性，为专家及业界人士提
供一个权威的交流与沟通平台。《中国教育网络》已成为中国最具影响力、权威性的专业期刊，是与中国教
育信息化同步发展的核心媒体。</p>
			</div>
			<div id="div4">
				<h3>目标</h3>
				<dl>
					<dd>始终保持教育信息化领域第一品牌的市场地位</dd>
					<dd>是与中国教育信息化同步发展的核心媒体</dd>
				</dl>
				<h3>定位</h3>
				<dl>
					<dt>中国教育网络领域的综合杂志</dt>
						<dd>————全面反映教育网络研究、建设、管理及应用、文化、产业化的成就及重大事件。</dd>
					<dt>受人尊敬的专业权威杂志</dt>
						<dd>————依托政府、教育界、IT产业界专家，专注于教育网络领域，制作高水准的内容。</dd>
					<dt>创新IT媒体服务</dt>
						<dd>————以创新、深入的视角报道教育信息化的进展和变化。</dd>
					<dt>影响高端人士，成为教育信息化宣传队</dt>
						<dd>————服务 于教育网络的研究、建设与使用者，通过对高端人群的影响，确立自己作为教育信息化权威窗口的地位。</dd>
				</dl>
				<h3>杂志优势</h3>
				<p>强有力的政府指导</p>
				<p>在教育部及相关部门的指导下，及时准确地传达贯彻教有信息化发展的方针、政策、法规等，保证中国教育网络健康发展，推动教育网络建设与应用。</p>
				<p>权威的专家队伍</p>
				<p>依托CERNET及教育信息化领域最权威的专家组成的编辑委员会，《中国教育网络》将为读者提供高水准的内容，为工作提供高起点的业务及技术指导。</p>
				<p>影响未来的用户群</p>
				<p>《中国教育网络》用户群以教育领域从事互联网建设及应用的领导、专家、教师、科研人员为主，在该领域具有强大的影响力。</p>
				<p>遍布全国的渠道</p>
				<p>依托各地方教委及CERNET,《中国教育网络》将建设遍布全国的记者站，伴随教育网络的建设及拓展，中国教育网络在为读者服务的同时，也将不断壮大自己的渠道网络。</p>
			</div>
		</div>
	</body>
</html>

效果如下：

在这里插入图片描述
在这里插入图片描述

项目二 设计淘宝商品导购页面

实训要求

通过设置元素的margin（边界）、border（边框）、padding（填充）、content（内容）等相关属性，设计京东商品导购页面。

实训内容

（1）图层的定义与样式应用。
（2）图层、图像、标题字、超链接等标记CSS属性的设置。
（3）内部样式表的定义与使用
（4）CSS盒模型的margin、border、padding、content等属性的设置与应用

知识点：

CSS盒子模型（Box model）：

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：
在这里插入图片描述
不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。、


元素的宽度和高度

当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。 要知道，完全大小的元素，你还必须添加填充，边框和边距。

下面的例子中的元素的总宽度为300px：

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

让我们自己算算：
300px (宽)
+50px (左 + 右填充)
+50px (左 + 右边框)
+50px (左 + 右边距)
= 450px
试想一下，你只有250像素的空间。让我们设置总宽度为250像素的元素:

div {
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

实训过程：

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset="utf-8">
		<meta name="keywords" content="Web前端开发，网页设计">
		<title>CSS</title>
		<style type = "text/css">
			@import url('layout_import.css');
			h3{
				text-align: center;
				font-size: 32px;
				color: red;
			}
			p{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="div0">
			<h3>淘宝商品导购</h3>
			<div id="div1" class="">
				<a href="#div1"><p>雪乃手办</p><img src="picture/img1.png" alt="雪乃手办"></a>
			</div>
			<div id="div2" class="">
				<a href="#div2"><p>伊卡洛斯手办</p><img src="picture/img2.png" alt="伊卡洛斯手办"></a>
			</div>
			<div id="div3" class="">
				<a href="#div3"><p>光明炽天使手办</p><img src="picture/img3.png" alt="光明炽天使手办"></a>
			</div>
			<div id="div4" class="">
				<a href="#div4"><p>缘之空手办</p><img src="picture/img4.png" alt="缘之空手办"></a>
			</div>
			<div id="div5" class="">
				<a href="#div5"><p>花椰菜手办</p><img src="picture/img5.png" alt="花椰菜手办"></a>
			</div>
			<div id="div6" class="">
				<a href="#div6"><p>八重樱手办</p><img src="picture/img6.png" alt="八重樱手办"></a>
			</div>
		</div>
	</body>
</html>

css：

#div0{width:1500px; height:3500px; border: 1px solid red; margin: 0px auto;}
#div1{margin: 10px 100px; border: 5px groove #9999CC; float: left;}
#div2{margin: 10px 100px; border: 5px groove #9999CC; float: left;}
#div3{margin: 10px 100px; border: 5px groove #9999CC; float: left;}
#div4{margin: 10px 100px; border: 5px groove #9999CC; float: left;}
#div5{margin: 10px 100px; border: 5px groove #9999CC; float: left;}
#div6{margin: 10px 100px; border: 5px groove #9999CC; float: left;}

效果如下：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

# html # css
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

2026趋势：大学生如何借助 GPT-5.5 完成课题研究和写作（附伦理提示）

avatar 2048 AI社区
cover

收藏｜2026最新AI岗位暴增600%！程序员/小白学大模型必避3大陷阱

avatar 2048 AI社区

玩转谷歌开源 AI 终极端：在 Antigravity CLI (`agy`) 中无缝白嫖/调用 Claude

本文介绍了如何在谷歌开源的AI终端工具Antigravity CLI（agy）中无缝调用Claude模型。关键点包括：1）无需额外注册Anthropic账号，所有费用通过Google AI订阅计划结算；2）不同订阅档位（Pro、AI Ultra、Flagship Ultra）提供不同的Claude调用额度；3）使用技巧：利用提示词缓存降低90%成本、Gemini与Claude双模协作、实时监控资源

avatar 2048 AI社区