html、css

一、常用标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>二级标题</h3>
<h6>六级标题</h6>

<p>段落标签p，用来存放一大段文字</p>
<div>做前端布局最最常用的标签，div里面可以放任意内容，任意标签</div>
<span>经常用来存放几个文字、小图片等</span>

<br> 换行符号

二、常用的文字控制属性

color:red; 文字颜色
font-size:30px; 文字大小
font-family:"宋体"; 文字类型
font-weight:bold; 文字加粗
font-style:italic; 文字倾斜
text-decoration:underline; 设置下划线
line-height:26px; 设置行高
text-indent:2em; 首行缩进两个单位

三个去掉默认样式：
font-weight: normal; 文字不加粗
font-style: normal; 文字不倾斜
font-decoration: none; 文字没有下划线

三、边框属性
四个方向的边框：边框粗细实线/虚线颜色
border: 5px solider/dash #000

四个方向设置边框：
border-top: 5px solider #000
border-left:
border-right:
border-bottom:

四、列表标签
   1、无序
   <ul>
   <li></li>
   </ul>

   2、有序
   <ol>
   <li></li>
   <ol>

   3、项目列表
   <dl>
   <dt></dt>
   <dd></dd>
   <dd></dd>
   <dd></dd>
   </dl>

   在css中去掉默认样式（列表样式）：
   ul{
   list-style: none;
   }

五、表单(写在表单内的元素才能提交到服务器)
1、表单区域：
<form action="要提交到的地址" method="post"></form>

   2、文本框：
   <input type="text" placeholder="请输入用户名">
   <input type="password" placeholder="请输入密码">

3、提交按钮
<input type="submit" value="注册">

4、普通按钮
<input type="button" value="普通按钮">

5、重置按钮
<input type="reset" value="重置">

   6、单选框
   <input type="radio" name="sex" id="man"><label for="man">男</label>
   注意： 1、要实现单选所有文本的name必须相同;
   2、要实现点字也能选,文本中必须有id属性,label中的for属性一定要等于id属性的值(文字写在label内);
   3、默认选中,文本中加上checked

   7、下拉菜单:
   <select>
   <option value="北京">北京</option>
   <option value="广州" selected>广州</option>
   </select>

8、上传文件：
<input type="file">

9、文本域：
<textarea><textarea>

六、盒子实际尺寸的计算：width+padding+border
box-sizing:border-box:加上这个样式,盒子的尺寸就固定了

七、文字居中
1、水平居中：text-align:center;
2、垂直居中：行高等于字体的大小;

八、盒子水平居中：margin: 0 auto
margin-left给负值,盒子会向左偏移

九、盒子隐藏与显示
display: none; /*隐藏之后不占位*/
display: block; /*对应的盒子显示*/

十、盒子内容溢出处理
1、overflow:visible;默认值。会呈现在盒子之外;
2、overflow:hidden; 隐藏;
3、overflow:scroll; 有没有超出都有滚动条
4、overflow:auto;自调节滚动条

十一、表格标签

/*设置表格边框折叠*/
border-collapse:collapse;

table：大盒子要加边框(大小可调节)
td:小盒子要加边框(撑满)

td的标签属性(column列,row行)
   <td colspan="2">1-1</td> 
   <td rowspan="2">1-3</td>

十二、定位(要配合top、lef等方向属性来使用,子绝父相)
1、相对定位:position:relative; 以当前位置的左上角为起点(占位)

2、绝对定位:position:absolute; 以父级的左上角为起点(不占位)

   3、固定定位:position:fixed; 以界面的左上角为起点(不占位)
       定位居中：
           position: fixed;
       right: 50%;
       top: 50%;
       width: 600px;
       height: 600px;
       margin-right: -300px;
       margin-top: -300px;
       盒子居中：
           margin: 0 auto;

十三、css权重
权重：
标签选择器 < 类选择器< id选择器 < 行内样式

猜你喜欢