博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
fcc html5 css 练习2
阅读量:5119 次
发布时间:2019-06-13

本文共 1689 字,大约阅读时间需要 5 分钟。

<form action="/submit-cat-photo" >action属性的值指定了表单提交到服务器的地址

<input type="text" placeholder="cat photo URL" required> placeholder预定义输入框内的文本,添加required属性,这样用户不填写输入框就无法提交表单

<button type="submit"> submit</button> 为form添加一个submit(提交)按钮,点击这个按钮,表单中的数据将会被发送到你通过action属性指定的地址上 

</form>           (数据提交框)

 

<form action="/submit-cat-photo" >

<label><input type="radio" name="indoor-outdoor"  checked> Indoor</label>    name值要一样,input无闭合标签,使用checked属性,你可以设置复选按钮和单选按钮默认被选中

<label><input type="radio" name="indoor-outdoor">outdoor</label>      radio (单选按钮,多选一圆圈按钮)

</form>

 

 

<style>

#cat-photo-form{

background-color: green;
}
</style>

<form action="/submit-cat-photo"  id="cat-photo-form" >为表单添加背景颜色为绿色

<label><input type="checkbox" name="personality"   checked> Loving</label> 复选按钮的name属性值要一样,使用checked属性,你可以设置复选按钮和单选按钮默认被选中

<label><input type="checkbox" name="personality"> Love</label>  
<label><input type="checkbox" name="personality"> LL</label>    checkbox(复选框,多选正方形打勾按钮)

</form>

 

<div class="  "><h2></h2><p></p><ul><li></li></ul></div>     div可包含多个元素,id值只能唯一,不能重复使用同一个

 

padding(内边距)margin(外边距)border(边框),

元素的 padding 控制元素内容 content和元素边框 border 之间的距离

元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,可以是负数

padding-toppadding-rightpadding-bottompadding-left来控制元素上右下左四个方向的 padding

margin-topmargin-rightmargin-bottommargin-left 来控制元素上右下左四个方向的 margin

可以集中起来指定它们,举例如下:

padding: 10px 20px 10px 20px;上右下左,

padding: 30px10px 20px;;上,左右,下

padding: 30px10px ;上下,左右

 

 

每一个 HTML 页面都有一个 body 元素

并且其 body 元素同样能够应用样式

对其他 HTML 元素一样对 body 元素应用样式,并且所有其他元素将继承 body 元素的样式,子元素会继承父元素的样式

利用 选择器的特殊性等级进行样式覆盖,特殊性高的覆盖特殊性低的样式

<style> 部分中 class 声明的顺序却非常重要,第二个声明总是比第一个具有优先权, id 属性总是具有更高的优先级

行内样式〉内嵌式〉外联式  

  56

转载于:https://www.cnblogs.com/luxiaoli/p/7899209.html

你可能感兴趣的文章
【工具相关】iOS-Reveal的使用
查看>>
数据库3
查看>>
存储分类
查看>>
下一代操作系统与软件
查看>>
【iOS越狱开发】如何将应用打包成.ipa文件
查看>>
[NOIP2013提高组] CODEVS 3287 火车运输(MST+LCA)
查看>>
Yii2 Lesson - 03 Forms in Yii
查看>>
Python IO模型
查看>>
Ugly Windows
查看>>
DataGridView的行的字体颜色变化
查看>>
Java再学习——关于ConcurrentHashMap
查看>>
如何处理Win10电脑黑屏后出现代码0xc0000225的错误?
查看>>
局域网内手机访问电脑网站注意几点
查看>>
[Serializable]的应用--注册码的生成,加密和验证
查看>>
Day19内容回顾
查看>>
第七次作业
查看>>
SpringBoot项目打包
查看>>
Linux操作系统 和 Windows操作系统 的区别
查看>>
《QQ欢乐斗地主》山寨版
查看>>
文件流的使用以及序列化和反序列化的方法使用
查看>>