Web实验2 CSS基础应用

林带鱼QAQ

已于 2023-03-04 20:58:34 修改

阅读量703

点赞数

分类专栏： web实验文章标签： css 前端 html

于 2023-03-04 16:54:48 首次发布

本文链接：https://blog.csdn.net/qq_45738743/article/details/129336366

版权

web实验专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、实验目的

掌握在网页中引用CSS的方法；

掌握CSS的基本语法规则；

掌握CSS的常用选择器。

掌握盒子的特性及使用。

二、实验内容

1.按下面要求对整体页面进行设置：

字体：宋体微软雅黑;字号：12pt; 行高：1.5倍行高；

每个段落首字加粗、红色;首行缩进2个字符；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.one{
				font-family: "microsoft yahei";
				font-size: 12pt;
				line-height: 1.5em;
			}
			.one p{
				width: 400px;
				text-indent:2em;
			}
		</style>
	</head>
	<body>
		<div class="one">
			<p>
				<span style="color: red;font-weight: bolder;">月</span>
				光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。
			</p>
			<p>
				<span style="color: red;font-weight: bolder;">叶</span>
				子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。
			</p>
			<p>
				<span style="color: red;font-weight: bolder;">虽</span>
				然是满月，天上却有一层淡淡的云，所以不能朗照;
			</p>
			<p>
				<span style="color: red;font-weight: bolder;">但</span>
				我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。
			</p>
		</div>
	</body>
</html>

效果图：

2.制作牌匾，效果如图：

要求：

整个牌匾上边距50px，并水平居中对齐。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.container{
				border: 10px double red;
				margin: 50px auto;
				width: 500px;
				font-size: 40pt;
				font-weight: bolder;
				text-align: center;
				padding: 20px;/*or line-height:120px;*/	
				text-shadow: #B8411D -3px 2px 4px;
			}
			.container div{
				background-color: #e3e3e3;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div>
				海纳百川 有容乃大
			</div>
		</div>
	</body>
</html>

效果图：

3.新建古诗词欣赏页面，效果如图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.poet{
				border: 1px solid black;
				margin: 50px auto;
				width: 180px;
				text-align: center;
				padding: 20px;
				background: url(img/pubu.jpg) no-repeat;
				background-size: 64px 100px;
				background-position: right bottom;
			}
			.poet div{
				text-shadow: #fe0000 1px 1px 0px;
			}
		</style>
	</head>
	<body>
		<div class="poet">
			<div>望庐山瀑布</div>
			<p>日照香炉生紫烟，</p>
			<p>遥看瀑布挂前川。</p>
			<p>飞流直下三千尺，</p>
			<p>疑是银河落九天。</p>
		</div>
	</body>
</html>

效果图：

4.图片轮转，效果如图：

注：只做显示效果，不做图片轮换

要求：导航按钮使用无序表实现；鼠标悬浮在导航按钮上（1，2，3，4）时，背景变为白色、字色变为黑色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
					padding: 0;
					margin: 0;
					box-sizing: border-box;
				}
				.imgBox{
					width: 400px;
					height: 300px;
					border: 1px solid #31751c;
					position: relative;
					background-size: cover;
					background-image: url(img/a.jpg);
					transition-property: background-image;
					transition-duration: 5s;
				}
				.imgBox dl{
					position: absolute;
					height: 60px;
					width: 100%;
					background-color: rgba(194, 242, 255, 0.7);
					padding: 10px;
					bottom: 0;
				}
				.imgBox dd{
					display: flex;
					justify-content: flex-end;
				}
				.imgBox nav{
					border: 1px solid #31751C;
					font-size: 8pt;
					width: 20px;
					height: 20px;
					line-height: 20px;
					text-align: center;
					margin-left: 10px;
				}
				.imgBox nav:hover,.actived{
					background-color: #31751C;
					color: aliceblue;
				}
		</style>
	</head>
	<body>
		<div class="imgBox">
			<dl>
				<dt>照片</dt>
				<dd>
					<nav img='url(img/a.jpg)'>1</nav>
					<nav img='url(img/a.jpg)'>2</nav>
					<nav img='url(img/a.jpg)'>3</nav>
					<nav img='url(img/a.jpg)'>4</nav>
				</dd>
			</dl>
				
		</div>
				
	</body>
</html>

效果图：

5.制作如下表格效果：

要求：（1）使用标签选择器和伪类选择器完成；（2）鼠标在表格行悬停时，鼠标所在行背景变色；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			table{
				width: 500px;
				border-collapse: collapse;
				border-top: #000000 double 5px;
				border-bottom: #000000 solid 2px;
			}
			th{
				border-bottom: #000000 solid 1px;
			}
			.trl{
				background-color: lightgray;
			}
			.trl:hover{
				background-color: aquamarine;
			}
			
		</style>
	</head>
	<body>
		<dt>XX公司人力资源</dt>
		<table>
			<tr>
				<th>工号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>部门</th>
			</tr>
			<tr class="trl">
				<td>2008001</td>
				<td>张龙俊</td>
				<td>男</td>
				<td>开发部</td>
			</tr>
			<tr class="trl">
				<td>2009010</td>
				<td>李静</td>
				<td>女</td>
				<td>测试部</td>
			</tr>
			<tr class="trl">
				<td>2008003</td>
				<td>李俊豪</td>
				<td>男</td>
				<td>综合部</td>
			</tr>
			<tr class="trl">
				<td>2011110</td>
				<td>贺峻霖</td>
				<td>男</td>
				<td>运营部</td>
			</tr>
		</table>
	</body>
</html>

效果图：

6.制作表单效果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
			            margin: 0;
			            padding: 0;
			        }
			html {
			            height: 100%;
			        }
			body {
			            height: 100%;
			        }
			.container {
			            height: 100%;
			            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
			        }
			 .login {
			            background-color: #fff;
			            width: 358px;
			            height: 588px;
			            border-radius: 15px;
			            padding: 0 50px;
			            position: relative;
			            left: 50%;
			            top: 50%;
			            transform: translate(-50%, -50%);
			        }
			.header {
			            font-size: 38px;
			            font-weight: bold;
			            text-align: center;
			            line-height: 200px;
			        }
			.input-username-item {
			            background: url(img/username.jpg) no-repeat scroll left center transparent ;
						background-size: 20px 20px;
						width: 100%;
						margin-bottom: 20px;
						padding-left: 25px;
						border-bottom: 1px solid rgb(128, 125, 125);
						font-size: 15px;
						outline: none;
			        }
			.input-password-item {
			            background: url(img/pwd.jpg) no-repeat scroll left center transparent ;
						background-size: 20px 20px;
						width: 100%;
						margin-bottom: 20px;
						padding-left: 25px;
						border-bottom: 1px solid rgb(128, 125, 125);
						font-size: 15px;
						outline: none;
			        }
			.input-item:placeholder {
			            text-transform: uppercase;
			        }
			.btn {
			            text-align: center;
			            padding: 10px;
			            width: 100%;
			            margin-top: 40px;
			            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
			            color: #fff;
						border-radius: 5px;
			        }
		</style>
	</head>
	<body>
		<div class="container">
			<div class="login">
				<div class="header">用户登录</div>
				<div class="input-username-item">
					<input style="border:none;" type="text" name="username" placeholder="username" />
				</div>
				<div class="input-password-item">
					<input style="border:none;" type="password" name="password" placeholder="password"/>
				</div>
				<div style="text-align:center;">
					<span class="btn">登录</span>
					<span class="btn">取消</span>
				</div>
				
			</div>
		</div>
	</body>
</html>

效果图：