小白训练营结业作业

最新推荐文章于 2022-12-09 16:48:14 发布

灰头兔脸

最新推荐文章于 2022-12-09 16:48:14 发布

阅读量281

点赞数

分类专栏：学习记录

本文链接：https://blog.csdn.net/whoops_butterfly/article/details/70652643

版权

学习记录专栏收录该内容

17 篇文章 0 订阅

订阅专栏

HTML：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>My Blog</title>
	<link rel="stylesheet" type="text/css" href="./css/myblog.css">
   
</head>
<body>
     <div id="container">
   	  <div id="nav">
   	       <img id="me" src="./img/头像.jpg">
   	  	   <ul>
   	  	   <li><img src="./img/文章.png"><a href="#" class="line">文章</a></li>
   	  	   <li><img src="./img/图片.png"><a href="#" class="line">图片</a></li>
   	  	   <li><img src="./img/音乐.png"><a href="#" class="line">音乐</a></li>
   	  	   <li><img src="./img/视频.png"><a href="#" class="line">视频</a></li>
   	  	</ul>
   	  </div>
   	  <div id="content">
   	     <div id="lside">  
               <p>
                  哪里有土，哪里有水，哪里就长着草。<br/>
                  你要到远处寻觅吗？你最后一定会回来的,<br/>
                   在你所熟悉的东西中找到最好的，<br/>
                   或者像最好者一样好， <br/>
                   在你最亲近的人中找到最中意的、最强健的和最爱你的...... <br/>
                   幸福、知识，不在别处而在这里。<br/>
               </p>
                  <p>
                  没有哪座为自由而牺牲者的坟墓不长出自由的种子， <br/>
                  而种子又必然生出种子， <br/>
                  春风带它们到远方播种，雨雪将滋养它们。<br/> 
                  没有哪个被解脱躯壳的灵魂是暴君的武器所能吓跑， <br/>
                  它将在大地上到处无形地前进，低语着，商量着，告诫着。<br/>                  
                  自由，让别人对你失望去吧 <br/>
                   我永远不对你失望。<br/>
                  —————《草叶集》
                  </p>
               </ul>   
            </div>    
   	  	  <div id="rside">
   	  		 <img class="right_img" src="./img/个人中心.png">
   	  		 <img class="right_img" src="./img/name.jpg">
   	  		    <ul>
   	  			   <li class="line1"><a href="#"><img src="./img/one.jpg"></a></li>
   	  			   <li class="line1"><a href="#"><img src="./img/two.jpg"></a></li>
   	  			   <li class="line1"><a href="#"><img src="./img/three.jpg"></a></li>
   	  			   <li class="line1"><a href="#"><img src="./img/four.jpg"></a></li>
   	  		    </ul>
   	  	  </div>
   	  </div>
   </div>
</body>
</html>

css:

 a:link{
          color:white;
           }
          a:visited{
          color:#008080;
       		}
          a:hover{
          color:#00FF7F;
      		 }
      
	    body{
	    	   background:#90EE90;
	    }
	    #container{
               width: 1002px;
               margin: 0px auto;
              
       }
       #nav{
               margin-bottom: 5px;
               height:100px;
               background:#3CB371;
               
       }
       #content{
       	       
                height:500px;
                background:white;
       }
       #lside{
                 width: 695px;
                 height: 520px;
                 margin-right: 5px;
                 background:#8FBC8F;
                 float:left;
       }
       #rside{
                 width: 302px;
                 height: 520px;
                 background:#8FBC8F;
                 text-align:center;
                 float: left;
       }
     #me{
       	        float: left;
       }
       ul li{
       	    	list-style-type: none;
       	   		float:left;
              text-align: center;
       	   		font: normal bold 18px "SimHei";
       	   		height: 80px;
       	   		width: 60px; 
       	   		margin: 5px 75px 5px 75px;
       }
       .line{
       	     text-decoration: none;
       }
       .right_img{
       	      margin: 8px 5px 5px 5px;
       }
       .line1{
       	        list-style-type: none;
       	        width:180px; 
       	      
       }
 
       #lside p {
        margin: 65px 10px 65px 25px;
        list-style-type: none;
        font: normal  18px "SimHei";
        color: white;
       }
.lside1{
        float: left;
        width: 300px;
        height: 250px
}