html5/css3
初步了解html5/css3
zayzy
安心努力
展开
-
rem和em单位
em,rem单位:rem是相对于html中的font-size字体大小而言的,随着html的字体大小改变而变化。em是相对于父级标签字体大小而言,1em相对于父级标签字体大小(仅用于font-size中),除此之外,用到的em单位,都是相对于该标签字体大小倍数而言的。在响应式布局中,一般如下操作:1.标签中的字体大小不使用固定值,使用相对值(em,rem);2.标签的位置和宽高大小使用百分比布局或者rem3.选择性的使用css样式(媒体查询),根据网页大小尺寸设置符合需求的样式4.如果需要适配原创 2021-06-18 15:25:38 · 159 阅读 · 0 评论 -
css3中的background
属性:background-color:red;background-image:url(图片位置);background-repeat:repeat;background-size:50%;background-position:center center;1.背景图平铺问题background-repeat:背景图是否平铺,默认沿x轴,y轴双向方向平铺no-repeat 不平铺repeat-x 沿x轴平铺repeat-y 沿y轴平铺默认沿x轴,y轴平铺2.背景图大小问题back原创 2021-06-18 15:45:22 · 58 阅读 · 0 评论 -
html5常用标签
html5中,提供了语义化布局标签。在xhtml中,网页头部,中间部分,尾部各种模块多数使用div进行布局;html5提供了专门做页面模块布局的标签元素。网页头部标签:header导航标签:nav网页底部标签:footer侧边栏标签:article区域标签:section1.电池条标签meter(常用于作为电池的剩余电量,游戏中的剩余血量)value是当前进度的值,范围默认在0-1之间。min设置最小值,max设置最大值。value在min-max之间表示真实长度的百分比。low范围内的最原创 2021-06-17 22:38:47 · 374 阅读 · 0 评论 -
html5之媒体查询
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />媒体查询的一般形式:@media mediatype(设备类型) and (条件) { css样式部分;}mediatype 一般写screen代表手机,平板,电脑解释:原创 2021-06-18 11:27:17 · 523 阅读 · 0 评论 -
box-shadow
box-shadow:阴影的扩散方向(默认是外置阴影,inset是内置) x轴的偏移量 y轴的偏移量 阴影的模糊半径 阴影的扩散半径 阴影的颜色box-shadow: inset 50px 50px 20px 0px pink, 0px 0px 100px 30px lightblue;文字阴影:x轴的偏移量 y轴的偏移量 阴影的模糊半径 阴影的颜色;text-shadow:0px 0px 10px deeppink, 0px 0px 10px yellow;...原创 2021-06-19 21:03:29 · 62 阅读 · 0 评论 -
css3中的渐变
渐变:颜色逐渐变化的过程,从一种颜色过渡到另一种颜色的过程;1.线性渐变2.径向渐变1.线性渐变linear-gradient(渐变的方向-终点的位置,颜色1,颜色2,颜色3…)1.颜色值一定要大于两种;2.终点位置(to top,to bottom,to right,to left,to left top…) 终点位置还可以使用角度,12点钟的位置为0度,原创 2021-06-20 15:51:49 · 123 阅读 · 0 评论 -
上下左右居中
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } #wrap{ width:800px; height:600px; border:3px solid black;原创 2021-06-19 21:13:39 · 73 阅读 · 0 评论 -
CSS阴影: 偏移、模糊半径、扩散半径
原博地址:https://blog.csdn.net/qq_33384402/article/details/107046608转载 2021-06-19 21:08:44 · 400 阅读 · 0 评论