Web实验五一个简单界面_font:left-CSDN博客

本文链接：https://blog.csdn.net/Yutouxn0/article/details/125096935
<!DOCTYPE html>
<html>
<head>
	<title>我的博客</title>
	<style type="text/css"> 
     a {text-decoration: none;}
    #all{
    	width: 1100px ;
    	height:800px; 
    	background-color:gray; 
    	margin: 0px auto;
    }
    #head1{
    	width: 1100px;
    	height: 5px;
    	background-color: darkgray;
    }
    #head{
    	width: 1100px;
    	height: 60px;
    	background-color: darkgray;
    }
    #body{
    	width:1000px;
    	height: 700px;
    	background-color: #D3D3D3;
    	margin: 0px auto;
    }
    #bodyleft{
    	width: 400px;
    	height: 700px;
    	float: left;
    	background-color:#D3D3D3;
    }
    #bodyleft1{
    	width:400px;
    	height: 240px;
        font:left;
    }
    #bodyleft11{
    	width:300px;
    	height: 210px;
    	margin-top: 24px;
    	margin-left: 100px;
        font:left;
    }
    #bodyleft2{
    	width:400px;
    	height: 40px;
    	line-height: 40px;
    	background-color:#696969;
    	color: white;
    }
    #bodyleft3{
    	width:400px;
    	height: 180px;
    }
    #bodyleft31{
    	width:300px;
    	height: 138px;
    	margin-top: 24px;
    	margin-left: 50px;
    }
    #bodyleft4{
    	width:400px;
    	height: 180px;
    }
    #bodyleft41{
    	width:300px;
    	height: 150px;
    	margin-top: 30px;
    	margin-left: 50px;
    }

    #bodyright{
    	width: 598px;
    	height: 660px;
    	float: left; 
    	background-color:white;      
    }
    #bodyright1{
    	width:598px;
    	height: 60px;
    	line-height:80px; 
        font:left;        
    }
    #bodyright2{
    	width:598px;
    	height: 600px;
        float: left;
    }
    #bodyright21{
    	width:598px;
    	height: 170px;
        float: left;
    }
    #bodyright22{
    	width:598px;
    	height: 210px;
    	margin-left: 200px;
        float: left;
    }
    #bodyright23{
    	width:598px;
    	height: 103px;
        float: left;
    }

    #foot{
    	width: 1100px;
    	height: 70px;
    }
    #foot1{
    	width: 1100px;
    	height: 20px;
    	background-color: gray;
    }
    #foot2{
    	width: 1100px;
    	height: 10px;
    	background-color: darkgray;
    }
    #foot3{
    	width: 1100px;
    	height: 40px;
    	background-color: black;
    }

    #nav{
		width: 100%;
		height: 60px;
        float: left;
		background: #D3D3D3;/*导航条的背景色*/
	}
    #nav ul li {
        float: left;
        position:relative;/*相对的左边，比如青春励志的相对左边是首页，而不是最左侧的墙*/
        width: 12.5%;/*保证每个板块均匀分开*/
        list-style-type: none;
    }
    #nav ul li a {
         display: block;
         width: 160px;
         height: 40px;
         line-height: 40px;
         text-align: center;
         color: black;/*字体颜色*/

    }
    #nav ul li a:hover {
    color:black; /*鼠标移动到文字的时候出现的字体颜色*/
    background-color: darkgray;
    }
	</style>
</head>
<body>
<div id="all">
	<div id="head">	
        <div id="head1"></div>
		<div id="nav">
        <ul>
        <li><a href="我的大学.html">网站首页</a></li>
            <li><a href=""target="_blank">我的爱好</a> </li>
            <li><a href=""target="_blank">我的大学</a></li>
            <li><a href=""target="_blank">班级相册</a></li>
            <li><a href=""target="_blank">我的梦想</a></li>
            <li><a href=""target="_blank">我的博客</a></li>
            <li><a href=""target="_blank">关于我</a></li>
        </ul>
	    </div>
    </div>

	<div id="body">
	    <div id="bodyleft">
		     <div id="bodyleft1">
		          <div id="bodyleft11">
		               <img src="images/photo.jpg" width="150" height="150" style="width:200px; height:200px; border-radius:100%;">
		            </div>
		     </div>
		     <div id="bodyleft2">&nbsp&nbsp&nbsp&nbsp最新照片</div>
		     <div id="bodyleft3">
		     	<div id="bodyleft31">
		     		<img src="images/01.jpg" width="70" height="65">
		     		<img src="images/02.jpg" width="70" height="65">
		     		<img src="images/03.jpg" width="70" height="65">
		     		<img src="images/04.jpg" width="70" height="65"></br>
		     		<img src="images/05.jpg" width="70" height="65">
		     		<img src="images/06.jpg" width="70" height="65">
		     		<img src="images/07.jpg" width="70" height="65">
		     		<img src="images/08.jpg" width="70" height="65">
		     	</div>
		     </div>
		     <div id="bodyleft2">&nbsp&nbsp&nbsp&nbsp小调查</div>
		     <div id="bodyleft4">
		        <div id="bodyleft41">
		     	     请选择你喜欢的运动：</br>
		     	    <form action="process.aspx" method="post">
		     		<input type="checkbox" name="basketball" value="basketball">篮球</br>
		     		<input type="checkbox" name="football" value="football">足球</br>
		     		<input type="checkbox" name="tennis" value="tennis">网球</br>
		     		<input type="submit" value="提交">
		     	    </form>
		        </div>
		     </div>
		</div>
		<div id="bodyright">
		     <div id="bodyright1">&nbsp&nbsp&nbsp&nbsp<img src="images/11.jpg" >&nbsp&nbsp&nbsp&nbsp<font size="5">《当你老了》——叶芝</font></div>
		     <div id="bodyright2">
		          <div id="bodyright21">
		     	      <p> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp当年华已逝，你两鬓斑白，沉沉欲睡， 坐在炉边慢慢打盹，请取下我的这本诗集， 请缓缓读起，如梦一般，你会重温， 你那脉脉眼波，她们是曾经那么的深情和柔美。 </p>

                       <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp多少人曾爱过你容光焕发的楚楚魅力， 爱你的倾城容颜，或是真心，或是做戏， 但只有一个人！他爱的是你圣洁虔诚的心！ 当你洗尽铅华，伤逝红颜的老去，他也依然深爱着你！ </p>
                    </div>
                    <div id="bodyright22"><img src="images/text0211.jpg"></div>
   
                   <div id="bodyright23">
                        <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp炉里的火焰温暖明亮，你轻轻低下头去， 带着淡淡的凄然，为了枯萎熄灭的爱情，喃喃低语， 此时他正在千山万壑之间独自游荡， 在那满天凝视你的繁星后面隐起了脸庞。  </p>
                    </div>  
		     </div>
        </div>
	</div>

    <div id="foot">
	     <div id="foot1"></div>
	     <div id="foot2"></div>
	     <div id="foot3"></div>
    </div>

</body>
</html>
实现效果：