css整理二

最新推荐文章于 2024-08-12 22:06:26 发布
最新推荐文章于 2024-08-12 22:06:26 发布
阅读量105 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38874239/article/details/111476021
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 50px;height: 50px;background-color: black;color:white;
     position: fixed; <!--固定在页面的某个位置-->
     bottom:20px;
     right:20px;
     ">返回顶部</div>
   <div style="height: 5000px;background-color: #dddddd;"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color: #dddddd;
            position: fixed;
            top:0;
            left:0;
            right:0;
        }
        .pg-body{
            background-color: #dddddd;
            height: 5000px;
        }
    </style>
</head>
<body>
   <div class="pg-header" style="margin-top:2px">头部</div>
   <div class="pg-body" style="margin-top:61px;">内容</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin:0 auto">
       <div style="position: absolute;left:0;bottom:0;width:50px;height: 50px;background-color:black;"> </div>
   </div>

   <div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin:0 auto">
        <div style="position: absolute;right:0;bottom:0;width:50px;height: 50px;background-color:black;"> </div>
   </div>
   <div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin:0 auto">
        <div style="position: absolute;left:0;top:0;width:50px;height: 50px;background-color:black;"> </div>
   </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="z-index:10;
    position:fixed;
    top:50%;
    left:50%;
    margin-left: -250px;margin-top:-200px;
    background-color:white;
    height: 400px;
    width:500px;
    ">
    老夫的少女心啊
    </div>
   <div style="z-index:9; position: fixed;background-color: #dddddd;
    top:0;
    bottom:0;
    right:0;
    left:0;
    opacity:0.5; <!--设置透明度-->
    "></div>
   <div style="z-index:8;height:5000px;background-color: red;">
       adfads
   </div>
</body>
</html>

overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div style="height: 200px;width: 300px;overflow: auto">
       <!--overflow: hidden超出隐藏，auto出现滚动条-->
       <img src="萤火虫.jpg">
   </div>
</body>
</html>

hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right:0;
            left:0;
            top:0;
            height: 48px;
            background-color:#2459a2;
            line-height: 48px;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
       
        .pg-header .menu:hover{
            background-color: blue;
        }
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px; <!--0是上下，10是左右-->
            color: white;
        }
    </style>
</head>
<body>
   <div class="pg-header">
       <div class="w">
           <a class="logo">LOGO</a>
           <a class="menu">全部</a>
           <a class="menu">全部1</a>
           <a class="menu">全部2</a>
           <a class="menu">全部3</a>
       </div>
   </div>

   <div class="pg-body">
        <div class="w">a</div>
   </div>
</body>
</html>

background-image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div style="background-image:url('萤火虫.jpg');height:180px; background-repeat: no-repeat;">
    <!--no-repeat不重复，repeat-x水平重复，repeat-y垂直方向重复-->
   </div>
</body>
</html>

小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

   <div style="height: 35px;width: 400px;position: relative;">
        <input type="text" style="height: 35px;width: 370px;padding-right:30px;" />
        <span style="position:absolute;right:0;top:10px;background-image: url(萤火虫.jpg);height: 20px;width: 20px;display:inline-block;"></span>
    </div>
</body>
</html>

在这里插入图片描述

qq_38874239
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML CSS整理笔记
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
常用css整理
nemengv的博客
04-07 131
网站整体变灰（适用于悼念） html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }
CSS整理总结1
2301_81641896的博客
07-09 659
标签选择器标签名{ /*CSS样式*/ };类选择器 .类名{ }；ID选择器#id名{ }；属性选择器[ 属性 / 属性=值] { }；//指定特定属性且属性值等于指定值的所有元素。组合选择器：通过将两个或多个简单选择器组合起来，以选择更具体的元素。可使用逗号（,）、空格（ ）、加号（+）和大于号（>）进行选择器的组合和连接，从而实现不同的选择器关系和选择器组合效果。选择 ul 元素的所有直接子元素 li。
CSS面试题整理汇总
山雀的博客
03-13 4741
CSS面试题汇总
二锅头帮你整理CSS
qq_61854038的博客
07-19 1108
内联（行内）样式html中的所有标签都有style属性，在style属性中直接写入css样式。由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格第一个必须是标签选择器，第二个必须是类选择器或者ID选择器示例div.codeup{设置文本的装饰none默认，标准文本underline定义文本下划线overline定义文本上划线line-through定义穿过文本的一条线。使用类（class）选择器使用标志符（句点）开头后面写上类的名称。............
CSS整理
vona_on的博客
06-07 56
css样式大全(整理版）
weixin_66059613的博客
12-28 6778
css样式大全(整理版）
常见 css 布局整理
欢迎来到Gorit的博客
02-11 2524
常用 css 布局学习整理一、垂直居中二、等分布局三、等高布局四、多列布局五、局中布局（垂直居中）六、全屏布局七、三列布局八、圣杯布局九、双飞翼布局十、水平居中十一、css 布局特别整理 注意： 代码里面都有比较详细的注释 项目代码全部已经上传至 码云 和 Github，两个仓库我会同步更新 码云 git 下载地址：git@gitee.com:gorit/Coding-with-Front-end...
常用CSS样式整理
iMeta
01-26 888
CSS文件中引用CSS文件@import url("base.css");角标实现div{ vertical-align：super }小三角实现.triangle{ display:block; width:0; height:0; border-width:0 8px 8px; border-style:solid; border-color:transparent t
css整理与优化工具
Cool的博客
09-29 707
http://www.css88.com/tool/csstidy/
超全面CSS样式整理
09-27
在本文中，我们将深入探讨CSS（Cascading Style Sheets...以上就是CSS样式整理中的主要知识点，熟练掌握这些属性将有助于创建更具吸引力和功能性的网页。在实践中不断探索和实验，你会发现CSS能创造出无穷无尽的可能。
css整理笔记
10-23
### CSS整理笔记：深入理解样式应用与选择器 在网页设计与开发中，CSS（层叠样式表）扮演着至关重要的角色，它负责定义网页的布局、颜色、字体等视觉表现，使网页不仅功能强大，而且美观吸引人。本文将从CSS的基础...
优秀的CSS 框架整理
09-25
6. **CleverCSS**：CleverCSS是一种简洁的CSS预处理器，灵感来源于Python，其语法简洁明了，功能强大，甚至超越了CSS2。 7. **Tripoli CSS Framework**：Tripoli致力于重置和重建浏览器默认样式，确保跨浏览器的...
CSS属性简写整理
09-25
在书写css过程中尽量简写css属性,有助于写出高效整洁的css,本文将常用的一一列出，需要的朋友可以参考下
CSS的重绘和重排是什么？
最新发布
沐爸的博客
08-12 764
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
css实现水滴效果图
yinge0508的博客
08-12 456
【代码】css实现水滴效果图。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 743
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
CSS（层叠样式表）
Chujun123528的博客
08-09 1195
CSS全称为Cascading Style Sheets（层叠样式表），是一种用于描述网页样式的语言。它可以将HTML文档中的内容与样式分离，使得网页的结构和呈现分离，提高了页面的可维护性和可重用性。CSS允许开发者对HTML元素进行各种视觉方面的样式控制，包括文字和字体属性、颜色和背景、布局和定位等。
CSS文本两端对齐
yan1915766026的博客
08-07 406
表单两端对齐怎么写？一个个加空格？叫你CSS轻松搞定
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值