CSS-8 做网页案例留下的笔记

龙猫呗

已于 2023-05-10 16:36:05 修改

阅读量54

点赞数

分类专栏： CSS 文章标签： css 学习笔记

于 2023-05-08 19:31:23 首次发布

本文链接：https://blog.csdn.net/qq_54075517/article/details/130565530

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

案例

1_小米界面布局

还是得看代码，运行对照看，才有所收获

/* 防止高度坍塌，清除浮动-伪类方法 */
.clear_fix::after {
  content: "";
  display: block;
  clear: both;

  height: 0;
  visibility: hidden;
}
/* 兼容Internet Explorer 7 以及以下版本浏览器 。因为Internet Explorer 版本 7 以及以下承认非字母数字（除了下划线）前缀的属性*/
.clear_fix {
  *zoom: 1;
}

.dress .list .item:hover {
      box-shadow: 0 15px 30px rgba(0,255,0,1);
      /* top: -2px; */
      transform: translateY(-2px);
      /* 在css样式中，很多人都喜欢使用translate()来表示位移，可以使用translate()中的x和y来表示元素在水平方向或者垂直方向上移动 */
}
    

.dress .list .item {
      float: left;

      /* box model */
      width: 234px;
      height: 300px;
      margin-right: 14px;
      margin-bottom: 14px;

      background-color: rgb(236, 217, 175);

      /* 动画 */
      transition: all 0.3s ease-in;
   /* CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 
   transition主要包含四个属性值：transition-property（执行变换的CSS属性）,transition-duration（变换持续时间）,transition-timing-function（变换速率变化）transition-delay（变换延迟时间）。
*/   
    }

2_网易云音乐界面，分组件

案例代码在资料中，自己也跟敲代码

网站SEO优化之【logo设置篇】

这里的笔记摘抄自https://blog.csdn.net/weixin_43837268/article/details/109035452

<style>
/* header 头部制作 */
.header {
    position: relative;
    height: 105px;
 
}
.logo {
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;
    
}
.logo a {
	/*  对于行内非替换元素需要设置成块元素*/
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;
    /* font-size: 0;京东的做法*/
    /* 淘宝的做法让文字隐藏 */
    text-indent: -9999px;
    overflow: hidden;
}
</style>   

    <header class="header w">
        <div class="logo">
            <h1> 
                <a href="index.html" title="品优购商城">品优购商城</a>
            </h1>
        </div>
    </header>

logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要
h1里面再放一个链接，可以放回首页的，把logo的背景图片给链接即可。
为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但文字不要显示出来。

方法1：text-index移到盒子外面（text-index:-9999px），然后overflow:hidden，淘宝的做法
方法2：直接给font-size:0;就看不到文字了，京东的做法
最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了链

疑惑1_子绝父相，子元素要在父元素的区域居中

正常布局中，margin:0 auto就相当于top和bottom设置为0，left和right设置为auto
position: absolute会使这个块脱离正常的文档流
设置top: 0; left: 0; bottom: 0; right: 0;会给这个块提供一个新的边界盒（bounding box）。这种情况下，这个块会填满它的偏移父元素的全部可用空间（偏移父元素：offset parent，指position: relative的父元素或者是body）
给这个块指定width或者height会阻止它占据全部可用空间，转而由浏览器根据这个新的边界盒自动计算margin
由于这个块脱离了正常的文档流，同时有一个新的边界盒，因此浏览器可以很容易地为它提供相等的margin-top与margin-bottom值，从而使它垂直居中

.topbar .bar-left .list .item{
	/* 父元素*/
        position: relative;
        display: block;
        padding: 0 20px;
        color: #ccc;
}

.topbar .bar-left .list .item.active::after{
/* 子元素*/
        content: "";
        position: absolute;
        /* 子abosolute绝父relative相 */
        width: 12px;
        height: 7px;
        bottom: -2px;
        left: 0;
        right: 0;
        margin: 0 auto;
        background: url(./images/topbar_sprite.png) -226px 0;
}

疑惑2_定位属性的上下左右，其正负值对应方向

对照文档后自己理解的：

正数值的上下左右方向都是以原来的位置为起点，终点为盒子中心

position: relative; 
left: 100px;
top: 100px;
/* 上面css效果就是，该元素相对于自己原来的位置 ：
从左向右移动100px【left: 100px】
从上向下移动100px【top: 100px】
*/

学习前端需注意

不要因为案例看起来自己懂了就不去上手敲代码，等自己真正上手的时候，其实问题很多
一定要耐心地敲代码，速度可以慢，但是一定要知道在什么地方加代码，作用是什么

border与宽度高度的理解

设置宽高后，形成了一个矩形，内容content在矩形里面
宽度高度是针对内容content的大小设置的
border是在内容content外面，也就是border在宽高形成的矩形外面

关于border-sizing：border-box

一般只有在设置了宽高的情况下，border-sizing：border-box才生效
未设置border-sizing：border-box，宽高与border互不打扰
设置border-sizing：border-box后，border被包含在内容content里面，宽高形成的矩形内部多加了一圈border，然后内容content会缩小
当设置了flex布局且，flex=1时，border-box也会起效

设置文字超出一定范围显示… 不起效

在其对应父元素设置overfolw: hidden;
【我的想法】检查该元素是否设置了宽度

老师遇到问题的解决思路

先创建一个demo【即测试用例】，检查是否能达到自己的预期
若第一步行不通，再去看官方文档对该属性的描述
还是不行，再去网上广泛搜索

精灵图的图标位置可以微调

如果发现精灵图的位置没有达到预期

可以对background-position的数值微调（官网上精灵图的位置数值未必精准）
利用css相关布局属性微调

鼠标放在某位置范围内，图标出现，否则不出现

下面举例

.rank-section .rank .list .item .operation {
        display: none;
        width: 82px;
        align-items: center;
      }

.rank-section .rank .list .item:hover .operation{
        display: flex;
      }

是在".item"后面加":hover"，而不是在“.operation”后面