p 段落
b 加粗
strong 加粗
i 倾斜
em 倾斜
s 删除线
u 下划线
a 超链接
属性:href="路径"
img 图片
属性: src='' alt="" title="鼠标移入图片时的提示"
div 布局
hr 分割线
br 换行
空格
< 小于
>大于
©版权
列表:
1.有序列表
<ol type="1">
<li></li>
</ol>
type: 默认1 a A i I
start:从哪开始
班规:
a A II.不能吃
b B.不能睡
c C.不能闹
2.无序列表
<ul>
<li></li>
</ul>
type:disc(实心圆点) circle(空心圆)square(方块) none(无)
3.自定义列表
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>生活指南</dd>
<dd>购物流程</dd>
<dd>生活指南</dd>
</dl>
4.列表的嵌套
<p><a><img/></a></p>
<ul>
<li>
电影
<ul>
<li>比悲伤更悲伤的故事</li>
<li>大人物</li>
<li>一吻定情</li>
</ul>
</li>
</ul>
表格
<table></table>
行: tr :<tr></tr>
列: td :<td></td>
跨列:colspan=3
跨行:rowspan=3(list-style:none;)去掉li默认的点
右浮动:float:right
左浮动:float:left
clear:both;清除浮动两端所带来的影响
清除浮动方法一
.clear{
clear:both;清除浮动两端所带来的影响
}
/清除浮动方法二/
/* overflow:visible / hidden; scroll/ auto /
/ .box{ /
/ overflow:hidden; //给父元素添加/
/ overflow:auto;
} /
/清除浮动的方法三/
/ .box{
height:200px;
} */
/*清除浮动方法四 伪类 推荐使用*/
.box:after{
content:'';/*在box后面添加内容为空*/
display:block;/*把添加的内容转换成块元素*/
clear:both; /*清除元素两端的浮动*/
去掉a标签下划线:text-decoration:none
作者:TianMeng1
链接:https://www.jianshu.com/p/b586ea9f6d0a
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。/* 公共样式 /
{
/去掉所有元素的内边距和外边距/
padding:0;
margin:0;
}
/* 去掉li默认的样式 /
li{
list-style:none;
}
/ 去掉a标签的下划线 /
a{
text-decoration:none;
}
/ 字体*/
body{
font-family:Microsoft YaHei,tahoma,arial,Hiragino Sans GB,sans-serif;
}
.banner,.banner_bottom,.new_case,.website,.special,.team,.foot{
/宽度 水平居中 边框/
width:1200px;
margin:0 auto;
border:1px solid #000;
}
.nav{
width:1200px;
margin:20px auto 0;
}
.nav:after{
content:"";
display:block;
clear:both;
}
/导航的样式/
.logo,.nav_list{
float:left;
}
.nav_list{
overflow:hidden;
width:480px;
margin-left:420px;
height:58px;
line-height:58px;
}
.nav_list>li{
float:left;
width:80px;
text-align:center;
}
.nav_list>li>a{
/字体颜色/
color:#444444;
}
.logo{
width:300px;
display:inline-block;
/* border:1px solid #000; /
}
.logo>img{
width:100%;
}
/ 设置首页为红色 /
.nav_list>li:first-child>a{
color:#F1501A;
border-top:3px solid #F1501A;
height:100%;
display:inline-block;
}
text-indent:...px.;首行缩进
line-height:......px;行高
text-decoration:underline;文本装饰为下划线
color:green;文本颜色
text-align:center;文本居中
text-align:left; 文本居左,默认
/ text-align:right; 文本居右
PX像素
%相对单位
in英寸 一英尺=2.54cm
cm 厘米
mm 毫米
作者:TianMeng1
链接:https://www.jianshu.com/p/c5e0de6850a0
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。