Day17 静态页面导航及图片结构与样式

最新推荐文章于 2024-03-12 20:30:10 发布

Crimson418

最新推荐文章于 2024-03-12 20:30:10 发布

阅读量240

点赞数

文章标签： servlet java html

本文链接：https://blog.csdn.net/weixin_70432149/article/details/126475250

版权

本文探讨了如何使用HTML和CSS构建静态页面的导航结构和图片展示。通过实例讲解了HTML标记语言中创建导航栏的元素和CSS样式设计，包括导航链接的布局、样式美化以及图片的显示和调整。内容涵盖了HTML基础标签和CSS选择器、定位等技巧。

摘要由CSDN通过智能技术生成

HTML：

 <!-- 导航 -->
    <div id="nav" class="layer clearfix">
      <h2 class="fl">主题市场</h2>
      <ul class="fl">
        <li class="size"><a href="#">天猫</a></li>
        <li class="size"><a href="#">聚划算</a></li>
        <li class="size"><a href="#">天猫超市</a></li>
        <li class="line">|</li>
        <li><a href="#">淘抢购</a></li>
        <li><a href="#">电器城</a></li>
        <li><a href="#">司法拍卖</a></li>
        <li><a href="#">淘宝心选</a></li>
        <li><a href="#">兴农扶贫</a></li>
        <li class="line">|</li>
        <li><a href="#">飞猪旅行</a></li>
        <li><a href="#">智能生活</a></li>
        <li><a href="#">苏宁易购</a></li>
    </ul>
    </div>

    <!-- 首屏内容 ：每个层独立写出，利用浮动安排位置-->
    <div id="firstscreen" class="layer clearfix">
      <!-- 左边内容 -->
      <div class="firstleft fl">
        <!-- 左边导航 -->
        <div class="sidenav fl">
          <ul>
            <li>
              <a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span class="iconfont fr">&#xe617;</span>
            </li>
          </ul>
          <ul>
            <li>
              <a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span class="iconfont fr">&#xe617;</span>
            </li>
          </ul>
          <ul>
            <li>
              <a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span class="iconfont fr">&#xe617;</span>
            </li>
          </ul>
          <ul>
            <li>
              <a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span class="iconfont fr">&#xe617;</span>
            </li>
          </ul>
          <ul>
            <li>
              <a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span class="iconfont fr">&#xe617;</span>