HTML中应⽤外部样式表进⾏页⾯的制作基本框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/main01.css">
</head>
<body>
<div class="content">
<div class="main">
<h1>Welcome</h1>
<form action="#">
<input type="text" placeholder="请输⼊帐号"><br/>
<input type="password" placeholder="请输⼊密码"><br/>
<input type="submit" value="登     ；陆">
</form>
</div>
</div>
</body>
用html和css制作百度页面</html>
添加的外部样式表
body {
margin: 0; /*去掉默认的外边距*/
padding: 0; /*去掉默认的内边距*/
}
.content {
background-color: pink;  /*设置背景颜⾊*/
margin-top: 200px;
height: 400px;
}
.main {
/*border: 1px solid red;*/
width: 600px;
height: 400px;
margin: 0 auto; /*块级标签居中的⽅式*/    padding-top: 30px;
text-align: center;
}
.main h1 {
font-size: 60px;
color: white;
}
input[type='text'], input[type='password'] {    width: 400px;
height: 46px;
border-radius: 25px;
border: 0;
margin-top: 15px;
text-align: center;
}
input[type='submit'] {
background: #f31239;
border-radius: 25px;
margin-top: 15px;
width: 200px;
height: 46px;
border: 0;
color: white;
}
input:hover {
background: deeppink;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。