relative/absolute/fixed和stick/定位/css/pc端企业类/pc端游戏类

最新推荐文章于 2024-03-14 00:15:00 发布

A_loha_

最新推荐文章于 2024-03-14 00:15:00 发布

阅读量643

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/A_loha_/article/details/127890878

版权

84～109

一、CSS定位

1.position：

static（默认）
relative
fixed
sticky

1) relative相对定位

如果没有定位偏移量，对元素本身就没有任何影响
不使元素脱离文档流
不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的

<!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>
       #box1{width: 100px;height: 100px;background-color: red;}
       #box2{width: 100px;height: 100px;background-color: blue;position: relative;left: 100px;}
       #box3{width: 100px;height: 100px;background-color: yellow;}
   </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

注：块向右移，代码应该是left 100px或者是right -100px，上下都是这样。

2）absolute绝对定位

使元素脱离文档流
使内联元素具有宽高（让内联具备宽高）
使块元素具备内联特性（让快具备内联特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先相对于整个文档发生偏移（绝对、相对、固定）

3）fixed固定定位

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

4) sticky黏性定位

在指定的位置，进行黏性操作

5) z-index定位层级

默认层级为0
嵌套时候的层级问题

※淘宝网的下拉菜单

▶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   *{margin: 0;padding: 0;}
   ul{list-style: none;} 
   #menu{ width: 100px;height: 30px;margin: 20px auto;border: 1px black solid;position: relative;}
   #menu ul{width: 100px;border: 1px black solid;position: absolute; left: -1;top: 30px;background-color: white;display: none;}
   #menu:hover ul{display: block;}
   #menu ul li:hover{background: gray;}
    p{text-align: center;}
</style>
<body>
    <div id="menu">
        卖家中心
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
    </div>
    <p>测试段落测试段落测试段落测试段落测试段落测试段落</p>
</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>
        #box1{width: 300px;height: 300px;border: black solid;position: relative;}
        #box2{width: 100px;height: 100px;background-color: red;position: absolute;left: 50%;margin: 50px 0 0 -50px;}
    </style>
</head>
<body>
    <div id="box1">
    <div id="box2"></div>
    </div>
</body>
</html>

※CSS添加省略号

width：必须有一个固定的宽
white-space：nowrap（不让内容折行）
overflow：hidden（隐藏溢出的内容）
text-overflow：ellipsis（添加省略号）

二、CSS Sprite

1)、叫做css雪碧，也叫css精灵

2)、好处是加载速度快，但会使图片质量变差

▶background：ulr（图片地址）→添加图片

三、CSS圆角设置

1)、border-radius：50%

或者是10px 20px，即为左下角右下角，右上角左下角

或者10 20 30 40 即为左上，右上，右下，左下（逆时针进行）

▶若是20px/40px，即为圆角为椭圆的一块边

▶做出半圆：150px 150px 0 0

四、pc端企业类型整页制作

1)、pc端布局

通栏：自适应浏览器的宽度

.container｛width：1080px;margin：0 auto; position：relative;｝

版心：固定一个宽度，并且让容器居中

.container-fluid｛width：100%｝

2）、

（89-99）

<br>文本的换行
利用ps合并图层，利用图片替代代码输入图形组合

五、pc端游戏类

下载资源
初始样式制作

*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
image{display: block;}
a{text-decoration: none;color: #464646;}
h1,h2,h3{font-size: 16px;}
body{font-family: Arial,'宋体';}

.l{float: left;}
.r{float: right;}
.clear:after{content: "";display: block;clear: both;}
.container{width: 980px;margin: 0 auto;position: relative;}
.container-fluid{width: 100%;}

3.主体部分制作

要注意：优先级，利用ps量取合适，用雪碧图导入图标

A_loha_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
relative/absolute/fixed和stick/定位/css/pc端企业类/pc端游戏类

84～109一、CSS定位1.position：static（默认） relative fixed sticky1) relative相对定位如果没有定位偏移量，对元素本身就没有任何影响不使元素脱离文档流不影响其他元素布局 left、top、right、bottom是相对于当前元素自身进行偏移的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
复制链接

扫一扫