“项目综合实训（四）”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
（→‎给网页添加色彩和图片）
（→‎盒子的嵌套）
 
（未显示3个用户的30个中间版本）
第2行： 第2行：
 
学校首页
 
学校首页
 
==盒子的嵌套布局==
 
==盒子的嵌套布局==
−
===第一级嵌套===
+
*[[文件:W3-35.png|300px]]<br><br>
−
*[[文件:W3-35.png ‎]]
+
*[[文件:W5-75.png|300px]]
 +
*[[文件:w5-76.png|300px]]
 
<br><br>
 
<br><br>
−
===第二级嵌套===
+
*[[文件:W5-72.png|300px]]
−
*[[文件:W5-75.png|370px]]
+
*[[文件:w5-74.png|300px]]
−
*[[文件:w5-76.png|370px]]
 
−
<br><br>
 
−
===第三级嵌套===
 
−
*[[文件:W5-72.png|370px]]&nbsp;
 
−
*[[文件:w5-74.png|370px]]
 
 
*知识点：[[盒子的嵌套布局]]、[[盒子的嵌套布局（二）]]、
 
*知识点：[[盒子的嵌套布局]]、[[盒子的嵌套布局（二）]]、
 
*要点：
 
*要点：
 +
====盒子的嵌套====
 
**先在网页中用大一点的盒子进行框架的布局，然后再在每个盒子中嵌套更小的盒子
 
**先在网页中用大一点的盒子进行框架的布局，然后再在每个盒子中嵌套更小的盒子
 
**当盒子内部的元素需要竖直排列时，不需要增加额外的属性,盒子内的元素按先后顺序上下排列。
 
**当盒子内部的元素需要竖直排列时，不需要增加额外的属性,盒子内的元素按先后顺序上下排列。
 
**当盒子内部的元素需要水平排列时，要给需要浮动的元素添加float属性；同时，要在盒子内部的最后，增加一个空白盒子，将其属性设置为clear:both。
 
**当盒子内部的元素需要水平排列时，要给需要浮动的元素添加float属性；同时，要在盒子内部的最后，增加一个空白盒子，将其属性设置为clear:both。
  
−
==给网页添加图片和文字==
+
*'''嵌套元素竖直排列'''
−
*[[文件:w5-78.png|650px]]
+
*这种情况下最简单，
−
*[[文件:w5-79.png|650px]]
+
*当盒子内部的元素需要竖直排列时，不需要增加额外的属性,盒子内的元素按先后顺序上下排列。
−
*[[文件:w5-80.png|650px]]
+
*[[文件:w3-47.png]]
−
*知识点：[[CSS常用属性]]、[[CSS的选择符]]、[[CSS常用属性（二）]]、[[CSS常用属性（二）]]、[[盒子的基本属性]]、[[插入图像]]、[[图像样式]]
 
−
*要点：
 
−
**如果是模仿的网页，网页的色彩尽量与原网页相同，可以用浏览器的取色功能进行取色；
 
−
**插入图像时，尽量不要为图像同时指定宽和高，防止图像变形；
 
−
**合适的为每个元素设定选择符和对应的CSS属性；
 
 
*源代码：
 
*源代码：
−
<nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
    <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
  <html xmlns="http://www.w3.org/1999/xhtml">
 
  <html xmlns="http://www.w3.org/1999/xhtml">
 
     <head>
 
     <head>
第35行： 第27行：
 
       <style type="text/css">
 
       <style type="text/css">
 
           *{margin:0;padding:0;}
 
           *{margin:0;padding:0;}
−
           #layer1{width:100%; height:auto; text-align:center;}
+
 
−
          #layer1-1{width:45%; height:120px; background:white;text-align:center;float:left;}
+
           .layer2{width:100%; height:200px;}
−
           #layer1-1 h2{line-height:350%;}
+
 
−
          #layer1-1 img{width:520px;}  
+
           .layer2-1{width:100%; height:100px; background:red;text-align:center;}   
−
          #layer1-2{width:55%; height:120px;background:#8DD1F9;;color:#074C97;text-align:center;float:left;}
+
           .layer2-2{width:100%; height:100px; background:orange;text-align:center;}  
−
          #layer1-2 h3{line-height:350%;}  
 
−
  #layer1-2 h3{line-height:350%;}
 
−
          #layer1-3{clear:both;}
 
−
          #layer2{width:100%; height:auto;color:black;}
 
−
  #layer2-1{width:100%;height:auto;background-repeat:no-repeat;
 
−
          }   
 
−
  #layer2-1 img{width:100%;}
 
−
           #layer2-2{width:100%;height:auto;padding-left:2%;}
 
−
  .layer2-2-1{width:30%;height:auto;border-style:solid;border-width:medium;margin:10px;border-color:#074C97;float:left;}
 
−
   
 
−
          .layer2-2-4{clear:both;}
 
−
  #layer2-2 h3{text-align:left; background:#074C97;color:white;font-size:1.2em;line-height:180%;text-align:left;}
 
−
  #layer2-2 p{font-size:1em;line-height:100%;text-indent:2em;text-decoration:none;}
 
−
  #layer2-2 a {font-size:1em;line-height:200%;color:black;text-decoration:none;}
 
−
          #layer3{width:100%; height:auto; line-height:200%;  background:#EBEBEB;color:black;text-align:center;}          
 
 
       </style>
 
       </style>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
−
      <div id="layer1">
+
 
−
      <div id="layer1-1"><h2>山东商业职业技术学院</h2></div>
+
       <div class="layer2">
−
          <div id="layer1-2"><h3>学校概况&nbsp;&nbsp;机构设置&nbsp;&nbsp;教育教学&nbsp;&nbsp;就业创业&nbsp;&nbsp;科技服务</h3>
+
            <div class="layer2-1"><h2>盒子2-1</h2></div>
−
         
+
            <div class="layer2-2"><h2>盒子2-2</h2></div>
−
  <div id="layer1-3"></div>
+
 
−
  </div>
 
−
       <div id="layer2">
 
−
      <div id="layer2-1"><img src="01.png" alt="校园图片"/></div>
 
−
          <div id="layer2-2">
 
−
    <div class="layer2-2-1">
 
−
    <h3>学校要闻</h3>
 
−
 
−
<br/>
 
−
<p><a href="#">学校服务学习基地揭牌仪式暨社团...</a></p>
 
−
<p><a href="#">我校承办2017年山东省“农产品质量...</a></p>
 
−
<p><a href="#">2017山东养老服务业高峰论坛在我...</a></p>
 
−
<p><a href="#">校报荣获全国高校校报协会2016年...</a></p>
 
−
<p><a href="#">浙江纺织服装职业技术学院、河北...</a></p>
 
−
    </div>
 
−
            <div class="layer2-2-1"><h3>通知公告</h3>
 
−
   
 
−
<br/>
 
−
<p><a href="#">关于组织开展国家职业指导师、心理...</a></p>
 
−
<p><a href="#">关于公布2017年公开招聘工作人员进...</a></p>
 
−
<p><a href="#">关于公布2017年公开招聘工作人员笔...</a></p>
 
−
<p><a href="#">2017年公开招聘工作人员笔试公告...</a></p>
 
−
<p><a href="#">关于2017年公开招聘工作人员现场...</a></p>
 
−
</div>
 
−
            <div class="layer2-2-1"><h3>媒体报道</h3>
 
−
   
 
−
<br/>
 
−
<p><a href="#">新浪山东：山东商职院承办2017年...</a></p>
 
−
<p><a href="#">大众网：山东商职院承办山东省职...</a></p>
 
−
<p><a href="#">新浪山东：2017山东养老服务业高...</a></p>
 
−
<p><a href="#">新浪山东：全国高校“形势与政策”...</a></p>
 
−
<p><a href="#">大众网：全国高校“形势与政策”课...</a></p>
 
−
 
−
</div>
 
−
<div class="layer2-2-4"></div>
 
−
  </div>
 
 
       </div>     
 
       </div>     
−
      <div id="layer3">
+
 
−
      <p>学校地址：济南市旅游路4516号    邮编：250103</p>
 
−
          <p>电话：0531-86335888    招生电话：0531-86335555</p>
 
−
          <p>鲁ICP备05002370 </p>
 
−
  </div>
 
 
     </body>
 
     </body>
−
  </html>
+
  </html></nowiki>
−
</nowiki>
 
  
−
==给网页添加导航和列表==
+
*'''嵌套元素水平排列'''
−
*[[文件:w5-16.png|650px]]
+
*这种情况稍微复杂一点
−
*知识点：[[超链接标记及属性]]、[[超链接的伪类]]、[[超链接块元素的实现]]、[[列表的类型和样式]]、[[列表的实际应用]]、[[盒子的"炫酷"属性 ]]
+
*当盒子内部的元素需要水平排列时，要给需要浮动的元素添加float属性；同时，要在盒子内部的最后，增加一个空白盒子，将其属性设置为clear:both。
−
*要点：
+
*[[文件:w3-46.png]]
−
**有两种实现导航的方法，分别见于[[导航条的制作]]、[[列表的实际应用]]
+
*源代码：
−
**通过盒子的伪类选择符，实现导航栏的悬停效果
+
 
−
**可以给盒子添加圆角等个性化的样式，[[盒子的"炫酷"属性 ]]中有介绍。
 
−
*源代码:
 
 
  <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
  <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
−
<html xmlns="http://www.w3.org/1999/xhtml">
+
  <html xmlns="http://www.w3.org/1999/xhtml">
 
     <head>
 
     <head>
 
       <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 
       <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
第123行： 第58行：
 
       <style type="text/css">
 
       <style type="text/css">
 
           *{margin:0;padding:0;}
 
           *{margin:0;padding:0;}
−
           #layer1{width:100%; height:auto; text-align:center;}
+
 
−
  #layer1-1{width:45%; height:120px; background:white;text-align:center;float:left;}
+
           .layer2{width:100%;}
−
           #layer1-1 h2{line-height:350%;}
+
 
−
          #layer1-1 img{width:520px;}  
+
           .layer2-1{width:40%; height:200px; background:red;text-align:center;float:left;}
−
          #navigation {
+
           .layer2-2{width:60%; height:200px; background:orange;text-align:center;float:left;}  
−
      width:55%; height:120px;
+
           .layer2-3{clear:both;}  
−
  background:#8DD1F9;color:#074C97;
+
 
−
  font-weight:bold;text-align:center; /* 这个属性使盒子中的链接居中 */
 
−
  text-align:center;
 
−
          margin:0;
 
−
          padding:0;
 
−
  float:left;
 
−
}
 
−
           #navigation a{
 
−
 
−
          width:16%;
 
−
          float:left;
 
−
          height:120px;
 
−
          line-height:120px;
 
−
          color:#074C97;
 
−
          padding:5px 5px 5px 0.5em;
 
−
          text-decoration:none;
 
−
         
 
−
 
 
−
      }
 
−
          #navigation a:hover{
 
−
background-color:#074C97; /* 改变背景色 */
 
−
            color:#ffff00; /* 改变文字颜色 */
 
−
  }  
 
−
  #layer1-2 h3{line-height:350%;}
 
−
          #layer1-3{clear:both;}
 
−
          #layer2{width:100%; height:auto;color:black;}
 
−
  #layer2-1{width:100%;height:auto;background-repeat:no-repeat;
 
−
          } 
 
−
  #layer2-1 img{width:100%;}
 
−
          #layer2-2{width:100%;height:auto;padding-left:3%;padding-top:5px;background:#FAFBFB;}
 
−
  .layer2-2-1{
 
−
        width:30%;height:300px;
 
−
      margin:2px;padding-bottom:15px;
 
−
  border-style:solid;border-width:medium;
 
−
  border-color:#074C97;border-radius:1.5em;float:left;}
 
−
  .layer2-2-1 h3{text-indent:2em;;border-top-left-radius:1em;
 
−
border-top-right-radius:1em;}
 
−
           .layer2-2-1 ul{ margin:0;
 
−
          list-style-position: outside;     
 
−
          }
 
−
            .layer2-2-1 li{padding-left:0;margin-left:20px;text-align:left;line-height:250%;}
 
−
          .layer2-2-4{clear:both;}  
 
−
  #layer2-2 h3{text-align:left; background:#074C97;color:white;font-size:1.2em;line-height:180%;text-align:left;}
 
−
 
 
−
  #layer2-2 a {font-size:1em;color:black;text-decoration:none;}
 
−
          #layer3{width:100%; height:auto; line-height:200%;  background:#EBEBEB;color:black;text-align:center;}         
 
 
       </style>
 
       </style>
 
     </head>
 
     </head>
 
     <body>
 
     <body>
−
      <div id="layer1">
+
 
−
      <div id="layer1-1"><img src="logo.png" /></div>
+
       <div class="layer2">
−
          <div id="navigation">
+
            <div class="layer2-1"><h2>盒子2-1</h2></div>
−
      <a href="#">学校概况</a>
+
            <div class="layer2-2"><h2>盒子2-2</h2></div>
−
            <a href="#">机构设置</a>
+
            <div class="layer2-3"></div>
−
            <a href="#">教育教学</a>
 
−
            <a href="#">创新创业</a>
 
−
            <a href="#">科技服务</a>
 
−
  </div>
 
−
  <div id="layer1-3"></div>
 
−
  </div>
 
−
       <div id="layer2">
 
−
      <div id="layer2-1"><img src="01.png" alt="校园图片"/></div>
 
−
          <div id="layer2-2">
 
−
    <div class="layer2-2-1">
 
−
    <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>
 
−
            <div class="layer2-2-1"><h3>通知公告</h3>
 
−
   
 
−
<br/>
 
−
<li><a href="#">关于组织开展国家职业指导师、心理...</a></li>
 
−
<li><a href="#">关于公布2017年公开招聘工作人员进...</a></li>
 
−
<li><a href="#">关于公布2017年公开招聘工作人员笔...</a></li>
 
−
<li><a href="#">2017年公开招聘工作人员笔试公告...</a></li>
 
−
<li><a href="#">关于2017年公开招聘工作人员现场...</a></li>
 
−
</div>
 
−
            <div class="layer2-2-1"><h3>媒体报道</h3>
 
−
   
 
−
<br/>
 
−
<li><ahref="#">新浪山东：山东商职院承办2017年...</a></li>
 
−
<li><a href="#">大众网：山东商职院承办山东省职...</a></li>
 
−
<li><a href="#">新浪山东：2017山东养老服务业高...</a></li>
 
−
<li><a href="#">新浪山东：全国高校“形势与政策”...</a></li>
 
−
<li><a href="#">大众网：全国高校“形势与政策”课...</a></li>
 
−
 
−
</div>
 
−
<div class="layer2-2-4"></div>
 
−
  </div>
 
 
       </div>     
 
       </div>     
−
      <div id="layer3">
+
 
−
      <p>学校地址：济南市旅游路4516号    邮编：250103</p>
 
−
          <p>电话：0531-86335888    招生电话：0531-86335555</p>
 
−
          <p>鲁ICP备05002370 </p>
 
−
  </div>
 
 
     </body>
 
     </body>
−
  </html>
+
  </html></nowiki>
−
</nowiki>
+
 
 +
====盒子的间距====
 +
*当我们需要设置盒子之间的间距时，
 +
*如果是同一级的，可以设置他们的margin值；
 +
*如果是父子关系的盒子，可以设置父盒子的padding值。
 +
 
 +
==给网页添加图片和文字==
 +
*[[文件:w5-78.png|650px]]
 +
*[[文件:w5-79.png|650px]]
 +
*[[文件:w5-80.png|650px]]
 +
*知识点：[[CSS常用属性]]、[[CSS的选择符]]、[[CSS常用属性（二）]]、[[CSS常用属性（二）]]、[[盒子的基本属性]]、[[插入图像]]、[[图像样式]]
 +
*要点：
 +
**如果是模仿的网页，网页的色彩尽量与原网页相同，可以用浏览器的取色功能进行取色；
 +
**插入图像时，尽量不要为图像同时指定宽和高，防止图像变形；
 +
**合适的为每个元素设定选择符和对应的CSS属性；
 +
===插入图片===
 +
*插入图片使用<nowiki><img src="" alt=""></nowiki>标签，其中src代表图片的路径，alt代表图片不能显示时出现的文字
 +
*为了使图片能够正常显示，网页的图片一律存在image文件夹下，此时img标签可写为<img src="image/01.jpg" alt="" />
 +
*[[文件:w5-88.png]]
 +
*问题：不确定大小的图片如何在盒子中垂直、水平居中？ http://caibaojian.com/vertical-centering-with-css.html
 +
 
 +
===插入文字===
 +
*一般网站的新闻标题用列表<ul></ul>标签来实现。
 +
*如：
 +
  <nowiki><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></nowiki>
 +
*ul标记的CSS样式为： 
 +
  <nowiki>#layer2-2-2 ul{ padding:0; margin:0;}
 +
  #layer2-2-2 ul li{ padding:0 0 0 20px;list-style:url(images/arrow.gif) inside;line-height:250%;}
 +
  #layer2-2-2 a {font-size:1em;color:black;text-decoration:none;}</nowiki>
 +
 
 +
==添加导航和局部排版==
 +
*[[文件:w5-81.png|650px]]
 +
*[[文件:w5-82.png|650px]]
 +
*[[文件:w5-83.png|650px]]
 +
 
 +
 
 +
*知识点：[[超链接标记及属性]]、[[超链接的伪类]]、[[超链接块元素的实现]]、[[列表的类型和样式]]、[[列表的实际应用]]、[[盒子的"炫酷"属性 ]]
 +
*要点：
 +
**有两种实现导航的方法，分别见于[[导航条的制作]]、[[列表的实际应用]]
 +
**通过盒子的伪类选择符，实现导航栏的悬停效果
 +
 
 +
===导航条的制作===
 +
*制作导航条的关键环节是将a标签转化为块级元素（添加dispay：block或float:left属性）
 +
*制作导航条可以分为三个步骤：
 +
**1.在盒子内添加超链接：
 +
<nowiki><div id="navigation">
 +
<a href="#">Home</a>
 +
<a href="#">Contact us</a>
 +
<a href="#">Web Dev</a>
 +
<a href="#">Web Design</a>
 +
<a href="#">Map</a>
 +
</div></nowiki>
 +
 
 +
**2.为盒子和超链接设置样式：
 +
<nowiki>#navigation {   
 +
width:60%;
 +
height:4.6em;
 +
background-color:#1136c1;
 +
font-weight:bold;
 +
font-size:1em;
 +
text-align:center; /* 这个属性使盒子中的链接居中 */
 +
margin:0;
 +
padding:0;
 +
 
 +
 +
}
 +
#navigation a{
 +
 +
width:16%;
 +
float:left;
 +
height:4em;
 +
line-height:4em;
 +
color:#FFFFFF;
 +
background-color:#1136c1;
 +
padding:5px 5px 5px 0.5em;
 +
text-decoration:none;
 +
border-left:12px solid #151571; /* 左边的粗边 */
 +
 +
}</nowiki>
 +
**3.设置悬停效果
 +
  <nowiki>#navigation  a:hover{ /* 鼠标经过时 */
 +
background-color:#002099; /* 改变背景色 */
 +
color:#ffff00; /* 改变文字颜色 */
 +
border-left:12px solid yellow;
 +
  }</nowiki>
 +
===利用表格进行局部排版===
 +
*原来的代码（单纯用<nowiki><ul></nowiki>的）：
 +
*[[文件:w5-28.png|700px]]
 +
<nowiki><ul>
 +
    <li><a href="#">马克思主义学院召开陶行知教育...3月5日</a></li>
 +
    <li><a href="#">我校承办2017年山东省“农产品质量...3月5日</a></li>
 +
    <li><a href="#">2017山东养老服务业高峰论坛在我...3月5日</a></li>
 +
    <li><a href="#">校报荣获全国高校校报协会2016年...3月5日</a></li>
 +
    <li><a href="#">浙江纺织服装职业技术学院、河北...3月5日</a></li>
 +
  </ul></nowiki>
 +
*现在用表格重新排版：
 +
====第一步，基于表格的布局====
 +
*[[文件:w5-29.png|700px]]
 +
*html代码：
 +
<nowiki>
 +
<ul>
 +
  <table>
 +
    <tr>
 +
<td class="col1"><li><a href="#">新浪山东：山东商职院承办2017年...</a></li></td><td class="col2">3月5日</td>
 +
      </tr>
 +
    <tr>
 +
        <td class="col1"><li><a href="#">大众网：山东商职院承办山东省职...</a></li></td>
 +
<td class="col2">3月5日</td>
 +
    </tr>
 +
    <tr>
 +
        <td class="col1"><li><a href="#">新浪山东：2017山东养老服务业高...</a></li></td>
 +
<td class="col2">3月5日</td>
 +
      </tr>
 +
      <tr>
 +
        <td class="col1"><li><a href="#">新浪山东：全国高校“形势与政策”...</a></li></td>
 +
<td class="col2">3月5日</td>
 +
      </tr>
 +
      <tr>
 +
          <td class="col1"><li><a href="#">大众网：全国高校“形势与政策”课...</a></li></td>
 +
<td class="col2">3月5日</td>
 +
      </tr>
 +
 +
  </table>  
 +
</ul></nowiki>
 +
 
 +
====第二步，调整列表的相关样式====
 +
*[[文件:w5-30.png|700px]]
 +
*CSS代码：
 +
<nowiki>.layer2-2-1 ul{ padding:0; margin:0;}
 +
.layer2-2-1 ul li{ padding:0 0 0 20px;list-style:url(images/arrow.gif) inside;line-height:250%;}
 +
</nowiki>
 +
 
 +
====第三步，调整表格的相关样式====
 +
*[[文件:w5-32.png|700px]]
 +
*CSS代码：
 +
<nowiki>.layer2-2-1 table{ width:90%;}
 +
.layer2-2-1 table .col1{ width:85%; }
 +
.layer2-2-1 table .col2{ width:15%;text-align:right;color:gray;}
 +
.layer2-2-1 a:hover{
 +
background:#8DD1F9;
 +
  }
 +
</nowiki>
 +
 
 +
== 添加搜索和局部美化 ==
 +
*[[文件:w5-84.png|650px]]
 +
*[[文件:w5-85.png|650px]]
 +
*[[文件:w5-86.png|650px]]
 +
要点：
 +
*可以给盒子添加圆角等个性化的样式，[[盒子的"炫酷"属性 ]]中有介绍。
 
返回 [[网页设计与开发]]
 
返回 [[网页设计与开发]]

2017年12月24日 (日) 14:46的最新版本

学校网页的升级版本 学校首页

盒子的嵌套布局

  • W3-35.png

  • W5-75.png
  • W5-76.png



盒子的嵌套

    • 先在网页中用大一点的盒子进行框架的布局，然后再在每个盒子中嵌套更小的盒子
    • 当盒子内部的元素需要竖直排列时，不需要增加额外的属性,盒子内的元素按先后顺序上下排列。
    • 当盒子内部的元素需要水平排列时，要给需要浮动的元素添加float属性；同时，要在盒子内部的最后，增加一个空白盒子，将其属性设置为clear:both。
  • 嵌套元素竖直排列
  • 这种情况下最简单，
  • 当盒子内部的元素需要竖直排列时，不需要增加额外的属性,盒子内的元素按先后顺序上下排列。
  • W3-47.png
  • 源代码：
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
       <title>无标题文档</title>
       <style type="text/css">
          *{margin:0;padding:0;}

           .layer2{width:100%; height:200px;}
  
           .layer2-1{width:100%; height:100px; background:red;text-align:center;}  
           .layer2-2{width:100%; height:100px; background:orange;text-align:center;} 
       </style>
    </head>
    <body>

       <div class="layer2">
            <div class="layer2-1"><h2>盒子2-1</h2></div>
            <div class="layer2-2"><h2>盒子2-2</h2></div>

       </div>    

    </body>
 </html>
  • 嵌套元素水平排列
  • 这种情况稍微复杂一点
  • 当盒子内部的元素需要水平排列时，要给需要浮动的元素添加float属性；同时，要在盒子内部的最后，增加一个空白盒子，将其属性设置为clear:both。
  • W3-46.png
  • 源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
       <title>无标题文档</title>
       <style type="text/css">
          *{margin:0;padding:0;}

           .layer2{width:100%;}
  
           .layer2-1{width:40%; height:200px; background:red;text-align:center;float:left;}  
           .layer2-2{width:60%; height:200px; background:orange;text-align:center;float:left;} 
           .layer2-3{clear:both;}   

       </style>
    </head>
    <body>

       <div class="layer2">
            <div class="layer2-1"><h2>盒子2-1</h2></div>
            <div class="layer2-2"><h2>盒子2-2</h2></div>
            <div class="layer2-3"></div>
       </div>    

    </body>
 </html>

盒子的间距

  • 当我们需要设置盒子之间的间距时，
  • 如果是同一级的，可以设置他们的margin值；
  • 如果是父子关系的盒子，可以设置父盒子的padding值。

给网页添加图片和文字

插入图片

  • 插入图片使用<img src="" alt="">标签，其中src代表图片的路径，alt代表图片不能显示时出现的文字
  • 为了使图片能够正常显示，网页的图片一律存在image文件夹下，此时img标签可写为<img src="image/01.jpg" alt="" />
  • W5-88.png
  • 问题：不确定大小的图片如何在盒子中垂直、水平居中？ http://caibaojian.com/vertical-centering-with-css.html

插入文字

  • 一般网站的新闻标题用列表
      标签来实现。
    • 如：
     <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>
    • ul标记的CSS样式为： 
     #layer2-2-2 ul{ padding:0; margin:0;}
  #layer2-2-2 ul li{ padding:0 0 0 20px;list-style:url(images/arrow.gif) inside;line-height:250%;}
  #layer2-2-2 a {font-size:1em;color:black;text-decoration:none;}

    添加导航和局部排版

    • W5-81.png
    • W5-82.png
    • W5-83.png


    导航条的制作

    • 制作导航条的关键环节是将a标签转化为块级元素（添加dispay：block或float:left属性）
    • 制作导航条可以分为三个步骤：
      • 1.在盒子内添加超链接：
    <div id="navigation">
	<a href="#">Home</a>
	<a href="#">Contact us</a>
	<a href="#">Web Dev</a>
	<a href="#">Web Design</a>
	<a href="#">Map</a>
</div>
      • 2.为盒子和超链接设置样式：
    #navigation {    
	width:60%;
	height:4.6em;
	background-color:#1136c1;
	font-weight:bold;
	font-size:1em;
	text-align:center; /* 这个属性使盒子中的链接居中 */
	margin:0;
	padding:0;

	
}
 #navigation a{
	
	width:16%;
	float:left;
	height:4em;
	line-height:4em;
	color:#FFFFFF;
	background-color:#1136c1;
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
	border-left:12px solid #151571;		/* 左边的粗边 */
	
 }
      • 3.设置悬停效果
     #navigation  a:hover{					/* 鼠标经过时 */
	background-color:#002099;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
	border-left:12px solid yellow;
  }

    利用表格进行局部排版

    • 原来的代码（单纯用<ul>的）：
    • W5-28.png
    <ul>
    <li><a href="#">马克思主义学院召开陶行知教育...3月5日</a></li>
    <li><a href="#">我校承办2017年山东省“农产品质量...3月5日</a></li>
    <li><a href="#">2017山东养老服务业高峰论坛在我...3月5日</a></li>
    <li><a href="#">校报荣获全国高校校报协会2016年...3月5日</a></li>
    <li><a href="#">浙江纺织服装职业技术学院、河北...3月5日</a></li>
  </ul>
    • 现在用表格重新排版：

    第一步，基于表格的布局

    • W5-29.png
    • html代码：
     <ul>
   <table>
     <tr>
	<td class="col1"><li><a href="#">新浪山东：山东商职院承办2017年...</a></li></td><td class="col2">3月5日</td>
      </tr>
     <tr>
        <td class="col1"><li><a href="#">大众网：山东商职院承办山东省职...</a></li></td>
	<td class="col2">3月5日</td>
     </tr>
     <tr>
        <td class="col1"><li><a href="#">新浪山东：2017山东养老服务业高...</a></li></td>
	<td class="col2">3月5日</td>
      </tr>
      <tr>
         <td class="col1"><li><a href="#">新浪山东：全国高校“形势与政策”...</a></li></td>
	 <td class="col2">3月5日</td>
      </tr>
      <tr>
          <td class="col1"><li><a href="#">大众网：全国高校“形势与政策”课...</a></li></td>
	<td class="col2">3月5日</td>
      </tr>
		
  </table>				  
</ul>

    第二步，调整列表的相关样式

    • W5-30.png
    • CSS代码：
    .layer2-2-1 ul{ padding:0; margin:0;}
 .layer2-2-1 ul li{ padding:0 0 0 20px;list-style:url(images/arrow.gif) inside;line-height:250%;}

    第三步，调整表格的相关样式

    • W5-32.png
    • CSS代码：
    .layer2-2-1 table{ width:90%;}
 .layer2-2-1 table .col1{ width:85%; }
 .layer2-2-1 table .col2{ width:15%;text-align:right;color:gray;}
 .layer2-2-1 a:hover{
	background:#8DD1F9;
   }

    添加搜索和局部美化

    • W5-84.png
    • W5-85.png
    • W5-86.png

    要点：

    返回 网页设计与开发

    取自“http://www.openbrains.net/mediawiki/index.php?title=项目综合实训（四）&oldid=4210”