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样式
盒子模型
定位
浮动
扩展样式
134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
