Document

HTML+CSS网页设计作业个人博客

2024-11-05
dfer
37
html css 前端 CSDN

图片展示

index页面

about页面hobbies页面more页面

代码

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>李阔的博客</title>
		<link rel="stylesheet" href="Css/pressure.css">
		
	</head>
	<body>
		<div class="wrap">
			<div class="top">    
				<div class="assusm">
					<a href><span class="mask">Home</span></a>
					<a href="subdirectory/about.html"><span class="mask">About</span></a>
					<a href="subdirectory/hobbies.html"><span class="mask">Habbies</span></a>
					<a href="subdirectory/more.html"><span class="mask">More                               </span></a>
				</div>
				<div class="topone">
				 	<h2>欢迎来到我的小筑</h2>
				 	<h3>时光啊，我不想长大，怀念我们逝去的年华</h3>
				 </div>
				 
			</div>
			<div class="center">
				<div class="reply">
					<img src="./img/童年.jpg" alt="">
					<span class="leave">守住童心</span>
				</div>
				<div class="reply">
					<img src="./img/童年2.jpg" alt="">
					<span class="leave">朋友教会我的</span>
				</div>
				<div class="reply">
					<img src="./img/童年3.jpg" alt="">
					<span class="leave">温暖了一生</span>
				</div>
				<div class="reply">
					<img src="./img/童年4.jpg" alt="">
					<span class="leave">惊艳了时光</span>
				</div>
				
			</div>
			
			
			<div class="foot">
				<div class="earn">
					<div><img src="img/小标题1 (1).jpg" alt=""></div>

					<p>我们趋行在人生这个亘古的旅途，在坎坷中奔跑，在挫折里涅槃，忧愁缠满全身，痛苦飘洒一地。我们累，却无从止歇；我们苦，却无法回避。
						把所有的夜归还给星河,把所有的春光归还给疏疏篱落,把
					所有的慵慵沉迷与不前归还给过去的我。对于我们每个人来说，在我们的才智、我们的道德、我们的气质之间，存在着某种平衡，它们毫不间断地自行发展，除非生活遭到重大的变故才会中断。

            <br><br>
				    明日之我 胸中有丘壑 立马振山河
					</p>
				</div>
				<div class="hold">
					<p>
						生活不可能像你想象得那么好,但也不会像你想象得那么糟 ,
					我觉得人的脆弱和坚强都超乎自己的想象,有时,我可能脆弱的一句话就泪流满面,
					有时,也发现自己咬着牙走了很长的路。<br><br>
					要相信 一切你所期盼的 都会如期而至
					</p>
					<div><img src="img/小标题1 (2).jpg" alt=""></div>
					
				</div>
				 <div class="earn">
					<div><img src="img/小标题2.jpg" alt=""></div>
					<p>
						人生的旅途，总是蜿蜒曲折坎坷不平的，当恶运向你袭来的时候，最要紧的是要有宽广的胸怀，远大的理想，顽强的意志和坚韧不拨的毅力，用笑脸去面对现实，用微笑去对待生活。
						<br><br>
						日落跌进迢迢星野，人间忽晚，山河已秋
						<br><br>
						你是近处的灯火，也是遥远的星河。
					</p>
				</div>
				<div class="hold">
					<p>
						我们到了一个略显尴尬的年纪：						
						都不再那么年轻了却也没有足够的成长；						
						都想依靠自己却发现还差一点；						
						都想要往前走却发现前路漫漫，前有迷雾后有压力。						
						可即便迷茫尴尬，时间依旧拖着你。						
						总有些时刻你不再相信了，可在心底你还是会有所追寻。						
						我们都跑不过时间，我们只能跑过昨天的自己。
						<br><br>
						If you are going through hell，keep going.
					</p>
					<div><img src="img/童年3.jpg" alt=""></div>
					
				</div>
				<div class="earn">
					<div><img src="img/小标题4.jpg" alt=""></div>
					<p>
						一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，					
						底下是沉静碧蓝的大海，而头顶是金色的太阳。
						<br><br>
						少年没有乌托邦 心向远方自明朗
					</p>
				</div> 
				<div style="clear:both;"></div>
			
			
		</div>
		<div class="zuihou">
				<p class="path">©2023- 2024 By LK_happily</p>
				<p class="pabh">Hellow,welcome to my blog</p>
			</div>
		</div>
	</body>
</html>

index.css代码(我的index.css命名为了pressure.css)

   *{
	margin: 0;
	padding: 0;
    }
   
 body{
	 background-color: antiquewhite;
  }

.top{
	background-image: url("../img/首页.jpg");
	background-size: 100% 100vh;
	width: 100%;
	height: 100vh;
   }
.top>img{
	width: 100%;
	height: 100vh;
    }
	.assusm{
		width: 1215px;
		margin: auto;
	}

 .mask{
	font-size:25px;
	display: inline-block;
	width: 300px;
	color: black;
	font-weight: 900;
	text-align: center;
    }
.mask:hover{
	color: white;
	
    }
.topone{
	width: 1235px;
	margin: auto;
	margin-top: 15%;

    }

.topone>h2 {       
	    color:peachpuff;
	    font-size: 70px;
	   text-align: center;
	  
	}
.topone>h3 {
	    color:peachpuff;
	    font-size: 65px;
		margin-top: 50px;
		text-align: center;
	}
.topone>h2:hover{
		color:skyblue
	}
.topone>h3:hover{
		color:skyblue
	}
.center{
	    display: flex;
	    justify-content: space-between;
	    padding: 10px 400px;
	    box-sizing: border-box;
	    overflow: hidden;
	}
	
.reply {
	    display: flex;
	    flex-direction: column;
	    font-size: 20px;
	    margin-top: 80px;
	    margin-left: 5px;
	    margin-right: 5px;
	    width: 200px;
	    height: 220px;
	    
	}
	
.reply>img {
	    border-radius: 10%;
	    width: 200px;
	    height: 120px;
	   
	}
.reply>img:hover{
		transform: scale(0.9);
		color: black;
		transition: all 0.8s;
	}
	
.leave{
		font-size:15px;
		width: 90px;
		margin: auto;
		margin-top: 20px;
	}
.leave:hover{
		color: bisque;
	}
	
.foot{
	width: 1200px;
	margin: auto;
	}	
.earn{
	height: 650px;
	transition: all 0.8s;
	
}
.earn>div{
	width: 500px;
	height: 650px;
	overflow: hidden;
	border-radius: 30px;
	float: left;
	transition: all 0.8s;	
}
.earn img{
	width: 500px;
	height: 650px;
	border-radius: 30px;
	transition: all 0.8s;	
}
.earn>p{
	font-weight: 500;
	text-align: center;
	line-height: 2;
	font-size:20px;
	width:500px;
	color: black;
	float: right;
	margin-right: 100px;
	margin-top: 150px;
}
.earn>p:hover{
	color: powderblue;
}

.hold>p:hover{
	color:powderblue;
}
.earn img:hover{
	transform: scale(1.2);
	color: wheat;
	border-radius: 20px;
}
.earn div:hover{
	box-shadow: 0px 0px 30px 20px #ccc;
}
.hold>div{
	width: 500px;
	height: 650px;
	overflow: hidden;
	border-radius: 30px;
	float: left;
	transition: all 0.8s;
}
.hold{
	height: 650px;
	transition: all 0.8s;
}
.hold img{
	width: 500px;
	height: 650px;
	border-radius: 20px;
	float: right;
	transition: all 0.8s;
}
.hold p{
	font-weight: 500;
	text-align: center;
	line-height: 2;
	font-size:20px;
	width:500px;
	color: black;
	float: left;
	margin-right: 100px;
	margin-top: 150px;
}
.hold img:hover{
	transform: scale(1.2);
	border-radius: 20px;
}
.hold div:hover{
	box-shadow: 0px 0px 30px 20px #ccc;
}
.zuihou{
	width: 100%;
	height: 80px;
	background-color:floralwhite;
	overflow: hidden;
		}
p.pabh{
			
	text-align: center;
	font-size: 20px;
	font-weight: 1;
		}
p.path{
	margin-top:20px;
	text-align: center;
	font-size: 20px;
	font-weight: 1;
}
p.path:hover{
		color:skyblue
	}
p.pabh:hover{
		color:skyblue
	}

about.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于我</title>
		<link rel="stylesheet" href="../Css/about.css">
	</head>
	<body>
		<div class="wrap">
			<div class="top">
				<div class="assusm">
					<a href="../index.html"><span class="mask">Home</span></a>
					<a href><span class="mask">About</span></a>
					<a href="hobbies.html"><span class="mask">Habbies</span></a>
					<a href="more.html"><span class="mask">More</span></a>
				</div>
				<div class="topone">
				 	<h2>关于我 关于你</h2>
				 	<h3>About me! About you!</h3>
				 </div>
				 
			</div>
			<div class="center">
				<div class="zuo">
					<div class="apply">
						Hellow,欢迎来到我的小筑
					</div>
					<div class="suggest">
						<p class="only">The clarity of water lies not in the fact that it does not contain impurities, but in the fact that it knows how to precipitate. 
						</p>
						<p class="anly">水的清澈，不是在于它不含杂质，而是在于它懂得沉淀。</p>
					</div>
					<div class="cycle">
						<li class="public">收集的文章</li>
						<li>HTML设计符合语义的页面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2022.11.20</li>
						<li>HTML设计文档 CSS基础&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2022.12.11</li>
						<li>HTML设置文本样式表单样式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2022.12.25</li>
						<li>CSS网页设计兼容技巧方法&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2022.12.31</li>
						<li>JavaScript基础&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2023.1.07</li>
						<li>使用Javascript操控浏览器和文档&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2023.1.20</li>
						<li>Javascript的事件处理&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2023.2.2</li>
						<li>使用JavaScript设计脚本化CSS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2023.2.13</li>
						<li>使用PHP操作文件和综合案例&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2023.5.6</li>
					</div>
					<div class="jieshao">
						<div class="shaojie">
							<img src="../img/hahahaha.png" alt="">
						</div>
						<div class="qias">
							<h1>恰似.</h1>
							<h3>遇风尽是同舟客</h3>
						</div>
						<div class="heihei">
							<p class="vivo">文章&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;故事&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分类</p>
							<p class="oppo">15&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;12&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6</p>
						</div>
						<div class="kuangkuang">
							<p>Get into</p>
						</div>
					</div>
				</div>
				<div class="you">
					<div class="appip">
						<div class="hui">
							<img src="../img/bueer (2).jpg" alt="">
						</div>
					<div class="zishu">
						<div class="jiaoyu">
							教育背景/Eudcation
						</div>
						<div class="biye">
							毕业时间：2021.09-2024.07
						</div>
						<div class="geren">
							<p class="aihao">个人介绍/Introduction</p>
							<p class="meihao">爱好</p>
							<li>看电影、阅读、下棋、打乒乓球、玩游戏</li>
							<p class="meihao">性格</p>
							<li>性格因心情而定、偏内向、倾向于和少数人交流</li>
							<p class="meihao">其他</p>
							<li class="like">喜欢植物、喜欢动物</li>
							<li class="like">喜欢实际操作</li>
							<li class="like">喜欢唐诗、其次是宋词、不喜欢元曲</li>
							<li class="like">喜欢安静的环境</li>
						</div>
						<div class="music">
							<p class="musicgood">音乐</p>
							<p class="verygood">成都</p>
							<audio src="1.mp3" controls loop></audio>
						</div>
						
					</div>	
						
					</div>
				</div>
			</div>
			<div class="foot">
				<p class="path">©2023- 2024 By LK_happily</p>
				<p class="pabh">Hellow,welcome to my blog</p>
			</div>
		</div>
	</body>
</html>

about.css

*{
	margin: 0;
	padding: 0;
    }
   
 body{
	 background-color: antiquewhite;
  }

.top{
	background-image: url("../img/3(1).jpg");
	background-size: 100% 100vh;
	width: 100%;
	height: 100vh;
   }
.top>img{
	width: 100%;
	height: 100vh;
    }
	.assusm{
		width: 1215px;
		margin: auto;
	}
.mask{
	font-size:25px;
	display: inline-block;
	width: 300px;
	color: black;
	font-weight: 900;
	text-align: center;
    }
.mask:hover{
	color: white;
	
    }
.topone{
	width: 1235px;
	margin: auto;
	margin-top: 15%;

    }

.topone>h2 {       
	    color:peachpuff;
	    font-size: 70px;
	   text-align: center;
	  
	}
.topone>h3 {
	    color:peachpuff;
	    font-size: 65px;
		margin-top: 50px;
		text-align: center;
	}
.topone>h2:hover{
		color:skyblue
	}
.topone>h3:hover{
		color:skyblue
	}
.zuo{
	width: 50%;
	height: 100%;
	float: left;
	
}
.you{
	width: 49.8%;
	height: 100%;
	
	float: left;
}
div.apply{
	font-size: 40px;
	color: tan;
    margin:50px 0px 50px 70px;	
}
.suggest{
	margin-left: 70px;
	margin-bottom: 20px;
}
p.only{
 color:rosybrown;	
}
p.anly{
	font-weight: 5;
}
.suggest>p:hover{
		color:skyblue
	}
.apply:hover{
			color:skyblue
	}
li.public{
	font-weight:900;
}
.cycle>li{
	margin-left: 70px;
	margin-top: 30px;
	border-bottom: 1px solid;
	font-weight: 2;
}
.xiaozuo{
	width: 800px;
	height: 700px;	
}
.cycle>li:hover{
			color:skyblue
	}

.appip{
	width: 756px;
	height: 732px;
	
}
.hui>img{
	width: 500px;
	height:650px;
	margin-top: 80px;
	margin-left: 118px;
	border: 1px solid black;
	float: left;
	transition: all 0.8s;
	border-radius: 50px;
}
.hui>img:hover{
		transform: scale(1.1);
		color: black;		
	}
.jieshao{
	width:600px;
	height:700px;
	background-color:bisque;
	margin-top: 150px;
	margin-left: 70px;
	margin-bottom: 150px;
	border-radius: 50px;
	transition: all 0.8s;
	
}
.jieshao:hover{
		transform: scale(0.9);
		color: black;		
	}	
.shaojie>img{
	width: 230px;
	height:230px;
	margin: 50px 0px 25px 170px;
	transition: all 0.8s;
}
.shaojie>img:hover{
		transform: scale(1.1);
		color: black;		
	}	
.qias>h1{
	text-align: center;
	color: tan;
}
.qias>h3{
	text-align: center;
   color: tan;	
}
.qias>h1:hover{
	color:skyblue
	}
.qias>h3:hover{
	color:skyblue
	}
p.vivo{
	text-align: center;
	font-size: 18px;
	margin-top: 40px;
}
p.oppo{
	text-align: center;
	font-size: 18px;
}
p.oppo:hover{
	color:skyblue
	}
p.vivo:hover{
	color:skyblue
	}
.kuangkuang{
	background-color:beige;
	width: 300px;
	height: 50px;
	margin: auto;
	margin-top: 70px;
	
}
.kuangkuang>p:hover{
	color: aquamarine;
}
.kuangkuang>p{
	text-align: center;
	font-size: 30px;
	color: tan;
}
.zishu{
	float: left;
	margin-top: 250px;
	margin-left: 100px;
}
.jiaoyu{
	border-bottom: 1px solid black;
	font-size: 30px;
	margin-bottom: 50px;
	color: tan;
}
.biye{
	font-size: 20px;
	margin-bottom: 30px;
	color: tan;
}
p.aihao{
	border-bottom: 1px solid black;
	font-size: 30px;
	margin-bottom: 25px;
	color: tan;
}
p.meihao{
	color: tan;
	font-size: 20px;
	margin-bottom: 10px;
	margin-top: 10px;
}
.geren>li{
	color: thistle;
	
}
li.like{
	margin-top: 10px;
	margin-bottom: 10px;
}
.music{
	float: left;
}
p.musicgood{
	float: left;
	font-size: 20px;
	margin-top: 20px;
	margin-bottom: 40px;
	color: tan;
}
p.verygood{
	float: left;
	font-size: 20px;
	margin-top: 20px;
	margin-left: 40px;
	color: tan;
}

.music>p:hover{
	color: aquamarine;
}

.music>audio{
	margin-top: 5px;
	margin-left: 10px;
}
.jiaoyu:hover{
	color: aquamarine;
}
.biye:hover{
	color: aquamarine;
}
p.aihao:hover{
	color: aquamarine;
}
p.meihao:hover{
	color: aquamarine;
}	
.geren>li:hover{
	color: aquamarine;
}			
.foot{
	width: 100%;
	height: 80px;
	background-color:floralwhite;
	overflow: hidden;
		}
p.pabh{
			
	text-align: center;
	font-size: 20px;
	font-weight: 1;
		}
p.path{
	margin-top:20px;
	text-align: center;
	font-size: 20px;
	font-weight: 1;
}
p.path:hover{
		color:skyblue
	}
p.pabh:hover{
		color:skyblue
	}

habbies.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">	
		<title>关于我的爱好</title>
		<link rel="stylesheet" href="../Css/hobbies.css">
		
	</head>
	<body>
		<div class="wrap">
			<div class="top">
				<div class="assusm">
					<a href="../index.html"><span class="mask">Home</span></a>
					<a href="about.html"><span class="mask">About</span></a>
					<a href><span class="mask">Habbies</span></a>
					<a href="more.html"><span class="mask">More</span></a>
				</div>
				<div class="topone">
				 	<h2>知足也知火候</h2>
				 	<h3>书当快意读易尽 客有可人期不来</h3>
				 </div>
			</div>
			<div class="center">
				<div class="mix">
					<h2>图书</h2>
					<P>书中自有黄金屋
					   书中自有言如玉
					</P>
					
				</div>
				<div class="meet">
					<div class="met">
						
						<a href="book.html"><p>解忧杂货店</p></a>
						<br><br>
						<p class="zuozhe">作者：东野圭吾</p>
						<br><br>
						<p class=jianshu>该书讲述了在僻静街道旁的一家杂货店，只要写下烦恼投进店前门卷帘门的投信口，第二天就会在店后的牛奶箱里得到回答：因男友身患绝症，年轻女孩月兔在爱情与梦想间徘徊；松冈克郎为了音乐梦想离家漂泊，却在现实中寸步难行；少年浩介面临家庭巨变，挣扎在亲情与未来的迷茫中……。
							</p>
						<img src="../img/书零.jpg" alt="">
					</div>
					<div class="meeting">
					<div class="tu">
						<img src="../img/书一.jpg" alt="">
						<p class="p1">活着</p>
						<p>余华</p>
					</div>
					
					<div class="tu">
						<img src="../img/书四.jpg" alt="">
						<p class="p1">百年孤独</p>
						<p>马尔克斯</p>
					</div>
					<div class="tu">
						<img src="../img/书三 (1).jpg" alt="">
						<p class="p1">被讨厌的勇气</p>
						<p>岸见一郎</p>
					</div>
					<div class="tu">
						<img src="../img/书三 (2).jpg" alt="">
						<p class="p1">云边有个小卖部</p>
						<p>张嘉佳</p>
					</div>							
					</div>
					<div class="meetme">
						<div class="shudan">书单</div>
						<div class="shuzi">
							<p>1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;白夜行&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;东野圭吾</p>
							<p>2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;杀死一只更鸟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;哈珀.李</p>
							<p>3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;平凡的世界&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;路遥</p>
							<p>4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;窗边的小豆豆&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;黑柳彻子</p>
							<p>5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;爱你就像爱生命&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;王小波</p>
							<p>6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;荒原狼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;黑塞</p>
							<p>7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;人间草木&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汪曾祺</p>
							<p>8&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;人性的枷锁&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;毛姆</p>
							<p>9&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;安娜.卡列尼娜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;托尔斯泰</p>
							<p>10&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;霍乱时期的爱情&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;马尔克斯</p>							
						</div>
					</div>
				</div>
				
			</div>
			<div class="mang">忙里偷闲</div>
			<div class="xian">
				<div class="wheater">
					<div class="ci">
						<img src="../img/bueer (1).png" alt="">
						<p class="soul">唐诗</p>
						<p class="soua">青山一片云雾心安即归处</p>
						<p class="sous">不辞青山，相随与共</p>
					</div>					
				</div>
				<div class="wheater">
					<div class="song">
						<div class="ci">
							<img src="../img/童年4 拷贝.png" alt="">
							<p class="soul">宋词</p>
							<p class="soua">等春风得意，等时间嘉许</p>
							<p class="sous">一亩清阴，半天潇洒松窗午</p>
						</div>
					</div>
				</div>
				<div class="wheate">
					<div class="yuan">
						<div class="ci">
							<img src="../img/小标题2 拷贝.png" alt="">
							<p class="soul">元曲</p>
							<p class="soua">市井长巷，聚拢来是烟火</p>
							<p class="sous">一江烟水照清岚，两岸人家接画檐</p>
						</div>
					</div>
				</div>
			</div>
			<div class="jiazai">
				<div class="tuozhan">
					<p class="ring">绘画</p>
					<p class="rong">0部作品</p>
				</div>
				<div class="tuozhan">
					<p class="ring">书法</p>
					<p class="rong">0部作品</p>
				</div>
				<div class="tuozhan">
					<p class="ring">散文</p>
					<p class="rong">0部作品</p>
				</div>
				<div class="tuozhan">
					<p class="ring">小说</p>
					<p class="rong">0部作品</p>
				</div>
				<div class="tuozhan">
					<p class="ring">作品</p>
					<p class="rong">0部作品</p>
				</div>
			</div>
			<div class="foot">
				<p class="path">©2023- 2024 By LK_happily</p>
				<p class="pabh">Hellow,welcome to my blog</p>
			</div>
		</div>
	</body>
</html>

hobbies.css

*{
	margin: 0;
	padding: 0;
    }
   
 body{
	 background-color: antiquewhite;
  }

.top{
	background-image: url("../img/habbias.jpg");
	background-size: 100% 100vh;
	width: 100%;
	height: 100vh;
   }
.top>img{
	width: 100%;
	height: 100vh;
    }
	.assusm{
		width: 1215px;
		margin: auto;
	}
 .mask{
	font-size:25px;
	display: inline-block;
	width: 300px;
	color: black;
	font-weight: 900;
	text-align: center;
    }
.mask:hover{
	color: white;
	
    }
.topone{
	width: 1235px;
	margin: auto;
	margin-top: 15%;
	
    }

.topone>h2 {       
	    color:peachpuff;
	    font-size: 70px;
	   text-align: center;
	  
	}
.topone>h3 {
	    color: peachpuff;
	    font-size: 65px;
		margin-top: 50px;
		text-align: center;
	}
.topone>h2:hover{
		color:skyblue
	}
.topone>h3:hover{
		color:skyblue
	}

.mix>h2{
	text-align: center;
	margin-top: 50px;
		}
.mix>h2:hover{
	color:white;
}		
.mix>p:hover{
		color:white;
		}
.mix>p{
	text-align: center;
	margin-bottom: 25px;
		}
.meet{
	width: 1200px;
	background-color:bisque;
	margin: auto;
	border-radius:50px;
	overflow: hidden;
}	
.met{
	width: 439px;
	height: 600px;
	border-right: 1px solid black;
	float: left;
}
a>p:first-child{
	text-align: center;
	width: 107px;
	margin-top: 25px;
	margin-left:50px;
	font-size: 20px;
	color:tan;
}
p.zuozhe{
	text-align: center;
	width: 120px;
	font-weight: 6;
	margin-left:50px;
}
p.jianshu{
	text-align: center;
	width: 350px;
	margin-left:50px;
	font-weight: 5;	
}
.meeting{
	width: 382px;
	height: 600px;
	float: left;
}
.meetme{
	width: 378px;
	height: 600px;
    float:left;
}
.met>img{
	width: 190px;
	height: 250px;
	margin-top: 50px;
	margin-left: 200px;
	transition: all 0.8s;
}

.tu{
	width: 190px;
	height: 300px;	
	border-right: 1px solid black;	
	float: left;
	border-bottom: 1px solid black;
}
.tu>img{
	width: 120px;
	margin-left: 35px;
	margin-top: 35px;
	transition: all 0.8s;
}
.tu>p{
	margin-left: 35px;	
}	
.p1{
	font-size: 14px;
	color: rgb(175, 91, 7);
}
a>p:hover{
		color:skyblue
	}
.met>a{
	text-decoration: none;
}
	.met>p:hover{
			color:skyblue
		}
.met>img:hover{
		transform: scale(1.1);
		color: black;		
		}
.tu>p:hover{
		color:skyblue
	}
.tu>img:hover{
		transform: scale(1.1);
		color: black;		
		}
.shudan{
	
	margin: 25px 0px 40px 60px;
	font-size: 25px;
	color: tan;
}
.shudan:hover{
		color:skyblue
	}
.shuzi{
	width: 40px;
	height: 600px;
}
.shuzi>p{	
	width: 300px;
	height: 50px;
	text-align: center;
	font-weight: 3;
	text-align: left;
	margin-left: 60px;
}
.shuzi>p:hover{
		color:skyblue
	}
.mang{
	text-align: center;
	margin-top: 50px;
	margin-bottom: 25px;
	font-size: 25px;
	font-weight: 800;
		}
.mang:hover{
	color:white;
}
.xian{
	width: 1200px;
	height: 400px;
	background-color:bisque;
	margin: auto;		
	background-color:bisque;
	border-radius: 40px 40px 0px 0px;
}
.wheater{
    border-right:1px solid black;
	width: 398px;
	height: 400px;
    float: left;
	
}
.wheate{
	width: 398px;
	height: 400px;
	float: left;
	
}
div.ci{
	margin-top: 50px;
	margin-left: ;
	text-align: center;
	
}
.ci>img{
	width:130px;
	height:130px;
	transition: all 0.8s;
}
p.soul{
	font-size: 25px;
	color:tan;
	margin-top: 15px;
}
p.soua{
	font-size: 10px;
	font-weight: 3;
	margin-top: 10px;
}
p.sous{
	font-size: 15px;
	font-weight: 7;
	margin-top:50px;
}
.ci>p:hover{
		color:skyblue
	}
.ci>img:hover{
		transform: scale(1.1);
		color: black;		
	}	
.jiazai{
	width: 1200px;
	height:150px;
	background-color:bisque;
	margin: auto;			
}
.tuozhan{
	width: 240px;
	height: 150px;
	float: left;
	text-align: center;
	border-top: 1px solid black;
	border-radius:  0px 0px 40px 40px;
}
p.ring{
	font-size: 25px;
	color:tan;
	margin-top: 15px;
}
p.rong{
	font-size: 15px;
	font-weight: 7;
	margin-top:20px;
}
.tuozhan>p:hover{
		color:skyblue
	}
.foot{
	width: 100%;
	height: 80px;
	background-color:floralwhite;
	overflow: hidden;
		}
p.pabh{
			
	text-align: center;
	font-size: 20px;
	font-weight: 1;
		}
p.path{
	margin-top:20px;
	text-align: center;
	font-size: 20px;
	font-weight: 1;
}
p.path:hover{
		color:skyblue
	}
p.pabh:hover{
		color:skyblue
	}

more.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>联系我</title>
		<link rel="stylesheet" href="../Css/more.css">
		
	</head>
	<body>
		<div class="warp">
			<div class="top">
				<div class="assusm">
					<a href="../index.html"><span class="mask">Home</span></a>
					<a href="about.html"><span class="mask">About</span></a>
					<a href="hobbies.html"><span class="mask">Habbies</span></a>
					<a href><span class="mask">More</span></a>
				</div>
				
				<div class="topone">
				 	<h2>Future expectation</h2>
				 	<h3>There is more to come</h3>
				 </div>
			</div>
			<div class="center">
				<p>小筑信息反馈表</p>
				<table>
					<tr>
						<td>用户名:</td>
						<td><input type="text" class="user_input" placeholder="请输入用户名"></td>
					</tr>
					<tr>
						<td>反馈原因</td>
						<td><input type="text" class="user_input" placeholder="请输入反馈原因"></td>
					</tr>
					<tr>
						<td>联系方式</td>
						<td><input type="text" class="user_input" placeholder="请输入联系方式"></td>
					</tr>
					<tr>
						<td>反馈内容</td>
						<td><input type="text" class="user_input" placeholder=placeholder="请输入反馈内容"></td>
					</tr>
					<tr>
						<td>改进意见</td>
						<td><input type="text" class="user_input" placeholder=placeholder="改进意见"></td>
					</tr>
					<tr>
						<td colspan="2">
							<input type="submit" class="useit" value="提交">
							<input type="reset" class="useron" value="重置内容">
						</td>					
					</tr>
				</table>
			
					
			</div>
			<div class="foot">
				<p class="path">©2023- 2024 By LK_happily</p>
				<p class="pabh">Hellow,welcome to my blog</p>
			</div>
		</div>
	</body>
</html>

more.css

*{
	margin: 0;
	padding: 0;
    }
   
 body{
	 background-color: antiquewhite;
  }

.top{
	background-image: url("../img/achun.jpg");
	background-size: 100% 100vh;
	width: 100%;
	height: 100vh;
   }
.top>img{
	width: 100%;
	height: 100vh;
    }
	.assusm{
		width: 1215px;
		margin: auto;
	}
.mask{
	font-size:25px;
	display: inline-block;
	width: 300px;
	color: black;
	font-weight: 900;
	text-align: center;
    }
.mask:hover{
	color: white;
	
    }
.topone{
	width: 1235px;
	margin: auto;
	margin-top: 15%;
;
    }

.topone>h2 {       
	    color:peachpuff;
	    font-size: 70px;
	   text-align: center;
	  
	}
.topone>h3 {
	    color:peachpuff;
	    font-size: 65px;
		margin-top: 50px;
		text-align: center;
	}
.topone>h2:hover{
		color:skyblue
	}
.topone>h3:hover{
		color:skyblue
	}
	
	
	
	
.center{
	width: 60%;
	margin: 50px auto;
}
.center>p{
	font-size: 30px;
	font-weight: bold;
	text-align: center;	
	margin-bottom: 30px;
}
.center table{
	width: 70%;
	margin: 0 auto;
	background-color:bisque;
	border-radius: 30px;
	height: 600px;
	transition: all 0.8s;
}
.center table:hover{
		transform: scale(0.9);
		color: black;		
	}	
table tr>td:first-child{
	width: 40%;
	font-size: 20px;
	font-weight:5;
	text-align: right;
	padding: 5px 20px 5px 0;
}
.user_input{
	height: 40px;
	width: 300px;
	border-radius: 5px;
	border: white;
	font-weight: 1;
	text-align: center;
	}

table select{
	width: 300px;
}
table tr:last-child>td{
	text-align: center;
}
 input.useit{
	margin-right: 50px;	
	background-color:lemonchiffon;
	width: 150px;
	height: 30px;
	margin-left: 72px;
	border-radius: 8px;
	border:white;
} 
input.useron{
	margin-right: 50px;	
	width: 150px;
	height: 30px;
	background-color:lemonchiffon;
	border-radius: 8px;
	border:white;
} 
input.useron:hover{
		color:skyblue
	}
input.useit:hover{
		color:skyblue
	}

.foot{
	width: 100%;
	height: 80px;
	background-color:floralwhite;
	overflow: hidden;
		}
p.pabh{
			
	text-align: center;
	font-size: 20px;
	font-weight: 1;
		}
p.path{
	margin-top:20px;
	text-align: center;
	font-size: 20px;
	font-weight: 1;
}
p.path:hover{
		color:skyblue
	}
p.pabh:hover{
		color:skyblue
	}

页面中存在小页面，大家可自行探索，继续完善

上一篇：第8章利用CSS制作

下一篇：如何实现PHP安全过