323-CS对齐方式

作业效果图如下
作业源代码如下

实例

<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
作业手抄如下
作业源代码如下

实例

相关文章
