【青训营】- 第1天CSS基础&UI设计-一一网

~~宽度width 高度height有最小、最大宽度。~~

复合属性背景`background`

background-color背景颜色

值：颜色名/十六进制#rrggbb(就可以缩写#rgb)/rgb函数/tansparent/inherit

background-image背景图片

值：none/inherit/url（图片路径）

background-repeat背景图片是否重复或者重复方式

值：repeat/repeat-x/repeat-y/no-repeat/inherit

如果存在background-image那么就可能存在background-repeat
如果不再在background-image那么一定就不存在background-repeat

background-attachment背景图片是否随内容的移动而移动

值：scroll/fixed/inherit

background-position

背景图片水平垂直位置

值：位置参数/长度/百分比

background就是五种属性的组合值：以上5种属性值的集合

ul>li*12：自动生成在ul层级下生成12个li标签

1.`background-image`详细讲解

<ul style="background-color: tan; width: 500px;">
    <li style="width: 700px; background-color: red;">1<li>
    <!-- 黑和白 -->
    <li style="background-color: #000000;">2<li>
    <li style="background-color: #ffffff;">2<li>
    <!-- 缩写 -->
    <li style="background-color: #ff0000;">2<li>
    <li style="background-color: #f00;">2<li>
    
    <!-- a表示透明度alpha -->
    <li style="background-color: rgb(255, 0, 0);">3<li>
    <li style="background-color: rgba(255, 0, 0, 0.5);">3<li>
    <!-- opacity表示标签透明度 -->
    <li style="background-color: rgb(255, 0, 0); opacity: 0.5;">3<li>
    <!-- transparent 透明色 表示标签默认的背景色 -->
    <li>4<li>
    <!-- inherit 继承 表示继承父级元素的背景色 -->
    <li style="backgound-color: inherit; width: 800px;">4<li>
</ul>
复制代码

2. `background-image`和`background-repeat`

background-image背景图片

值：none/inherit/url（图片路径）

background-repeat 背景图片是否重复或者重复方式

值：repeat/repeat-x/repeat-y/no-repeat/inherit

<!-- 背景图填充效果 --->
<div style="width: 800px; height: 800px; background-image: url(img/bg_big.png);"></div>

<div style="width: 200px; height: 200px; background-image: url(img/bg_small.png); background-repeat: repeat;"></div>
<div style="width: 200px; height: 200px; background-image: url(img/bg_small.png); background-repeat: no-repeat;"></div>
<div style="width: 200px; height: 200px; background-image: url(img/bg_small.png); background-repeat: repeat-x;"></div>
<div style="width: 200px; height: 200px; background-image: url(img/bg_small.png); background-repeat: repeat-y;"></div>

<div style="width: 200px; height: 200px; background-image: url(img/bg_big.png);"></div>
<div style="width: 200px; height: 200px; background-image: url(img/bg_big.png); background-size: 100%;"></div>
<div style="width: 200px; height: 200px; background-image: url(img/bg_small.png); background-size: 100%;"></div>

复制代码

3. `background-attachment`

背景图片是否随内容的移动而移动

值：scroll/fixed/inherit

<body style="background-image: url(img/bg_big.png); background-repeat: no-repeat">
    <!-- scroll 默认值 可以滚动 --->
    <!-- fixed 固定不动 --->
    <!-- inherit 继承父级元素 --->
    <div style="width: 200px; height: 2000px; background-color: tan; background-attachment: fixed;"></div>
</body>
复制代码

4. `background-position`

背景图片水平或垂直方向的位置

值：参数/长度/百分比

<!-- 位置参数 background-position: y x; y center/top/bottom x center/left/right --->

<div style="width: 200px; height: 200px; background-image: url(img/bg_small.png); background-repeat: no-repeat; background-position: center left;"></div>

<!-- border 边框 1px边框宽度 solid实线 black颜色 详见边框详解 --->
<!-- 一个值10px x轴偏移10px y轴居中 --->
<!-- x轴向右偏移10px --->
<!-- y轴向下偏移5px --->
<div style="border: 1px solid black; height: 200px; background-image: url(img/bg_small.png); background-repeat: no-repeat; background-position: 10px 5px;"></div>

<!-- 一个值50% 上下左右偏移到50% --->
<!-- x轴偏移到50%--->
<!-- y轴偏移到10%--->
<div style="border: 1px solid black; height: 200px; background-image: url(img/bg_small.png); background-repeat: no-repeat; background-position: 50% 10%;"></div>

复制代码

轮播图箭头按钮，是一整张图。悬停，显示其他图片。

<!-- 显示左箭头--->
<div style="width: 200px; height: 200px; background-image: url(img/left_right_arrow.png); background-repeat: no-repeat; background-position-x:;"></div>
<!-- 显示右箭头--->
<div style="width: 44px; height: 60px; background-image: url(img/left_right_arrow.png); background-repeat: no-repeat; background-position-x: -88px;"></div>
复制代码

轮播图箭头图例：

demo

1632055829(1).png

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <!-- 掘金色#1e80ff #e8f3ff -->
  <div style="width: 100px; height: 100px; background: #1e80ff;">1</div>
  <div style="border: 1px solid black; width: 100px; height: 100px; background: url(https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg);">2</div>
  <div style="border: 1px solid black; width: 100px; height: 100px; background: url(https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg) no-repeat;">3</div>
  <div style="border: 1px solid black; width: 100px; height: 100px; background: #e8f3ff url(https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg) no-repeat center center;">4</div>
</head>
<body>

</body>
</html>
复制代码

关于颜色

css规范中定义了147种颜色名，17种标准色，130种其他色。

tan/teal/thistle/tomato/turquoise/
darkmagenta/darkslategray/lightcoral/lightcyan/lightslmon/lightseagreen/
red/darkgoldenrod/darkred/indianred/mediumvioletred/orangered/palevioletred/
gray/darkgray/darkslategray/dimgray/lightslategray/slategray/
black/blanchedalmond/blue/blueviolet/burlywood/aliceblue/cadetblue/darkblue/darkslateblue/
aliceblue/antiquewhite/aqua/aquamarine/azure/beige/bisque/black/blanchedalmond/blue/
solid/saddlebrown/salmon/sandybrown/snow/crimson/darksalmon/gainboro/lightsalmon/mistyrose/rosybrown

文章版权归作者所有，未经允许请勿转载。

THE END

阅读