背景样式学习

最新推荐文章于 2024-07-23 16:18:27 发布

YourLie_in_April

最新推荐文章于 2024-07-23 16:18:27 发布

阅读量304

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/YourLie_in_April/article/details/123779502

版权

background-color: 背景颜色

background-image: url(图片路径); 背景图片

background-repeat: 背景平铺样式 repeat：背景平铺（默认值）；no-repeat 不平铺；repeat-x 水平方向（沿x轴）平铺；repeat-y 垂直方向（沿y轴）平铺。

background-position:水平方向的位置（x）垂直方向的位置（y）； 背景位置。

background：背景连写顺序：背景颜色背景图片背景平铺背景附着背景位置（color image repeat attachment position; ）（无要求顺序，可变换顺序）

a:link：设置a标签没有点击过时状态。

a:visited：设置a标签点击之后的状态。

a:hover: 设置鼠标移入时的状态。

a:active: 设置鼠标按下的状态。

(四种链接伪类选择器的顺序固定: link visited hover active )

示例1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
  font-size: 10px;
  width: 300px;
  background-color: #d7d7d7;
}
.title {
  width: 300px;
  height: 55px;
  font-size: 30px;
  font-family: 宋体;
  line-height: 55px;
  color: white;
  text-indent: 1em;
  background: red url(./image/arrow-down.gif) no-repeat 275px 50%;
}
div[class="title"]:hover {
  cursor: all-scroll;
}
ul {
  width: 260px;
  height: 260px;
  background-color: #d7d7d7;
}
li {
  height: 30px;
  font-weight: 700;
  font-size: 16px;
  font-family: 宋体;
  line-height: 30px;
  list-style-type: none;
  background: url(./image/arrow-right.gif) no-repeat 240px 50%;
}
a:link {
  color: black;
  text-decoration: none;
}
a:hover {
  color: red;
  text-decoration: underline;
}

    </style>
</head>
<body>
    <div>
        <ul>
            <li class="title1">夏季流行</li>
            <hr>
            <li>
                <a href="#">夏季新品</a>&nbsp;
                <a href="#">雪纺裙</a>&nbsp;
                <a href="#">短袖T</a>&nbsp;
                <a href="#">铅笔裤</a>&nbsp;
                <a href="#">短裤</a>&nbsp;
                <a href="#">短袖衬衫</a>&nbsp;
                <a href="#">小脚牛仔裤</a>&nbsp;
                <a href="#">开衫</a>&nbsp;
                <a href="#">蕾丝/雪纺衫</a>&nbsp;
                <a href="#">韩版外套</a>&nbsp;
                <a href="#">小西装</a>&nbsp;
                <a href="#">中长款裙</a>&nbsp;
             </li>
            <li class="title2">上装</li>
            <hr>
            <li>
                <a href="#">T恤</a>&nbsp;  
                <a href="#">衬衫</a>&nbsp;  
                <a href="#">针织衫</a>&nbsp; 
                <a href="#">长袖T</a>&nbsp;  
                <a href="#">韩版T</a>&nbsp; 
                <a href="#">情侣衫</a>&nbsp;  
                <a href="#">雪纺衬衫</a>&nbsp;  
                <a href="#">韩版衬衫</a>&nbsp;  
                <a href="#">防晒衣</a>&nbsp; 
                <a href="#">休闲套装</a>&nbsp; 
                <a href="#">卫衣</a>&nbsp; 
                <a href="#">背心/吊带</a>&nbsp; 
            </li>
            <li class="title3">裙子</li>
            <hr>
            <li>
                <a href="#">连衣裙</a>&nbsp;  
                <a href="#">半身裙</a>&nbsp;  
                <a href="#">长裙</a>&nbsp; 
                <a href="#">短袖裙</a>&nbsp;  
                <a href="#">蕾丝连衣裙</a>&nbsp; 
                <a href="#">长袖裙</a>&nbsp;  
                <a href="#">无袖/背心裙</a>&nbsp;  
                <a href="#">A字裙</a>&nbsp;  
                <a href="#">牛仔裙</a>&nbsp; 
                <a href="#">半身中长裙</a>&nbsp; 
                <a href="#">半身短裙</a>&nbsp; 
                <a href="#">包臀裙</a>&nbsp;
            </li>
            <li class="title4">裤子</li>
            <hr>
            <li>
                <a href="#">裤子</a>&nbsp;  
                <a href="#">休闲裤</a>&nbsp;  
                <a href="#">牛仔裤</a>&nbsp; 
                <a href="#">打底裤</a>&nbsp;  
                <a href="#">长裤</a>&nbsp; 
                <a href="#">哈伦裤</a>&nbsp;  
                <a href="#">阔腿裤</a>&nbsp;  
                <a href="#">短裤/热裤</a>&nbsp;  
                <a href="#">连体裤</a>&nbsp; 
                <a href="#">七/九分裤</a>&nbsp; 
                <a href="#">牛仔短裤</a>&nbsp; 
                <a href="#">西装裤</a>&nbsp;
            </li>
            <li class="title5">其他女装</li>
            <hr>
            <li>
                <a href="#">胖M装</a>&nbsp;  
                <a href="#">中老年</a>&nbsp;  
                <a href="#">婚纱</a>&nbsp; 
                <a href="#">礼服</a>&nbsp;  
                <a href="#">旗袍</a>&nbsp; 
                <a href="#">夜店</a>&nbsp;  
                <a href="#">舞台装</a>&nbsp;  
                <a href="#">唐装</a>&nbsp;  
                <a href="#">职业装</a>&nbsp; 
                <a href="#">全球购</a>&nbsp; 
                <a href="#">羊绒衫</a>&nbsp; 
                <a href="#">毛衣</a>&nbsp;
                <a href="#">呢大衣</a>&nbsp;
                <a href="#">羽绒服</a>&nbsp;
                <a href="#">真皮皮衣</a>&nbsp;
            </li>
        </ul>
    </div>
</body>
</html>

示例2：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
  font-size: 10px;
  width: 300px;
  background-color: #d7d7d7;
}
.title {
  width: 300px;
  height: 55px;
  font-size: 30px;
  font-family: 宋体;
  line-height: 55px;
  color: white;
  text-indent: 1em;
  background: red url(./image/arrow-down.gif) no-repeat 275px 50%;
}
div[class="title"]:hover {
  cursor: all-scroll;
}
ul {
  width: 260px;
  height: 260px;
  background-color: #d7d7d7;
}
li {
  height: 30px;
  font-weight: 700;
  font-size: 16px;
  font-family: 宋体;
  line-height: 30px;
  list-style-type: none;
  background: url(./image/arrow-right.gif) no-repeat 240px 50%;
}
a:link {
  color: black;
  text-decoration: none;
}
a:hover {
  color: red;
  text-decoration: underline;
}

    </style>
</head>
<body>
<div id="nav">
  <div class="title">全部商品分类</div>
    <ul>
      <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
      <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
      <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
      <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
      <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
      <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
      <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
      <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>
</body>
</html>

总结：求大佬指点。

YourLie_in_April

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
背景样式学习

background-color: 背景颜色background-image: url(图片路径); 背景图片background-repeat: 背景平铺样式 repeat：背景平铺（默认值）；no-repeat不平铺；repeat-x 水平方向（沿x轴）平铺；repeat-y垂直方向（沿y轴）平铺。background-position:水平方向的位置（x）垂直方向的位置（y）；背景位置。background：背景连写顺序：背景颜色背景图片背景平铺背景附着背景位...
复制链接

扫一扫