查看“图片和列表”的源代码

*完成网页布局后，下一步我们的任务就是尽可能的填充内容，把各个盒子都占满了。

实战案例_商院电商源代码：https://share.weiyun.com/50o5GCC

==插入图片==
*[[文件:w8-50.png|700px]]
*如何在盒子中插入图片？
*在盒子中插入图片的方法很简单，直接在盒子中插入img元素即可：
*例：
 <nowiki><div id="layer2-2-1">
       <img src="../image/xiaoyuan.png" alt="校园图片" height="300px"/>
 </div></nowiki>
 其中src代表图片的路径，一般我们都把图片保存到image文件夹下，alt代表图片无法显示时显示的文字

*如果想图片长宽和盒子完全等同，可以同时指定图片的width 和height，但是这会造成图片的失真。
*如果必要，可以设置根据图片大小适当调整其父盒子的宽、高。
*css代码：
 <nowiki>#layer2-2-1 img{display:block;
			   margin:0 auto;}</nowiki>

*display:将图片设置为块级元素，margin:0 auto 将这个块级元素水平居中
*我们那个学校网页插入图片后的源代码为：
 <nowiki><!doctype html>
<html>
    <head>
        <title>我的第一个 HTML 页面</title>
        <meta charset="gb2312">
	<style type="text/css">
          *{margin:0;padding:0;}
           #layer1{width:100%; height:120px; background:blue;}
	   #layer1-1{width:100%;height:80px;background-color:lightblue;}  
	   #layer1-1 img {height:100%;}
	   #layer1-2{width:100%;height:40px;background-color:darkblue;} 
		   
           #layer2{width:100%;height:auto;background-color:lightblue;}
           #layer2-1{width:45%; height:450px; background:gray;float:left;}      
           #layer2-1 img{
                 display:block;
		 margin:0 auto;}		   
           #layer2-2{width:55%; height:450px;;background:blue;float:left;} 		
           .clear{clear:both;}
		   
           #layer3{width:100%; height:100px;  background:green;}           
       </style>
     </head>
     <body>
        <div id="layer1">
	   <div id="layer1-1">
		<img src="image/logo.png" alt="山东商职学院" />
           </div>
           <div id="layer1-2"> </div>
	</div>
        <div id="layer2">
	    <div id="layer2-1">
	         <img src="image/02.png" alt="学院新闻" />
	    </div>
	    <div id="layer2-2"> </div>
            <div class="clear"></div>
	</div>    
        <div id="layer3"></div>
     </body>
  </html></nowiki>
*我们添加图片之后，接着在网页中用列表的方式添加文字内容。这时我们不追求好看，只要相关板块有文字就行。
*达到这一步，我们（上机）考试基本上就可以及格了。
*[[文件:w8-53.png|600px]]
==列表==
*[[文件:w8-55.png|600px]]
*列表的html代码：
  <nowiki>
 <div id="layer2">
  <h3>学校要闻</h3>
  <br/>
  <ul>
     <li><a href="#">马克思主义学院召开陶行知教育...</a></li>
     <li><a href="#">我校承办2017年山东省“农产品质量...</a></li>
     <li><a href="#">2017山东养老服务业高峰论坛在我...</a></li>
     <li><a href="#">校报荣获全国高校校报协会2016年...</a></li>
     <li><a href="#">浙江纺织服装职业技术学院、河北...</a></li>
  </ul>
  </div></nowiki>

*列表的CSS代码为：
 <nowiki>
 <style>
 #layer2 a {font-size:1em;color:black;text-decoration:none;}
 #layer2 ul{ padding:0; margin:0;}
 #layer2 ul li{ padding:0 0 0 20px;list-style:disc inside url(images/arrow.gif) ;line-height:250%;}</nowiki>
 </style>
*完整的网页代码为：
 <nowiki><!doctype html>
 <html>
    <head>
        <title>我的第一个 HTML 页面</title>
        <meta charset="gb2312">
	<style type="text/css">
           *{margin:0;padding:0;}
           #layer1{width:100%; height:120px; background:blue;}
	   #layer1-1{width:100%;height:80px;background-color:lightblue;}  
	   #layer1-1 img {height:100%;}
	   #layer1-2{width:100%;height:40px;background-color:darkblue;color:white;} 
		   
           #layer2{width:100%;height:auto;background-color:lightblue;}
	   #layer2-1{width:45%; height:410px; float:left;}      
           #layer2-1 img {width:100%;}		   
           #layer2-2{width:55%; height:410px;;float:left;} 
           #layer2-2 a {font-size:1em;color:black;text-decoration:none;}
           #layer2-2 ul{ padding:0; margin:0;}
           #layer2-2 ul li{ padding:0 0 0 20px;list-style:disc inside url(images/arrow.gif) ;line-height:250%;	}	   
           .clear{clear:both;}
		   
           #layer3{width:100%; height:100px; background:gray; text-align:center;line-height:100px;}           
       </style>
     </head>
     <body>
        <div id="layer1">
	   <div id="layer1-1">
		<img src="image/logo.png" alt="山东商职学院" />
	   </div>
           <div id="layer1-2"> 学校概况 教育教学 机构设置 创新创业 科研服务</div>
	</div>
        <div id="layer2">
	    <div id="layer2-1">
	        <img src="image/02.png" alt="学院新闻" />
	    </div>
	    <div id="layer2-2">
		<h3>学校要闻</h3>
                <br/>
                <ul>
                    <li>马克思主义学院召开陶行知教育...</li>
                    <li>我校承办2017年山东省“农产品质量...</li>
                    <li>2017山东养老服务业高峰论坛在我...</li>
                    <li>校报荣获全国高校校报协会2016年...</li>
                    <li>浙江纺织服装职业技术学院、河北...</li>
                </ul>
	    </div>
            <div class="clear"></div>
	</div>    
        <div id="layer3"><p>学校邮编：250000 学校地址：旅游路4516号</p></div>
     </body>
  </html></nowiki>

下一节 [[表单和导航]]