HTML+CSS
head标签
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
<meta name="keywords" content="新浪,新浪网,SINA,sina,sina.com.cn,新浪首页,门户,资讯">
<meta name="description" content="新浪网为全球用户24小时提供全面及时的中文资讯，内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等。">
<title>新浪首页title>
<base target="_blank" />
<link rel="stylesheet" href="index.css" />
<link rel="shortcut icon" href="favicon.ico">
<script charset="utf-8" src="index.js">script>
body标签
h标题
p段落
br换行
<br/>
字体变化
<del>del> <b>b>
<ins>ins> <u>u>
<strong>strong> <b>b>
<em>em> <i>i>
img图片标签
<img src="http://n.sinaimg.cn/news/20170310/Dxru-fychhvn8123135.jpg" alt="美女" title="这个是美女" />
a超链接
_blank（新打开一个浏览器），_self（在当前窗口打开一个链接,这个是默认情况）
<a target="_blank" href="index.html" />
<a href="#main" />
<a href="javascript:void(0)">a>
<a href="javascript:history.back();">a>
列表
<ul>
<li>li>
<li>li>
ul>
<ol>
<li>li>
<li>li>
ol>
<dl>
<dt>dt>
<dd>dd>
<dd>dd>
dl>
list-style: none;
list-style: url(路径);
white-space: nowrap;
table表格
<table width="600px" height="150px" cellspacing="0" border="1px" cellpadding="20px" >
<caption><h3>前端学生成绩表h3>caption>
<thead>
<tr >
<th>姓名th>
<th>性别th>
<th>分数th>
tr>
thead>
<tbody align="center">
<tr>
<td>石顺麟td>
<td>男td>
<td>80td>
tr>
tbody>
table>
<td rowspan="2">书籍td>
<td colspan="2">书籍td>
<form action="">
昵称：<input type="text" value="请输入昵称"> <br/><br/>
密码：<input type="password" >
<input type="hidden" name="" value="" > <br/><br/>
性别：<input type="radio" name="gender">男
<input type="radio" name="gender" checked="checked">女 <br/><br/>
学科：<input type="radio" name="xueKe">java
<input type="radio" name="xueKe" checked="checked">前端
<input type="radio" name="xueKe">iOS <br/><br/>
爱好：<input type="checkbox" name="aiHao">游泳
<input type="checkbox" name="aiHao">爬山
<input type="checkbox" name="aiHao" checked="checked">羽毛球 <br/><br/>
喜爱的食物：<input type="checkbox" name="food">鸡腿
<input type="checkbox" name="food" checked="checked">牛排
<input type="checkbox" name="food" checked="checked">烤全羊 <br/><br/>
生日：<select name="" id="">
<option value="">1990option>
<option value="">1991option>
<option value="">1992option>
<option value="">1993option>
<option value="1994" selected="selected">1994option>
select>年
<select name="" id="">
<option value="">1option>
<option value="">2option>
<option value="" selected="selected">3option>
<option value="">4option>
<option value="">5option>
select>月
<select name="" id="">
<option value="">11option>
<option value="">12option>
<option value="">13option>
<option value="" selected="selected">14option>
<option value="">15option>
select>日 <br/><br/>
简介：<textarea name="" id="" cols="10" rows="5">textarea>
<br/><br/>
<input type="button" value="登录">
<input type="reset" >
<input type="image" src="hm.bmp">
<input type="submit" value="注册">
form>
自定义单选框和复选框样式
- 由于安卓和ios默认样式都不一样，所有这时候我们要重新定义了
自定义单选框的样式
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>单选框和复选框自定义title>
<style>
* {
margin: 0px;
padding: 0px;
border: none;
box-sizing: border-box;
outline: none;
}
.box {
width: 100%;
height: 50px;
text-align: center;
}
input {
display: none;
}
label {
width: 100%;
height: 100%;
display: inline-block;
position: relative;
line-height: 50px;
color: #999;
}
label:active {
background: #EEEEEE;
}
label:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid green;
position: absolute;
top: 15px;
left: 15px;
border-radius: 20px;
}
input:checked+label:after {
background-color: green;
}
.line {
width: 100%;
height: 1px;
background: #ccc;
opacity: 0.2;
}
style>
head>
<body>
<div class="box">
<input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">选项一label>
div>
<div class="line">div>
<div class="box">
<input type="radio" id="radio2" name="radio" /><label for="radio2">选项二label>
div>
body>
html>
自定义复选框样式
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>单选框和复选框自定义title>
<style>
* {
margin: 0px;
padding: 0px;
border: none;
box-sizing: border-box;
outline: none;
}
.box {
width: 100%;
height: 50px;
}
input {
display: none;
}
label {
width: 100%;
height: 50px;
display: inline-block;
line-height: 50px;
position: relative;
text-align: center;
}
label:active {
background: #EEEEEE;
}
label:after {
content: "";
width: 20px;
height: 20px;
border: 1px solid green;
border-radius: 20px;
display: inline-block;
position: absolute;
top: 15px;
left: 15px;
}
input:checked+label:after {
background-color: green;
}
.line {
width: 100%;
height: 1px;
background: #CCCCCC;
opacity: 0.3;
}
style>
head>
<body>
<div class="box">
<input type="checkbox" id="checkbox1" /><label for="checkbox1">选项一label>
div>
<div class="line">div>
<div class="box">
<input type="checkbox" id="checkbox2" /><label for="checkbox2">选项二label>
div>
body>
html>
特殊字符
<
>
&
²
³
display元素的显示
font字体
font: font-style font-weight font-size/line-height font-family;
color:blue;
color:#666666;
color:rgba(140,120,23,0.5);
font-style:normal;
font-style:italic;
font-weight:normal;
font-weight:bold;
font-weight:100;
font-size:12px;
font-family:"SimSun","SimHei","Microsoft YaHei";
word-spacing:12px; //字母字母之间
letter-spacing:12px; //中文字体之间
text-transform:capitalize;
text-transform:uppercase;
text-transform:lowercase;
text字体
line-height:24px;
text-align:center;
text-indent:24px;
text-indent:2rem
text-decoration:none;
text-decoration:underline
text-decoration:overline
text-decoration:line-through
div{
letter-spacing:12px //字体间距12px
}
background背景
background: #00FF00 url(bgimage.gif) no-repeat center top;
background-color:yellow;
background-color: transparent
background-image: url(bgimage.gif);
background-repeat:repeat;
background-repeat:no-repeat;
background-repeat:repeat-x;
background-position:10px 10px;
background-position:center center;
background-size:200px 200px;
精灵图
//精灵图就是为了减少图片请求，把小图标都集合在一起
padding内边距
padding:10px 5px 35px 20px;
border边框
border:1px solid #blue;
border:1px solid transparent;
border-radius:50%;
maging外边距
margin:10px 10px 10px 10px;
margin:0 auto;
margin:0 auto;
overflow:hidden;
border:1px solid transparent;
float:left;
float:right;
float浮动
flost:left;
clear:both
.clearfix:after {
content: "";
height: 0;
line-height: 0;
display: block;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
position定位
position:relative;
left:10px;
top:10px;
position:absolute;
left:10px;
top:10px;
position:absolute;
left:10px;
top:10px;
.father{
positon:relative;
}
.son{
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
}
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相对定位relative
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
}
.father{
display:flex;
justify-content:center;
align-items:center;
}
vertical-align对齐
vertical-align:top;
vertical-align:middle;
overflow溢出
overflow:hidden;
overflow:auto;
overflow:scroll;
锚伪类
a:link {color: #FF0000;}
a:visited {color: #00FF00;}
a:hover {color: #FF00FF}
div:hover {color: #FF00FF}
a:hover {color: #0000FF;}
div:hover{color: #0000FF;}
文本超出加省略号
.text1{
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
.text2 {
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
z轴定位方向
position:absolute;
z-index:100;
opacity不透明度
opacity: 0.5;
filter: Alpha(opacity:50);
background-color:rgba(230,230,230,0.5);
css编辑顺序
cursor移入增加图标
cursor:pointer;
cursor: move;
cursor: not-allowed;
常用名称
