【无标题】

最新推荐文章于 2024-08-13 17:13:54 发布

wangsiling6

最新推荐文章于 2024-08-13 17:13:54 发布

阅读量55

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/wangsiling6/article/details/134510162

版权

<!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>
        .www{
            position: relative;
            width: 800px;
            height: 600px;
        }
        .qqq{
            position: absolute;
            width: 800px;
            height: 600px;
        }
        .qqq:hover{
            background-color: grey;
            opacity: 0.5;
            bottom: 5px solid;
            z-index: -2;
        }
        .eee{
            position: absolute;\
            top: 50%;
            right: 50%;
        }
    </style>

</head>
<body>
    <div class="www">
    <img src="./arr(1).png" class="eee">
    <div><img src="./sed(1).jpg" class="qqq">
    </div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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>
    * {
      margin: 0;
      padding: 0;
    }

    /* 因为有通栏：占满一行的边框，所以需要有一个通栏：占满一行的盒子 */
    .nav {
      height: 40px;
      border-bottom: 1px solid #ccc;
    }

    /* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部，所以设置ul为宽度固定并且水平居中的效果（后面项目中所用到的版心） */
    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 .last {
     border-right: none;
    }

    ul li a {
      /* a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整 */
      /* 如果把a标签转换成块级元素，此时可以设置宽高，会让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%);
      /* 为了img标签不遮住a标签的主体内容 */
      top: 40px;
      border: 1px solid #ccc;
    }
ul li .app :hover+div{
  background-image: url(./code\(1\).jpg);
  width: 124px;
  height: 135px;
  top: 55px;
  right: 200px;
    }
  </style>
</head>
<body>
  <!-- 导航 -->
  <div class="nav">
    <ul>
      <li><a href="#">我要投资</a></li>
      <li><a href="#">平台介绍</a></li>
      <li><a href="#">新手专区</a></li>
      <!-- 因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部 -->
      <li><a href="#" class="app">手机微金所</a><div></div></li>
      <li class="last"><a href="#">个人中心</a></li>
    </ul>
  </div>

</body>
</html>

选择器补充

ul li:nth-of-type(行数){}

ul-li:nth-child(n+)奇数行

字体样式

font-size: px;改大小

font-family:"";改字体

font-style: ;改字倾斜

font-weight:;加粗

font:粗倾斜大小字体；

文本样式

text-indent:n(数字)em;段前空格

line-height:npx;行高

}

text-align:right center;文本水平对齐方式

margin: 0 auto;标签水平居中

text-decoration:none;

}去除a链接的下划线

文本方向

list-style-type: none;

list-style-image:

list-style: none;设置列表样式

背景

background-image:url()

background-repeat:no-repeat使图片不重复

background-size背景大小

background-position背景位置

元素(标签)的类型

块级元素：默认情况下独占一行

可以设置宽高行高内外边距

内联元素：和其他元素在同一行

不可以设置宽高行高内外边距

内联块级元素在同一行可以设宽高

img input

display: inline-block;可以让内联。块级元素变为内联块级元素

边框

border-style边框样式

border-color边框颜色

border-radius%边框弧度

合并相邻边框

文本域

resize:none不可拖拽

vertical-align:middle居中

鼠标样式

cursor:

相对定位

子position:absolute;

left(top)(bottom):向左移动

父position:relative;

z-indel:谁大谁显示

固定定位

position: fixed;

粘性定位

position: sticky;

display: none; visititily: hidden:隐藏

wangsiling6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【无标题】

块级元素变为内联块级元素。background-repeat:no-repeat使图片不重复。text-indent:n(数字)em;ul li:nth-of-type(行数){}list-style: none;ul-li:nth-child(n+)奇数行。
复制链接

扫一扫