一、实验目的
掌握在网页中引用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>
效果图:
7.使用CSS定位将6中的登录表单放置到窗口的中间位置(水平居中,垂直居中),请写出至少两种方案。