002day（登陆表格，css三种引入方式，css选择器，腾讯云跳转制作，色块布局练习）

最新推荐文章于 2022-07-18 20:31:16 发布

w296932099

最新推荐文章于 2022-07-18 20:31:16 发布

阅读量225

点赞数

分类专栏：如何从一个前端小白逆袭成为大佬

本文链接：https://blog.csdn.net/w296932099/article/details/118736538

版权

如何从一个前端小白逆袭成为大佬专栏收录该内容

38 篇文章 2 订阅

订阅专栏

一、

1、表格常用的标签

input type=text账号框

input type=password密码框

reset重制按钮

2、button按钮（必须用value加初始的值）

sumbit提交按钮

按钮和提交按钮的区别，普通按钮只是单纯的点击作用，提交按钮可以提交页面的内容，提交按钮有默认的value的值。

3、placeholder= 请输入账号字样（提示信息）

value给一个初始的值

placeholder和value的区别，p是提示输入之后就没了，v是可以在提示上面输入。

4、图片按钮可以调整大小，自己按钮不可以需要借助css了

5、可以在表头form加一个action，表示登陆表格后跳转页面。例如：<form action="https://www.baidu.com">

6、为了方便用户的体验，点击前面的呢称字样可以自动跳转到输入框里面，代码如下

7、action 属性规定当提交表单时,向何处发送表单数据。

二、css

1、css的三种引入方式

a、css样式引入第一种：行内样式直接从标签里面加style="属性：属性值；"

b、css样式引入第二种：内部样式从head里面加入style标签<style>选择器【选择操作哪一个元素】{里面是属性值}</style>

c、css样式引入第三种：外部样式从head里面加入link标签<link rel="stylesheet" href="css文件的地址"type="text/css">

在css文件夹中：这个跟内部样式中的是一样的

选择器【选择操作哪一个元素】{

属性值}

注：第三种创建的css的文件夹里面也要保存不然效果无效

注：css的文件夹改名字了link标签中的href=""里面的也要改下

注：外部样式在以后开发中应用比较多。

2、css选择器

选择器整体分为5大类：

基本选择器、层次选择器、伪类选择器、属性选择器、伪对象（伪元素）选择器

1、类型选择器(标签选择器) 以文档对象html中的标签作为选择符

A.什么时候用？想改变某个元素的默认样式时或者统一文档某个元素的显示效果时

B.语法？标签{属性：属性值；} 例如：div{width：200px；}；p{width：200px；}

2、Class选择器(类选择器)（类似于人名）

A.什么时候用？想要区分某个标签的时，比如想要区分2个div。

B.语法？<标签 class=“box”></div> .Class名字{属性：属性值；} 例如：.box{width：300px；}

C.Class可以给多个属性值，多个属性值之间用空格隔开。例如：<div class=“box a1 a3”></div>

3、ID选择器（类似于人的身份证号）

A.什么时候用？想要区分某个标签的时，比如想要区分2个div。

B.语法？ <标签 id=“box1”></div> #ID名字{ 属性：属性值；} 例如：#box1{width:200px;}

C.注意点：ID有唯一性，属性值只能是1个。

4. 通配符（一般用来清除浏览器的padding和margin）

A.什么时候用？想让所有的标签同时改变样式的时候

B.语法？ *{属性：属性值；} 例如： *{color：red；}

5. 群组选择器

A.什么时候用？当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。

语法？选择器1，选择器2，选择器3{属性：属性值；} 例如： .box,p,#a2{width：300px；）

6、权重值的大小比较：id>class>标签>通配符

注：a、同一级别优先执行下面的

b、class选择器的延伸那个加好几个标签的那个

c、加个important的权重值最大

三、腾讯云的制作

就是简单的图片插文字，核心页面是跳转页面的制作

四、附加东西

1、font-family：楷体；

2、height：60px

line-height：60px

上面两个属性值相等的话就会竖直居中

3、首行缩紧两个字符text-indent：2em

4、让图片居中对齐在head中加个text-align：center【不能在图片里添加，必须在div里面】

五、最后做一个扣丁课堂的色块布局练习

附注1、腾讯云代码及截图（一共要做三个页面点开一个文件夹会跳转到下一文件夹）

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

color: royalblue;

}

color: red;

}

</style>

</head>

<body>

<img src="img/03.png" width="70px">qq浏览器

<img src="img/03.png" width="70px">网页

<img src="img/03.png" width="70px">技术

<img src="img/03.png" width="70px">软件安装包

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

font-size: 30px;

color: blue;

}

color: blue;

}

.aa{

color: red;

}

</style>

</head>

<body>

<p>

</p>

<img src="img/04.png"width="70px">我的课堂

<img src="img/05.png"width="70px">扣丁课堂

<img src="img/07.png"width="70px">页面书写

</body>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

font-size: 30px;

color: blue;

}

color: blue;

}

</style>

</head>

<body>

<p>

</p>

<img src="img/08.png"width="70px">纯CSS实现3D立体式字幕切换效果

<img src="img/09.png"width="70px">纯CSS3立体式3D鼠标悬停效果

<img src="img/10.png"width="70px">纯CSS3模拟风车转动效果

<img src="img/11.png"width="70px">纯CSS抽屉式旺旺客服悬浮窗代码

</body>

</html>

附注2、扣丁课堂色彩分布练习

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

padding: 0%;margin: 0%;

}

.zz{

width:100%;

height:50px;

line-height:50px;

background-color:grey;

color: honeydew;

}

.aa{

width:100%;

height:300px;

background-color:red

}

.bb{

width:100%;

height:200px;

background-color:blue

}

.cc{

width:1000px;

height:150px;

background-color:yellow

}

.dd{

width:100%;

height:200px;

background-color:black

}

.e1{

width:200px;

height:300px;

background-color:grey

}

.e2{

width:200px;

height:300px;

background-color:grey

}

.e3{

width:200px;

height:300px;

background-color:grey

}

.e4{

width:200px;

height:300px;

background-color:grey

}

.e1,.e2,.e3,.e4{

float: left;

}

</style>

</head>

<body>

<center><div class="zz">考试认证     前端开发   

编辑语言   软件测试   电商设计

其他的课程   新闻资讯   

人力资源   联系我们

</div></center>

</body>

</html>

附注3、千锋登陆界面制作

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#col{

background-color: teal;

color: white;

width: 365px;

height: 40px;

}

.sty_text{

width: 300px;

height: 40px;

}

</style>

</head>

<body>

<form>

</p>

</form>

</center>

</body>

</html>

w296932099

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
002day（登陆表格，css三种引入方式，css选择器，腾讯云跳转制作，色块布局练习）

一、1、表格常用的标签input type=text账号框input type=password密码框reset重制按钮2、button按钮（必须用value加初始的值）sumbit提交按钮按钮和提交按钮的区别，普通按钮只是单纯的点击作用，提交按钮可以提交页面的内容，提交按钮有默认的value的值。注意：src后面写img不要写image不然图片显示不出来3、placeholder= 请输入账号字样（提示信息）value给一个初始的值placeholder和val
复制链接

扫一扫