发表于： 2019-06-03 23:44:02
2 881
今天完成的事
1.设置图片的高度与宽度 实现固定高度和自动拉伸
.heightp img{
height: 50px;/*设置默认高度为50px*/
width: 100%; /*设置内容宽度为页面宽度的100% 实现背景图片自动拉伸*/
2.设置了表单
<input type="text" name="username" class="maegin heightp">
3.为表单设置样式
.maegin {
margin: 3px 0;/*设置默认上外边距为4px*/
background-color: rgb(255, 255, 255);
width:100%;
height: 50px;
border:none;
}
.maegin-b{
background-color: rgb(95, 192, 205);
}
4.设置登录按钮
<form >
<input type="button" class="maegin heightp maegin-b"value="登录">
</form>
明天计划的事
1.设置输入框的两个图标
2.设置输入框的分隔符
3.添加“忘记密码”字样并添加下划线
4.在完成任务4的情况下开始学习任务5的资料
遇到的问题
1.在设置字体大小的时候发现 高版本chrome浏览器不支持小于12px的字体
2.在为表单设置样式的时候尝试了很久 后面才发现引入CSS样式要在<input>里引用才生效
3.尝试表单插入图片无法实现想要的效果 然后只能再ps里右键图层生成css代码 然后根据需要来添加样式背景
收获
1.设置表单引用css应该在表单元素里设置而不是标签
<form1>
<input type="text" name="username" class="maegin heightp">
</form1>
2.
了解CSS样式的四种引入方式
1）行内式
<h1 style="color: red;font-size: 20px" >用户注册</h1>
行内式可以针对一行内容进行样式的设置，优点是可以针对性的进行显示一行样式，缺点是无法进行批量改变。
2）嵌入式
嵌入式是在head网页头中输入样式，可以对便签进行批量操作
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{color: red;font-size: 20px; }
div{color: green;}
</style>
</head>
3）链接式
可以把css样式内容写入到文件中，然后导入到html文件中使用，链接式的优点是一个样式可以导入到多个网页文件中，批量使用
<link rel="stylesheet" href="csshtml.css">
4）导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style>
现在我使用的是链接式css引入
3.初步学会使用表单
<form2 >
<input type="text" name="username" class="maegin heightp"value="登录">
</form2>
4.学会使用一些表单input属性
1）value
对于不同的输入类型，value 属性的用法也不同：
- type="button", "reset", "submit" - 定义按钮上的显示的文本
- type="text", "password", "hidden" - 定义输入字段的初始值
- type="checkbox", "radio", "image" - 定义与输入相关联的值
2）placelolder
placeholder 属性规定描述文本区域预期值的简短提示。
该提示会在文本区域为空时显示，当字段获得焦点时消失。
<form1>
<input type="text" name="username" class="maegin heightp"placeholder="请输入手机号">
</form1>
返回列表
评论