CSS教程

第1天CSS基础&UI设计

本文主要是介绍第1天CSS基础&UI设计，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

复合属性背景background

  1. background-color背景颜色

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

  1. background-image背景图片

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

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

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

  • 如果存在background-image那么就可能存在background-repeat

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

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

值：scroll/fixed/inherit

  1. 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>


轮播图箭头图例：

https://img1.sycdn.imooc.com/614837ed0001d4ba05840348.jpg

demo

https://img1.sycdn.imooc.com/614837ee000104e207400570.jpg

<!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


作者：林泉
链接：https://juejin.cn/post/7009627877347950623
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

这篇关于第1天CSS基础&UI设计的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航