图片和列表
来自CloudWiki
- 完成网页布局后，下一步我们的任务就是尽可能的填充内容，把各个盒子都占满了。
实战案例_商院电商源代码：https://share.weiyun.com/50o5GCC
插入图片
- 如何在盒子中插入图片？
- 在盒子中插入图片的方法很简单，直接在盒子中插入img元素即可：
- 例：
<div id="layer2-2-1">
<img src="../image/xiaoyuan.png" alt="校园图片" height="300px"/>
</div>
其中src代表图片的路径，一般我们都把图片保存到image文件夹下，alt代表图片无法显示时显示的文字
- 如果想图片长宽和盒子完全等同，可以同时指定图片的width 和height，但是这会造成图片的失真。
- 如果必要，可以设置根据图片大小适当调整其父盒子的宽、高。
- css代码：
#layer2-2-1 img{display:block;
margin:0 auto;}
- display:将图片设置为块级元素，margin:0 auto 将这个块级元素水平居中
- 我们那个学校网页插入图片后的源代码为：
<!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>
- 我们添加图片之后，接着在网页中用列表的方式添加文字内容。这时我们不追求好看，只要相关板块有文字就行。
- 达到这一步，我们（上机）考试基本上就可以及格了。
列表
- 列表的html代码：
<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>
- 列表的CSS代码为：
<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%;}
</style>
- 完整的网页代码为：
<!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>
下一节 表单和导航
