css(2)

已于 2022-03-13 17:29:57 修改
阅读量880 收藏
点赞数
文章标签： css css3 前端
于 2022-03-12 16:57:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50883182/article/details/123403206
版权

文章目录

一、背景图像应用

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>

    <ul>
        <li>
            <a href="#">图书</a>
            <a href="#">音像</a>
            <a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a>
            <a href="#">办公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a>
            <a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a>
            <a href="#">钟表</a>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>
</div>
</body>
</html>

css:

#nav{
    height: 300px;
    width: 300px;
    background: cornflowerblue;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: aqua url("../static/image/1.jpg") 250px no-repeat;
}
/*background的图像放置：（分开写））
background-image:图像
background-repeat：no-repeat只放置一个
background-position位置坐标*/
ul li{
    height: 30px;
    list-style: none;
    background-image: url("../static/image/1.jpg");
    background-repeat: no-repeat;
    background-position: 240px;
}
a{
    text-decoration: none;
    font-size: 15px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

效果：
在这里插入图片描述

二、渐变

渐变需要的颜色挑选可以参考
Grabient网站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style>
        /*径向渐变，圆形渐变*/
        body {

            background-image: linear-gradient(62deg, #8EC5FC 0%, #fcc3cd 100%);
        }

    </style>
</head>
<body>
小熊是我的
</body>
</html>

效果：
在这里插入图片描述
再展示：
在这里插入图片描述

三、盒子模型及边框使用

1.盒子示意图：

在这里插入图片描述
margin:外边距
border:边框
padding:内边距

2.边框border

边框的粗细
边框的样式
边框的颜色

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body总有默认的外边距margin:8px*/
        body{
            margin: 0;
        }
        /*border粗细，样式(实线/虚线），颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        form{
            background: darkorange;
        }
        /*border的样式可以有：dash,dot-dash,dot-dot-dash,dotted等*/
        form div:nth-of-type(1) input{
            border: 2px dashed deeppink;
            border-bottom-color: cadetblue;
            border-bottom-style: dot-dash;
            border-bottom-width: 10px;
        }
        h2{
            margin: 2px;
            padding: 5px;
            font-size: 20px;
            line-height: 30px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>提交</span>
        </div>
    </form>
</div>
</body>
</html>

效果：
在这里插入图片描述

四、内外边距及div居中

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*外边距的妙用：居中元素
               全部都为0
          margin:0；
                 上下 左右
          margin:0 auto;(auto为自动对齐）
          顺时针：上右下左
          margin:0 0 0 0;
         */
        body{
            width: 300px;
            margin: 0 auto;
        }
        /*文本居中
          text-align*/
        h2{
            margin: 2px;
            padding: 5px;
            font-size: 20px;
            line-height: 30px;
            background-color: cadetblue;
            text-align: center;

        }
    </style>
</head>
<body>
<div id="box">
    <h2>登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>提交</span>
        </div>
    </form>
</div>
</body>
</html>

效果：
在这里插入图片描述

五、圆角边框及阴影

5.1圆角边框画图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*
      border-radius:
      左上 右上 右下 左下,顺时针方向
      如何画圆圈？
      圆角=半径+边框

      */
      .yan{
        width: 100px;
        height: 100px;
        border: 10px solid deeppink;
        border-radius: 100px;
      }
      /*如何画横着的半圆？*/
      .hao{
          width: 100px;
          height: 50px;
          border: 10px dashed deepskyblue;
          border-radius: 60px 60px 0px 0px;
          margin: 0 auto;
      }
      /*如何画竖着的半圆
      1/4圆：60px 0 0 0*/
      .xiang{
          width: 50px;
          height: 100px;
          border: 10px dotted red;
          border-radius: 60px 0px 0px 60px;
          text-align: right;
      }
      /*旋转30度的半圆*/
      .zhang{
          position: absolute;
          width: 200px;
          height: 200px;
          clip: rect(0px,100px,200px,0px); /*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */
          border-radius: 100px;
          background-color: palegreen;
          transform: rotate(30deg);
      }
    </style>
</head>
<body>
<div class="yan"></div>
<div class="hao"></div>
<div class="xiang"></div>
<div class="zhang"></div>
</body>
</html>

效果：
在这里插入图片描述
怎么画一个30度角的圆形呢。。。。？

5.2阴影box-shadow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*box-shadow:横着移动，竖着移动，模糊半径，颜色*/
        div{
            width: 168px;
            height: 168px;
            border: 1px solid deepskyblue;
            border-radius: 85px;
            box-shadow: 10px 10px 3px red;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果：
在这里插入图片描述

5.3居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*想要居中，使用margin: 0 auto的前提是：
         块元素，块元素要有具体的宽度
         居中的3种方法：*/
         /*1.先设置块的宽度，在margin*/
        #zhang{
            width: 168px;
            height: 168px;
            border: 1px solid deepskyblue;
            border-radius: 85px;
            box-shadow: 10px 10px 3px red;
            margin: 0 auto;
        }
        /*2.在块设置style的宽度，在该宽度下范围居中块内所有元素,用text-align,见body内代码*/
        /*3.由于img不是块元素，想要margin居中，要设置其为块元素,设置宽度，高度会压缩或扩大图片的像素*/
        .yanya{
            margin:0 auto;
            border: palegreen;
            width: 427px;
            height: 240px;
            display: block;

        }
    </style>
</head>
<body>
<div id="zhang"></div>
<div id="yan" style="width: 816px;height: 500px;text-align: center">
    yan hao xiang
<div>
    <img src="../static/image/1.jpg" alt="">
</div>
</div>
<img class="yanya" src="../static/image/4----1zhu.jpg" alt="">
</body>
</html>

效果：
在这里插入图片描述

六、display和float

标准文档流：正常布局，不会飘出来
在以前浮动多来控制图片，实现文字环绕图片的效果（字围效果）；现在主要利用浮动的特性（脱离标准文档流）来实现页面的布局

6.1display

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div默认为块元素
        block:块元素
        inline:行内元素
        inline-block:是块元素，但可以内联，在一行
        none:消失*/
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            border: 3px solid palegreen;
        }
    </style>
</head>
<body>
<div>123</div>
<span>345</span>
</body>
</html>

效果：
在这里插入图片描述

6.2float

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .yue{
            border: 2px dotted palevioletred;
        }
        .yan{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
            float: bottom;
        }
        .hao{
            border: 3px solid palegreen;
            display: inline-block;
            float: left;
        }
        .xiang{
            float: right;
            display: inline-block;
        }
        .zhang{
            float: left;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="yue">
<div class="yan">
    <img src="../static/image/1-1.jpg" alt="">
</div>
<div class="hao">
    <img src="../static/image/1.jpg" alt="">
</div>
<div class="xiang">
    <img src="../static/image/4----1zhu.jpg" alt="">
</div>
<div class="zhang">
    <img src="../static/image/1111.jpg" alt="">
</div>
</div>
</body>
</html>

效果：
在这里插入图片描述
移动窗口，布局会发生变化：
在这里插入图片描述

6.3display和float的区别

display:方向不可控制
float:浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷问题

七、overflow及父级边框塌陷问题

父级边框里的图片（内容）全部浮动起来，父级边框会消失
在这里插入图片描述
如何解决？
1.首先解决如何让它不浮动：clear:
2.让标准文档流在父级边框里面
答：
①增加父级元素的高度
②增加一个空的div标签，清除浮动
③overflow:在父级元素增加overflow:hidden,超出规定框的内容会被修剪，但是其他地方是可以见的
④（最优）父类添加一个伪类：after

 #father:after{
    content:'';
    display:block;
    clear:both;
 }

总结：
第一种：一般浮动元素增加空div:简单，但代码应尽量避免空div
第二种：元素有了固定height会限制
第三种：简单，但一些不能切除的不能用，下拉一些场景避免使用
html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .yue{
            border: 2px dotted palevioletred;
        }
        /*clear:both;两侧不允许有浮动元素，有的话会自动往下排
        clear:right;右侧不允许有浮动元素
        clear:left;左侧不允许有浮动元素
        clear:none;可以浮动元素
 */
        .yan{
            border: 3px solid red;
            display: inline-block;
            float: left;
            clear: both;
        }
        .hao{
            border: 3px solid palegreen;
            display: inline-block;
            float: left;
            clear: both;
        }
        .clear{
            clear: both;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div class="yue">
<div class="yan">
    <img src="../static/image/1-1.jpg" alt="">
</div>
<div class="hao">
    <img src="../static/image/1.jpg" alt="">
</div>
<div class="clear"></div>
</div>
</body>
</html>

效果：
在这里插入图片描述

八、定位

8.1相对定位，绝对定位，固定定位

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .yue {
            border: 2px dotted palevioletred;
            height: 1000px;
        }
        /*position:relative相对定位
        relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局,原来的位置会被保留---菜鸟教程
        top:
        bottom:
        left:
        right:
        */
        .yan{
            border: 3px solid red;
            background: peachpuff;
            position: relative;
            top:-10px;
        }
        /*position:fixed固定定位
        */
        .xiaoyan{
            height: 100px;
            width: 100px;
            background: palevioletred;
            position: fixed;
            bottom: 0;
            right: 0;
        }
        /*position:absolute绝对定位
        基于xxx定位，上下左右
        1.没有父级元素定位的前提下，相对于浏览器定位
        2.假设父级元素存在定位，我们通常会相对父级元素进行偏移
        3.在父级元素范围内移动：
        相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
         */
        .hao{
            border: 3px solid palegreen;
            background: deepskyblue;
            position: absolute;
            bottom: 0;
            right: 0;

        }

    </style>
</head>
<body>
<div class="yue">
    
<div class="yan">块1</div>
<div class="xiaoyan">63yyds</div>
<div class="hao">块2</div>
    
</div>
</body>
</html>

效果：
在这里插入图片描述
滑动页面后：
在这里插入图片描述

8.2 z-index(设置层级）

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/yan1.css">
</head>
<body>
<div id="conent">
    <ul>
        <li><img src="../static/image/1-1.jpg" alt=""></li>
        <li class="tipText">严浩翔</li>
        <li class="tipbg"></li>
        <li>time:2004-08-16</li>
        <li>地点：chongqing</li>
    </ul>
</div>
</body>
</html>

css：

#conent{
    width: 399px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
    font-size: 16px;
}
/*父级元素相对定位*/
#conent ul{
    position: relative;
    text-align: center;
}
.tipText,.tipbg{
    position: absolute;
    width: 397px;
    height: 25px;
    bottom:60px;
}
/*层级
z-index:0~max
 */
.tipText{
    color: red;
    z-index: 0;
}
.tipbg{
    background: #ffffff;
    opacity:0.5;/*背景透明度*/
}

效果：
在这里插入图片描述
若不设置透明度为0.5，会看不见“严浩翔”这三个字，因为字的层级低于白色背景，被遮挡住了。

九、动画

实现动画：
css或js或less(扩展css),canvas。
keyframes:关键帧，一般其加前缀是浏览器兼容
了解css3动画–菜鸟教程
卡巴斯基网络实时攻击地图
js动画

总结

完结撒花~~~

今天学前端了吗？
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Three 之 three.js （webgl）CSS2DObject 添加文字按钮等并与OrbitController / html button 等交互冲突的简单使用说明整理
仙魁XAN
04-17 1万+
Three 之 three.js （webgl）CSS2DObject 添加文字按钮等并与OrbitController / html button 等交互冲突的简单使用说明整理 目录 Three 之 three.js （webgl）CSS2DObject 添加文字按钮等并与OrbitController / html button 等交互冲突的简单使用说明整理 一、简单介绍 二、实现原理 在 Three js 3D 添加 CSS2D 的方法 处理 CSS2DRenderer 与 Orbit
Three.js-CSS渲染器（CSS2DRenderer）
damadashen的博客
07-29 7365
Three中css渲染器的介绍及使用，使用css2d渲染器实现地月环绕及添加标签效果。
three.js CSS2DRenderer
X01动力装甲的专栏
12-11 9806
CSS2DRenderer 这是一个2D的render，可以在页面中渲染出一个div标签。下图中的城市名称就是渲染出来的，所以地图旋转的时候文字依然能够保持直立和水平。很实用的一个功能。 let laberDiv = document.createElement('div');//创建div容器 laberDiv.className = 'label'; laberDiv...
css投影
weixin_41824429的博客
10-08 6654
css投影
css1 css2 css3 区别
damon940111的博客
02-10 7573
css1 css2 css3 区别        CSS1提供有关字体、颜色、位置和文本属性的基本信息，该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。        但自从CSS1的版本之后，又在1998年5月发布了CSS2版本，样式单得到了更多的充实。        CSS2.0提供给我们了一个机制，让程序员开发时可以不考虑显示和界面就可以制作表单和界面，显示问题可由美工或是程序员...
CSS文本设置超出2行显示省略号
热门推荐
老电影故事的博客
06-10 6万+
如图所示，当居住地址字段太长超过2行时就显示 （…） 2、强制2行或多行就要用到CSS3
CSS分享：初起步，CSS2 Properties
Elaine的专栏
07-14 5897
CSS Font Properties    字体属性Font Properties属性CSS Version版本Compatibility兼容性Inherit From Parent继承性Description简介fontCSS1/CSS2IE4+ , NS4+有复合属性。设置
CSS 阴影效果
Dominic_W的博客
05-14 3万+
CSS中，通过text-shadow、box-shadow两个属性分别为文本和元素添加阴影效果。 CSS语法 box-shadow: h-shadow v-shadow blur spread color inset; 向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 h-shadow: 必需。水平阴影的位置，可以为负值 v-shadow:必需。垂直阴影的位置，可以为负值 blur:可选，阴影模糊的
CSS表格
m0_57774967的博客
04-24 5595
一、表格边框 指定css表格边框，使用border属性 下面例子指定一个表格的th和td元素的黑色边框 html代码： css代码： 浏览器呈现效果： 注意：在上面的例子中的表格有双边框，这是因为表和th/td元素有独立的边界，为了显示一个表的单个边框，使用border-collapse属性 二、折叠边框 border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开 html代码： css代码： ...
CSS——rem
qq_48613863的博客
04-09 1万+
一、移动适配 1、什么是移动适配？ 答：就是当设备宽度不同的时候，网页元素的宽度和高度都要适配。 2、移动适配的两个解决方案。 rem：目前多数企业在用的解决方案; vw / vh：未来的解决方案。 两种都必须掌握！！！ 二、rem rem是移动适配的解决方案之一； rem就是一个单位； 回想之前学的单位，px不可以自动适配；百分比只能让宽自动适配，高还是要设置固定的值。 1、rem单位 是相对单位；rem单位是相对于HTML标签的字号计算结果；1rem = 1HTML字号大小。
CSS - 网页设计 - CSS2
06-20
2 Introduction to CSS 2.1 3 Conformance: Requirements and Recommendations 4 Syntax and basic data types 5 Selectors 6 Assigning property values, Cascading, and Inheritance 7 Media types 8 Box ...
ss_css2-0.9.3
11-05
这是一个ss_css2-0.9.3版本的jar包
three-css2drenderer:threejs正式将CSS2DRender.js与npm一起应用
05-15
三重css2drender threejs正式将CSS2DRender.js与npm一起应用 安装 npm i --save three-css2drender 用法 import * as THREE from 'three' import { CSS2DRenderer , CSS2DObject } from 'three-css2drender' let ...
css2 chm 手册
06-05
css2 chm 手册css2 chm 手册css2 chm 手册css2 chm 手册css2 chm 手册css2 chm 手册css2 chm 手册css2 chm 手册css2 chm 手册css2 chm 手册css2 chm 手册css2 chm 手册css2 chm 手册css2 chm 手册css2 chm 手册css2 ...
ss_css2.jar
06-27
ss_css2.jar一个控制器的工具类,自己写的工具类,工具类
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2838
title>充电效果
CSS实现table表格：隔行换色的效果
pan_junbiao的博客
07-12 312
表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列、标题等内容。在CSS中，可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，nth-child(odd) 可以匹配奇数行，nth-child(even) 可以匹配偶数行。使用CSS样式实现 table 表格隔行换色的效果。
css-grid布局(栅格布局)
YogaMiller的博客
07-15 535
* 数字和命名搭配搭配也可, 1 / t 注意如果是一个位置的话可省略, 比如 1 / 2 2 / 3 这里的2 3就可以省略*//* [d]150px 100px;搞不懂为什么加个命名就变小了.... *//* 目前喜欢这种的方式, 比较直观 . 表示这个位置空着 */grid 一个比flex更强大的布局,适合做整体布局。/* g-r-start g-r-end 的简称 *//* 相同的名字 代表相同的区域 */fr 只能放在第二个参数。
HTML5+CSS3小实例：纯CSS实现奥运五环
最新发布
艾恩小灰灰的博客
07-15 148
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。
CSS2DObject
05-13
CSS2DObject是three.js中的一个类，用于...使用CSS2DObject可以方便地在three.js场景中创建2D标签，并且可以通过CSS样式表来控制标签的外观和行为。例如，可以使用CSS样式表来设置标签的位置、大小、颜色、字体等属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今天学前端了吗？

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值