作业无标题

啊哈哈2s

已于 2023-11-19 14:15:58 修改

阅读量24

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-11-19 14:14:50 首次发布

本文链接：https://blog.csdn.net/2301_80613930/article/details/134490195

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     .one{
        position:relative;
        width: auto;
        height: auto;
      
      }
      .two{
        position:absolute;
        top:180px;
        left: 330px;
        border-radius: 50%;
      } 
      .one:hover{
        position: absolute;
        
        background-image: url(../sed.jpg);
        opacity: 0.3;;
      }
      .two:hover{
        position: absolute;
        
        background-image: url(../arr.png);
        opacity: 0.6;;

      }
      

    </style>
</head>
<body>
<a href="#" class="one"><img src="../sed.jpg" alt=""></a>
<a href="#" class="two"><img src="../arr.png" alt=""></a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
      margin: 0;
      padding: 0;
    }

    .nav {
      height: 40px;
      border-bottom: 1px solid #ccc;
    }
    .ul {
      list-style: none;
      width: 1200px;
      margin: 0 auto;
    }

    ul li {
      float: left;
      width: 20%;
      height: 40px;
      border-right: 1px solid #ccc;
      box-sizing: border-box;
      text-align: center;
      line-height: 40px;
    }

    ul .{
     border-right: none;
    }

    ul li a {
      display: block;
      height: 40px;
      text-decoration: none;
      color: #000;
    }

    ul li .app {
      position: relative;
    }

    ul li .app .code {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 40px;
      border: 1px solid #ccc;
    }
    .app img{
      display: none;
      background-image: url(../code_proc.jpg);
    }
    .app:hover img{
      display: block;
      background-image: url(../code_proc.jpg);
    }
    </style>
</head>
<body>
  <div class="nav">
    <ul>
      <li><a href="#">我要投资</a></li>
      <li><a href="#">平台介绍</a></li>
      <li><a href="#">新手专区</a></li>
      <li><a href="#" class="app">手机微金所<img src="../code_proc.jpg" alt="" class="code"></a></li>
      <li class="last"><a href="#">个人中心</a></li>
    </ul>
  </div>

</body>
</html>

11.18
选定<div tabindex="0">
css导入html<link...>
基本选择器：
标签选择器：名
id选择器：#id名
类选择器：.类名
通配符选择器：*
包含选择器：
子代选择器（只找到第一层）：大标签>小标签{}
后代选择器（所有满足的标签）：大标签小标签{}
复合选择器：a，b，c{}
属性选择器：标签[属性名=“属性值”]{}
type^首字母
type*居中字母
type$末字母
伪类选择器：
：hover
伪元素选择器：
::before
::after
::selection

11.18
<style>
ul li:nth-chlid(数字){
属性
}

ul li:nth-of-type(数字){
属性
}

font-size:__px(字体大小)
font-family：“____”(字体类型)
font-style：_____;(italic倾斜)之类
font-weight：_____加粗
font：800 italic 12px "雅黑"
text-indent:___px(像素单位缩进)__em(字体缩进)
line-height(行高)
word-spacing:___px（单词间距）
margin：0 auto(标签水平居中)
xtet-decoration:underline(下划线)
text-decoration:none(去除默认样式)
rgba[1,1,1,(0~1)透明度]
direction:rt1(从右往左)
list-style-type:____(设置列表样式)
bakgroud-repeat:no-repeat(不重复)
块级元素：默认情况下会独占一行可以设置宽，高，行高，内外边距
内联元素：和其它元素在同一行不可以设置宽，高，行高，内外边距
内联块级元素：
display：block(变成块级元素)
display:inline-block（变内联块级元素）
border-radius(边框弧度)
table{border-collapse:collapse}（边框变窄)
resize none(文本框不能拖拽)
vertical-aling:top(文本注释位置)
cursor：（鼠标样式）
z-index:(上层)
sticky(粘性定位)
opacity（隐藏）