今天学到了什么
1.常用HTML标签
1.1 段落标签
<p>hello world</p>
1.2 图片标签<src>
<img src="images/timg.jpg" alt="这是张垃圾图片"><br> //其中alt属性是当图片无法显示时对图片的描述,<br>为换行标签
1.3 文本框，按钮
<input type="text"><button>百度一下</button>
1.4 无序列表ul，列表项li
<ul>
<li>小米手机</li>
<li>苹果手机</li>
<li>三星手机</li>
</ul>
1.5 链接标签<a>
<a href="https://www.jianshu.com/">简书</a> //点击简书时为自动跳转到简书网站
1.6 定义标签
<dl> //定义列表
<dt>HTML</dt> //定义的术语
<dd>456</dd> //定义的描述
</dl>
2.CSS样式
2.1 常用的css样式
color:设置文字的颜色
width:设置一个元素的宽度
height:设置一个元素的高度
background-color:设置背景颜色
background-image:设置一个元素的背景图片
line-height:设置文字的行高
text-align:设置文字对其的方式
border-width:边框的宽度
2.2 给<p>设置一个样式
p{
background-color: pink; /* 背景颜色 */
height: 50px; /* 设置一个高度 */
line-height: 50px; /* 行高会让文本在行高中垂直居中 */
color: white; /* 字体颜色 */
text-align: center; /* 设置文本的对其方向*/
font-size: 20px; /* 设置字体大小*/
}
<p>hello world</p>
效果展示：
p标签.png
3.css常用选择器
3.1class选择器
.one{
color: pink;
}
.two{
background-color: #eee;
}
<p class="one two">123</p>
<p class="one">456</p>
<p class="two">789</p>
效果展示：
class.png
3.2 id选择器（不常用）
#ps{
color: blue;
}
<p id="ps">789789</p>
4.盒子模型
/*
margin
功能：可以改变元素的位置
border: 可以改变元素的宽度
padding : 可以改变元素的width和height
*/
div{
width: 100px;
height: 100px;
background-color: red;
margin-left: 100px;
margin-top: 100px;
border-width: 10px;
border-style: solid;
border-color: black;
padding-left: 20px;
padding-right: 20px;
padding-top: 30px;
padding-bottom: 30px;
}
盒子模型.jpg
5.水平居中
<style>
div{
/* 元素水平居中 */
margin-left: auto;
margin-right: auto;
}
</style>
6.样式重置
<style>
/* 样式重置
写样式之前要对所有样式进行重置*/
*{margin: 0; padding: 0;}
</style>
今天不会什么
