二.4 页面化妆师CSS之CSS背景和列表

最新推荐文章于 2022-06-08 21:35:17 发布
最新推荐文章于 2022-06-08 21:35:17 发布
阅读量215 收藏
点赞数
分类专栏： 五、前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44891948/article/details/104280017
版权

目录

1.CSS背景样式

1.1背景样式

1.2设置元素的背景颜色：background-color

1.3 设置元素的背景图片：background-image

1.4背景和背景图片​

1.4背景图片重复：background-repeat

1.5属性设置背景图像是否固定或者随着页面的其余部分滚动：background-attachment

1.6背景图片定位：background-position

2.CSS列表样式

2.1列表样式

2.2列表项标记

3.代码示例

3.1背景代码

3.2列表代码

1.CSS背景样式

1.1背景样式

  • background-color                                   设置元素的背景颜色。
  • background-image                                 把图像设置为背景。
  • background-position                              设置背景图像的起始位置。
  • background-attachment                         背景图像是否固定或者随着页面的其余部分滚动。
  • background-repeat                                设置背景图像是否重复及如何重复。
  • background                                            简写属性，作用是将背景属性设置在一个声明中。

1.2设置元素的背景颜色：background-color

  • 设置元素的背景颜色：background-color：颜色 | transparent
  • 说明
    • transparent是全透明黑色（black）的速记法，类似rgba(0,0,0,0)这样的值。
    • 颜色值（颜色名 | RGB | 十六进制|）
    • 背景区包括内容、内边距（padding）和边框（border）、不包含外边距（margin）
  • 属性值：
    1. color_name：规定颜色值为颜色名称的背景颜色（比如red）。
    2. hex_number：规定颜色值为十六进制的背景颜色（比如#ff0000）。
    3. rgb_number：规定颜色值为rgb代码的背景颜色（比如rgb(255,0,0)）。
    4. transparent（默认值）：背景颜色为透明。
    5. inherit：规定应该从父元素继承 background-color 属性的设置。

1.3 设置元素的背景图片：background-image

  • 设置元素的背景图片：background-image：URL| none
  • 属性值：
    1. url('URL')：指向图像的路径。
    2. none（默认值）：不显示背景图像。
    3. inherit：规定应该从父元素继承 background-image属性的设置。
  • 说明
    • url地址可是相对地址也可以是绝对地址
    • 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包含外边距。
    • 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复

1.4背景和背景图片

1.4背景图片重复：background-repeat

  • 设置元素的背景图片的重复方式：background-repeat：repeat| no-repeat | repeat-x| repeat-y
    • background-repeat
      1. repeat：默认值，背景图片水平方向和垂直方向重复
      2. repeat-x：背景图片水平方向重复
      3. repeat-y：背景图片垂直方向重复
      4. no-repeat：背景图片不重复
      5. inherit：规定应该从父元素继承 background-repeat属性的设置。

1.5属性设置背景图像是否固定或者随着页面的其余部分滚动：background-attachment

  • 属性值：
    1. scroll（默认值）：背景图像会随着页面其余部分的滚动而移动
    2. fixed：当页面的其余部分滚动时，背景图像不会移动。
    3. inherit：规定应该从父元素继承 background-attachment属性的设置。

1.6背景图片定位：background-position

  • 设置元素的背景图片的起始位置：background-position：百分比 | 值 | top | right | bottom | left | center
    • background-position：
  • 背景缩写：background：
    [background-color] [background-image] 
    [background-repeat] [background-attachment] [background-position] []
    • 说明：各值之间用空格分隔，不分先后顺序

2.CSS列表样式

2.1列表样式

  • list-style-type                                          设置列表项标志的类型
  • list-style-image                                       将图像设置为列表项标志。
  • list-style-position                                    设置列表中列表项标志的位置。
  • list-style                                                  简写属性，用于把所有列表的属性设置于一个声明中

2.2列表项标记

  • 设置列表项的标记样式类型   list-style-type：关键字 | none
    1. none：无标记。
    2. disc（默认值）：标记是实心圆。
    3. cirle：标记是空心圆
    4. square：标记的是实心方块
    5. decimal：表示数字。
    6. lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)
    7. upper-roman：大写罗马数字(I, II, III, IV, V, 等。)
    8. lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
    9. upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
  • 使用图片设置列表项的标记   list-style-image：URL | none
    1. URL：图像的路径。
    2. none（默认值）：无图形被显示
    3. inherit：规定应该从父元素继承 list-style-image属性的设置。
  • 设置列表项标记的位置          list-style-position：inside | outside
    1. inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
    2. outside：默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐
    3. inherit：规定应该从父元素继承 list-style-position属性的设置。
  • 列表样式缩写
    • list-style：list-style-type
                       list-style-image
                       list-style-position
    • 说明：
      • 值之间用空格分隔
      • 顺序不固定
      • list-style-image 会覆盖 list-style-type的设置

3.代码示例

3.1背景代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景总结</title>
    <style type="text/css">
        /*!*背景颜色*!*/
        /*div{*/
        /*    width: 500px;*/
        /*    height: 400px;*/
        /*    !*background-color：transparent;*!*/
        /*    !*background-color: red;*!*/
        /*    !*background-color: #93999f;*!*/
        /*    background-color: rgb(255,0,0); !* 255-红，0-绿，0-蓝*!*/
        /*    !*padding: 10px;*!*/
        /*    !*margin: 10px;*!*/
        /*    border: 10px solid;*/
        /*}*/
        /*!*背景图片*!*/
        /*div{*/
        /*    width: 300px;*/
        /*    height: 300px;*/
        /*    background-image:url("css背景/img/bg-little.png") ;*/
        /*    !*padding: 20px;*!*/
        /*    !*margin: 10px;*!*/
        /*    border: 10px solid;*/
        /*    background-color: red;*/
        /*}*/
        /*!*背景图片重复*!*/
        /*div{*/
        /*    width: 300px;*/
        /*    height: 300px;*/
        /*    background-image:url("css背景/img/bg-little.png");*/
        /*    background-repeat: repeat;     !*默认值，背景图片水平方向和垂直方向重复*!*/
        /*    background-repeat: no-repeat;  !*no-repeat：背景图片不重复。*!*/
        /*    background-repeat: repeat-x;   !*repeat-x：背景图片水平方向重复。*!*/
        /*    background-repeat: repeat-y;   !*repeat-y：背景图片垂直方向重复。*!*/
        /*    border: 1px solid #ff0000;     !*当页面的其余部分滚动时，背景图像不会移动。*!*/
        /*}*/
         /*背景图片重复*/
        /*div{*/
        /*    width: 300px;*/
        /*    height: 300px;*/
        /*    background-image:url("css背景/img/bg-little.png");*/
        /*    background-repeat: no-repeat;*/
        /*    background-attachment: scroll;!* 背景图像会随着页面其余部分的滚动而移动 *!*/
        /*    background-attachment: fixed;!* 当页面的其余部分滚动时，背景图像不会移动。*!*/
        /*    border: 1px solid #ff0000;*/
        /*}*/
        /*!*背景图片定位*!*/
        /*div{*/
        /*    width: 300px;*/
        /*    height: 300px;*/
        /*    background-image:url("css背景/img/bg-little.png");*/
        /*    background-repeat: no-repeat;*/
        /*    border: 1px solid #ff0000;*/
        /*    background-position: 50px 50px;*/
        /*    background-position: 10% 10%;*/
        /*    background-position: top;*/
        /*    background-position: right;*/
        /*    background-position: left;*/
        /*    background-position: bottom;*/
        /*    background-position: center;*/
        /*}*/
     /*背景缩写*/
        div{
            width: 300px;
            height: 300px;
            background-image:url("css背景/img/bg-little.png");
            background-repeat: no-repeat;
            border: 1px solid #ff0000;
            background: red url("css背景/img/bg-little.png") repeat fixed center  ;
        }
	</style>

</head>
<body>
<!--    &lt;!&ndash;背景颜色&ndash;&gt;-->
<!--	<div>background-color</div>-->
<!--    &lt;!&ndash;背景图片&ndash;&gt;-->
<!--    <div>background-image</div>-->
<!--    &lt;!&ndash;背景图片重复&ndash;&gt;-->
<!--    <div>background-repeat</div>-->
<!--     &lt;!&ndash;背景图片显示方式&ndash;&gt;-->
<!--    <div>background-attachment</div>-->
<!--    &lt;!&ndash;背景图片定位&ndash;&gt;-->
<!--    <div>background-position</div>-->
    <!--背景缩写-->
    <div>background缩写</div>
</body>
</html>

3.2列表代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul li{
            /*list-style-type: none;*/
            /*list-style-type: disc;*/
            /*list-style-type: cirle;*/
            /*list-style-type: square;*/
            /*list-style-type: decimal;*/
            /*list-style-type: lower-alpha;*/
            /*list-style-image:url("css列表/img/remind.png"); !*使用图片设置列表项的标记*!*/
            /*list-style-position: inside; !*列表项目标记放置在文本以内，且环绕文本根据标记对齐*!*/
            /*list-style-position: outside; !*默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐*!;*/
            list-style: url("css列表/img/remind.png") inside;  /*列表样式缩写*/
        }
    </style>
</head>
<body>
    <ul>
        <li>家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器家用电器</li>
        <li>1</li>
    </ul>
</body>
</html>

 

测试小弟
关注
专栏目录
化妆师网站：专为化妆师打造的网站
02-14
化妆师网站 专为化妆师打造的网站
Site_MUAH:现场化妆师和发型师
05-10
这是我为近亲建立的网站。 它是基于出色的Photorama jekyll模板（ ）制作的，该模板是我为展示照片的特定用途而定制的。 您可以重复使用代码，但是所有照片均已提交给作者。 因此，没有所有参与制作这些照片的人的明确同意，您将无法重复使用它们。 简而言之，您可以分叉此项目，但不能使用其中的照片。 感谢您的理解。
美容美甲化妆培训网站模板
09-04
美容，美甲，化妆，纹绣培训，半永久类企业网站模板，内含PC和移动端两套html
CSS列表样式（源码示例）
weixin_47556601的博客
02-04 3510
大家好，今天给大家分享一下CSS列表样式 看源码： 写HTML源码; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表样式</title> </head> <body> <h2 class="title">全部商品分类</h2> <ul>
HTML+CSS制作列表页面和多彩照片以及美食推荐页面
Night_798的博客
05-14 3364
html和css的基础的页面里 此html标签为元素定义标记，css元素不会向用户呈现任何特殊效果，当用户选择此便签时，浏览器会标签相关的表单控件上。 html和css属性应当与相关元素的id属性相同。 1.制作中心动态列表 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/.
html+css+js网页设计.zip
最新发布
03-05
CSS则是网页的化妆师，它允许开发者控制页面元素的外观、布局和响应式设计。通过选择器（如元素选择器、类选择器、ID选择器等）定位HTML元素，并应用样式属性，如颜色、字体、大小、位置等。CSS还可以利用盒模型...
HTML+CSS+布局和样式+学习
02-26
CSS则是网页的化妆师，它负责控制网页的样式，包括颜色、字体、布局等。通过选择器（如类选择器、ID选择器、元素选择器等）选中HTML元素，然后设置对应的属性，如`color`、`font-size`、`background-color`等。CSS还...
女性化妆品企业CSS模板是一款适合女性化妆品企业的CSS网站模板。_html网站模板_网页源码移动端前端_H5模板_自.rar
08-06
设计师可能已经使用了CSS3的新特性，如过渡效果、动画和响应式设计，以确保网站在不同设备上都能良好显示。 JavaScript则用于增加网站的交互性和动态功能。在化妆品网站中，JavaScript可能被用来实现诸如滑动展示...
化妆师培训学校网站html静态模板
12-04
最后，`艺术家.html`可能是介绍学校知名化妆师或合作艺术家的页面，他们的经验和成就能为学校带来额外的吸引力。 总的来说，这个化妆师培训学校网站html静态模板是构建一个专业、美观且功能齐全的在线教育平台的...
1号店主网页html+css代码
07-26
CSS则是网页的化妆师，它使HTML元素呈现出预期的样式和布局。在1号店的CSS代码中，会看到选择器（如类选择器 `.class`，ID选择器 `#id`，元素选择器 `element`）用于指定要应用样式的HTML元素。CSS可以控制字体大小...
彩妆热卖产品列表
qq_69555866的博客
06-08 1872
彩妆热卖产品列表
一.4 HTML页面结构层之搭建网页HTML结构
每天多努力一点
02-09 1020
目录 1.div标签和span标签 1.1 div标签 1.2 span标签 2. HTML标签分类 2.1 HTML标签集合 2.2 块级标签：占据一行，换行 2.3 行内标签：在一行，不换行 2.4 行内元素和块级元素详情 2.5行内和块元素区别 2.6列表标签​ 2.7 代码示例 3.标签嵌套规则 1.div标签和span标签 1.1 div标签 ...
5.JS内置对象
每天多努力一点
02-20 747
1.Array-数组 2.String 3.Math 4.Date
二.3 页面化妆师CSS之盒子模型
每天多努力一点
02-12 493
盒子模型概念 高和宽设置 边框设置 内边距设置 外边距设置 盒子的计算 元素显示方式 生活中的盒子 1.盒子模型的概念 盒子模型用来“放”网页中的各种元素。 网页设计中内容，如文字、图片等元素，都可是盒子（DIV嵌套） 网页中盒子模型 2.盒子模型属性 宽度属性 宽度 width：长度值 | 百分比 | auto 最大宽度 max-width：长度值...
一.1 HTML页面结构层之HTML基础
每天多努力一点
02-06 460
目录 1.基础语法 1.1 什么是HTML？ 1.2 HTML特点 1.3 HTML基础语法 2.文档和段落标签 2.1 文档标签 2.2 修饰标签 2.3 特殊符号 3.列表标签 4.图像和超链接 5.代码示例 1.基础语法 1.1 什么是HTML？ HTML（HyperText Markup Language）称为超文本标记语言 1.2 HTML特点 不需...
二.5 页面化妆师CSS之float浮动
每天多努力一点
02-12 409
CSS Float（浮动）简介 普通流 CSS Float（浮动）的基础知识 使用浮动后产生的问题 清除浮动（闭合浮动）常用方法 Float案例演示 1CSS Float（浮动）简介 1.1CSS定位机制 1.2CSS Float（浮动）的基础知识 会使元素向左或向右移动，只能左右，不能上下。 浮动元素碰到包含框或另一个浮动框，浮动停止。 浮动元素之后的元素将围绕它，之前的不受...
二.6 页面化妆师CSS之CSS定位（position）
每天多努力一点
02-12 356
1.CSS-position 学习CSS中的定位模型 使用定位模型来达到布局目的 学习position之static 学习position之relative 学习position之absolute 学习position之fixed 学习position之sticky 2.Positioned Layout Module：提供与元素定位和层叠相关功能，他是核心模块 3.定位模型 ...
二.1 页面化妆师CSS之CSS选择的艺术
每天多努力一点
02-11 241
1.CSS基础 1.1 HTML、CSS、JavaScript关系 HTML是网页内容的载体 css样式是表现（外观控制） JavaScript是行为，用来实现网页特效效果 1.2 什么是CSS css层叠样式表(Cascading Style Sheets) 用于定义HTML内容在浏览器内的显示样式 1.3 为什么学习CSS CSS简化HTML相关标签，网页体积小，下载快 解决内...
一.3 HTML页面结构层之HTML表单
每天多努力一点
02-08 232
目录 1.HTML表单 1.0 表单(Form) 1.1 表单应用场景​ 1.2 表单工作原理​ 1.3 表单​ 1.4 HTML表单​ 2.input标签 2.1 input标签​​ 2.2单行文本域​​ 2.3 密码框​ 2.4文件域​ 2.5 单选框​ 2.6 复选框​ 2.7 按钮​ 2.8图像域（图像提交按钮）​ 2.9隐藏域​ 3.下拉菜单和列...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值