CSS（五）：背景、列表、超链接伪类、鼠标形状控制属性

最新推荐文章于 2023-12-22 09:54:36 发布

weixin_33889665

最新推荐文章于 2023-12-22 09:54:36 发布

阅读量191

点赞数

文章标签：人工智能

一、背景属性

1、背景属性用来设置页面元素的背景样式。

2、常见背景属性

属性	描述
background-color	用来设置页面的背景色，取值如red,#ff0000
background-image	用来设置页面的背景图片，图片路径可以是绝对路径或相对路径，如：background-image: url("../image/arrow-right.gif");
background-position	背景开始位置，包括水平方向(X轴)和垂直方向(Y轴)的设置。 X轴取值：left、center、right或像素值或百分比。 Y轴取值：top、center、bottom或像素值或百分比。
background-repeat	背景填充方式，取值repeat-x(填充X轴)、repeat-y(填充Y轴)、no-repeat(不填充)。
background	合写方式，如background: #fff url("bg.png") left top no-repeat;

3、绝对路径和相对路径：

绝对路径：绝对路径就是你的主页上的文件或目录在硬盘上真正的路径。

相对路径：相对路径就是相对于当前文件的路径。网页中一般表示路径使用这个方法。

3.1 相对路径使用的特殊符号

"./"：代表目前所在的目录。
"../":代表上一层目录。
以"/"开头：代表根目录。

举例说明相对路径的用法：
假设跟目录下面有web和image两个文件夹，web下有page1.html和page2文件夹，page2文件夹下有page2.html和page2image.jpg。image文件夹下面有image.jpg。

a、文件在当前目录
page2.html访问page2image.jpg
<img src="./page2image.jpg">或者<img src="page2image.jpg">
b、文件在上一层目录
page1.html访问image下的image.jpg
<img src="../image/image.jpg">
page2.html访问image下的image.jpg
<img src="../../image/image.jpg">
c、文件在下一层目录
page1.html访问page2文件夹下的page2image.jpg
<img src="./page2/page2image.jpg" >或者<img src="page2/page2image.jpg" >
d、根目录表示法，任何页面访问image下的image.jpg
<img src="/image/image.jpg">

3.2 常使用且需要注意的地方

a、css中的图片路径。
写css里的图片路径，url是图片针对样式文件的位置。
例如：同一目录下面存在index.html、image文件夹、css文件夹，css文件夹里面有style.css文件，image文件夹里面有image.jpg图片，index.html引用style.css文件，style.css文件引用image里面的image.jpg图片：
background-image:url(../image/image.jpg)
b、js中图片地址均相对于调用JS的页面的相对位置。
document.getElementById("IMG1").style.backgroundImage= "url(../Images/login.jpg)";

3.3、优缺点及使用的地方
1、绝对路径的优点
    A、如果有人抄袭你的网站内容，里面的链接还会指向你的网站，有些抄袭的人比较懒，根本不会去改内容。其实也不局限于被抄袭，如果有人将你的网页保存到本地电脑中，里面的链接、图片、css、以及js仍然会连接到你的网站。
    B、如果网页位置改变，里面的链接还是指向正确的URL。
2、绝对路径的缺点：
    A、在编码编写时不方便使用绝对路径，因为链接应该指向真正的域名而不是开发站点。
相对路径的优缺点和绝对路径几乎相反。
3、相对路径的优点：
    A、容易移动内容，可以整个目录移动。
    B、测试方法比较灵活，本机测试时比较方便。
4、相对路径的缺点：
    A、部分内容页面换了位置时，链接容易失效。
    B、容易被人大面积采集抄袭。

示例：

css代码：

@chartset "utf-8";
div,ul,li,a,h3{
    margin: 0;
    padding: 0;
}
#nav{
    width: 240;/*设置DIV的宽度*/
    background-color: #D7D7D7;/*设置DIV的背景颜色*/
}
#nav h3{
    font-size: 18px;
    color: #fff;
    line-height: 50px;/*设置行高*/
    background-color: red;/*设置背景色*/
    background-image: url(../image/arrow-down.gif);/*设置背景图片*/
    background-repeat: no-repeat; /*图片不平铺*/
    background-position: right center; /*水平垂直居中对齐*/
}
#nav ul li a{
      margin: 0 4px;/*设置字体间距*/
      font-size: 14px;/*设置字体大小*/
      color: #000;/*设置字体颜色*/
      text-decoration: none;/*设置超链接不显示下划线*/
    }

#nav ul li{
        background-image: url(../image/arrow-right.gif);/*设置背景图片*/
        background-repeat: no-repeat; /*图片不平铺*/
        background-position: right center; /*水平垂直居中对齐*/
        line-height: 30px;/*设置行高*/
}

html代码：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>全部商品分类</title>
  <link rel="stylesheet" type="text/css" href="css/bgStyle.css" />
</head>
<body>
   <div id="nav">
      <h3>全部商品分类</h3>
      <ul>
         <li><a href="#">图书</a><a href="">音像</a><a href="">数字商品</a> </li>
         <li><a href="#">手机</a><a href="">数码</a></li>
         <li><a href="#">电脑</a><a href="#">办公</a></li>
         <li><a href="">家居</a><a href="">家装</a><a href="">厨具</a></li>
         <li><a href="">服装鞋帽</a><a href="">个护化妆</a></li>
         <li><a href="">礼品箱包</a><a href="">钟表</a><a href="">珠宝</a></li>
         <li><a href="">食品饮料</a><a href="">保健食品</a></li>
         <li><a href="">彩票</a><a href="">旅行</a><a href="">充值</a><a href="">票务</a></li>
      </ul>
   </div>
</body>
</html>

二、列表属性

属性	描述	举例
list-style-image	将列表设置为列表标志	list-style-image:url('./arrow.gif');
list-style-type	设置列表项标志的类型： disc(实心圆) circle(空心圆) square(正方形)	list-style-type：circle
list-style	以上属性的合并简写，或none去掉默认属性设置	list-style:square url('/i/arrow.gif');

三、超链接伪类

a:link{ color: red;} /*未访问的连接*/
a:visited{ color: blue;}/*已访问的连接*/
a:hover{ color: green;}/*当鼠标悬停在连接上*/
a:active{ color: yellow;}/*被选择的连接*/

示例：

css代码：

#nav a:link{ color: red;} /*未访问的连接*/
#nav a:visited{ color: blue;}/*已访问的连接*/
#nav a:hover{ color: green;}/*当鼠标悬停在连接上*/
#nav a:active{ color: yellow;}/*被选择的连接*/
#nav a{
     text-decoration: none;/*设置超链接不显示下划线*/
 }

 #nav p{
     line-height: 30px;/*设置行高*/
 }

html

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>超链接伪类</title>
  <link rel="stylesheet" type="text/css" href="css/aStyle.css" />
</head>
<body>
   <div id="nav">
       <p><a href="http://www.baidu.com">打开百度</a></p>
       <p><a href="http://www.sina.com.cn">打开新浪</a></p>
       <p><a href="http://www.sohu.com">打开搜狐</a></p>
   </div>
</body>
</html>

效果：

四、鼠标形状控制

cursor属性，其值如下图所示：

综合示例

html;

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>背景属性综合练习</title>
  <link rel="stylesheet" type="text/css" href="css/trainStyle.css" />
</head>
<body>
   <div id="nav">
       <h3>家用电器</h3>
       <h4><a href="#">大家电</a></h4>
       <p>
          <a href="">平板电视</a><a href="">洗衣机</a><a href="">冰箱</a><br/>
          <a href="">空调</a><a href="">烟机/灶具</a><a href="">热水器</a><br/>
          <a href="">冷柜/酒柜</a><a href="">消毒柜</a><a href="">家庭影院</a><br/>
       </p>

       <h4><a href="#">生活电器</a></h4>
        <p>
          <a href="">电风扇</a><a href="">净化器</a><a href="">吸尘器</a><br/>
          <a href="">净水设备</a><a href="">挂烫机</a><a href="">电话机</a><br/>
        </p>

        <h4><a href="#">厨房电器</a></h4>
        <p>
          <a href="">榨汁机</a><a href="">电压力锅</a><a href="">电饭煲</a><br/>
          <a href="">豆浆机</a><a href="">微波炉</a><a href="">电磁炉</a><br/>
        </p>

        <h4><a href="#">五金家装</a></h4>
        <p>
           <a href="">淋浴/水槽</a><a href="">电动工具</a><a href="">手动工具</a><br/>
          <a href="">仪器仪表</a><a href="">浴霸/排气</a><a href="">灯具</a><br/>
        </p>
   </div>
</body>
</html>

css:

#nav{
    width: 300px;
    background-color: white;
}
#nav h3{
    font-size: 18px;
    background-color: #0f7cbf;
    font-weight: bold;
    line-height: 35px;
    color: white;
    margin: 0px;
    padding-left: 5px;
}

#nav h4{
    font-size: 14px;
    font-weight: bold;
    line-height: 30px;
    background-color: #e4f1fa;
    color: #0f7cbf;
    margin: 0px;
    padding-left: 10px;
}

#nav h4 a{
        text-decoration: none;
}
#nav p{
    padding-left: 15px;
}

#nav p a{
    margin: 0 5px;
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
    color: #666666;
}

#nav p a:hover{color: #F60;text-decoration: underline;}
#nav h4 a:hover{text-decoration: underline;}

weixin_33889665

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS（五）：背景、列表、超链接伪类、鼠标形状控制属性

一、背景属性1、背景属性用来设置页面元素的背景样式。2、常见背景属性属性描述background-color用来设置页面的背景色，取值如red,#ff0000background-image用来设置页面的背景图片，图片路径可以是绝对路径或相对路径，如：background-image: url("../image/arrow-right.gif"...
复制链接

扫一扫