4-29-5-20总结

------------恢复内容开始------------

 

添加图片<img src="" alt>

 

锚点跳转<a href="baidu.com"></a> /

内部跳转<a href="#footer">Jump to Bottom</a>

<footer id="footer">Copyright Cat Photo App</footer>
 
 
无序<ul><li></li></ul>
有序<ol><li></li></ol>
 
 
输入框 占位符<input type="text" placeholder"占位符">
 
 

通过给form表单添加一个action属性，你可以使用纯 HTML 来构建向服务器提交数据的 Web 表单。

<form action="/url-where-you-want-to-submit-form-date">

<input type="text" placeholder="默认显示" required>

<button type="submit">提交</button>

</form>

actiosn属性是指定地址 点击按钮表单数据就会发送到action地址上

 

 

单选框 复选框 for和id作用不明

<label for="indoor">
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>

<label for="loving">

<input id="loving" type="checkbox" name="personality"> Loving

</label>

 
声明HTML文档的文档类型

你可以通过<!DOCTYPE ...>来告诉浏览器你使用的是 HTML 的哪个版本，"..." 部分就是版本的数字信息。<!DOCTYPE html>对应的就是 HTML5。

 

引入谷歌字体，字体如何降级

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

font-family: Lobster, monospace;
圆角边框
border-radius: 10px; 这个是圆角功能也可以用百分比 border-radius: 50%;
 
 
margin padding
 
 
属性选择器
[title]{color: red;} in英寸 mm毫米 绝度长度 rem em 相对长度
 
 
style 第二声明优于第一声明（越往下权重越大） ，继承样式 < class < id < 内联样式 < color: red !important
 
 
 
创建、使用css变量，添加回退值
.penguin{
--penguin-skin: gray;
}
background: var(--penguin-skin, black);
 
 
//就像html是body的容器一样，你也可以认为:root元素是你整个 HTML 文档的容器。
:root{
--penguin-belly: pink;}

//当你在:root里创建变量时，这些变量的作用域是整个页面。

//如果在元素里创建相同的变量，会重写:root变量设置的值。

body{--penguin-belly:green;}

.penguin{

--penguin-belly:white;}

层级css变量

 

margin-top:50px 和 margin-bottom:100px 之间的距离会重叠

 

标准盒模型：设置margin和border和padding会撑大模型，导致占地面积变大 、 怪异盒模型设置margin border padding 占地面积不会变大 、弹性盒模型
 
 
block inline bolock-inline
 
 

background-image: url();

background-repeat: no-repeat;

background-position: center; 背景图片位置

background-size: cover; 背景放大会完全占完位置，图片可能有缺失

background: url(img/1.png no-repeat center/cover)
 
 
 
div:hover{background: red;} 鼠标在div身上显示红色

wrap是父元素 box是子元素  .wrap:hover .box{}鼠标出现父元素身上改变的是子元素的效果

css选择器的空格代表选择后代元素

 

 
 
posted @ 2021-05-23 13:18  Sai佐为  阅读(34)  评论(0)    收藏  举报