CSS2完结（结合前面）

于 2024-08-26 16:26:55 发布
阅读量374 收藏 1
点赞数 7
文章标签： css html vscode 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wozhaonue_w/article/details/141566735
版权

CSS2基础

浮动

概念：

  • 早期：实现文字环绕图片或者文字环绕文字（通过伪元素选择器实现）的效果
  • 现在：主流的布局方式之一

特点：

  1. 不管什么类型的元素，都按照文字环绕图片的效果实现

  2. 脱离文档流，浮动起来，元素大小默认被内容撑开

  3. margin和其他内容区以外的内容可以完美设置

  4. 浮动后不会当成行内块处理

  5. 一个浮动元素会尽量向左或向右移动，知道他的外边缘触碰到包含框或另一个浮动框的边框为止

    文档流：元素默认排列方式贴在网页这个“画板上”

    特点1 特点4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            height: 400px;
            background-color: skyblue;
            font-size: 20px;
            padding: 1px;
        }
        img{
            width: 200px;
            float: left;
            margin: 10px;
        }
        .test::first-letter {
            font-size: 100px;
            margin: o.5em;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <img src="../favicon.ico" alt="">
        Lorem ipsum dolor sit 
    </div>
    <br>
    <div class="test">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, id. Quidem unde officiis delectus iure laudantium aut officia velit itaque? Sapiente delectus distinctio non, quis, molestias similique maxime magni quia quo quibusdam tempore ea quaerat dignissimos suscipit minus ab incidunt reprehenderit quos, quam ipsam tenetur qui? Sit vero corrupti, magnam quod architecto temporibus accusamus aliquam, autem sint perspiciatis nobis eveniet natus facilis expedita beatae dignissimos nemo rerum nesciunt animi? Fugiat laboriosam consequuntur aspernatur quo, nemo quia rem et eligendi unde ea autem blanditiis? Quam voluptatem nostrum, molestiae sit, quidem nisi voluptas hic, distinctio provident quod eius totam debitis dolor modi!
    </div>
</body>
</html>

特点2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 600px;
            height: 600px;
            background-color: skyblue;
            font-size: 20px;
        }
        .box1 {
            background-color: orange;
        }
        .box2 {
            background-color: blueviolet;
            float: left;
        }
        .box3 {
            background-color: red;
            float: right;
        }
        .box {
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>
</html>

影响：

  1. 兄弟元素会被其他浮动的元素影响
  2. 父元素高度塌陷，脱离文档流致使父元素的兄弟元素被父元素的浮动元素遮挡

父元素设置宽度依然会限制子元素浮动的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 600px;
            background-color: gray;
            border: 1px solid black;
        }
        .box {
            height: 100px;
            width: 100px;
            background-color: skyblue;
            border: 1px solid black;
            margin: 10px;
        }
        .box1,.box2,.box3 {
            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box0">0</div>
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <!-- <div class="box box4">4</div> -->
    </div>
    <!-- <div style="background-color: orange;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt libero maxime ea, eum deserunt doloribus ratione blanditiis aperiam ipsum, iure hic consequuntur neque consectetur ullam. Quos fugiat ducimus magni, possimus porro eaque eveniet temporibus repellat aliquid quis at iste repellendus atque corporis tempora ab? Illo totam est vel earum sint facilis reiciendis incidunt nam reprehenderit nostrum? Repellat, assumenda vitae? Consequuntur eum ducimus nihil reiciendis voluptas deserunt, aspernatur vero ea corporis recusandae. Quasi, velit reiciendis! Impedit quaerat accusamus et, exercitationem velit, illo ipsa officia possimus ab rerum, earum nemo obcaecati quis fugit perspiciatis blanditiis nesciunt! Tempore nisi voluptates magni doloribus voluptas accusantium minima veniam rem non, et aliquid numquam consequatur quas, odit ratione tenetur nam delectus adipisci doloremque voluptate porro quod nobis eaque. Voluptatum dolores vitae, sequi numquam natus sed ratione optio harum quam quod facere reiciendis ipsam, voluptates deleniti maxime nihil molestias blanditiis repellat earum ex culpa? Eveniet sunt est voluptate, ab ad itaque, libero, molestiae unde expedita voluptatibus vitae dicta dolores dolore consectetur aliquam pariatur soluta blanditiis aspernatur rem. Sapiente architecto nemo accusamus quo deleniti asperiores odit dolorem, beatae maxime inventore reprehenderit obcaecati laborum aut eligendi natus nihil id magni provident quae ipsum voluptate. Eaque culpa modi odit voluptas.</div> -->
</body>
</html>

在这里插入图片描述

解决方法：

希望达到效果：

父元素的高度不塌陷，后边兄弟元素的排版不会受到影响

  1. 给父元素设置高度
  2. 给父元素也设置浮动属性，但会带来其他影响
  3. 父元素设置overflow的值为hidden
  4. 父元素最后一个子元素设置clear为both属性
  5. 父元素通过伪元素选择器在最后设置一个没有内容的块级元素来专门进行消除浮动的影响

clear是专门用来消除浮动影响的属性，但使用clear自身的元素必须不能浮动而且不是行内元素

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 600px;
            /* 方案一 给父元素加高度 */
            /* height: 122px; */
            background-color: gray;
            border: 1px solid black;
            /* 方案二 给父元素也设置浮动 */
            /* float: left; */
            /* 方案三 给父元素设置overflow */
            /* overflow: hidden; */
        }
        .box {
            height: 100px;
            width: 100px;
            background-color: skyblue;
            border: 1px solid black;
            margin: 10px;
        }
        .box1,.box2,.box3 {
            float: left;
        }
        /* 方案四 给父元素设置一个最后的子元素，没有内容，用来清除浮动的影响 */
        /* .magic {
            clear: both;
        } */
         /* 方案五 给父元素的最后设置一个无内容的伪元素来清除浮动的影响 */
        .outer::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <!-- <div class="box box4">4</div> -->
        <!-- <div class="magic"></div> -->
        <!-- <div style="background-color: blueviolet;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, consectetur voluptatibus quo culpa beatae repellat mollitia blanditiis ratione dolore assumenda alias labore maxime voluptate deleniti sed, enim aliquid eligendi iure nemo minus. Labore totam ratione numquam iure nostrum voluptate voluptas error quibusdam non vero ducimus ipsam, doloremque aspernatur, hic, ut nulla accusamus quo alias impedit. Fuga sapiente natus quaerat placeat quis, quidem pariatur temporibus porro et facilis incidunt quas harum! Eligendi facilis provident optio saepe ut aliquam, quae, quaerat vero omnis blanditiis fugit pariatur, placeat ipsa numquam adipisci soluta unde. Consequatur sit voluptas debitis. Eos quod, suscipit nisi id aut doloremque beatae omnis tempore ut doloribus molestiae similique pariatur harum? Ipsam suscipit illo quaerat quibusdam fugiat in aliquam doloremque rerum, fugit repellat. Nihil porro autem, at neque soluta, corrupti quas velit exercitationem voluptas reiciendis ipsum quasi sed incidunt quibusdam aut possimus libero reprehenderit eius hic harum aliquid molestiae cupiditate dicta! Eligendi animi distinctio asperiores inventore? Sequi, aut cumque voluptatem et repellat ipsa perferendis ullam odio ad iure reiciendis laudantium nemo vero rerum harum! Rerum eius et dolore? Perspiciatis dolore laudantium doloribus eos asperiores mollitia excepturi obcaecati consectetur quidem iure! Praesentium culpa aperiam in iusto quia quibusdam reprehenderit aliquid qui incidunt?</div> -->
    </div>
</body>
</html>

在这里插入图片描述

[!NOTE]

属性名属性值
floatleft，right，none（不浮动，默认值）
clearleft，right，both（消除左右浮动的影响）

定位

相对定位

概念：

元素相对自己本身的位置进行移动，但当时占据的位置不改变，块级元素依旧占据整行，行内块和行内元素也依旧占据着原本的位置

相当于样式的移动，但原本所占据的位置不会改变

[!CAUTION]

  • 可以超出父元素content
  • 层级>普通元素
  • 可以给出负值
  • 可以和浮动，margin一起使用，但不推荐
  • 没有脱离文档流

优先级：

  • **左右（上下）**不可以同时写，如果一起写了，**left（top）**优先
  • 后写定位层级 > 先写定位层级

使用步骤：

  1. 写上属性名position，属性值为relative
  2. 写上下左右任意方向对应的移动方向的px

作用：

  1. 进行微调
  2. 与绝对定位配合使用（常用）

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 500px;
            background-color: gray;
            border: 1px solid black;
            padding: 10px;
        }
        .box {
            width: 200px;
            height: 200px;
            font-size: 30px;
        }
        .box1 {
            background-color: blueviolet;
        }
        .box2 {
            background-color: orange;
            position: relative;
            bottom: 200px;
            /* float: left; */
        }
        .box3 {
            background-color: brown;
        }
        
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>
</html>

绝对定位

概念：

被设置为绝对定位的元素，参考它的包含块进行定位，并且彻底脱离了文档流，本来占据的位置消失，但如果还在本来位置上，还遮挡住下面的元素

包含块:

1.若是没有脱离文档流的元素，父元素就是他的包含块

2.若是脱离文档流的元素，第一个开启定位的祖先元素就是包含块，若没有，则最老的祖先元素就是包含块

[!CAUTION]

  • 可以写负值

  • 可以与margin同时使用，但不推荐，且有所限制

  • 不可与浮动共存，绝对定位>浮动

  • 是对浮动布局的辅助

    限制：只有用了定位中的left才可以使用margin-left且兼容性差

使用步骤：

  1. 写下属性名position，值为absolute

  2. 写下上下左右方向的位移px

    同相对元素一样，上下，左右不可以同时使用

补充：

设置了绝对定位的元素，就变成了定位元素

定位元素：默认由内容撑开，宽高可以设置

可以用来进行鼠标悬停的局部页面覆盖或者移除

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 500px;
            background-color: gray;
            border: 1px solid black;
            padding: 10px;
            position: relative;
        }
        .box {
            width: 200px;
            height: 200px;
            font-size: 30px;
        }
        .box1 {
            background-color: blueviolet;
        }
        .box2 {
            background-color: orange;
            position: absolute;
            bottom: 210px;
        }
        .box3 {
            background-color: brown;
        }
        
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <!-- span元素代替下面的div -->
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>
</html>

悬停前：
在这里插入图片描述

悬停后：

固定定位

概念：

元素参考视口来进行定位

视口:你能看到的网页，不论移动，放大或者缩小

[!CAUTION]

  • 脱离文档流
  • 设置了固定定位后元素成为定位元素
  • 同绝对定位一样，加了left，才可以使用margin-left，但兼容性差，不推荐

使用步骤：

  1. 设置属性名position，值为fixed
  2. 设置上下左右方向的位移px（上下，左右不可以同时使用）

作用场景：

  1. 回到顶部的设计，跟着视口移动
  2. 狗皮膏药广告，一直挂在视口上

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 500px;
            background-color: gray;
            border: 1px solid black;
            padding: 10px;
            height: 2000px;
        }
        .box {
            width: 200px;
            height: 200px;
            font-size: 30px;
        }
        .box1 {
            background-color: blueviolet;
            position: fixed;
            right: 0px;
            bottom: 0px;
        }
        .box2 {
            background-color: orange;
            bottom: 200px;
        }
        .box3 {
            background-color: brown;
        }
        
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>
</html>

粘性定位

概念：

元素参考离它最近的拥有**“滚动进制”的祖先元素**，当距离一个方向剩下多少指定位移px时，元素产生粘性，当其父元素消失，元素粘性消失

滚动机制：拥有滚动条，但可不可以滚动都可以

[!CAUTION]

  • 不会脱离文档流
  • 可加浮动，不推荐
  • 可加margin，不推荐

使用步骤:

  1. 设置属性名position，值为sticked
  2. 通过设置上下左右等来产生粘性效果

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .page-header {
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: orange;
        }
        .item {
            background-color: #ccc;
        }
        .first {
            font-size: 40px;
            background-color: skyblue;
            position: sticky;
            top: 0px;
        }
        body {
            height: 2000px;
        }
        

    </style>
</head>
<body>
    <!-- 头部区域 -->
     <div class="page-header">头部</div>
     <!-- 内容区 -->
      <div class="container">
        <!-- 每一项 -->
        <div class="item">
            <div class="first">A</div>
            <h2>A1</h2>
            <h2>A2</h2>
            <h2>A3</h2>
            <h2>A4</h2>
            <h2>A5</h2>
            <h2>A6</h2>
            <h2>A7</h2>
            <h2>A8</h2>
        </div>
        <div class="item">
            <div class="first">B</div>
            <h2>B1</h2>
            <h2>B2</h2>
            <h2>B3</h2>
            <h2>B4</h2>
            <h2>B5</h2>
            <h2>B6</h2>
            <h2>B7</h2>
            <h2>B8</h2>
        </div>
        <div class="item">
            <div class="first">C</div>
            <h2>C1</h2>
            <h2>C2</h2>
            <h2>C3</h2>
            <h2>C4</h2>
            <h2>C5</h2>
            <h2>C6</h2>
            <h2>C7</h2>
            <h2>C8</h2>
        </div>
        
        
      </div>
</body>
</html>

定位的特殊应用

补充：

用了定位后子元素位置会越过父元素的padding

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 让定位元素充满父元素
        特例：left和right，top和bottom可以同时使用
        */
        .outer {
            height: 400px;
            background-color: #ccc;
            position: relative;
        }
        .inner {
           
            font-size: 20px;
            padding: 20px;
            border: 2px solid black;
            background-color: skyblue;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">大圣</div>
    </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 800px;
            height: 200px;
            position: relative;
            background-color: #ccc;
        }
        .inner {
            width: 400px;
            height: 100px;
            position: absolute;
            background-color: skyblue;
            /* 方案一
                使用的元素不可以没有宽高
            */
            /* top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto; */
            /* 方案二 */
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -50px;
        }
        
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

布局

版心

概念：

一个固定宽度且水平居中的盒子，宽度大概在960~1200之间

这个宽度是通过数据调查得到的，对多数浏览器都好使

应用：

设置一个满网页的宽度的盒子，在里面再设置一个版心填充内容

有些网页设置响应式，不同像素点下，网页的显示效果会有所不同

常用布局名字

布局类型名字
顶部导航条topbar
页头header，page-header
导航nav，navigator，navbar
搜索框search，search-box
横幅，广告等banner
主要内容content
侧边栏aside，sidebar
页脚footer,page-footer
新闻news

等等等等…

重置默认样式

概念：

由于当今网页的实现越来越精细化，导致以前的默认样式变得没有那么必要，因此设置了一些方法来重置默认样式

方法：

  1. 全局选择器（不常用）
  2. reset.css（有些大厂会有自己独特的方式来重置默认样式）
  3. normallize.css（使各大浏览器可以实现标准化，众多大厂在进行维护，通过数据来保留有价值的样式）

方法3增加了对html5的元素的设置

开发时可以根据实际情况选择

normalize的网站，有兴趣可以查看

超雄代码狂
关注
  • 7
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS与HTML结合的方法PPT.ppt
10-31
标题中的“CSS与HTML结合的方法PPT.ppt”是一个关于如何将CSS（层叠样式表）与HTML（超文本标记语言）相结合以实现网页样式的教程。描述中提到的也是同一件事情，即介绍CSS与HTML结合的几种方式。以下是详细的知识点...
CSS2+DIV.doc
07-20
` 用于移除列表项前面的项目符号，常用于结合`div`元素实现自定义的列表布局。 - **Overflow 属性**：`overflow: hidden;` 用于控制元素内容溢出时的行为。设置为`hidden`时，元素内容超出的部分会被裁剪，且不显示...
css2和css1,CSS1，CSS2选择器详解
weixin_35562134的博客
08-03 565
第一、CSS选择器：1、元素选择器(也叫标签选择器，是最基本的选择器)html{background-color: red;}div{background-color: yellow;}2、ID选择器(id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 "#" 来定义)#boxl{color:blue;}2.1、结合元素的ID选择器：/*ID是box的div标签*...
nextjs和css的结合
weixin_45645373的博客
07-12 833
nextjs和css结合 最近学习nextjs，在css上踩了不少的坑，nextjs对于css的约束相比于平常开发要多一些，另外还和css module结合，很容易出错，下面把nextjs和css结合总结下来。 _app.js 在全局的_app.js中nextjs和正常开发使用一样，直接import引入就行 import '../styles/page/comm.css' import 'antd/dist/antd.css' function MyApp({ Component, pageProps })
纯HTML+CSS网页设计期末作业（个人网站）
热门推荐
weixin_47138646的博客
11-14 31万+
目录纯HTML+CSS网页设计期末作业（个人网站）效果展示源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.csssongci.htmlsongci.css缺陷 纯HTML+CSS网页设计期末作业（个人网站） 效果展示 index 页面 about 页面 hobbies 页面 书籍介绍页面 元曲介绍页面 源码 index.html <!DOCTYPE html> <h
Unigui Web结合html+js+css
qq_37265818的博客
07-12 701
Unigui结合html、css、js相关使用，让工程变得更加美观，实现跟其它web一样效果；
2.css
qq_42743223的博客
02-12 2174
课程目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很.
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进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
2. css
ximingx
05-26 1419
CSS 一: 初识 1. css 介绍 CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 作用 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 2. 使用方式 外链式CSS <link href="css文件地址" type="text/css" rel="stylesheet" /> 导入式CSS <style> @import url('CSS文件地址'
2.CSS 使用 transition过渡 属性 和 transform变化 属性实现动画效果
m0_62536448的博客
06-21 1044
在实现鼠标悬浮时盒子上移的动画效果时，发现盒子移动地很死板并且由于给盒子添加了浮动的属性，盒子一上移下面的盒子就会有了空间而改变位置，在使用了transition和transform属性后很好地解决了这些问题，借此文章来记录一下transition和transform属性的基本使用。
使用css结合js实现html文件中的双行混排
yivifu的专栏
03-06 588
本文介绍了一种用js结合css实现在HTML中进行双行合一排版的方法。
CSS基础（超详解）
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS与HTML的结合方式
12-15
2. **内部样式表**：在HTML文档的`<head>`部分使用`<style>`标签来定义CSS样式，可以应用于整个页面。例如： ```html p {color: red;} ``` 3. **外部样式表**：创建一个`.css`文件，然后在HTML文档中通过...
纯CSS3复古磁带唱片动画特效
07-14
【纯CSS3复古磁带唱片动画特效】是一种利用现代CSS3技术实现的视觉效果，它旨在重现旧时代的盒式磁带播放器的转动动画。在网页设计中，这种动画可以增添一种独特的怀旧氛围，吸引用户的注意力，提高用户体验。本文将...
html+css pdf
01-03
在 HTML 和 CSS 结合使用中，CSS 是一种标记语言，用于给 HTML 结构设置样式，例如文字大小、颜色、元素宽高等。简单理解：CSS 可以美化 HTML，让 HTML 更漂亮。核心思想：HTML 搭建结构，CSS 添加样式，实现了结构...
CSS有趣知识
weixin_42376775的博客
08-20 282
5.分开写：border-top-ldft-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius。2.如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%4.该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角、右下角、左下角。CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。3.如果是个矩形，设置为高度的一半就可以做。
PHP 实战：动态更改 CSS 值
Rverdoser的博客
08-21 340
这段代码演示了如何在PHP中动态设置CSS变量的值，并在HTML文档中使用这些变量。它使用CSS自定义属性（也称为CSS变量），然后通过。选择器在文档的任何地方使用它们。这样做可以让你在不修改CSS文件的情况下，根据用户的不同或其他上下文来改变样式。
Tailwind CSS的介绍和使用
mq1314520_zhl的博客
08-21 378
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。Font Family - TailwindCSS中文文档 | TailwindCSS中文网。
小兔鲜首页制作css
最新发布
qq_65046523的博客
08-21 432
项目名-客户端xtx-pc1.images：存放固定使用的图片，例如：logo、样式修饰图2.uploads:存放非固定图片，例如：商品图、宣传图等需要上传的图片3.iconfont:字体图标素材4.css文件：4.1base.css：基础的公共样式4.2common.css：各个网页相同模块的重复样式，例如头部、底部4.3index.css：首页css样式5.index.html：首页html文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值