一套随便写的个人主页-526互联

index.html

-------------------------------------

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

</ul>

</div>

<span>Aurora</span>

<p>在这里，你可以发现我的日常生活记录以及我个人的照片，并且深入了解它们背后的探索性解释</p>

<a href="guanyu.html" class="next">Aboue Me</a>

</div>

</div>

</body>

</html>

------------------------------

index.css

-------------------------------

/* 首页 */

*{margin: 0px;padding: 0px;text-decoration: none;box-sizing: border-box;list-style: none;}

.container{display: flex;justify-content: space-between;width: 1000px;margin: auto;margin-top: 150px;}

.container .left{width: 45%;}

.container .left span{color: #9498cd;font-size: 24px;}

.container .left li{font-family: Georgia, 'Times New Roman', Times, serif;font-weight: bolder;font-size: 30px;line-height: 35px;margin-top: auto;}

.container .left p{font-size: 20px;line-height: 35px;}

.next{width: 90px;height: 90px;background-color: #e9ecfe;border-radius: 50%;display: block;color: #6267a9;text-align: center;line-height: 90px;margin: auto;}

.right{width: 50%;height: 200px;display: flex;align-items: center;justify-content: space-between;position: relative;}

.right img:nth-child(1){display: block;height: 300px;}

.right img:nth-child(2){display: block;height: 100px;}

.right img:nth-child(3){display: block;height: 130px;width: 200px;position: absolute;border-radius: 10px;top: 180px;right: 30px;}

.right p{color:#9498cd;position: absolute;font-size: 30px;bottom: -70px;left: 170px;}

----------------------------------

jilu.html

----------------------------------

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

</ul>

</div>

<p>微笑是生活的阳光，它和泪水交织成一幅幅真挚的画卷，点亮我们内心的勇气与坚强</p>

</div>

</body>

</html>

-------------------------------

jilu.css

-------------------------------

/*记录生活*/

body{background-color: rgb(245, 242, 232);}

.container{display: flex;justify-content:space-between ;width: 1000px;margin: auto;margin-top: 150px;}

.container .left{width: 45%;position: relative;}

.container .left span{color: #9498cd;font-size: 24px;}

.container .left li{font-size: 30px;list-style: 35px;font-family: Georgia, 'Times New Roman', Times, serif;font-weight: bolder;margin-top: auto;}

.container .left p{width: 230px;margin-top: 35px;line-height: 30px;}

.container .left a{width: 120px;display: block;border: 1px solid #ddd;text-align: center;line-height: 28px;color: #333;margin-top: 35px;}

.container .left img{display: block;width: 100px;position: absolute;right: -40px;top: 100px;}

.container .right{width: 55%;display: flex;justify-content: space-between;flex-wrap: wrap;z-index: 111;}

.container .right li{width: 220px;height: 150px;margin-bottom: 30px;position: relative;}

.container .right li img{width: 100%;display: block;height: 100%;border-radius: 10px;}

.container .right li a{display: flex;width: 170px;color: #333;background-color: #fff;position: absolute;bottom: -10px;align-items: center;line-height: 90px;}

.container .right li a span{display: block;width: 25px;height: 25px; background:url(../images/li.png) no-repeat center; background-size:10px 10px;}

-------------------------------

xiangce.html

-------------------------------

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</div>

</body>

</html>

--------------------------

xiangce.css

--------------------------

/*相册分享*/

*{margin: 0px;padding: 0px;text-decoration: none;box-sizing: border-box;list-style: none;}

body{background-color: rgb(245,242,232);}

.container{width: 1000px;margin: auto;margin-top: 70px;}

.container p{color: #9498cd;width: 100%;margin-bottom: 30px;font-size: 21px;}

.container ul{display: flex;justify-content: space-between;flex-wrap: wrap;cursor: pointer;}

.container ul img{display: block;width: 201px;margin-bottom: 50px;border-radius: 10px;}

.get{text-decoration: underline;color: rgb(214,168,90);}

-----------------------------

zuopin.html

-----------------------------

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

</ul>

</div>

</div>

<li>你做不了得<br />交给我来完成</li>

<span

>遥远的星辰和行星，如同宇宙交响乐的旋律，在寂静中传递着深邃与悠远。它们承载着宇宙的奥秘和无尽的智慧，用一种超越词语的语言，温暖触动我们内心</span

</div>

</div>

</body>

</html>

--------------------------

zuopin.css

--------------------------

/*我的作品*/

.container{display: flex;justify-content: space-between;width: 1000px;margin: auto;margin-top: 80px;}

.container .left{width: 50%;position: relative;height: 500px;}

.container .left p{color: #44507b;}

.container .left .pa3-1{display: block;width: 170px;height: 200px;position: absolute;top: 123px;border-radius: 10px;z-index: 1111;}

.txt1{position: absolute;top: 90px;}

.pa3-2{display: block;width: 120px;height: 120px;left: 260px;position: absolute;border-radius: 10px;top: 55px;z-index: 99;}

.txt2{position: absolute;left: 260px;top: 20px;}

.pa3{display: block;width: 100px;right: 30px;position: absolute;top: 150px;}

.pa4{width: 140px;display: block;height: 210px;position: absolute;top: 210px;right: 85px;border-radius: 10px;}

.txt3{position: absolute;top: 430px;right: 137px;}

.pa5{position: absolute;display: block;width: 100px;top: 300px;left: 150px;}

.right{width: 50%;padding-top: 10px;}

.right p{color: #9498cd;margin-left: 30px;margin-bottom: 30px;font-size: 22px;}

.right li{font-size: 30px;line-height: 35px;margin-left: 60px;background: url(../images/li.png)no-repeat 100px 55px;width: 200px;background-size: 90px 10px;}

.right span{font-size: 15px;width: 350px;display: block;margin-left: 200px;margin-top: 30px;color: rgb(90 90 90);}

.bf img{display: block;width: 100%;height: 200px;}

.bf{margin-top: 20px;margin-right: -50px;padding-left: 50px;}

---------------------------

guanyu.html

---------------------------

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

</ul>