web前端之CSS3(5):用户界面、图片、按钮和分页

CSS3 用户界面

    resize:指定一个元素是否应该由用户去调整大小。 none 用户无法调整元素的尺寸。 both 用户可调整元素的高度和宽度。 horizontal 用户可调整元素的宽度。 vertical 用户可调整元素的高度。 box-sizing:允许以确切的方式定义适应某个区域的具体内容。 值 说明 content-box 这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外 border-box 指定宽度和高度(最小/最大属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 inherit 指定 box-sizing 属性的值,应该从父元素继承 outline-offset :对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。轮廓与边框有两点不同:1.轮廓不占用空间 2.轮廓可能是非矩形 值 描述 length 轮廓与边框边缘的距离。 inherit 规定应从父元素继承 outline-offset 属性的值。

CSS 图片

我们可以通过img{}对图片属性进行设置。圆角图片,椭圆图片,缩略图,图片文本,卡片式图片,以及会自动适配各种尺寸的屏幕的响应式图片。

图片滤镜——CSS filter 属性用为元素添加可视效果 (例如:模糊与饱和度) 。

响应式图片相册和图片 Modal(模态)

CSS按钮

基本按钮样式

    使用 background-color 属性来设置按钮颜色 使用 font-size 属性来设置按钮大小 使用 border-radius 属性来设置圆角按钮 使用 border 属性设置按钮边框颜色 使用 :hover 选择器来修改鼠标悬停在按钮上的样式 使用 transition-duration 属性来设置 "hover" 效果的速度 使用 box-shadow 属性来为按钮添加阴影 使用 opacity 属性为按钮添加透明度 (看起来类似 "disabled" 属性效果) 添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片 使用 width 属性来设置按钮的宽度 移除外边距并添加 float:left 来设置按钮组 使用 border 属性来设置带边框的按钮组

CSS分页

点击当前页,可以使用 .active 来设置当期页样式,鼠标悬停可以使用 :hover 选择器来修改样式

使用 border-radius 属性为选中的页码来添加圆角样式

通过添加 transition 属性来为鼠标移动到页码上时添加过渡效果

使用 border 属性来添加带边框分页

提示: 在第一个分页链接和最后一个分页链接添加圆角

可以使用 margin 属性来为每个页码直接添加空格

使用 font-size 属性来设置分页的字体大小

在容器元素上 (如 <div>) 添加 text-align:center 样式让分页居中

经验分享 程序员 微信小程序 职场和发展