day02
2018-07-10 本文已影响0人
叶子巨蟹
今天学到了什么
1.常用的标题
1.1标题等级
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
1.2插入图片
创建一个文件夹放入所需图片
01.png
<img src="images/test.jpg" alt="">
1.3创建输入框
<input type="text"><button>百度一下</button>
1.4无序标签
<ul>
<li>小米手机</li>
<li>华为手机</li>
<li>苹果手机</li>
</ul>
1.5网页链接
<ahref="https://www.jianshu.com/">百度</a>
2.CSS
<style>
P{
background-color:pink;
height:50px;
line-height: 50px;
color:greenyellow;
text-align:center;
font-size:12px;
}
</style>
</head>
<body>
<p>青春打马而过，我们落花成伤</p>
</body>
</html>
3.常用选择器
<style>
.one{
color: greenyellow;
}
.two{
background:#eee;
}
#three{
color:yellow;
}
h1:hover{
color:green;
}
</style>
</head>
<body>
<p class="one two">hello world</p>
<p class="one">hello world</p>
<p class="one">hello world</p>
<p id="three">hello world</p>
<p>hello world</p>
<h1>hover</h1>
</body>
</html>
4.盒子模型
<style>
div{
width:100px;
height:100px;
background: red;
margin-left: 100px;
margin-top: 100px;
border-width: 100px;
border-style: solid;
border-color: black;
padding-left: 20px;
padding-right: 20px;
padding-top: 30px;
padding-bottom: 30px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
5.水平居中
<style>
div{
text-align: center;
width: 200px;
height:200px;
background-color: red;
margin-left: auto;
margin-right:auto;
}
</style>
</head>
<body>
<div>hellow world</div>
</body>
</html>
6.样式重置
<style>
*{
margin: 0;padding: 0;}
</style>
</head>
<body>
<p>p</p>
<h1>h1</h1>
<div>div</div>
<input type="text">
</body>
</html>
