css课后练习

demo03ex1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图书封面</title>
		<style>
			p{
    
    
				margin: 0;
				color: white;
			}
			#p1{
    
    
				background-color: darkslategrey;
				text-align: center;
				width: 250px;
				height: 104px;
				line-height: 50px;
			}
			#p2{
    
    
				background-color: darkslategrey;
				text-align: center;
				font-size: 20px;
				height: 100px;
				width: 250px;
			}
			#p3{
    
    
				background-color: darkslategrey;
				text-align: right;
				height: 100px;
				width: 250px;
			}
			
			#p4{
    
    
				background-color: whitesmoke;
				text-align: center;
				height: 100px;
				width: 250px;
				line-height: 100px;
				color: black;
			}
		</style>
	</head>
	<body>
		<p id="p1">生活中总是充满了乐趣</p>
		<p id="p2">聊聊我的大学室友</p>
		<p id="p3">@张三  著&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
		<p id="p4">那些回忆,那些事...</p>
	</body>
</html>

在这里插入图片描述
demo03ex2.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>禁止吸烟</title>
		<style>
			img {
    
    
				vertical-align: middle;
				width: 150px;
				height: 150px;
			}
			
			#p1 {
    
    
				font-size: 45px;
				color: #006400;
				font-weight: bold;
			}
		</style>
	</head>

	<body>
		<img src="img/5.png" />
		<font id="p1">NO&nbsp;SMOKING</font>
	</body>

</html>

在这里插入图片描述
demo03ex3.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>制导航列表</title>
		<style>
			* {
    
    
				padding: 0;
				margin: 0;
			}
			
			ul {
    
    
				list-style: none;
				width: 200px;
				background-color: #F1F1F1;
			}
			
			li:hover {
    
    
				background-color: #FFF5E9;
				font-weight: bold;
				font-size: 17px;
			}
			
			li {
    
    
				height: 60px;
				line-height: 60px;
				padding-left: 40px;
			}
		</style>
	</head>

	<body>
		<ul>
			<li>数码相机</li>
			<li>家具家电</li>
			<li>办公用品</li>
			<li>服饰母婴</li>
			<li>运动文体</li>
			<li>礼品闲置</li>
		</ul>
	</body>

</html>

在这里插入图片描述

猜你喜欢