CSS:页面美化和布局控制
- 概念:Cascading Style sheets 叠层样式表
- 叠层:多个样式可以作用于同一个html的元素,同时生效
- 好处:功能强大,将内容展示样式控制分离,降低耦合度,解耦,让分工协作更容易,提高开发效率
CSS和HTML的结合方式:
注意:
1,2,3方式作用范围越来越大,1方式不常用也不推荐使用
3方式还可以这样写
<style>
@import"css/a.css";
</style>
CSS基本语法:
基础选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
#div1{
color: red;
}
.csc{
color: darkblue;
}
div{
color: black;
}
</style>
</head>
<body>
<div id="div1">absolute</div>
<div class="csc">justice</div>
<div>peacemaker</div>
<div class="csc">differently</div>
</body>
</html>
运行结果:
扩展选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
div p{
color: red;
}
input[type=text]{
border:5px solid;
}
a:link{
color:pink;
}
a:active{
color:black;
}
a:hover{
color:yellow;
}
a:visited{
color:blue;
}
</style>
</head>
<body>
<div>
<p>destroy</p>
</div>
<p>
abandoned
</p>
<input type="text" name="name">
<br>
<input type="password" name="password">
<br>
<a href="#">github</a>
</body>
</html>
运行结果如下
属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体属性</title>
<style>
p{
font-size: 30px;
text-align: center;
border: 1px solid red;
color: yellow;
line-height: 100px;
}
div{
border: yellow 1px;
height: 765px;
width: 1080px;
background: center url("../html/image/picture01.jpg") no-repeat ;
}
</style>
</head>
<body>
<p>天神下饭</p>
<br>
<div>shy哥一锤四</div>
</body>
</html>
效果如下
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div{
border: 1px red solid;
width: 100px;
}
.div1{
width: 200px;
height: 200px;
padding: 50px;
box-sizing: border-box;
}
.div2{
width: 100px;
height: 100px;
/*margin: 50px;*/
}
.div3{
float: left;
}
.div4{
float: left;
}
.div5{
float: left;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
<div class="div3">aaa</div>
<div class="div4">bbb</div>
<div class="div5">ccc</div>
</body>
</html>
效果:
最后放一个自己做的比较丑的注册案例的实现图和代码
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册界面2.0</title>
<style>
.div1{
width: 1900px;
height: 955px;
background: url("../html/image/picture04.jpg") center no-repeat;
background-size: cover;
margin: auto;
}
.div2{
width: 1000px;
height: 800px;
margin: auto;
background: aliceblue;
border: gray 5px solid;
}
.div-left{
width: 300px;
height: 800px;
float: left;
box-sizing: border-box;
}
.div-center{
width: 400px;
height: 800px;
float: left;
box-sizing: border-box;
background: aliceblue;
}
.div-right{
width: 290px;
height: 200px;
float: left;
}
.p1{
width: 300px;
height: 50px;
color: aquamarine;
text-align: center;
font-size: 35px;
}
.p2{
width: 300px;
height: 50px;
color: red;
text-align: center;
font-size: 35px;
}
.table{
width: 400px;
height: 800px;
}
.td1{
width: 111px;
height: 86px;
font-size: 20px;
padding-left: 20px;
color: black;
box-sizing: border-box;
}
.td2{
width: 289px;
height: 86px;
font-size: 30px;
padding-left: 30px;
box-sizing: border-box;
}
#login{
float: right;
font-size: 30px;
}
#link{
color: green;
}
#register{
font-size: 30px;
color: green;
margin-left: 30px;
border-radius: 5px;
}
.input{
font-size: 20px;
color: green;
text-align: left;
border: 2px solid gray;
border-radius: 5px;
}
.gender{
font-size: 25px;
color: gray;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div-left">
<p class="p1">新用户注册</p>
<p class="p2">USER REGISTER</p>
</div>
<div class="div-center">
<form action="#" method="get">
<table class="table">
<tr>
<td class="td1">用户名</td>
<td class="td2"><input type="text" name="username" placeholder="请输入用户名" class="input"></td>
</tr>
<tr>
<td class="td1">密码</td>
<td class="td2"><input type="password" name="password" placeholder="请输入密码" class="input"></td>
</tr>
<tr>
<td class="td1">Email</td>
<td class="td2"><input type="email" name="email" placeholder="请输入邮箱" class="input"></td>
</tr>
<tr>
<td class="td1">姓名</td>
<td class="td2"><input type="text" name="name" placeholder="请输入姓名" class="input"></td>
</tr>
<tr>
<td class="td1">手机号</td>
<td class="td2"><input type="number" name="phoneNumber" placeholder="请输入手机号" class="input"></td>
</tr>
<tr>
<td class="td1">性别</td>
<td class="gender"><input type="radio" name="gender" value="male" class="gender">男
<input type="radio" name="gender" value="female" class="gender">女</td>
</tr>
<tr>
<td class="td1">出生日期</td>
<td class="td2"><input type="date" name="birthday" class="input"></td>
</tr>
<tr>
<td class="td1">验证码</td>
<td class="td2"><input type="text" name="checkCode" placeholder="请输入验证码" class="input"></td>
</tr>
<tr>
<td class="td1"></td>
<td><input type="submit" value="注册"id="register"></td>
</tr>
</table>
</form>
</div>
<div class="div-right">
<p id = "login">已有账号?<a href="www.baidu.com" id="link">立即登录</a></p>
</div>
</div>
</div>
</body>
</html>