css样式01
# main.css
h1{
color: red;
font-size: 24px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--
** 设置样式表的三种分类:
1). 行内氧样式表;
2). 内部样式表;
3). 外部样式表;
-->
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式表-->
<!--<style>-->
<!--h1{-->
<!--color: red;-->
<!--font-size: 24px;-->
<!--}-->
<!--</style>-->
<!--<!-外部样式表–>-->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--内联样式表-->
<!--<h1 style="color: red; font-size: 24px">CSS样式</h1>-->
<h1 style="color: green">CSS样式表</h1>
</body>
</html>
实现水平导航栏加CSS样式
# nav.css
ul {
list-style-type: none;
text-align: center
}
ul li {
display: inline-block;
width: 20%;
height: 30px;
background: green;
padding-top: 15px;
font-size: 18px;
/*text-decoration: none;*/
}
ul li a {
text-decoration: none;
color: white;
}
/*鼠标经过时产生的变化*/
li:hover {
background: #4CAF50;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/nav.css">
</head>
<body>
<!--
行内元素: 占多少用多少
块级元素: 一个标签占一整行
-->
<ul>
<li><a href="http://www.baidu.com">博客</a></li>
<li><a href="#">学院</a></li>
<li><a href="#">技术</a></li>
<li><a href="#">编程</a></li>
</ul>
</body>
</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>
模拟唯品会注册网站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
padding: 0;
margin: 0;
}
/*div {*/
/*border: 1px solid red;*/
/*}*/
.header {
width: 1920px;
height: 100px;
margin: 0 auto;
}
.logo{
background: url("img/logo.png");
width: 174px;
height: 79px;
float: left;
margin-left: 200px;
margin-top: 10px;
}
.service{
margin-top: 20px;
background: url("img/service.png");
width: 321px;
height: 55px;
float: right;
margin-right: 200px;
}
.content {
width: 1920px;
height: 600px;
background: url("https://img.vipstatic.com/upload/flow/2018/06/15/157/15290438491111.jpg");
background-repeat: no-repeat; /*图片不能让嗯填充满的时候, 不重复显示*/
margin: 0 auto;
}
.main {
width: 360px;
height: 450px;
float: right; /*将div标签向右对齐*/
margin-right: 150px;
margin-top: 50px;
padding: 20px 20px 30px 20px; /*内边距: 上右下左*/
background: white;
text-align: center;
}
#registerText {
font-size: 20px;
font-weight: bold;
}
#loginText {
float: right; /*div向右偏移*/
display: inline; /*块级元素变为行内元素*/
}
.main input {
margin-top: 20px;
height: 40px;
width: 300px;
border: 1px solid darkgray;
border-radius: 10px;
text-align: left;
padding-left: 20px;
}
.main .code {
width: 140px;
}
.main input[type='checkbox'] {
width: 2px;
height: 2px;
}
.main input[type='submit'] {
background: #f10180;
color: white;
border: 1px solid #f10180;
text-align: center;
}
.main a {
text-decoration: none;
color: #1d94d1;
font-size: 13px;
}
.main #loginText a{
color: #f10180;
font-size: 15px;
}
.footer {
width: 1920px;
height: 100px;
text-align: center;
padding-top: 50px;
margin: 0 auto;
}
</style>
</head>
<body>
<!--导航栏部分(logo/图标)-->
<div class="header">
<div class="logo">
</div>
<div class="service">
</div>
</div>
<!--页面主体-->
<div class="content">
<!--注册表单界面-->
<div class="main">
<span id="registerText">会员注册</span>
<div id="loginText">已注册可<a href="#">直接登录</a></div>
<hr/>
<input type="text" placeholder="请输入电话号码"><br/>
<input type="text" class="code" placeholder="请输入验证码">
<input type="button" class="code" value="获取验证码">
<br/>
<input type="password" placeholder="请输入密码"><br/>
<input type="password" placeholder="请重新输入密码"><br/>
<input type="checkbox">我已阅读并接受以下条款:
<a href="#">《唯品会服务条款》 </a>
<a href="#">《隐私条款》 </a>
<a href="#">《唯品支付用户服务协议》 </a>
<a href="#">《唯品信用服务协议》 </a>
<br/>
<input type="submit" value="立即注册"><br/>
</div>
</div>
<!--脚标-底部设置(商标/备案信息)-->
<div class="footer">
Copyright 2008-2018 vip.com,All Rights Reserved ICP证:粤 B2-20080329
</div>
</body>
</html>
模拟唯品会登陆网站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
padding: 0;
margin: 0;
}
/*div {*/
/*border: 1px solid red;*/
/*}*/
.header {
width: 100%;
height: 100px;
}
.logo {
background: url("img/logo.png");
width: 174px;
height: 79px;
float: left;
margin-left: 200px;
margin-top: 10px;
}
.service {
margin-top: 20px;
background: url("img/service.png");
width: 321px;
height: 55px;
float: right;
margin-right: 200px;
}
.content {
width: 100%;
height: 600px;
background: url("https://img.vipstatic.com/upload/flow/2018/06/15/157/15290438491111.jpg");
background-repeat: no-repeat; /*图片不能让嗯填充满的时候, 不重复显示*/
}
.main {
width: 360px;
height: 300px;
float: right; /*将div标签向右对齐*/
margin-right: 150px;
margin-top: 100px;
padding: 20px 20px 30px 20px; /*内边距: 上右下左*/
background: white;
text-align: center;
}
#registerText {
font-size: 20px;
font-weight: bold;
}
#loginText {
float: right; /*div向右偏移*/
display: inline; /*块级元素变为行内元素*/
}
.main input {
margin-top: 20px;
height: 40px;
width: 300px;
border: 1px solid darkgray;
border-radius: 10px;
text-align: left;
padding-left: 20px;
}
.main .code {
width: 140px;
}
.main input[type='checkbox'] {
width: 2px;
height: 2px;
}
.main input[type='submit'] {
background: #f10180;
color: white;
border: 1px solid #f10180;
margin-top: 30px;
text-align: center;
}
.main a {
text-decoration: none;
color: #1d94d1;
font-size: 13px;
}
.main #loginText a {
color: #f10180;
font-size: 15px;
}
.footer {
width: 100%;
height: 100px;
text-align: center;
padding-top: 50px;
}
</style>
</head>
<body>
<!--导航栏部分(logo/图标)-->
<div class="header">
<div class="logo">
</div>
<div class="service">
</div>
</div>
<!--页面主体-->
<div class="content">
<!--注册表单界面-->
<div class="main">
<span id="registerText">会员登录</span>
<div id="loginText"><a href="#">直接注册</a></div>
<hr/>
<input type="text" placeholder="请输入电话号码"><br/>
<input type="password" placeholder="请输入密码"><br/>
<input type="submit" value="立即登录"><br/>
</div>
</div>
<!--脚标-底部设置(商标/备案信息)-->
<div class="footer">
Copyright 2008-2018 vip.com,All Rights Reserved ICP证:粤 B2-20080329
</div>
</body>
</html>
分页的设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
margin: 0 auto;
width: 50%;
height: 100px;
/*border: 1px solid red;*/
text-align: center;
margin-top: 300px;
}
ul.pagination li {
list-style-type: none;
display: inline;
}
ul.pagination li a {
text-decoration: none;
color: black;
padding: 8px 10px; /*10px左右内边距, 8px上下内边距*/
border: 1px solid darkgray;
border-radius: 20px;
}
ul.pagination li a.active {
background: green;
color: white;
}
/*如果类名不为active并且鼠标经过才显示的样式*/
ul.pagination li a:hover:not(.active) {
background: darkseagreen;
border: 1px solid green;
font-size: 19px;
}
</style>
</head>
<body>
<div>
<ul class="pagination">
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li>....</li>
<li><a href="#">20</a></li>
<li><a href="#">21</a></li>
<li><a href="#">下一页</a></li>
</ul>
</div>
</body>
</html>