Day4四周边框/显示图标居中/文字居中_文字周围带框居中的代码-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_45442261/article/details/114677121

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>1-9四周边框[0311作业]/显示图标居中/文字居中</title>
	</head>
	<body>
        <div style="width: 320px;height: 320px;
        border-left: 10px dashed #ffff00 ;
        border-top: 10px solid #ff0000;
        border-bottom: 10px dotted #008000;
        border-right: 10px double #000000;"></div>
        <hr>
        <div style="width: 200px;height: 200px;2px red ;
        border: 2px pink solid;
        background :cyan url(img/qq.png) no-repeat center center;
         font:italic bold 18px/200px arail ;
         text-align: center;">插入一张qq图片</div>
	</body>
</html>
<!-- ps中，先选择拾色器，再选择前景色；可以获得颜色的16进制；
      标尺处，右键单击可以选择像素格式【可供选择的：厘米；毫米；英寸：像素；派卡；百分比】
      获得边框的宽度，用矩形选框工具选中边框可获得边框宽高；
      边框类型有点dotted 实线solid双实线double虚线dashed
      &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
      ps的使用
      打开信息面板 f8
      打开图片：ctrl+o或者把图片直接拖进来
      吸管：i
      隐藏和显示标尺：ctrl+r
      放大或者缩小：alt+鼠标滚轮或者ctrl+加号 ctrl+减号
      取消选择ctrl+d 
      
      
      背景图位置：background-position:top center;
      1)单词表示法：top/right/bottom/left/center(中心)
      注意：没有位置区分
      2)百分比：x轴， y轴(有顺序之分)；
      3）像素表示法：x轴 y轴 (精确，所有常用)
      4）【混合表示法：有顺序之分】20px center         
      背景合写【颜色/背景图/重复/定位】
      
      字体样式
      文字样式（重点）
      水平居中：text-align：center/left/right
      垂直居中：line-height:30px;
      字体大小：font-size：12px；
      字体类型：font-family：'Microsoft Yahei'/'楷体'/'宋体'/'黑体'
      字体加粗：font-weight：blod/normal
      字体倾斜：font-style：italic/normal
      text-decoration:underline(下划线)/line-through(中划线)/overline(上划线)/none(去掉下划线)；

      
      
    
      
      ps使用
      切透明图
      1，用移动工具选中需要的图层（图层面板f7）
      2，用矩形选框工具选择需要删除的区域，按住delete键删除
      找历史记录：窗口----选择历史记录（恢复误删的部分）
      
      空格：&nbsp；
      
      样式相同，后面的样式会覆盖前面的样式
      
      专业切图
      ctrl+shift+alt+s
      删除辅助线ctrl+h
      =============
      
      加粗标签
      <b></b>
      <strong></strong> (语义化更强一点)
      
      倾斜标签
      <i></i>
      <em></em>(语义化更强)
 -->