CSS部分的概述以及用法总结：
实例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>珠宝饰品</title>
<style type="text/css">
.div{background-color: plum;border: 1px solid plum;width: 400px;}
h2{color: blue;}
td{font-size: 20px;color: black;}
a{color: black;}
a:link{text-decoration: none;}
a:hover{
color: red;
}
span{color: red;}
</style>
</head>
<body>
<div class="div">
<h2>珠宝首饰</h2>
<table cellspacing="0" cellpadding="10" width="400">
<tr>
<td><a href="https://www.tiffany.cn/jewelry/" target="_blank" >首饰套装</a></td>
<td><a href="https://www.tiffany.cn/jewelry/" target="_blank" >流行饰品</a></td>
<td><a href="https://www.tiffany.cn/jewelry/" target="_blank" >仿真饰品</a></td>
<td><a href="https://www.tiffany.cn/jewelry/" target="_blank" >钻饰</a></td>
</tr>
<tr>
<td><a href="https://www.tiffany.cn/jewelry/" target="_blank">天然水晶</a></td>
<td><a href="https://www.tiffany.cn/jewelry/" target="_blank">翡翠手表</a></td>
<td><a href="https://www.tiffany.cn/jewelry/" target="_blank">仿真饰品</a></td>
<td><a href="https://www.tiffany.cn/jewelry/" target="_blank">戒指</a></td>
</tr>
</table>
</div>
</body>
</html>实例2：
编写HTML代码，实现如图所示的页面效果。
具体要求：
- 使用行内样式表修饰本页面中的第一行的文字为h1、居中、隶书，加粗，24px；
- 使用嵌入样式表，创建一个名为biaoti的类选择器将本网页中所有二级标题（如“实验目的”等）变成黑体、18px、加粗；
- 创建一个symd类用以修饰“实验目的”中的文字为斜体，微软雅黑，20px，白色，加粗，且背景为浅蓝色；
- 所有超链接默认是绿色；
- “实验内容”中的超链接是红色；
- 给网页加上背景；
- “实验内容”中行间距20px，文字15px，字间距5px；
- 将下面的诗《临洞庭上张丞相》变成竖排的古文风hanli
<!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>CSS基本选择器</title>
<style type="text/css">
h1{
text-align: center;
font-size: 24px;
font-weight: bold;
font-family: "隶书";
}
h2.biaoti{
font-family: "黑体";
font-size: 18px;
font-weight: bold;
}
.symd{
font-style: italic;
font-family: "微软雅黑";
font-size: 20px;
color: aliceblue;
font-weight: bold;
background-color: blue;
}
a:link{font-size: 20px;}
body{background-size: 100%;}
.div{line-height: 20px;font-size: 15px;letter-spacing: 5px;}
.wm{writing-mode: vertical-rl;}
</style>
</head>
<body background="bg4.jfif">
<h1>第5次 CSS基本选择器</h1>
<p>注意：本试验指导文件即为<a href="https://www.runoob.com/html/html-css.html" target="_blank" style="color:green;">第5次 CSS基本选择器.html</a>，以下实验项目均以本文件为操作对象。另除本行外，本网页中 其它超链接均为红色。</p>
<h2 class=" biaoti">一、实验目的</h2>
<ol class="symd">
<li>掌握CSS样式的语法规则；</li>
<li>掌握CSS样式的基本选择器的使用；</li>
<li>掌握CSS样式表的定义位置；</li>
<li>重点培养应用CSS样式的能力。</li>
</ol>
<h2 class=" biaoti">二、实验内容</h2>
<div class="div">
<p>1.使用<a href="https://www.runoob.com/html/html-css.html" style="color: red;">行内样式表</a>修饰本页面中的第一行的文字为h1、居中、隶书，加粗，24px；</p>
<p>2.使用嵌入样式表，创建一个名为biaoti的类选择器将本网页中所有二级标题（如“实验目的”等）变成黑体、18px、加粗；</p>
<p>3.创建一个symd类用以修饰“实验目的”中的文字为斜体，微软雅黑，20px，白色，加粗，且背景为浅蓝色；</p>
<p>4.所有的超链接是绿色；</p>
<p>5.所有“实验内容”中的<a href="https://www.runoob.com/html/html-css.html" style="color: red;">超链接</a>是红色、20px；</p>
<p>6.使用CSS使得网页背景变为下图且不平铺居中置顶显示；</p>
<p>7.将“实验内容”中各行之间的间距设至10px，已知字体是16px大小的，并设定字与字之间的间隔为5px。完成后，页面效果如下图将所示。</p>
<p>8.请将图下面的诗《临洞庭上张丞相》变成类似下图白居易的诗的竖排的古文风格。</p>
<div class="wm">
<p>临洞庭上张丞相</p>
<p> 唐. 孟浩然</p>
<br>
<p>八月湖水平，涵虚混太清</p>
<p>气蒸云梦泽，波撼岳阳城</p>
<p>欲济无舟楫，端居耻圣明</p>
<p>坐观垂钓者，徒有羡鱼情</p>
</div>
<br><br>
<p>说明：文本书写顺序属性writing-mode：tb-rl。</p>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
