前端学习笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_43297720/article/details/88784371

三月四周学习总结

1.学习内容

1	准备推优入党答辩ppt及,参加答辩
2	学习表格与表单
3	学习css层叠样式表

|4|学习圆角与过渡|
|5|完成简单登陆网页的练习|

2.学习表单与表格

表格：用<table>元素<tr>表格行元素<th>表头元素<td>表格内容元素；包含的特性colspan(单元格横跨列数)，rowspan(单元格纵跨行数) 边界属性：表格比较简单，用到的也少。
表单：表单位于<form>元素中action特性用于对表单数据的处理（值为网页或程序）。文本输入控件<input>输入标签 (type=button/reset/submit/text/password/radio）；选择框<select>特性：name,名称 multiple多选。表单暂时用的多，对于控件可以通过css来美化。

3.学习css层叠样式表

1.css 负责页面的美化，相当与网页的皮肤。css书写结构就是选择器+申明（属性+值）选择器有元素选择器 html标签名，类选择器.className， ID选择器#idName
2…css规则添加的位置：外部样式表（把css规则放于外部文件用herf特性连接），内部样式表（<style>特性用于HTML中）即

<style> 
  .login{color:blue;}
</style>

3 .css样式：

样式	属性
背景	backgroud-color 颜色名 backgroud-image:url(); 背景图 backgroud-repeat:repeat/repeat-x/repeat-y/no-repeat; 背景是否图片重复填充 backgroud-position:x轴 y轴；背景图片的起始位置（x,y）
文本	text-align(文本对齐 center/left/right/justify)
字体	font-family，font-size(相对值：em、%/绝对值：px)，font-weight(100~900或normal， bold)，font-style( 正常/斜体)

4.盒子:css处理每个元素都像在盒子中进行

概念	属性	作用
内边距	padding	设置边框内内容的距离，padding-top/padding-right(bottom/left)支持padding-top/padding-right(bottom/left)
外边距	margin	设置边框外内容的距离 margin-top/margin-right(bottom/left)支持margin-top/margin-right(bottom/left)
边框	border	设置边框的样式，border-top/border-right(bottom/left) border-width border-style （虚实线） border-color:命名颜色

padding/border/margin取值：

1个值：上下左右
2个值：上下，左右
三个值：上，左右，下
四个值：上，右，下，左

4.学习圆角与过渡

圆角；border-radius（大小px）
阴影：box-shadow（大小px和border取值规则一样）
过渡动画：伪类（：hover，实现鼠标放上去有变化）

.loginboxbottons{
  border-width:20px;
  border-radius:10px;
  background-color:#06F;
  margin-left:20px;
  margin-right:20px;
  }
.loginboxbottons:hover{
   box-shadow:5px 5px 3px #036;
   background-color:#59ed45;
   transition-delay:100ms; /*变化反应时间*/
   transition-duration:0s; /* 变化持续时间*/
   transition-property:color,box-shadow;/* 让那个状态受影响*/
}

5.完成简单登陆网页的练习

要求：两个输入框，要有图标，一个多选框，一个按钮（鼠标放上会变色）
用到了那些，css内置style ，css样式背景文本，表单，过渡阴影，盒子
实现：

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title> 登陆界面 </title>
<style type="text/css">
body{
   text-align:center;
   background-image: url("1.jpg");
   background-color: #cccccc;
   background-repeat:no-repeat;
   }
  a{
    font-size:5px;
     font-weight:bold;  
     font-family:Arial;
}
a:link{
    color:white;
   }
  .longinbox{
   position:absolute;
   background-color:white;
    height:300px;
    border-radius:10px;
    right:325px;
    top:50px;
     padding-left:30px;
     padding-right:30px;

    
}
.inputboxn{
   background-image:url(7.jpg);
 background-position:2px 2px;
 background-repeat:no-repeat;
 background-size:25px 20px;
 padding:0px 10px 0px 40px;
 border: 1px solid #D2D9dC;
 height:20px;
 border-radius:5px;

.inputboxm{
 background-image:url(8.jpg);
 background-position:2px 2px;
 background-repeat:no-repeat;
 background-size:25px 20px;
 padding:0px 10px 0px 40px;
 border: 1px solid #D2D9dC;
 height:20px;
 border-radius:5px;
}
.loginboxbottons{
  border-width:20px;
  border-radius:10px;
  background-color:#06F;
  margin-left:20px;
  margin-right:20px;
  }
.loginboxbottons:hover{
   box-shadow:5px 5px 3px #036;
   background-color:#59ed45;
   transition-delay:100ms; /*变化反应时间*/
   transition-duration:0s; /* 变化持续时间*/
   transition-property:color,box-shadow;/* 让那个状态受影响*/
} 
h1{
  font-size:26px;
  color:blue;
}
.Size{
   font-size:5px;   
}
</style>
</head>
<body>
<div class="longinbox">
 <h1 > 
 网络171投票系统
 </h1>
 <form action="dkd" method="post" name ="login">
 <p > 
  <input  type="text" name="textsearch" class="inputboxn" placeholder="学号/姓名" size="20" maxlength="64">
 </p>
 <p>
  <input type="password" name="Password" class="inputboxm" placeholder="密码" size="20" autocomplete="on">
 </p>
 </form>
 <p class="Size">登陆身份：
 <select >
  <option selected="selected" value="学生">学生</option>
  <option value=“管理员”>管理员</option>
 </select><br>
 </p>
 <form action="dkd" method="post" name ="login">
  <div class="loginboxbottons"><a href="1234" >登陆</a>
 </div>
 </form>
 </div>
 </body>
</html >

2. 总结

遇到的问题：
1.在相对插入图片时即<image>会有显示不了图片，应该<image .../>
2 .id和class的区别：
ID加前缀"#"；CLASS用"."
id一个页面只可以使用一次；class可以多次引用
3.输入框插入图片用background-image:url(...);就可以解决
总结：
这周学习还是不够系统，容易忘记，计划之外的事也比较多，js还是没怎么学，下周学完并且用上数据库完善登陆系统。