一、图片样式练习
- 制作一个居中的，带圆角边框的，链接图片。
<style>
.imgstyle{
display: inline-block;
/* 使其成为行内块元素，然后才能有居中操作
这里不能为块元素，因为块元素居中不定位要靠外边距，但是又因为有链接，
外边距又是图片的一部分，所以当鼠标移上去时，鼠标样式也会改变
行内块元素，外边距默认为零 */
width: 30%;/* 将元素的宽设置为视口的30%，所谓响应是编程 */
border-radius: 50%; /* 圆角圆到该程度，就会变成圆或椭圆 */
border: 3px solid orange;
opacity: 0.8; /* 为图片添加透明效果 */
}
.boxyou{
text-align: center;
/* 因为图片设置为了行内元素，所以需要居中就需要一个容器，然后在容器中使用该属性水平居中图像 */
position: relative; /* 开启相对定位，为div中文本在图片居中创造父类条件 */
}
#textimg{
position: absolute;/* 让文本靠图片居中 */
left: 45%;
top: 50%;
color: white;
}
</style>
-------------------------------------------------------------------------------
<div class="boxyou">
<a href="../imgs/yourName.jpg">
<img alt="lianxi" src="../imgs/yourName.jpg" class="imgstyle">
</a>
<div id="textimg">你的名字</div>
</div>
- 图像的滤镜效果
- 属性名是filter，属性值见下：
none 没有滤镜 opcity（%） 跟透明度类似，该滤镜的百分比越大，越不透明。 brightness(%) 设置图片的不透明度，100%默认值是原图，0%变成全黑 contrast(%) 设置图片的对比度，0%全黑，100%原图，
超过100%将提供更强烈的对比效果
drop-shadow(h-shadow,v-shadow,blur,spread) h-shadow和v-shadow代表水平方向的阴影和垂直方向的阴影，如果是负值就是左边和上边
blur增加阴影的模糊程度，用px值
spread，用来扩大阴影和缩小阴影，用px值，正值扩大，负值缩小。
grayscale(%) 设置图像的灰度，100%完全变成黑白照片 hue-rotate(deg) 图像的色相旋转，
0deg为默认值，最大值为360deg
invert(%) 翻转图像：100%代表完全翻转，0%代表原始图像。 saturate(%) 图像的饱和度，饱和度超过100%时将会提供更强烈地饱和效果。 sepia(%) 将图像设置为棕褐色100%变成完全的棕褐色。 initial 将此属性的值设置为默认值，即none inherit 从父类继承该属性。 上面的滤镜值可以叠加使用，用空格隔开。
(注意)论position定位基点和transform中translate定位基点与元素定位后居中的实现
- position:relative 开启了相对定位的元素开始移动，基点是在元素的右上角，当使用百分比来给left赋值时，以父元素为参照。(这样就导致了当给元素设置left:50%，right:50%时，元素并不能真正居中)
- transform: translate(x1%,y1%) 元素的转换中，translate移动是相对于元素正中点，所以这个特性刚好可以和relative结合实现居中。（只需要追加translate（-50%，-50%）即可实现居中。
<style>
.container{
width:30%;
height: auto;
background-color: green;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,0%);
}
.myimg{
width: 100%;
display: block;
margin: 0px;
}
body{
margin: 0px;
}
</style>
-------------------------------------------------
<body>
<div class="container">
<img alt="lianxi" src="../imgs/lingya2.webp" class="myimg">
</div>
</body>- 实现图片鼠标在其上则有文本缓慢覆盖图片的效果。
- 设计思路，首先要有个大容器，大容器中包含图片，文本，文本又要被包含，所以一共四个标签，文本的容器和文本都要完全定位，这样脱离文档流之后才能实现覆盖图片，而不影响图片位置。
-
<!DOCTYPE html> <html> <head> <style> .container{ width:30%; height: auto; background-color: green; position: relative; /* 开启相对定位，作为文本box定位的参照父元素 */ left: 50%; top: 50%; transform: translate(-50%,0%);/* 实现居中的操作 */ } .myimg{ width: 100%; display: block; /* 图片元素本身不是块元素 */ margin: 0px; } .overdown{ position: absolute; width:100%; bottom: 100%; /* 默认文本容器在图片上，不露出，当鼠标点击后才露出 */ height:0%; /* 高度为零，可以在鼠标在其上时更加体现个高度变化 */ overflow: hidden; /* 该容器现在是一条线，所以其中的文本居中后会超出边框，要隐藏 */ background-color: green; transition: 0.5s ease 0s; /* 过渡效果，应该加在这里，要是加载hover上，只有hover时才有过渡效果，鼠标移出时闪回图片 */ } .textme{ position: absolute; color: white; white-space: nowrap; /* 空白的处理方式 */ font-size: 32px; left: 50%; top: 50%; transform: translate(-50%,-50%);/* 文本居中 */ } .container:hover .overdown{ bottom: 0%; height: 100%; } body{ margin: 0px; } </style> <meta charset="UTF-8"> <title>css高级篇后半程的学习</title> </head> <body> <div class="container"> <img alt="lianxi" src="../imgs/lingya2.webp" class="myimg"> <div class="overdown"> <div class="textme">青春的气息</div> </div> </div> </body> </html>
二、按钮样式练习
- 在图片下方添加四个按钮的按钮组，要求要用到一切可能的样式
-
<style> .containerzong{ text-align: center; /* 让按钮居中 */ } .buttonone{ font-size: 16px; background-color: orange; border-radius: 7px; border: 1px solid orange; display: inline-block; box-shadow: 7px 7px 7px red; } .buttonone:active{ box-shadow: 3px 3px 3px red; /* 当点击鼠标时，阴影缩小即出现点击效果 */ } .buttonone:hover::after{ content: "》" /* 当鼠标悬停到按钮上时，添加内容》 */ } </style> -------------------------------------------------------- <div class="containerzong"> <div class="container"> <img alt="lianxi" src="../imgs/lingya2.webp" class="myimg"> <div class="overdown"> <div class="textme">青春的气息</div> </div> </div> <button class="buttonone">按钮一</button> <button class="buttonone">按钮二</button> <button class="buttonone">按钮三</button> <button class="buttonone">按钮四</button> </div>
三、分页外观制作
<style>
#agvcontainer{
margin: 10px auto;
text-align: center;
font-size: 20px;
}
#agvcontainer a{
display: inline-block;
color: black;
padding: 0px 20px 0px 20px;
text-decoration: none;
}
#agvcontainer a:hover{
background-color: green;
}
</style>
----------------------------------
<div id="agvcontainer">
<span>«</span>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<span>»</span>
</div>
四、元素中文本的多列和用户界面相关属性
- 就是在元素中都有的属性，可以使元素中的文本分列，并且可以设置列的样式。
- 这些属性如下:
| column-fill | auto|balance | 规定元素文本分列中文本的填充模式 自动填充根据文本先后顺序填充 尽量保持列之间文本长度的差异最小化 |
| column-count | 数值 | 指定文本分列的列数 |
| column-width | px或% | 指定文本每列的最佳宽度，主要在缩放窗口时体现， 会尽量满足最佳分列宽度。 |
| column-rule-style | solid|dashed等 | 指定文本分列中间线的样式，跟边框一样。 |
| column-rule-width | px|% | 指定文本中间线的宽度 |
| column-rule-color | 各种颜色 | 规定文本中间线的颜色 |
| column-gap | px值 | 规定文本之间的间隔 |
| column-span | 数值 | 规定元素应该跨越几列,该元素只对块元素有效 |
| column-rule | 顺序 width style color | 间隔线的简写属性 |
| columns | 分列中width和count的简写属性 |
代码示例
<style>
.textcolumn{
column-count: 3;
column-rule-style: dotted;
column-rule-width: 3px;
column-width: 100px;
}
.textcolumn span{
display: block; /* 设置为块元素，让跨列起效 */
column-span: all;
font-size: 40px;
text-align: center; /* 文本居中 */
}
</style>
-----------------------------
<span>铃芽之旅</span>
具体的文本内容这里简写了
</div>
- 用户界面属性
- 一共两个属性： resize（是否允许用户调整元素的宽和高） 和 outline-offset（规定轮廓和边框之间的空间大小）
- 他们的值分别有： horizontal vertical both none和 px值
- 这些属性让元素能够向textarea那样自由被用户调整，也可以禁用textarea的自动调整。
- 例子,在上面例子中的div中国呢加入这两个属性
<style>
.textcolumn{
resize: both;
overflow: auto;/*resize属性要配合这个属性使用，不然文本多时失效*/
outline: 4px solid red;
outline-offset: 40px;
}
</style>
五、css中变量的定义和调
- 定义变量需要两步，首先用选择器选择变量可以调用的范围，如:root{} 就是在整个元素中都可以调用
- 调用使用var（自己定义的值的名字，备选值当找不到变量时使用);
- 为什么要使用变量直接指定不是更方便吗？
- 方便变量的调整，只需要修改一个地方就可以。
- 方便局部变量修改，例如当你想要改变局部运用的全局变量中的颜色值mycolor时，只需要在该局部的选择器用相同的属性名覆盖即可，范围越精确优先级越高。
- 例子，图方便还是用之前的div
<style>
:root {
--mycolor: #ddd; /* 自己定义的变量值，适用整个文档 */
}
.textcolumn{
background-color: var(--mycolor,green); /* 自定义变量的调用 */
</sytle>灰色背景添加成功
- 该变量也可以利用js获取，并更改，下面演示实例。
<style>
#changecontainer{
text-align: center;
}
.changecolor,.seecolor{
display: inline-block;
background-color: yellow;
font-size: 30px;
}
</style>
<script>
//获取选择器
var rootel = document.querySelector(":root");
//获取文档样式
var styleme = getComputedStyle(rootel);
//定义函数查看
function seecolor(){
//获取自定义的属性值
var valueme = styleme.getPropertyValue("--mycolor");
alert("现在的变量--mycolor变量值是" + valueme);
}
function changecolor(){
rootel.style.setProperty("--mycolor","green");
}
</script>
--------------------------------
<div id="changecontainer">
<button class="changecolor" onclick="changecolor()">改变背景色为绿色</button> <button class="seecolor" onclick="seecolor()">查看背景色</button>
</div>实现效果通过两按钮，改变--mycolor的值，反应在本例就是背景色变了，还可以查看--mycolor的值
改变前查看
改变后查看
六、box-sizing属性和flex属性值
（一）box-sizing属性
- 该属性规定width属性包含的范围，默认是width设置的是内容区的宽度，当设置为border-box值时，只要规定了width属性，他就包括边框，内容区和内边框，这时候再规定内边距，就会在width的基础上减去其他部分以满足总宽度不变。
- 有三个值content-box（默认的，仅内容区）border-box（包括内容区，内边距，边框），inherit（继承父类该属性的值）
（二）display： flex
- flex容器中的直接子元素都会变成弹性容器，即是可以随着视口变化而变化，flex属性的出现可以替代用定位和浮动进行的页面布局。
- 当将元素设置成flex值时，则该元素就时flex元素了，具有了一些特别的css属性。具体见下表。
| flex-direction | row column row-reverse column-reverse | 规定flex容器中项目的排列方向：横向排列，纵向排列，纵向排列但从下往上，横向排列但从右往左。 |
| flex-wrap | nowrap wrap wrap-reverse | 规定flex容器中的项目是否在必要时换行，即窗口缩小时。 不换行，换行，换行但是顺序颠倒 |
| flex-flow | dirction wrap | 上面两个属性的简写属性，顺序如左。 |
| justify-content | flex-start flex-end center space-around space-between stretch baseline | 规定flex容器中的元素应该如何对齐 与容器开始的地方对齐（默认） 与容器结束的地方对齐 居中对齐 居中对齐，但是每个项目周围有间隔 居中对齐，但是每个项目水平之间有间隔 拉伸容器以填充容器 让项目以基线对齐 |
| align-content | flex-start flex-end center space-around space-between stretch baseline | 跟上面没啥不同，感觉（😭） |
| align-items | flex-start flex-end center space-around space-between stretch baseline | 只知道居中跟justify-content不同：一个是水平居中，一个是纵向居中，两者结合可以实现完美居中。 |
- 用在flex容器中项目上的属性有
| order | 数字 | 规定该项目在整个项目中的位置， 如order: 1 则该元素是第一项目。 |
| flex-grow | 数字 | 规定该项目增长的速度是其他项目的几倍 为什么叫增长速度，直观上其实还是大小，但是因为项目是弹性项目，所以倍数越大，对窗口缩放的敏感性就越大。 |
| flex-shrink | 数字 | 规定该项目，相对于其他项目，收缩多少倍，为0时，不会随着视口缩小而收缩，大于1，会收缩比其他项目小，1跟其他项目收缩一直。 |
| flex-basis | px 值 | 规定项目的初始长度。 |
| flex | 上面属性的简写属性，顺序： grow shrink basis | |
| align-self | 指定该项目自己的对齐方式，将会覆盖容器中定义的align-items中定义的对齐方式，值跟容器中的对齐一致 |
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
