第八天的学习啦~
今天学习很多小细节的问题，主要的分为7个。
- 一、首先是背景颜色的样式设置 示例：
<head> <meta charset="UTF-8"> <title>背景颜色的样式设置</title> <style> .box{ width: 100px; height: 100px; background-color: #5affeb; position: absolute; } .box1{ width: 100px; height: 100px; background-color:#2f4bff; position: absolute; left: 8px; top: 8px; } .box2{ width: 100px; height: 100px; /*rgb()中需要写数字，数字的范围在0~255之间，值越小颜色越深*/ background-color: rgb(255,255,0); position: absolute; left: 8px; top: 120px; } .box3{ width: 100px; height: 100px; /*rgba()中最后一个值表示透明度，范围在0~1之间，0表示完全透明，1表示完全不透明*/ background-color: rgba(0,255,255,0.5); position: absolute; left:120px ; top: 20px; } </style> </head> <body> <div class="box"></div> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html> - 二、背景样式 示例：
<head> <meta charset="UTF-8"> <title>背景样式</title> <style> .box{ width: 200px; height: 30px; border: 1px dotted #000000; /*设置图片背景*/ /*background-image: url(images/buycar.png); background-repeat: no-repeat;*/ /*background-position: left;*/ /*background-position: 20px 50px;*/ background: beige url("images/buycar.png") no-repeat left; } </style> </head> <body> <div class="box">我的购物车</div> <!--通过样式来设置背景图片时，需要使用 background-image属性来设置，而图片的路径需要写在 url()中。 但是，默认情况下，背景图片如果不有容器大的话，那么它会把背景图平铺后再显示。 对于背景图的处理，我们有以下几种方式： 1. no-repeat: 不平铺 2. repeat-x: x轴方向平铺 3. repeat-y: y轴方向平铺 4. repeat: x轴和y轴方向都平铺（默认方式） 要想设置面的值，我们需要另外的属性叫background-repeat。 希望背景图在容器的中间位置，怎么做？ 需要使用 background-position属性来指定，它是通过坐标轴来设置的。有以下几种设置方式： 1. left top: 左上角（默认值） 2. right top: 右上角 3. left bottom: 左下角 4. right bottom: 右下角 5. left center: 左中间位置 6. right center: 右中间位置 7. center center: 居中位置 以上的这些属性，我们可以使用 background 来统一指定，它的语法格式为： background: color position size repeat origin clip attachment image; --> <div class="box"> aadfad</div> </body> </html> - 三、边框属性 示例：
<head> <meta charset="UTF-8"> <title>边框属性</title> <style> .box{ width: 100px; height: 100px; background-color: #5affeb; /*设置左边边框的颜色*/ /* border-left-color: blueviolet;*/ /*设置左边框的样式：solid实线,dotted小圆点构成的线,dashed虚线*/ /*border-left-style: dashed;*/ /*设置左边框的粗细（宽度）*/ /*border-left-width: 5px; border-top-color: green; border-top-style: dotted; border-top-width: 2px;*/ border: 2px solid red; } </style> </head> <body> <!--指定边框可以使用border-left/top/right/bottom-color来设置颜色 border-left/top/right/bottom-style来设置样式 border-left/top/right/bottom-width来设置宽度 --> <!--在实际开发中，我们使用border 属性来统一指定即可。 它的语法格式为： border：线的宽度 线的样式 线的颜色 上面这种方式指定的话有一个缺点：四个边的宽度、样式和颜色都是相同的才可以。 --> <div class="box"></div> </body> </html> - 四、内边距 示例：
<head> <meta charset="UTF-8"> <title>内边距</title> <style> .box{ width: 200px; /* height: 100px;*/ border: 1px solid black; /*左内边距*/ /*padding-left: 20px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px;*/ /*padding: 10px 20px 30px 50px;*/ /*padding: 10px 30px 50px;*/ /*padding: 10px 50px;*/ padding: 10px; } </style> </head> <body> <div class="box">这是文字</div> <!--什么是内边距？ 容器中的内容和容器的边线之间的距离就叫内边距。 内边距的指定是使用padding属性来设置的， -上边使用 padding-top -右边使用padding-right -下边使用 padding-bottom -左边使用 padding-bottom ---> <!--可以使用padding属性来设置这四个边距。它的设置顺序为： 1. 如果设置四个值，则表示：上、右、下、左 2. 如果设置三个值，则表示：上 左右 下 3. 如果设置二个值，则表示：上下 左右 5. 如果设置一个值，则表示：上右下左的值都是一样的。--> </body> </html> - 五、外边距 示例：
<head> <meta charset="UTF-8"> <title>外边距</title> <style> .box{ width:300px; height: 200px; border: 1px solid gray; } .inner { width: 200px; height: 100px; border: 1px solid blueviolet; /*margin-left: 20px; margin-top: 20px;*/ margin: 20px 50px 30px; } </style> </head> <body> <div class="box"></div> <!-- 什么是外边距？ 容器与另一个容器之间的距离叫外边距。 外边距使用margin属性来指定。它的使用和语法格式与padding相同。 -margin-left:左边外据 -margin-top:上边外据 - margin-right: 右外边距 - margin-bottom: 下外边距 仍然可以使用 margin 属性来简化，它顺序如下： 1. 如果设置四个值，则表示：上、右、下、左 2. 如果设置三个值，则表示：上 左右 下 3. 如果设置二个值，则表示：上下 左右 5. 如果设置一个值，则表示：上右下左的值都是一样的 盒子模型：--> <div class="box"> <div class="inner"></div> </div> </body> </html> - 六、浮动 示例：
<head> <meta charset="UTF-8"> <title>浮动</title> <style> ul,li { padding: 0; margin: 0; } li { list-style: none; width: 60px; height: 25px; float: left; } .clear { /*清除浮动*/ clear: both; } </style> </head> <body> <!--了解 默认情况下，li中的内容是竖着显示的，如果想要横着显示，那么就需要浮动。 浮动是使用float属性来定义的，它有两个值： -left左浮动 -right右浮动 注意：在开发中不建议使用浮动，因为它会影响后面的元素的位置 --> <div class="clear"></div> <ul> <li>首页</li> <li>新闻</li> <li>活动</li> </ul> </body> </html> - 七、阴影 示例：
<head> <meta charset="UTF-8"> <title>阴影</title> <style> .box { width: 100px; height: 100px; background: deeppink; box-shadow: 50px 20px 2px gray; } </style> </head> <body> <!-- 定义阴影效果使用 box-shadow 属性，它的语法格式为： box-shadow: h-shadow v-shadow blur spread color position; - h-shadow：必需。水平阴影的位置。允许负值。 - v-shadow：必需。垂直阴影的位置。允许负值。 - blur：可选。模糊距离。 - spread：可选。阴影的尺寸。 - color：可选。阴影的颜色。请参阅 CSS 颜色值。 - position：可选。将外部阴影 (outset) 改为内部阴影。默认为inset --> <div class="box"></div> </body> </html> - 八、圆角 示例：
<head> <meta charset="UTF-8"> <title>圆角</title> <style> .box { /*width: 100px; height: 100px;*/ width: 120px; height: 160px; background: blueviolet; /*border-radius: 10px;*/ /*border-radius: 50%;*//*圆*/ /*border-radius: 10px 20px 30px 40px;*/ /*border-radius: 10px 30px 60px;*/ /*border-radius:20px 40px;*/ /*border-radius:100px/40px;*/ border-radius: 60px 60px 60px 60px/100px 100px 60px 60px; } </style> </head> <body> <!-- 定义圆角使用 border-radius 属性来定义，它的语法为： border-radius：length/persentage； 1. 四个属性值，分别表示左上角、右上角、右下角、左下角的圆角大小（**顺时针方向**） 2. 三个属性值，第一个值表示左上角，第二个值表示右上角和左下角（对角），第三个值表示右下角。 3. 两个属性值，第一个值表示左上角和右下角，第二个值表示右上角和左下角。 4. 斜杠二组值：第一组值表示水平半径，第二组值表示垂直半径，每组值也可以同时设置1到4个值，规则与上面相同。 --> <div class="box"></div> </body> </html> - 笔记结束，这就是今天的学习啦~
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
