web前端day4"/>
web前端day4
<!--
1.背景颜色： background-color 取值 合法颜色值
2.背景图片： background-image url（“背景图片路径”）
3.背景图平铺：当背景容器尺寸大于大于背景图片尺寸，默认平铺效果background-repeat属性：默认repeat平铺 no-repeat不平铺repeat-x水平方向平铺，repeat-y垂直方向平铺
4.背景图尺寸：background-size属性取值 两个值 数字px 或者 百分比(相对于容器)100% 100% 填充满容器，图片完整显示在容器中，改变图片尺寸比例。cover 按照图片原始尺寸等比例放大，填充满容器，图片有可能溢出。contain 按照图片原始尺寸等比放大，一条边填充满，图片完整，容器中可能有空白
5.背景图起始位置：background-position属性取值 两个值 水平 垂直 数字px 或者 百分比默认 0 0
小图标的精灵图通常使用背景图
6.渐变背景文字和文本修饰：
1.样式标签 b加粗 i斜体 s删除线 u 下划线 sub下标 sup上标
2.加粗：font-weight：bold
3.斜体：font-style：italic
4.线条修饰： text-decoration：取值 默认none 没有修饰，line-through删除线underline 下划线 overline 上划线
5.字体颜色：color:取值 合法颜色值
6.字体大小: font-size:取值 数字px
7.文本位置:水平位置:text-align: 取值 left默认/center/right垂直位置:内边距padding 行高属性line-height: 数字px总结:行内给元素跟着内容走行内元素(父元素设置) 水平居中 text-align:certer 垂直居中 line-height:父元素高度(给父元素设置)块级元素(自己设置) 水平居中 margin:0 auto
8.font-family: 字体类型 仿宋什么的取值取什么显示方式:
1.display属性: 取值 block块级 inline行内 inline-block行内块 none不显示元素在页面中如何显示和标签没有关系,和display属性关联块级元素默认display值为block 行内元素默认display值为inline
2.visibility属性:默认 visible 显示 hidden 隐藏
display:none和visibility:hidden区别:
display:none 脱离文档流,不占页面空间
visibility:hidden 仍然占据页面空间
补充:显示方式:
透明度: 1. rgba(0~255,0~255,0~255,0~1)2. opacity属性: 取值 0~1
1.rgba透明度针对只是一种颜色
2.opacity透明度针对整个标签
-->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>/*样式初始化*/body{margin:0;padding:0;}/*背景样式*/.bgimage{width:1000px;height:600px;border:1px solid black;background-image:url("img/001.jpg");background-repeat:no-repeat; /*不平铺，默认原始尺寸*//*background-repeat:repeat-x;background-repeat:repeat-y;*/background-size:cover/*600px 400px或者100% 100%*/;/*background-size:contain;*/ }.bgtu{width:50px;height:50px;/*border:1px solid black;*/margin:10px auto; /*水平居中*/background-image:url("img/tubiao.jpg");background-size:400px 400px;/*background-position:-25px -7px;*/ /*背景图起始位置*/background-position:-84px -7px; }/*文字修饰*/p.font{background-color:green;height:100px;/*padding-top:50px;*/font-weight:bold;/*加粗*/font-style:italic;/*斜体*/text-decoration:line-through;/*删除线*/color:red;font-size:30px;text-align:center;/*文本居中*/line-height:100px;/*行高调整文字位置*/}/*显示方式*/#d1{width:200px;height:200px;background-color:red;display:inline-block/*none*/;visibility:/*visible*/hidden;}#d2{width:200px;height:200px;background-color:green;display:inline-block;}div{width:200px;height:200px;border:1px solid black;}.d3{background-color:rgba(255,0,0,0);}.d4{background-color:rgb(255,0,0);opacity:0;}</style></head><body><div class="bgimage">背景图片显示</div><div class="bgtu"></div><p><b>大段大段<s>文字</s></b></p><p class="font">大段大段文字</p><!--块级显示方式display--><div id="d1"></div><div id="d2"></div><!--透明度区分--><div class="d3"></div><div class="d4"></div></body>
</html>
更多推荐
web前端day4
发布评论