[学习笔记] HTML5&CSS3-充实笔记0508 [推广有奖]

51关注
6粉丝

大师

16%

还不是VIP/贵宾

威望: 1 级
论坛币: 84577 个
通用积分: 11157.3988
学术水平: 666 点
热心指数: 821 点
信用等级: 732 点
经验: 397216 点
帖子: 16293
精华: 0
在线时间: 3302 小时
注册时间: 2016-7-9
最后登录: 2024-5-6

楼主

HappyAndy_Lo 发表于 2019-5-8 10:36:26 |只看作者 |坛友微信交流群|倒序 |AI写论文

是否 +2 论坛币

k人参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

叠字标题

分别为<h1 id="text1"> HTML5+CSS3</h1>
         <h1 id="text2">HTML5+CSS3</h2>
两个标记，添加CSS效果
h1#text1{
   margin:0px; padding:0px;
      top:15px;
      position:absolute;
      font-size:40px;
      color:#FF0000;
      margin-left:50px;
}
由于要移动文字的位置，且要改变文字的层级，因此必须设置position为绝对寻址
文字text2除了移动位置之外，还加入了光晕（glow）和阴影（shadow）效果

h1#text2{
      margin:0px;padding:5px;
      position:absolute;
      font-size:30px;
      color:#FFFFFF;
      top:30px;
      margin-left: 150px;
      z-index:1;
      filter:glow(color=#ff0000, strength=5);
      text-shadow:5px 5px 5px #FF0000;
}

z-index:1表示1层，没有设置，表示0层。若在同一层，没有设置，组建会按顺序往上推迭。

网页背景和鼠标光标
body{
      cursor:url(images/my.cur);
      background-image:url('images/bg.jpg');
      background-attachment:fixed; /*设置背景图为固定格式*/

}

菜单超链接特效
css语法如下：
nav{
      border:0px #000000 solid;
      margin: 0px auto; padding:0px;
      margin-top: 170px;
}

nav ul{
      list-style:none; /*不显示列表项目符号*/
      margin: 0; padding: 0;
}

nav li a {
      display: block;
      width: 150px;
      height: 42px;
      background-image: url(images/btn.png); /* 超链接原始状态背景图*/

      line-height:35px;
      text-indent: 45px;
      text-decoration: none; /*不显示下划线*/
      color: #333333;
      font-size: 15px;
}
nav li a: hover{
      background-image: url(images/btn_hover.png);
      color: #ffffff;
}
note>>>> a 选择器中设置了高度（height）和宽度（width），这两个值必须与图片的高度和宽度相同，否则图片会重复显示，或者可以加入下面语法任意改变高宽值：

      background-repeat: no-repeat;