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

最新推荐文章于 2025-02-28 20:01:27 发布

Crimson418

最新推荐文章于 2025-02-28 20:01:27 发布

阅读量311

点赞数

文章标签： servlet java html

本文链接：https://blog.youkuaiyun.com/weixin_70432149/article/details/126475250

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
            </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>
            </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>
            </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>
          
        </div>
        <!-- 图片容器上部分 -->
        <div class="imgbox1 fr">
          <div class="pic fl">
            <div class="img">
              <a href="#"><img src="../images/6.jpg" alt=""></a>
            </div>
            <button class="iconfont leftbutton">&#xe610;</button>
            <button class="iconfont rightbutton">&#xe617;</button>
            <div class="circle">
              <span class="active"></span><span></span><span></span><span></span><span></span>
            </div>
          </div>  
          <!-- 父级本身有浮动，不需要清除浮动 -->
          <div class="ad fr">
            <a href="#"><img src="../images/7.jpg" alt=""></a>

          </div>

        </div>
        <!-- 图片容器下部分 -->
        <div class="imgbox2 fr">
          <div class="pic fl">
            <div class="pictitle">
              <div class="text clearfix">
                <span class="fl bg">理想生活上天猫</span>
                <span class="fr"><i >1</i>/6</span>
              </div>
              <div class="line">
                <span></span>
              </div>
            </div>
            <div class="img">
              <a href="#"><img src="../images/8.jpg" alt=""></a><a href="#"><img src="../images/9.jpg" alt=""></a>
            </div>
            <button class="iconfont leftbutton">&#xe610;</button>
            <button class="iconfont rightbutton">&#xe617;</button>
          </div>
          <div class="ad fr">
            <p class="title">今日特卖</p>
            <a href="#"><img src="../images/10.jpg" alt=""></a>
          </div>
        </div>
        <!-- 淘宝头条栏 -->
        <div class="news fl">
          <div class="hd fl">
            <h3>淘宝头条</h3>
            <p>让你的生活更有趣</p>
          </div>
          <div class="newlist fr">
            <div class="imtem">
              <a href="#" class="fl img"><img src="../images/3.jpg" alt=""></a>
              <h4><a href="#">美丽中国世世代代</a></h4>
              <p><a href="#">打个中国结，再系个红飘带，人山人海天天好运来，你健康生活美，你幸福春常在。好运来祝你好运来。</a></p>
              <a href="#" class="more">更多></a>
            </div>
          </div>
        </div>
      </div>

CSS：

/* 导航 */
#nav h2 {
  width: 190px;
  height: 30px;
  font-size: 16px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  background-color: #f50;
}
#nav ul {
  width: 1000px;
  width: calc(100%-190px);
  /* calc用于计算数值，任意单位都可计算，支持加减乘除，符号前后必须有空格
     IE9及以上浏览器支持 */
  background-image: linear-gradient(to right, #ff9000, #ff5000);
}
#nav ul li {
  float: left;
  line-height: 30px;
  margin: 0 7px;
  font-size: 14px;
  color: #fff;
  position: relative;
  padding: 0 5px;
}
#nav ul li .size {
  font-size: 16px;
}
#nav ul li a {
  color: #fff;
  font-weight: bold;
}
#nav ul li.line {
  margin: 0;
  padding: 0;
}
#nav ul li:hover::before {
  content: "";
  position: absolute;
  width: 23px;
  height: 13px;
  background-image: url(../images/5.jpg);
  top: -13px;
  left: 50%;
  margin-left: -12px;

  /*鼠标放在导航上时有小图标在上方，可以通过伪类实现 
  #nav ul li:hover:before
  鼠标移入时，before伪元素是什么状态
 */
}
/* 首屏内容 */
/* 首屏左边导航内容 */
.firstleft {
  width: 890px;
  /* 不给宽度，firstright会被挤到下面 */
}
.firstleft .sidenav {
  width: 190px;
  height: 522px;
  background-color: #fff;
  border: 1px solid #ff5000;
  box-sizing: border-box;
  border-top: none;
  padding-top: 5px;
}
.firstleft .sidenav li {
  height: 32px;
  line-height: 32px;
  padding-left: 25px;
  color: #999;
  font-size: 14px;
  transition: background-color 0.3s;
  /* css3中新增的过渡功能， 数值和颜色都可以过渡
*/
}
.firstleft .sidenav li:hover {
  background-color: #ffe4dc;
  color: #f50;
}
.firstleft .sidenav li:hover a {
  color: #f50;
}
.firstleft .sidenav li a {
  font-size: 14px;
  color: #666;
  /* a标签不继承父级样式：
  原因：浏览器默认给a标签指定了一个样式，由于css的层叠，默认不继承父级，而继承默认样式 */
}
.firstleft .sidenav li a:hover {
  text-decoration: underline;
}
.firstleft .sidenav li span {
  font-size: 12px;
  margin-right: 5px;
}
/* 图片容器上部分 */
.firstleft .imgbox1 {
  width: 690px;
  height: 282px;
  margin-top: 10px;
  /* ???????怎么跑到中间去 用浮动排列 */
}
.firstleft .pic {
  width: 520px;
  position: relative;
}
.firstleft .pic button {
  width: 20px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  cursor: pointer;
  border: none;
  background-color: rgba(0, 0, 0, 0.3);
  /* css3新增  r代表红色0-255 g代表绿色0-255 b代表蓝色0-255  a代表阿尔法 IE8不支持
     解决IE8不支持RGBA的问题：(单独给IE8设置样式)
         css hack黑客
         background-color:#000\9;(针对IE9以下的浏览器认识） 
     */
  position: absolute;
  top: 50%;
  margin-top: -15px;
  display: none;
}
.firstleft .pic button.leftbutton {
  left: 0;
  border-radius: 0 15px 15px 0;
}
.firstleft .pic button.rightbutton {
  right: 0;
  border-radius: 15px 0 0 15px;
}
.firstleft .pic:hover button {
  display: block;
}
.firstleft .pic .circle {
  position: absolute;
  bottom: 15px;
  left: 50%;
  margin-left: -35px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 3px 0;
  font-size: 0;
}
.firstleft .pic .circle span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  margin: 0 3px;
  cursor: pointer;
}
.firstleft .pic .circle span.active {
  background-color: #ff5000;
}
.firstleft .ad {
  width: 160px;
}

/* 图片容器下部分 */
.firstleft .imgbox2 {
  width: 690px;
  height: 220px;
  margin-top: 10px;
}
.firstleft .imgbox2 .pictitle {
  height: 20px;
}
.firstleft .imgbox2 .pictitle .text {
  height: 17px;
  line-height: 17px;
}
.firstleft .imgbox2 .pictitle .text i {
  color: #ff1648;
}
.firstleft .imgbox2 .pictitle .line {
  height: 3px;
  background-color: #ff1648;
  position: relative;
}
.firstleft .imgbox2 .pictitle .line span {
  position: absolute;
  left: 0;
  width: 87px;
  height: 3px;
  background-color: #000;
}
.firstleft .imgbox2 .img {
  height: 200px;
  width: 520px;
  background-color: #fff;
  position: relative;
  display: table-cell;
  vertical-align: middle;
  /* 对应单元格是td  td默认是是table-cell*/
}
/* 图片垂直居中：
一、单元格垂直居中对齐
    父级display改成table-cell
    vertical-align: middle;
二、弹性盒模型 弹性布局（css新增）
    dispaly:flex;
    justify-content:space-around; 水平对齐
    align-items:center; 垂直对齐
 弹性盒模型兼容性：IE10+
*/
.firstleft .imgbox2 .img img {
  margin: 0 2px;
}
.firstleft .imgbox2 .ad .title {
  height: 20px;
  line-height: 20px;
}
.imgbox2 .ad a img {
  width: 160px;
  height: 204px;
}
/* 淘宝头条栏 */
.firstleft .news {
  width: 890px;
  height: 100px;
  background-color: #fff;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 13px 13px 13px 20px;
}
.firstleft .news .hd {
  margin-top: 15px;
}
.firstleft .news .hd h3 {
  width: 129px;
  height: 26px;
  background: url(../images/11.png);
  text-indent: -9999px;
  overflow: hidden;
}
.firstleft .news .hd p {
  color: #999;
  line-height: 24px;
}
.firstleft .news .newlist {
  width: 670px;
  position: relative;
}
.firstleft .news .newlist .img {
  margin-right: 15px;
}
.firstleft .news .newlist .img img {
  width: 130px;
  height: 73px;
}
.firstleft .news .newlist h4 {
  line-height: 28px;
  font-size: 16px;
  font-weight: normal;
}
.firstleft .news .newlist h4 a {
  color: #333;
}
.firstleft .news .newlist h4 a:hover,
.firstleft .news .newlist .more:hover {
  color: #ff5000;
}
.firstleft .news .newlist p {
  line-height: 18px;
  font-size: 14px;
  font-weight: normal;
}
.firstleft .news .newlist p a {
  color: #999;
}
.firstleft .news .newlist .more {
  position: absolute;
  top: 0;
  right: 0;
  color: #999;
}