京东网站仿写（2）

最新推荐文章于 2023-11-04 00:03:52 发布

木易一

最新推荐文章于 2023-11-04 00:03:52 发布

阅读量946

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/weixin_43684713/article/details/84585508

版权

HTML+CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

二、技术要点

12.背景图片

CSS样式里background-image: url("此处为图片地址");

雪碧图：CSS雪碧图的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

background-position（图片位置）

background-repeat （背景图片是否平铺）

13.多层效果

当我们需要用到多个层来体现效果时，需要给最下面的一层相对定位，上面的层绝对定位，进而通过z-index ,top,right,left,bittom等属性来调整上层效果的位置，从而达到多层效果。

eg:


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .a{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: palevioletred;
            margin: 0 auto;
        }
        .b{
            position: absolute;
            z-index: -1;
            border: 5px solid black;
            width: 210px;
            height: 210px;
            left: 550px;
            top: 2px;
        }

    </style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>

代码运行结果如图所示：

14.magin：2px (上)3px（右） 4px（下） 5px（左）;

15.float left一行放不下会自动换行

16.子元素浮动，父级元素样式搭配使用0verflow hidden则父级元素自动撑开

17.不透明膜的写法

网站中很多图片在鼠标悬停时会出现不透明膜质感的效果，主要是应用多层效果实现，先隐藏，当鼠标悬停时显示。部分效果呈现速度比较缓，是利用了CSS3里面的样式效果，前期仅利用CSS样式写出来的效果显示比较直接。

eg：


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .a{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: palevioletred;
        }
        .b{
            width: 200px;
            height: 200px;
            position: absolute;
            z-index: 2;
            top: 0;
            background-color: rgba(255, 255, 255, 0.39);
            display: none;
        }
       .a:hover .b{
           display: block;
       }

    </style>
</head>
<body>
<div class="a">
    <div class="b"></div>
</div>
</body>
</html>

鼠标悬停前：鼠标悬停：

18.渐变色

某些模块背景需要使用渐变色，渐变色样式为：

background: linear-gradient(180deg（角度，即渐变方向）,white（颜色1）, #f4f4f4（颜色2）);

eg:

代码运行结果：若将180deg变为90deg,则

19. opacity属性

opacity是一个css3属性，该属性用于设置元素的不透明度级别，所有的浏览器都支持这个属性。
语法：opacity: value|inherit;
参数说明：
value ：规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。值越小越透明。
inherit：应该从父元素继承 opacity 属性的值。

20.filter属性

filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

eg:

原图为样式中加入filter: blur(5px);代码，效果为

21. 消除span a 之间产生默认的间距4px

1.直接float

2.去给父级元素添加字体大小为0px就可以去除

23.悬停出现文本框

title="(此处为文字)"

eg: 显示结果：

24.侧边栏

使用固定定位

position: fixed;

eg:


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .a{
            margin: 0 auto;
            position: relative;
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
        .b{
            position: fixed;
            right:0;
            top: 0;
            width: 20px;
            height: 100%;
            background-color: #7A6E6E;
        }
    </style>
</head>
<body>
<div class="a">
    <div class="b"></div>
</div>
<div class="c" style="height: 2000px"></div>
</body>
</html>

运行结果如图：

25.超出文本以省略号显示

eg：如图所示情况，要求超出文本以省略号显示

代码：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .a{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            overflow: hidden;//超出部分隐藏
            text-overflow: ellipsis;//显示省略符号来代表被修剪的文本
            white-space:nowrap;//规定段落中的文本不进行换行
        }
    </style>
</head>
<body>
<div class="a">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</body>
</html>

运行结果：