收藏
批改状态：合格
老师批语：
作业效果图如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国诗词大会</title>
<style>
.main { /*整体框架*/
width: 800px; /*宽度*/
height: 600px;/* 高度*/
margin:0 auto; /*水平居中*/
text-align: center; /*内部元素水平居中*/
background-image: url(../images/pt2.jpg);/* 添加背景图*/
border-radius:20px; /*背景图加四个圆角*/
background-size: cover; /*背景图定位自适应*/
}
.left { /*左边部分*/
float: left; /*左浮动左对齐*/
padding-left: 250px; /* 左对齐内边距*/
padding-top: 95px; /*左边部分顶部对齐内边距*/
}
.right { /*右边部分*/
float: right; /*右浮动右对齐*/
padding-right: 35px; /*右对齐内边距*/
padding-top:15px; /*右边部分顶部对齐内边距*/
}
.h2 { /*主标题*/
width: 80px; /*宽度*/
height: 80px; /*高度*/
color:cyan; /*颜色*/
font-size: 1.8em; /*字体大小倍数*/
background-color: #fffaf0; /*背景颜色*/
border-radius:40px; /* 背景添加四个圆角 形成正圆形*/
margin:0 auto; /*水平居中*/
box-shadow:3px 3px 8px 3px #ffd700; /*背景外发光效果*/
}
.h2 span {
line-height: 80px; /*标题行高 为高度一半 形成居中效果*/
}
.h2 span:hover { /*标题鼠标经过效果*/
text-decoration: underline; /* 文本下划线*/
color:red; /* 字体变红色*/
font-size: 40px; /*字体变大*/
}
h3 { /*副标题*/
color:blue; /*字体蓝色*/
background-color: #669; /*背景颜色*/
font-size: 1.6em; /*字体变大倍数*/
}
li { /*文本内容*/
width: 250px; /*宽度*/
font-size: 1.5em; /*字体大小倍数*/
color: #ff00ff; /*字体颜色*/
list-style-type: none; /*列表关闭样式*/
line-height: 38px; /*行高*/
}
ul { /*文本内容区*/
margin: 0;
padding: 0;
margin:0 auto; /*自动水平居中*/
border:1px solid #111; /*给文本内容添加边框 大小 样式 颜色*/
}
/*以下为四首诗分别添加不同的背景色*/
.shi1 {
background-color: #00ffff;
}
.shi2 {
background-color: #7fffd4;
}
.shi3 {
background-color: #00ced1;
}
.shi4 {
background-color: #32cd32;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<h3>登鹳雀楼</h3>
<ul class="shi1">
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
</ul>
<h3>春夜洛城闻笛</h3>
<ul class="shi2">
<li>谁家玉笛暗飞声</li>
<li>散入春风满洛城</li>
<li>此夜曲中闻折柳</li>
<li>何人不起故园情</li>
</ul>
</div>
<div class="right">
<div class="h2"><span>李白</span></div>
<h3>峨眉山月歌</h3>
<ul class="shi3">
<li>峨眉山月半轮秋</li>
<li>影入平羌江水流</li>
<li>夜发清溪向三峡</li>
<li>思君不见下渝州</li>
</ul>
<h3>白帝下江陵</h3>
<ul class="shi4">
<li>朝辞白帝彩云间</li>
<li>千里江陵一日还</li>
<li>两岸猿声啼不住</li>
<li>轻舟已过万重山</li>
</ul>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
作业手抄如下
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
