Web前端开发技术实验5 CSS与页面分割

最新推荐文章于 2024-09-15 21:53:26 发布

辽工大布耶尔

最新推荐文章于 2024-09-15 21:53:26 发布

阅读量332

点赞数 6

分类专栏： Web前端开发技术实验报告文章标签：前端 css html

本文链接：https://blog.csdn.net/2302_78967568/article/details/139504569

版权

Web前端开发技术实验报告专栏收录该内容

12 篇文章 0 订阅

订阅专栏

练习1、使用内联样式表及内部样式表，设计如图所示页面，要求如下：使用标题字和段落标记进行文字显示，在内部样式表中定义body标记内信息“居中显示”，定义p标记字体为隶书；通过p标记的style属性定义字体大小属性的值分别为150%、200%、250%，“朝辞白帝彩云间”不定义任何样式。

<!doctype html>
<html>
<head>
<meta  char set="utf-8">
<title>实验5.1</title>
<style type="text/css">
body{text-align:center;}
p{font-family:"隶书";}
</style>
</head>
<body>
<h4>早发白帝城</h4>
<p>李白</p>
<p>朝辞白帝彩云间</p>
<p style="font-size:150%;">千里江陵一日还</p>
<p style="font-size:200%;">两岸猿声啼不住</p>
<p style="font-size:250%;">轻舟已过万重山</p>
</body>
</html>

练习2、设计如图所示页面，要求：页面标题为“Web前端开发工程师工作内容”，页面第一行用一号标题字，第二行用三号；采用无序列表显示工作内容，每个列表项显示一种不同风格的工作内容，第一项“斜体、加粗、24px，黑体”，第二项“背景色#9999cc、字符间距1px”,第三项“字体大小18px、颜色红色”，第四项“颜色#0000cc、背景色#c0c0c0、隶书”;全局样式“楷体、蓝色”。

<!doctype html>
<html>
<head>
<meta  char set="utf-8">
<title>实验5.2</title>
<style type="text/css">
#li1{font-style:italic;font-weight:bold;font-size:24px;font-family:黑体;}
#li2{background-color:#9999cc;letter-spacing:1px;}
#li3{font-size:18px;color:red;}
#li4{background-color:#c0c0c0;font-family:隶书;}
body{color:blue;font-family:楷体;}
</style>
</head>
<body>
<h1>Web前端开发工程师工作内容</h1>
<h3>Web前端工程师在不同的公司，会有不同职能，但称呼都类似</h3>
<ul>
<li id="li1">做网站设计、网页界面开发</li>
<li id="li2">做网页界面开发</li>
<li id="li3">做网页界面开发、前台数据绑定和前台逻辑处理</li>
<li id="li4"style="color:#0000cc">设计、开发、数据处理</li>
</ul>
</body>
</html>

练习3、利用<div>及<span>标记设计如图页面，要求使用外链样式表。定义两个图层，外层图层包含一个图像和一个子图层，在子图层内采用无序列表显示四行文字。红字部分加粗，“联建杯”斜体，大小24px。图像文件自行替换。

.it{font-size:24px;
font-style:italic;
font-weight:bold;}
#s1{font-weight:bold;color: red;text-decoration: underline;}
#s2{background-color:rgb(0, 255, 0);}

<!doctype html>
<html>
<head>
<meta  char set="utf-8">
<title>实验5.3</title>
<link type="text/css"rel="stylesheet"href="C:\Users\WAN\Desktop\5.3.css"
</style>
</head>
<body>
<div>
<img src="C:\Users\WAN\Desktop\Web前端开发技术\guilin3.jpg"/>
<div id="s2">
<ul>
<li>2017<span id="s1">央视</span>综艺节目发力&nbsp;彰显公益大爱</li>
<li>继北京上海后，2017年<span id="s1">腾讯</span>视频推介会昨又广州隆重举行</li>
<li"><span id="s1">跨界融合&nbsp;开放共赢</span>移动互联网营销峰会</li>
<li>首届<span class="it">“联建杯”</span>户外LED显示屏媒体大赛评审圆满落幕</li>
</ul>
</div>
</div>
</body>
</html>

练习4、设计如图牌匾，段落的样式为“斜体、特粗、70px、行高1.5倍、隶书”；图层样式为宽度800px、高度100px、边框宽度20px、线型outset、颜色#ff0000、填充20px、边距100px;页面所有内容居中。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">  
<title>匾牌设计</title>
<style type="text/css">
body{text-align:center;}
#div0{width:800px;height:100px;
border:20px outset #ff0000;
padding:20px;
margin:100px;
}
p{font:italic bolder 70px/1.5em 隶书;
text-align:center;
background:#efedee;
width:800px;padding:0px;margin:0;
}
</style>
</head>
<body>
<div id="div0" class="">
<p>海纳百川，有容乃大</p>
</div>
</body>
</html>