JavaWeb - CSS

最新推荐文章于 2024-04-26 16:34:13 发布
最新推荐文章于 2024-04-26 16:34:13 发布
阅读量455 收藏 2
点赞数
分类专栏： JavaEE初阶 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46120393/article/details/124929276
版权

1. 什么是CSS
2. CSS的基本语法规范
3. CSS的引入方式
4. 常用选择器
    标签选择器
    类选择器
    id选择器
    通配符选择器
    后代选择器
    子选择器
    并集选择器
    伪类选择器
5. 字体属性
    字体样式
    字体大小
    字体粗细
    字体倾斜
6. 文本属性
    文本颜色
    文本对齐
    文本装饰
    文本缩进
    行高
7. 背景属性
    背景颜色
    背景图片
    背景位置
    背景尺寸
    边框弧度
8. 盒子模型
9. 弹性布局

1. 什么是CSS

  CSS全名层叠样式表 (Cascading Style Sheets), 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.

  如果将网页比作一个人的话, 那么HTML就实现了这个人的骨架, 而CSS的作用就是让这个人变得更好看, JavaScript赋予了这个人的灵魂, 使他可以进行人类的活动.

2. CSS的基本语法规范

CSS的基本语法规范为:

选择器+{一条/多条声明}

  • 选择器决定了要对哪些内容进行修改
  • 声明决定了要修改的内容

例如:

<p>这是一段话</p>
    <style>
        p{
            color: red;
        }
    </style>

  <style>标签中存放的就是CSS代码(下面会仔细讲), 代码中的p就是一个选择器, 代表这个选择器选中了<p>标签, 代表这段CSS代码要对<p>标签进行操作, 而color: red;就是一条声明, 这条声明的意思是将文字颜色设置为红色.

  因此, 上面这段CSS代码的意思是:选中所有的<p>标签, 并将里面的文字设置为红色, 这就是CSS最基本的语法样式.

3. CSS的引入方式

  如何能将CSS代码和HTML代码联系起来呢?在上面, 我们已经见到了第一种方式:内部样式.

内部样式:

将CSS代码写在<style>标签中, 并将<style>标签放在HTML代码内部.

注意:理论上来讲, <style>标签可以放在HTML代码中的任何位置, 但我们一般习惯放在<head>标签中.

行内样式:

不写<style>标签, 而是直接在HTML的某个标签中通过style属性来设置样式, 例如:

<p style="color: red;">这是一段话</p>

这种写法非常方便, 但是, 这种写法有着明显的缺点:

  • 只能实现较为简单的样式, 且只针对当前标签生效
  • 如果一个标签内的样式过多, 或者所有的标签都采用这种写法, 代码会显得非常杂乱
  • 如果多个标签需要实现相同的样式, 同一段代码写多次, 重复度非常高

同时, 这种写法的优先级非常高, 会覆盖掉其他的样式, 例如:

`<p style="color: red;">这是一段话</p>

 <style>
      p{
          color: green;
      }
 </style>`

结果:
请添加图片描述

因此, 当行内样式和其他的样式同时出现时, 行内样式会覆盖掉其他的样式.

外部样式

在实际开发中, 外部样式最为常用.

  1. 创建一个CSS文件
  2. 在HTML代码中用 link 标签引入CSS文件
<link rel="stylesheet" href="[CSS文件路径]">

这里的文件路径可以是绝对路径, 相对路径或网络路径.

4. 常用选择器

  在上面, 我们已经介绍过了, 选择器的作用就是选中某个或某些标签, 以便于对这些标签进行具体的操作, 在CSS中, 选择器的种类非常多, 我们主要介绍一些常用的.

4.1 标签选择器

  • 特点:
  • 能快速地选中同一类型的标签
  • 但是不能对同一类型的标签进行差异化选择
例如: 
	<p>张三</p>
    <p>李四</p>
    <p>王五</p>
    <style>
	    /*选中所有的p标签*/
        p{
            color: blue;
        }
    </style>

  标签选择器会一次性选中同一类型的所有标签, 但只能对这些标签执行同一种操作. 就像上面的例子, 它只能同时将所有的<p>标签都设为一种颜色, 不能进行差异化处理

4.2 类选择器

要对某个标签使用类选择器, 就需要在这个标签内加上class属性:

<p class="类名">张三</p>
<!--例如:-->
<p class="red">张三</p>

标签有了class属性后, 我们就可以通过类选择器来选中这个标签:

<p class="red">张三</p>
<style>
	/*选择器前面有一个点".", 代表这个选择器是类选择器*/
    .red{
        color: red;
    }
</style>

有了类选择器, 我们就可以对同一类标签进行差异化选择:

<p class="red">张三</p>
<p class="green">李四</p>
<p class="blue">王五</p>
<style>
    .red{
        color: red;
    }
    .green{
        color: green;
    }
    .blue{
        color: blue;
    }
</style>

注意:一个类选择器可以被多个标签使用, 一个标签也可以同时使用多个类选择器, 如:

<!--注意:同时使用多个类时, 多个类之间需要有空格, 类的顺序可以是任意的-->
<p class="red green">张三</p>
<p class="red green">李四</p>
<style>
    .red{
        color: red;
    }
    .green{
       background-color: green;
    }
</style>

4.3 id选择器

特点:

  • 一个标签只有拥有id属性, 才能使用id选择器
  • 一个标签只能有一个id, 并且每个标签的id是唯一的, 因此, 一个标签最多只能使用一个id选择器, 一个id选择器也只能被一个标签使用
  • 类选择器在CSS中使用 . 开头, 而id选择器使用 # 开头.

例如:

    <p id="zhang-san">张三</p>
    <p id="li-si">李四</p>
    <style>
        #zhang-san{
            color: red;
        }
        #li-si{
            color: green;
        }
    </style>

类比:
  类选择器就像名字, 名字可以重复, 一个人也可以有多个名字(小名, 外号)
  id选择器就像身份证号, 每个人只有一个, 并且每个人的身份证号都不同

4.4 通配符选择器

通配符选择器比较简单, 用一个 * 表示, 用于选中所有标签:

    <p id="zhang-san">张三</p>
    <p id="li-si">李四</p>
    <style>
        * {
            color: red;
        }
    </style>

上面的四种选择器都属于基础选择器, 总结一下它们的作用和特点:

作用特点
标签选择器能选择出同一种标签不能差异化选择
类选择器能自由选择一个或多个标签可以根据需求选择, 最灵活, 最常用
id选择器能选出一个标签同一个id只能出现一次
通配符选择器一次性选择所有标签在特定情况下使用

介绍完复合选择器之后, 下面四个属于复合选择器.

4.5 后代选择器

又叫包含选择器, 选中父标签中某个特定的子标签.

父标签和子标签:当一个标签被包含在另一个标签内部时, 外部标签称为父标签, 内部标签称作子标签, 例如:<html><body></body></html>, body标签被包含在html标签内, body标签就是子标签, html标签就是父标签.

例如:

	<ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>    
    </ul>
    <ol>
        <li>赵</li>
        <li>钱</li>
        <li>孙</li>
    </ol>

对上面的代码, <ul>有三个子标签<li>, <ol>也有三个子标签<li>, 如果我想选中<ul>的三个子标签, 就需要使用后代选择器:

	<!--通过ul li的方式就可以选中ul中的li标签-->
    <style>
        ul li{
            color: blue;
        }
    </style>

注意:后代选择器的选择范围并不只有子标签, 只要是后代就都可以被选中, 例如:<html><body><ul><li></li></ul></body></html>, 想要通过后代选择器选中<html>中的<li>标签, 也是可以做到的.

4.6 子选择器

子选择器与后代选择器类似, 但只能选中子标签, 像上面的这种情况, 要想在<html>标签中找到<li>标签, 后代选择器可以实现, 而子选择器就实现不了了.

子选择器就是将"ul li"中的空格改为了">":

	<ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>    
    </ul>
    <!--通过 ul>li 找到父标签<ul>中的子标签<li>-->
    <style>
        ul>li{
            color: blue;
        }
    </style>

4.7 并集选择器

并集选择器就是通过逗号将多个标签放在一起, 用来同时选中多个标签, 例如:

<div>张三</div>
<p>李四</p>
<span>王五</span>
<!--通过逗号将三个标签连在一起-->
<style>
    div,p,span{
        color: blue;
    }
</style>

4.8 伪类选择器

伪类选择器通过冒号连接:

  • a:link 选择未被访问过的链接
  • a:visited 选择已经被访问过的链接
  • a:hover 选择鼠标指针悬停上的链接
  • a:active 选择活动链接(鼠标按下了但是未弹起)
实现一个样例:一段文字默认为黑色, 当鼠标悬停在这段文字上时, 文字变为红色, 按下鼠标时, 文字变为绿色, 放开鼠标时恢复黑色 
<style>
        .div{
            color: black;
        }
        /*通过":hover"实现:鼠标悬停时, 应用下面的样式*/
        .div:hover{
            color: red;
        }
        /*通过":active"实现:鼠标按下时, 应用下面的样式*/
        .div:active{
            color: green;
        }
</style>
<div class="div">鼠标悬停在我身上, 我就会变为红色, 在我身上按下鼠标, 我就会变为绿色</div>

5. 字体属性

5.1 字体样式

通过"font-family"设置字体样式:

	<style>
        .one{
            font-family: "微软雅黑";
        }
        .two{
            font-family: "宋体";
        }
    </style>
    <div class="one">这段话的字体是微软雅黑</div>
    </br>
    <div class="two">这段话的字体是宋体</div>

5.2 字体大小

通过"font-size"设置字体大小:

    <style>
        .three{
            font-size: 50px;
        }
        .four{
            font-size: 20px;
        }
    </style>
    <div>
    <div class="three">这段话的字体大小是100px</div>
    <div class="four">这段话的字体大小是20px</div>

注意:不同浏览器的字体默认大小不同, 例如chorme浏览器的字体默认大小为16px

5.3 字体粗细

通过"font-weight"设置字体的粗细:

	<style>
        .five{
            font-weight: 100;
        }
        .six{
            font-weight: 900;
        }
    </style>
    <div class="five">这段话的粗细为100</div>
    <div class="six">这段话的粗细为900</div>

注意:字体的粗细程度可以通过数字来表示(范围为100~900), 也可以通过单词来表示, 例如 font-weight: bold; 表示加粗, bold与数字700表示的粗细程度相同. font-weight: normal; 表示正常, normal与数字400表示的粗细程度相同.

5.4 字体倾斜

通过"font-size"来设置字体倾斜或取消倾斜:

    <style>
        .seven{
            font-style: oblique;
        }
    </style>
    <div class="seven">这段话是倾斜的</div>

除了设置字体倾斜之外, 还可以通过 font-style: normal; 取消字体倾斜

6. 文本属性

6.1 文本颜色

设置文本颜色我们在上面已经看到了很多, 我们通过color来设置颜色:

    <div>红色</div>
    <style>
        div{
            color: red;
        }
    </style>

除了使用单词设置颜色之外, 我们还可以通过rgb()来表述颜色.

  rgb表示我们生活中的三原色, r:red, g:green, b:blue, 任何颜色都可以通过红,绿,蓝这三种颜色组成, 在计算机中, 针对r, g, b这三个分量, 分别使用一个字节(也就是8个比特位, 转换成十进制的范围为0~255)来表示.

  举个例子, 对于红色来说, 它只由三原色中的红色组成, 里面不存在绿色和蓝色, 那么通过rgb来表示红色就是:rgb(255,0,0), 表示绿色就是rgb(0,255,0), 表示蓝色就是rgb(0,0,255)

  我们还可以通过一个六位的十六进制数来表示(不区分大小写), 最低的两位为蓝色, 中间两位为黄色, 最高的两位为红色, 例如:红色为ff0000, 绿色为00ff00, 蓝色为0000ff, 如果每两位相同, 可以对十六进制数进行缩写, 如0000ff可以缩写为00f, 但8000ff或0ff000这样的就不能进行缩写.

6.2 文本对齐

通过"text-align"实现文本对齐, 也就是靠左, 靠右, 居中

	<style>
        .eight{
            text-align: left;
        }
        .nine{
            text-align: center;
        }
        .ten{
            text-align: right;
        }
    </style>
    <div class="eight">这句话是靠左对齐的</div>
    <div class="nine">这句话是居中对齐的</div>
    <div class="ten">这句话是靠右对齐的</div>

6.3 文本装饰

通过"text-decoration"设置文本装饰, 例如设置下划线, 上划线, 删除线等

    <style>
        .eleven{
            /*值为"underline"即为设置下划线*/
            text-decoration: underline;
            /*值为"none", 表示去掉所有文本装饰*/
            /*值为"overline"表示设置上划线, "line-through"表示删除线*/
        }

    </style>
    <div class="eleven">设置下划线</div>

6.4 文本缩进

通过"text-indent"实现首行缩进, 单位为px或em, 其中1em表示一个文字大小, 缩进的值可以为负, 如果缩进值为负, 首行的字会向左伸长

    <style>
        .twelve{
            text-indent: 2em;
        }
    </style>
    <div class="twelve">首行缩进两格</div>

6.5 行高

通过"line-height"设置行高, 行高=上边距+下边距+字体大小

<style>
        .height2{
            line-height: 100px;
            font-size: 16px;
        }
    </style>
    <div class="height1">第一行</div>
    <div class="height2">第二行</div>
    <div class="height3">第三行</div>

  设置行高时, 会同时影响上下两个方向, 上下的间距都是相等的, 我们可以通过行高来实现垂直方向的文本居中, 例如字体高度为150px, 将行高也设置为150px就可以达到文本垂直居中的效果

7. 背景属性

7.1 背景颜色

设置背景颜色:background-color, 具体用法和color类似

<style>
        .background-color{
            font-size: 20px;
            width: 150px;
            height: 150px;
            color: white;
            /*设置背景颜色*/
            background-color: black;

            /*水平居中*/
            text-align: center;
            /*垂直居中, line-height = height*/
            line-height: 150px;
        }
    </style>
    <div class="background-color">
        黑底白字
    </div>

7.2 背景图片

  设置背景图片:background-image, 设置背景图片后, 默认是一个平铺的效果,如果要关闭平铺效果, 就要使用background-repeat, 背景颜色和背景图片可以共存, 此时图片在背景颜色的上方

<style>
        .background-image{ 
            height: 500px;
            background-image: url(课表.png);
            /*关闭图片的平铺效果*/
            /*这里background-image的取值还有repeat-x, repeat-y, 即水平和竖直方向平铺*/
            background-repeat: no-repeat;
        }
    </style>
    <div class="background-image">
        这是一段话
    </div>

7.3 背景位置

通过background-position设置背景图的位置:

	<style>
        .background-image{
            /*设置背景图的横纵坐标, (0,0)即为屏幕的左上角*/
            background-position: 100px 0;
            /*如果只设置坐标的话不方便居中, 还可以设为百分数和英文单词, 例如:*/
            /*background-position:center center;*/
        }
    </style>

7.4 背景尺寸

通过background-size设置背景尺寸:

    <style>
        .background-image{
            background-size: 500px /*可以只写一个, 另一个会根据图片比例自行设置*/;
            /*还可以通过contain或cover让图片自适应元素大小*/
        }
    </style>

7.5 边框弧度

通过border-radius, 使边框变为圆角:

    <style>
        div{
            border-radius: 10px;
            /*数字越大, 边角的弧度越大*/
            /*如果想得到一个圆形, 首先设置一个正方形,例如:width=height=200px,此时将border-radius设为100px或者50%, 就得到了一个圆形*/
        }
    </style>

除此之外, 还可以分别设置四个角的角度属性:

  • 左上角:border-top-left-radius
  • 右上角:border-top-right-radius
  • 左下角:border-bottom-left-radius
  • 右下角:border-bottom-right-radius

8. 盒子模型

每个HTML元素其实都相当于一个矩形的盒子, 这个盒子由四个部分组成:

  • 边框 border
  • 内容 content
  • 内边距 padding
  • 外边距 margin

请添加图片描述

边框
基础属性:
  • 粗细: border-width
  • 样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
  • 颜色: border-color
<div>test</div>
<style>
	div {
		width: 500px;
    	height: 250px;
    	border-width: 10px;
    	border-style: solid;
    	border-color: green;
    }
</style>

  设置边框会撑大原有的元素, 例如原来的宽度为200px, 加上2个2px的边框, 宽度就变为了204px, 如果页面宽度固定为500px, 要放置5张100px的图片, 加上边框之后就放不了5张图片了, 解决这一问题的方法是设置box-sizing属性, 将其设置为border-box, 此时边框会向内部进行挤压, 而不是撑大元素.

内边距

通过padding 设置内容和边框之间的距离.

可以给四个方向都加上边距:

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right
<div>test</div>
<style>
	div {
   		height: 200px;
    	width: 300px;
    	padding-top: 5px;
    	padding-left: 10px; 
	}
</style>
外边距
控制盒子和盒子之间的距离, 与内边距相似, 可以给四个方向都设置外边距:
  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

注意:如果分别为两个元素设置不同的外边距, 此时竖直方向上并不会让两个外边距相加, 而是将两个值中较大的那个设置为外边距, 但是水平方向会将这两个外边距进行相加, 这是一种特殊情况

9. 弹性布局

默认的网页布局都是从上到下布局的, 而实际的网页也需要从左到右进行布局, 就需要通过弹性布局实现.

实现一个简单的弹性布局:

<style>
        .parent{
            background-color: black;
            height: 100px;
            /*如果要对某个元素进行弹性布局, 就需要对其父元素进行设置display:flex;*/
            display: flex;
            /*水平设置好之后, 通过justify-content对这几个横向的元素进行水平方向地设置, 例如:*/
            justify-content: center;
            /*设为center就是将元素进行水平居中放置, start就是靠左排列, end就是靠右排列*/
            /* space-between就是让这些元素均匀排列, 元素中间不做处理, space-around就是均匀排列的同时给两边留有空格*/

            /*也可以通过align-items来对这些元素在竖直方向上进行设置, 取值与上面的justify-content相同*/
        }
        .child1, .child2{
            background-color: yellow;
            width: 50px;
            height: 5s0px;
        }
    </style>
    <div class="parent">
        <div class="child1">1</div>
        <div class="child2">2</div>
    </div>

The end

zhanglf6699
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
02-javaWeb-css$js.7z
07-02
原文链接：https://blog.csdn.net/qq_38247809/article/details/107028388 标签 css:渲染  和html元素的整合★ 选择器★ 属性(了解) 字体 文本 列表 背景 尺寸 浮动 分类 框模型(理解) 扩展: 颜色取值 javascript JS的输出 js和html整合 js中变量声明 js的数据类型 js:事件驱动函数 函数定义——1 js中的事件 js事件和函数的绑定——1 js获取元素 简单表单校验案例 函数定义——2 js事件和函数的绑定——2 bom（Browser浏览器对象）中window对象的定时器方法 定时器 String对象 图片轮播案例 补充 运算符 语句 总结 ———————————————— 版权声明：本文为CSDN博主「oooola」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
Java Web项目静态资源（css/js/img）引用问题
weixin_40571358的博客
08-15 1万+
一、WEB-INF目录   WEB-INF目录是不对外开放的，外部没办法直接访问到（即不能通过URL访问）。只能通过映射来访问，比如映射为一个action或者servlet通过服务器端跳转来访问到具体的页面。这样可以限制访问，提高安全性。静态资源一般不放在该目录下，引用起来还需另外做路径映射，没有必要。   WEB-INF目录里面的文件访问参考https://www.cnblogs.com/x...
编程语言关于JavaWeb中CSS详细说明
10-29 628
编程语言关于JavaWeb中CSS详细说明 CSS的简介 1、CSS概述及作用 　　CSS：Cascading Style Sheets）是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。 　　作用：CSS将网页内容和显示样式进行分离，提高了显示功能。 2、 CSS和HTML的结合（*****）（四种） 　　CSS与HTML的结合方式 　　1.style属性方式： 　　利用标签中style属性来改变每个标签的
用eclipse写web项目中jsp导入图片和css文件的路径问题
热门推荐
hydhyd0的博客
06-05 1万+
最近在写java 网页项目，遇到很多奇奇怪怪的问题，最让我头疼的就是导入图片和css样式的问题。开始导入css样式后根本没有任何作用，迫于无奈，就在jsp的<head></head>标签中写的css代码，结果代码越写越长，弄得特别乱，后来导入背景图片时，也遇到一样的问题，绝对路径可以，相对路径就不行。也在网上找了各种各样的解决办法，最后终于给解决了。 我的问题是把css文件和图片放错了地方，ecli
servlet
pavel0的专栏
03-04 340
import java.io.IOException;import java.io.PrintWriter; import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.htt...
javaWeb CSS
weixin_65637841的博客
07-18 894
CSS 是「层叠样式表单」。是用于 (增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS 语法 CSS 语法由三部分构成：选择器、属性和值： selector {property: value} 选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）： body {color: blue} ...
JavaWeb之css
ysl的博客
11-04 154
css与html的3种结合方式 内联样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 内联样式 *...
java web加载css文件_在Java Web应用程序中动态添加外部JavaScript或CSS文件
weixin_30613479的博客
02-25 399
function removejscssfile(filename, filetype){var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist fromvar targetattr=(filetype=...
JAVAweb基础CSS
叶之印的博客
08-22 257
CSS概念： 层叠样式表 CSS的作用 1.实现了样式和html的代码分离。 2.弥补html对属性的的控制不足。 3.精确的控制页面的布局。 4.可以提高页面的执行效率。 5.css还有特殊的功能。 CSS的特性： 1.继承性 2.层叠性 CSS的基本语法 < style type=“text/css”> 选择器{ 属性1:属性值； 属性2：属性值 。。。。。。 } < /st...
javaweb之CSS总结
LEO
07-21 329
CSS一、CSS简介1、什么是CSS2、为什么使用CSS3、CSS作用二、基本用法1.语法2、CSS应用方式2.1 内部样式2.2 行内样式/内联样式2.3 外部样式方法一：方法二：三，选择器1、基础选择器1.1 标签选择器1.2 类选择器1.3 ID选择器区别2、复杂选择器2.1选取所有元素2.2 并集选择器2.3 子选择器2.4 父选择器/后代选择器2.5 属性选择器2.6 伪类选择器四、常用CSS属性1.字体属性1.1 font-size1.2 font-weight1.3 font-family1.
xinwenruyi-JavaWeb-master_HTML5_CSS3源码_
10-02
学习HTMLCSSJavaScript的记录，JavaScript 个人档案
Javaweb-飞机机票预订系统
11-07
用了一点Mybatis,但不多. 有相当多部分的代码并没有很完善. 这只是一个期末作业,也算一个学习的过程吧
JavaWeb新版教程-html&CSS-L和CSS-CSS介绍.avi
05-18
JavaWeb新版教程-html&CSS-L和CSS-CSS介绍.avi
初学JavaWeb-MySQL
07-15
JavaWeb是整个Web开发的基础课程，需要掌握三部分内容：数据库、前端、web核心。 该篇从MySql开始记录起，后期依次有JDBC、Maven、Mybatis、Tomcat、html、css、ajax、vue、elementUI等的学习记录！！ 一起来记录...
CSS 网页布局（详解网页的布局构造）
百赢出品，必属精品
04-26 1142
网页布局是将网页内容按照一定的结构和规则进行排版和组织，使得页面具有良好的结构和易读性。它涉及到页面元素的位置、大小、间距等方面的设计。头部区域、菜单导航区域、内容区域、底部区域。了解网格系统的概念和作用，掌握如何设计和实现网格布局，以及如何利用网格系统进行页面排版和元素定位。理解响应式设计的原理和重要性，掌握使用媒体查询、流式布局等技术实现网页在不同设备上的自适应显示。熟悉CSS中的各种布局模型，包括常规文档流、浮动布局、定位布局（相对定位、绝对定位、固定定位）、Flexbox布局和栅格布局等。
【CSS】grid 布局一行自动填充，每行最大限定px
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-23 305
【代码】【CSS】grid 布局一行自动填充，每行最大限定px。
CSS基础——1.CSS样式
weixin_66370632的博客
04-23 670
CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式 CSS样式 1. 行内样式 行内样式：直接定义在 HTML 标签的 style 属性中
Taro +vue3 中实现全局颜色css变量的设置和使用
最新发布
lele66688888的博客
04-26 405
在其他的web端框架 以及uni-app 等移动端框架中 我感觉也是这样使用的。在行内使用 直接是 字符串就行了 不用使用模板字符串 变量 因为本来就不是变量。这个主题色 一般可以这样总定义的 方便我们随时可以 修改前端的主题颜色。当我们现在需要弄一个随时修改的页面颜色主题色。我们在这个里面 设置一个root 全局样式。这样在全局我们就可以使用这个css 变量。一般有一个app.less 文件。我使用的是 Taro 框架。行内中书写 全局变量css。我们直接把颜色 替换为。
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1020
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
java ee项目目录结构_JavaWeb-JavaWeb项目标准目录结构
05-18
- `src/main/webapp`：存放 Web 应用的 Web 资源，包括 JSP 页面、CSS 样式表、JavaScript 脚本等； - `src/test/java`：存放项目的测试代码； - `src/test/resources`：存放测试代码所需要的资源文件； - `target`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

zhanglf6699

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

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

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

打赏作者

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

抵扣说明：

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

余额充值