今天的收获
AM
1.命名规范
1.1布局相关
1.1.png
1.2模块相关
1.2.png
1.21.png
1.3状态相关
1.3.png
1.4命名规则
1.4.1驼峰命名
<p class="navWrap"></p>
1.4.2划线命名
<p class="nav-wrap"></p>
或
<p class="nav_wrap"></p>
2.背景及背景的缩写
<style>
div{
width:200px;
height: 200px;
background-color: red;
background-image: url("images/icon1.png");
/*
背景重复
background-repeat:no-repeat|repeat-x|repeat-y
*/
background-repeat: no-repeat;
/*
背景位置
background-position-x: 横坐标方向的位置;
background-position-y: 纵坐标方向的位置;
//传参 top,right,bottom,left,conter
*/
/*
背景简写
background-position:x y;
*/
background-position: center center;
}
</style>
<body>
<div>
</div>
</body>
相当于
<style>
div{
width: 200px;
height: 200px;
/*
背景简写
background:color image repeat positiom
*/
background: rebeccapurple url("images/icon1.png") no-repeat center center;
}
</style>
3.背景的吸附
<style>
.banner{
height: 468px;
background: rebeccapurple url("images/banner.jpg") no-repeat center center;
/*
background-attachment：scroll|fixed；
*/
background-attachment: fixed;
}
.content{
height: 800px;
background: burlywood;
}
</style>
<body>
<div>
<div class="banner"></div>
<div class="content"></div>
</div>
</body>
4.背景的大小
<style>
div{
width: 600px;
height: 200px;
background: rebeccapurple url("images/banner.jpg") no-repeat center center;
/*
背景大小
background-size:x y;
x-->width;
y-->height;
cover-->会覆盖整个div 特点：只能以大覆小
相当于background-size: 100% 100%;
*/
background-size: 100% 100%;
}
</style>
<body>
<div>
</div>
4.文本
<style>
/*
文本对齐
text-align: center|left|right;
*/
p{
text-align: center;
}
/*
文本修饰
text-decoration: none|underline|overline|line-through
*/
a{
text-decoration: none;
}
/*
文本缩进
text-indent
*/
/*
文本转换
text-transform: uppercase|lowercase|capitalize
*/
h4{
text-indent: 20px;
text-transform: capitalize;
}
</style>
<body>
<p>hello world</p>
<a href="#">百度</a>
<!--lorem+tab 快速写出一段废话-->
<h4>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos tempora perspiciatis nihil totam non inventore maiores quis, praesentium est recusandae molestiae, odit aperiam delectus unde odio fuga molestias at dolorum.</h4>
</body>
5.字体
<style>
body{
font-family: "Microsoft YaHei"
}
/*
最小的字体-->不要小于12px
font-size字体大小
字体样式
font-style: normal|italic;
字体的权重
font-weight: bold|bolder|lighter|800
若是数字，则范围：100-900
*/
p{
font-size: 14px;
font-style: italic;
font-weight: 800;
}
</style>
<body>
<P>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quos, aliquid quod! Esse veniam, deserunt voluptate, iste molestias necessitatibus, quos tenetur laboriosam molestiae vel temporibus aperiam dolorum ducimus nesciunt exercitationem fugiat.</P>
<i>hello world</i>
</body>
6.链接
<style>
/*
link-->没有访问的链接
visited-->已经访问过的链接
hover-->鼠标移入到链接上的状态
active-->鼠标点击的那一刻
tip:同时使用链接的这几种状态，顺序不打乱
*/
a:link{
color:red;
}
a:visited{
color: aquamarine;
}
a:hover{
color: rgb(134, 134, 96);
}
a:active{
color: cornflowerblue;
}
</style>
</head>
<body>
<a href="http://www.jd.com">京东</a>
</body>
7.列表
<style>
/*
列表样式
list-style:none;
列表氧化四类型
list-style-tpe:dise|circle|square
列表样式图片
list-style-image:url(
*/
ul{
/* list-style-type: disc;*/
list-style-image:url("images/icon1.png")
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
9.表格
<style>
table,th,td{
width:500px;
border: 1px solid salmon;
}
table{
/*关键样式*/
border-collapse:collapse;
line-height: 50px;
text-align: center;
}
</style>
<body>
<table>
<thead>
<!--tr: table row-->
<tr><th>商城</th><th>手机</th></tr>
</thead>
<tbody>
<!--td: table date-->
<tr><td>JD</td><td>苹果</td></tr>
<tr><td>JD</td><td>苹果</td></tr>
<tr><td>JD</td><td>苹果</td></tr>
</tbody>
</table>
</body>
PM
1.跨越行的表格
<style>
table,td{
border:1px solid #333;
}
table{
text-align: center;
border-collapse: collapse;
width: 500px;
line-height: 50px;
}
</style>
<body>
<table>
<tr><td rowspan="3">商城</td><td>鞋子</td><td>衣服</td></tr>
<tr> <td>手机</td><td>钱包</td></tr>
<tr> <td>手机</td><td>钱包</td></tr>
</table>
</body>
2.跨越列的表格
<style>
/*谁跨越列就给谁colspan*/
table{
width :500px;
line-height: 50px;
border-collapse: collapse;
text-align: center;
}
table,td{
border: 1px solid #333;
}
</style>
</head>
<body>
<table>
<tr><td colspan="2">商场</td></tr>
<tr><td>手机</td><td>衣服</td></tr>
<tr><td>钢笔</td><td>衣服</td></tr>
<tr><td>化妆品</td><td>衣服</td></tr>
<tr><td>瓶子</td><td>衣服</td></tr>
</table>
</body>
3.轮廓
<style>
div{
width: 100px;
height: 100px;
background: rosybrown;
outline: 10px solid goldenrod;
}
input{
margin-top:50px;
outline:none;
}
</style>
<body>
<div>
</div>
<input type="text">
</body>
4.透明度
<style>
div.parent{
width: 200px;
height: 200px;
background:yellow;
}
/*opacity设置元素的透明度*/
div.child{
width:100px;
height: 100px;
background:rgb(206, 193, 168);
opacity: 0.5;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
5.样式继承
<style>
/*
Tips:仅仅发生在块级元素之间
子元素
*/
.parent{
width: 200px;
height: 200px;
background:teal;
}
.child{
height:100px;
background:skyblue;
}
</style>
<body>
<!--width的继承-->
<div class="parent">
<div class="child"></div>
</div>
</body>
6.height
<style>
/* 特殊 */
/* 父元素不设置height,它会获取子元素的height */
.parent{
width:200px;
background:red;
}
.child{
width:100px;
height:100px;
background:blue;
}
</style>
<body>
<!-- 继承:子级对父级的关系 -->
<div class="parent">
<div class="child"></div>
</div>
</body>
7.
<style>
body{
text-align: center;
color:red;
text-decoration: underline;
font-size: 30px;
}
ul{
list-style: none;
}
table{
border-collapse: collapse;
}
</style>
<body>
<!-- 文本和字体相关属性都是可以继承的 -->
<p>hello world</p>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<div>
hello
<p>world</p>
</div>
</body>
8.样式
<style>
body{
font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
font-size: 14px;
color:#333;
}
</style>
</head>
<body>
</body>
网友评论