css控制表单大小_初识制作CSS

b9ed1f26c54b2c7a60689e674b599114.png

这节课我们需要用到上节课所制作的表单。

在我们来学习CSS之前我们先来看一下CSS和HTML 有什么关系

fe88099902b714ff9a50b8617e8a7ae0.png

如果我们只写HTML的标签和内容,我们所看到的样子大概是这样的

674894a01980469e2b61dcb0558ff492.png

这个网页从功能上来看它是完整的,该有的文字、超链接,和要表达的信息都已经表达了

但是它有个致命的问题,就是外观不好看

如果我们用CSS技术来给文字加上大小、颜色、排列方式、背景、边框等等以后

582e2450d66ce3627dbe80d67ed231f7.png

这样来看这个网页才是比较完整的网页

如果我们把网页比作一个人的话,标签和文字只完成了一个基本结构,例如这样

7a2ef4f12b25299199310da25062ebd1.png

而用CSS就是为了给人一些修饰

4ab6b48e05470b925e8c56f5bce0df78.png

这样就比较正式、好看一些了。

我们从字面上来看CSS样式,叫做层叠样式表

491e525ba1d4b5b3aae72db7d426e334.png

理解了它的意思,我们就做一个简单的例子

我们用之前所做的表单为例,来进行一个简单的改造

ce7a39fe29ad62ec1705b77d33f91bae.png

我们要想让总体信息变为红色,就需要设置style中的color:red

9961f0b11ed1d3d22a80076e91375a02.png

效果如下

47bf399308b084b2ed45bbd3bc4fce2a.png

我们再来改变一下按钮的样式

7c5ea9d9704c16675e896e940b62931e.png

效果如下所示,按钮就会根据设置变大

74d88baf7f6d20249443f7733f7f06d0.png

我们再来给两个按钮同时加上背景颜色background-color效果

c4fc08ddef6be024ae3f0d23451e2d0f.png

效果如下

6b320cd52802b9e580dc1b259d83c9ae.png

-----详情关注公z号<web分享>

319052d41d99cf910e3be1206d5d45f3.png

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值