day46
CSS
练习
页面实现：
分析：
未优化：
优化：
参考代码：（包含样式优化–选择器+CSS属性）
先写上table方便实现，之后再去除即可
name没有服务器，可暂时不写
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.right{text-align: right;}span{font-size: 11px;color: gray;}#sub{background-color: green;color: white;border: green;border-radius: 3px;}/* 设置垂直居中，也叠加效果*/.xxx{display: flex; /* 设置弹性盒*/justify-content: center flex-start;}</style></head><body><form action="#" method="post"><table width="600px"><tr><td class="right"><span>邮件地址</span></td><td><input type="text" placeholder="建议使用手机号注册" />@<select><option>163</option><option>QQ</option><option>sina</option></select></td></tr><tr><td></td><td><span>6~18字符，可使用字母、数字、下划线，需以字母开头</span></td></tr><tr><td class="right"><span>密码</span></td><td><input type="password" /></td></tr><tr><td></td><td><span>6~16个字符，区分大小写</span></td></tr><tr><td class="right"><span>确认密码</span></td><td><input type="password" /></td></tr><tr><td></td><td><span>再次确认密码</span></td></tr><tr><td class="right"><span>手机号</span></td><td><input type="text" /></td></tr><tr><td></td><td><span>忘记密码时，可以通过该手机号码快速找回密码</span></td></tr><tr><td class="right"><span>验证码</span></td><td class="xxx"><input type="text" /><img src="https://www.xiaoyuxitong.com/uploads/allimg/180816/214SMU3-0.png" width="100px" height="20px" /><a href="#">看不清楚？换张图片</a></td></tr><tr><td></td><td><span>请填写图片中的字符，不区分大小写</span></td></tr><tr><td></td><td><button>免费获取验证码</button></td></tr><tr><td class="right"><span>短信验证码</span></td><td><input type="text" /></td></tr><tr><td></td><td><span>请查收手机短信，并填写短信中的验证码</span></td></tr><tr><td></td><td><input type="checkbox" checked="checked" /><span>同意<a href="#">"服务条款"</a>和<a href="#">"隐私权相关政策"</a></span></td></tr><tr><td></td><td><input id="sub" type="submit" value="立即注册" /></td></tr></table></form></body>
</html>常用CSS样式
常用CSS属性
1.字体属性
属性名称
font-family(字体)
font-size（大小）
font-style（风格）
---- normal标准样式
---- italic斜体
---- oblique倾斜
---- inherit从父类继承的字体样式
font-weight(字体加粗)
----normal标准样式
----bold粗体
----bolder更粗
----lighter更细
2.文本属性
属性名称
letter-spacing(字母间隔)
text-decoration（划线修饰）
text-align（文本对齐方式）
text-indent(文本缩进)
line-height（行高）
3.背景
属性名称
background-color
background-image
background-repeat(平铺方式)
4.边框
属性名称
border-bottom
solid(实线)
dashed(虚线)
double(双实线）
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p{/*设置字体样式-------------------------------------------*/font-family: "微软雅黑";/*设置字体*/font-size: 50px;/*设置字体大小*/font-style: italic;/*设置字体样式 - 倾斜*/font-weight: bold;/*设置字体粗细*//*设置文本样式-------------------------------------------*/letter-spacing: 20px;/*设置文本间隔*/text-decoration: underline;/*设置文本划线 - 下划线*/text-align: center;/*设置文本对齐方式 -- 居中*/color: white;/*设置文本颜色*//*设置背景样式 --------------------------------------------*/background-color: red;/*设置背景颜色*/}a{text-decoration: none;/*设置字体划线 - 去除划线*/}div{width: 500px;height: 500px;background-image: url(../img/波多野结衣.jpg);/*设置背景图片*/background-repeat: repeat-y;/*设置平铺方式：沿y轴平铺*/border: orange 1px solid;/*设置边框 - 颜色,粗细,实线*/}</style></head><body><p>学无止境</p><a href="#">百度一下</a><br /><div></div></body>
</html>运行：
盒子模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
盒子模型： 用于页面分区
浏览器兼容性
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
为了兼容IE老版本，一句话，能用外边距就用外边距
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;/** margin-top: 50px;设置外边距 - 上边距margin-left: 50px;设置外边距 - 左边距margin-right: 50px;;设置外边距 - 右边距margin-bottom: 50px;;设置外边距 - 下边距*/margin: 50px;} </style></head><body><div>学无止境</div></body>
</html>
样式2：内边距<style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;/** 注意：能不使用内边距就不使用，因为老版本的IE浏览器不支持，而且会把盒子撑变形* * padding-top: 50px;padding-left: 50px;padding-right: 50px;padding-bottom: 50px; */padding: 50px;/*设置内边框：上下左右都是*/} </style>
样式3：水平居中，垂直居中需要用到定位<style type="text/css">div{width: 200px;height: 200px;border: orange 1px solid;margin: 0 auto;/*水平居中*/} </style>
运行：
定位
CSS 定位 (Positioning) 属性允许你对元素进行定位。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
相对定位
相对定位：相对于原有的位置发生改变，并且保留原有的空间位置。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;margin-top: 200px;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;position: relative;/*相对定位：保留原有位置，相对于原有位置进行位移*/top: 50px;/*距离定位位置上边缘50px*/left: 50px;/*距离定位位置左边缘50px*/}#box03{width: 100px;height: 100px;border: blue 1px solid;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>运行：
绝对定位
注意：不能简单认为是根据body标签位移
绝对定位相对于他有position属性的父级元素进行定位，如果父级元素没有postion定位，那么就找父级的父级，直到向上找到position定位为止，如果他向上找不到position定位，那么就以最外层的body进行定位。
并且绝对定位不会保留原有的位置空间。
z-index属性，确定层级大小，用来设定哪一个盒子在上面，越大越在上面
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;margin-top: 200px;position: relative;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;position: absolute;/*绝对定位：不保留原有位置，向上找寻父级标签，判断父级标签是否有position属性，如果有就按照父级标签进行位移，如果没有就继续向上找寻父级标签，直到body标签为止，就按照body标签进行位移*/top: 50px;/*距离定位位置上边缘50px*/left: 50px;/*距离定位位置左边缘50px*/}#box03{width: 100px;height: 100px;border: blue 1px solid;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>运行：
固定定位
根据前面的锚链接改进，加一个置顶功能
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{position: fixed;/*固定定位：将元素固定到页面的某个位置*/top: 80%;left: 90%;}</style></head><body><div><a href="#top">置顶</a></div><a name="top"></a><!--下锚点--><a href="#new01">法治</a><!--定位到锚点处--><a href="#new02">国际</a><!--定位到锚点处--><a href="#new03">娱乐</a><!--定位到锚点处--><a name="new01"></a><!--下锚点--><h1>法治新闻 - 为何半夜母猪频频惨叫</h1><h1>法治新闻 - 为何八旬老太以外怀孕</h1><h1>法治新闻 - 是人性的溟灭</h1><h1>法治新闻 - 是道德的沦丧</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><a name="new02"></a><!--下锚点--><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><a name="new03"></a><!--下锚点--><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1></body>
</html>运行：
浮动
浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子可以横向排列起来。
副作用：因为浮动会使元素脱离了标准的文档流，从而导致父级元素无法被撑开。
解决办法：添加空盒子
在被浮动的元素后面，添加一个空的div，并且设置一个clear类，并付给该div.clear{clear:both;}
普通流【包含的普通流变成浮动流就管不住，利用清除浮动效果就能解决】
浮动1
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 100px;height: 100px;border: red 1px solid;float: left;}#box02{width: 100px;height: 100px;border: green 1px solid;float: left;}.clear{clear: both;/*清除浮动效果*/}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div class="clear"></div></div></body>
</html>运行：形象概述：最初【一个大div包含两个小div】–>再是【将里面的两个小div设置浮动，大div管不住小div】–>最后【在里面加一个小div用于去除同级别的浮动效果，大div又能管住小div】
浮动2
浮动成左右两边
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 100px;height: 100px;border: red 1px solid;float: left;}#box02{width: 100px;height: 100px;border: green 1px solid;float: right;}.clear{clear: both;/*清除浮动效果*/}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div class="clear"></div></div></body>
</html>运行：
浮动3
浮动成左右两半
如何查看：两种方式
- 设置背景颜色：background-color:
- 查看元素在浏览器检查代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 50%;height: 100px;float: left;}#box02{width: 50%;height: 100px;float: right;}.clear{clear: both;/*清除浮动效果*/}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div class="clear"></div></div></body>
</html>运行：注意这里是去除了box01、box02的边框，不然会出现换行
扩展样式
渐变色找到图片最下方的一个色点【末尾加上】会自动填充
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: url(../img/渐变色.jpg) center top repeat-x #EAF4FF;}input{width: 100px;height: 50px;color: white;font-weight: bolder;background-color: orange;border-radius: 5px;/*圆角属性*/box-shadow: 10px 10px 5px gainsboro;/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/text-shadow: 5px 5px 5px black;/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/}img{border-radius: 50%;}</style></head><body><input type="button" value="普通按钮" /><br /><img src="../img/波多野结衣.jpg" width="100px" height="100px" /></body>
</html>运行：
小结
css表单练习
常用CSS样式
盒子模型
定位
浮动
扩展样式
