HTML5+CSS3  制作水果页面
通过本章的学习，用户了解了HTML 5中，怎么使用新增的主体结构标签和非主体结构标签来制作完成的页面。
在本练习中，将使用新增的主体结构标签和非主体结构标签制作一个以水果为主体的网站首页，帮助用户更好的了解新增主体结构和非主体结构标签的含义和应用。
（1）使用DIV层为页面添加页头，内容使用h1和h2标签进行修饰。
<div id="header_left">
<h1>美味的 <span class="red">水果</span></h1>
<h2>品尝到天堂</h2>
</div>
（2）为页面添加用户添加登录部分，由用户名、密码和提交按钮组成。
<div id="header_right">
<p class="welcome">欢迎光临，请登录或<a href="#">注册</a>.</p>
  <form id="form1" method="post" action="">
    <p><label>用户名
    <input type="text" class="fields" name="textfield" />
    </label>
    <label>密码
    <input type="text" class="fields" name="textfield2" />
    <input type="submit" class="submit_button" name="Submit" value="登 录" />
    </label></p>
  </form>
  </div>
（3）为页面添加导航条，由导航标题和导航内容组成。
<h4><span class="menu_first_letter">导航</span></h4>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">首页</a></li>用html和css制作百度页面
<li class="green"><a href="#">健康</a></li>
<li><a href="#">水果</a></li>
<li><a href="#">社区</a></li>
<li><a href="#">关于我们 </a></li>
</ul>
</div>
（4）为导航条添加CSS样式，包括ul和超链接等。
#navcontainer ul
{
    list-style-type: none;
    font-weight: bold;
    color: #990000;
}
#navcontainer a
{
    display: block;
    padding-top: 17px;
    padding-left: 37px;
    width: 182px;
    background-color: #DCE3ED;
    border-bottom: 1px solid #eee;
    background-image: url(images/menu.png);
    background-repeat: repeat-x;
    height: 27px;
}
（5）在页面中添加模块，由名称、、你的留言和提交按钮组成。
<h4></h4>
  <form id="form2" method="post" class="contact_us" action="">
    <p><label>名称
    <input type="text" class="fields_contact_us" name="textfield" /></label>
    <label>
    <input type="text" class="fields_contact_us" name="textfield2" />
    </label><label>
    你的留言
    <textarea name="textarea" cols="" rows=""></textarea>
    </label>
    <label>
  <input type="submit" class="submit_button_contact" name="Submit3" value="提  交" />
    </label></p>
  </form>
（6）为页面添加正文，由于内容过多，部分代码已省略，详细代码请查看源文件。
<h3><A name="3_3"></A>柑桔</h3>
  <p><img src="images/demo_img.jpg" alt="Kiwi" width="159" height="140" class="float_right" />        柑桔  柑橘是凉性水果，也是世界上最重要的商品水果，是中国亚热带地区栽培面积最广的果树，也是广西最重要的果树。它包括的种类很多，广西主要栽培的有甜橙、宽皮柑桔、柚、金桔、柠檬等，而每一种类又有许多优良品种。</p>
    <p>        柑桔的果实汁多味美，风味可口，含有丰富的糖分、有机酸、矿物质、和维生素等成分，营养价值很高。柑桔还是医药、食品工业的重要原料。果肉除鲜食外，可加工成罐头、果汁、果酱等；果皮可提取橙皮苷，提炼香精和果胶。</p>
<p class="read_more"><a href="#"><img src="images/arrow.png" alt="read more" />更多</a> </p>
（7）为页面添加友情链接。
<h4>友情链接 </h4>
<a href="">牛牛的个人博客</a></div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。