11.18作业

最新推荐文章于 2024-07-25 09:24:40 发布

UseLessQQ

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量106

点赞数

文章标签：前端笔记

本文链接：https://blog.csdn.net/UseLessQQ/article/details/134505190

版权

<!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;
      visibility: hidden;
    }
    
    
    ul li .app :hover.code{
      visibility: visible;
    }
  </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">手机微金所<img src="./code.jpg" alt="" class="code"></a></li>
      <li class="last"><a href="#">个人中心</a></li>
    </ul>
  </div>

</body>
</html>

作业1

<style>
    .fa:hover.so
    {
        visibility: visible;
    }
    .fa
    {
        position:relative;
        top:100px;
        margin: 0 auto;
        height: 400px;
        width: 711px;
    }
    .so3
    {
        position: absolute;
        bottom: -1%;
        right: -1%;
        width: 711px;
        height: 400px;
    }
    .so:hover
    {
        background-color: grey;
        opacity: 0.5;
        border: 5px solid orange;
        z-index: -3;
    }
    .so2{
        position: absolute;
        top:45%;
        right:50%;
    }

    
    

</style>
<body>
    <div class="fa"><img src="./images1/arr.png" class="so2">
        <div class="so"><img src="./images1/sed.jpg" class="so3"></div>
    </div>    
    
</body>

作业2

笔记

   选择器复习
基本选择器: 标签、id(#id名)、类(.类名)、通配符(*)选择器{css代码}
包含选择器:子代选择器(ul>li)、后代选择器(ul li)
逗号选择器：
选择器1,
选择器2,
选择器n{}
属性选择器:
标签名[属性名="属性值"]{}
伪类选择器:
: hover
伪元素选择器:
::befoe
::after
::selection
   选择器补充
选择列表中第n个li(跳过<p>等元素)"ul li:nth-of-type(n){}"
选择列表中倒数第n个li(跳过<p>等元素)"ul li:last-of-type(n){}"
选择列表中序号为基数的li"ul li:nth-child(n){2n+1}"
   字体样式
改字体"font-family:"字体名称"(属性)"
改字体大小"font-size:"大小"(属性)"ps:经测试大小数值后应加px       例:font-syle:30px
字体倾斜"font-style:italic/oblique(属性)"
字体加粗"font-weight:bold/bolder/数值(属性)"
字体样式属性可合并   例:font: 800(字体加粗) italic(倾斜) 12px(字体大小) "微软雅黑"(字体)
   文本样式
ps:默认字体大小为14px
缩进 "text-indent:28px(默认大小)/2em(自适应)(属性)"
改行高(文字所在那行)"line-height:大小(属性)"
背景色"background-color:颜色(属性)"
文本对齐方式"text-align:???(属性)"("???"可更改为center/left/right······)
单行文本垂直居中"line-height:200px(属性)"
字符间距"word-spacing:大小(属性)"       ps：字符中间须加空格
标签水平居中"margin:0 auto(属性)"【标签居中作用于div】
文本装饰       ps:可先用"span"选取文字
下划线"text-decoration:underline(属性)"
去除默认样式"text-decoration:none(属性)"
   文本颜色
更改颜色"color:(颜色名[英文])/颜色序号/rgb(数字,数字,数字)(属性)"       ps:rgb一般会给表盘,rgb三色分别为红绿蓝;
背景颜色"background-color:(同文本颜色)/rgba(可选透明度)(属性)"
   文本方向
文本从右到左、从左到右"direction:rtl/ltr(属性)"
   列表样式
无序列表清除小黑点(默认样式)"list-style-type:none(属性)"ps:"-type"可省略
无序列表更改小黑点样式"list-style-type:样式(属性)"
无序列表以图片代替小黑点"list-style-image: url(路径)(属性)"
   背景
加入背景图片"background-image:url(路径)"
背景重复
y/x轴重复"background-repeat:repeat-y/x"
不重复"background-repeat:no-repeat"
背景图片位置"background-position:left top/······(属性)"
强行覆盖"background-size:contain/cover[这个加上背景位置看着很舒服](属性)"
背景图片依附(跟随画面)"background-attachment:fixed(属性)"
设置<a>的宽高(解锁)" display: inline-block(属性)"【原理:将[内联元素<a>]设置为[内联块级元素]】
   元素的类型
块级元素(默认情况下独占一行的标签)如"<div>[最典型]、<p>、<h1>、<li>等"
ps:块级元素可以设置宽高、行高、内外边距
内联元素(和其他元素在同一行)如"<span>[常见]、<a>[常见]等"
ps:内联元素不能设置宽高、内外边距不能设置
内联块级元素(既不会独占一行，也能够设置宽高和内外边距)如"<img>"
改变元素类型"display:元素类型(属性)"   ps:元素类型可设为"block[块级元素]"、"inline[内联元素]"、"inline-block[内敛块级元素]"
   边框
边框宽度"border-width:大小(属性)"
边框形式"border-style:形式(属性)"
边框颜色"border-color:颜色(属性)"
边框弧度"border-radius:大小(属性)"
局部边框设置"border-top/bottom(-right/left)-radius/width:大小(属性)"
可合并,例"border: 1px(宽度) solid(形式) red(颜色)"
合并相邻边框【待施工】"<table>中加cellspacing="0"(属性)"其次"<style>中table{border-collapse:collapse}"
   文本域
不允许拖拽"resize:none(属性)"
文字域位置"vertical-align:top/middle····（属性）"
   鼠标样式
改变鼠标样式"cursor:鼠标样式(属性)"
   定位
绝对定位(在窗口定位)
"position:absolute[如果没有相对定位，默认为窗口定位]
top:[从上往下多少个像素](可以使用百分比)
left:[从左往右到少个像素]
bottom:[从下往上多少个像素]
··················   "
相对定位(须为嵌套关系)
"position:relative"(类似于设置锚点)   ps:当一个分区(div)移到对应位置时，原位会被占用
定位优先级
让某物优先显示(居于最上层)"z-index:1(属性)"
固定定位
固定"position:fixed(属性)"
粘性定位
当高度为x时，带着移动"position:sticky;
       top:x px;"
   元素的显示与隐藏[透明度的设置]
法一
隐藏"display:none"
显示"display:block"
法二
透明度隐藏"opacity:0"
透明度显示"opacity:1"