HTML前端设计技术重要代码总结1

第一步：先在空文件里面，输入html，点击第二个

自动生成框架

第二步：在<title></title>下面输入style，然后在style里面输入type="text/css"，之后所有的样式都在<style></style>里面设置。

第三步：在style里面输入以下代码，用来清除默认的外边距、内边距和列表的样式。

*{margin: 0; padding: 0; list-style: none;}

第四步：画盒子，用div或者ul标签。

第五步：如果不知道盒子的位置在哪里，可以设置background-color:red; 或者其他颜色。

background-color:red;

第六步：总结重要的代码：

1. 水平居中：height 的值和 line-height 的值一样
2. 大图用<img>，小图用background
3. background里面的属性有：①url(./图片的名称) ②no-repeat不重复③水平偏移量④垂直偏移量
4. background-color是背景颜色
5. 文字的大小设置是font-size，颜色是color，而不是font-color
6. float : left左浮动
7. 块元素，占据一整行。例如：div、p、ul、li、h1、form等
8. 行内元素，例如：strong、a、span等
9. 行内块元素，例如：img、input、select、textarea、button等
10. 定位，文字和图片可以叠起来。
               position: relative  相对定位（放在父元素标签里面）
               position: absolute 绝对定位（放在子元素标签里面），还要设置top和left位置
11. 盒子的宽度等于width+padding ，出现width、padding的时候，要出现box-sizing:border-box
12. <label for > <input id=" "> 获取焦点
13. 要解决悬浮的时候，抖动的问题
14. 如果遇到属性不能调节，有可能是width和height的值没有设置好。行内元素不能设置宽和高，只能由内容本身来撑开。