发表于： 2019-01-07 13:44:25
1 679
今天完成的事情：
1. 任务五整体布局完成，小细节不打算实现了
效果：
布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>护工首页</title>
<link rel="icon" type="image/x-icon" href="./images/icon.png"/>
<link rel="stylesheet" type="text/css" href="./css/nurse.css" >
</head>
<body>
<!--头部-->
<header class="header clearfix">
<div>
<div>个人主页</div>
<a href=""><img src="./images/back.png" alt="返回按钮" width="30px"></a>
</div>
</header>
<!--内容-->
<section class="content clearfix">
<div class="content-top">
<img class="content-top-logo" src="./images/team.png" alt="头像" height="70">
<div class="content-top-right">
<span>徐女士 55岁</span>
<div>
<img src="./images/gps.png" alt="gps" height="20">
<span>京城·四方·报纸林</span>
</div>
</div>
</div>
<div class="content-bottom">
<div class="content-bottom-title">专业技能</div>
<div class="content-bottom-star">
<img src="./images/star.png" alt="星星" width="20">
<span>住家</span>
<img src="./images/star.png" alt="星星" width="20">
<span>不含餐</span>
</div>
<div class="content-bottom-content">
<span>从业年限</span><span>|</span><span>0~3年</span>
</div>
<div class="content-bottom-content">
<span>工作时间</span><span>|</span><span>全天</span>
</div>
<div class="content-bottom-content">
<span>服务价格</span><span>|</span><span>25元/小时</span>
</div>
<div class="content-bottom-self">
<div>
<span>自我介绍</span><span>|</span>
</div>
<p>可以洗衣做饭，照顾老人，可以洗衣做饭，照顾老人，可以洗衣做饭，照顾老人，可以洗衣做饭，照顾老人，可以洗衣做饭，照顾老人</p>
</div>
</div>
</section>
<!--尾部-->
<footer class="footer">
<button>留言</button>
<button>电话联系</button>
</footer>
</body>
</html>
样式：
*{
padding: 0;
margin: 0;
text-decoration: none;
box-sizing: border-box;
outline: none;
}
html,
body {
width: 100%;
height: 100%;
background-color: #fff;
font-size: 10px;
min-width: 320px;
}
/*防止高度坍塌*/
.clearfix::before,
.clearfix::after {
content: '';
display: table;
clear: both;
}
/**********************头部开始*********************/
.header {
background-color: #5fc0cd;
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
position: fixed;
top: 0;
z-index: 999;
color: #fff;
font-size: 15px;
font-weight: bold;
}
.header img {
float: left;
position: relative;
top: -40px;
margin-left: 10px;
}
/**********************头部结束*********************/
/**********************内容开始*********************/
.content {
width: 100%;
height: 100%;
margin-top: 50px;
margin-bottom: 50px;
}
.content-top {
background: url("../images/doctor.jpg");
background-size: cover;
width: 100%;
height: 200px;
position: relative;
}
.content-top-logo {
position: absolute;
top: 50%;
margin-top: -35px;
margin-left: 20px;
}
.content-top-right {
width: 120px;
height: 70px;
position: absolute;
top: 50%;
margin-top: -35px;
margin-left: 110px;
color: #fff;
}
.content-top-right span,img {
position: relative;
top: 20px;
vertical-align: middle;
}
.content-bottom {
position: relative;
}
.content-bottom-title {
width: 100%;
height: 40px;
line-height: 40px;
margin-top: 2px;
border-bottom: 1px solid #808080;
}
.content-bottom-star {
width: 100%;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #808080;
}
.content-bottom-star img{
position: relative;
margin-left: 20px;
top: -50%;
margin-top: 28px;
}
.content-bottom-star span{
position: relative;
top: -3px;
margin-left: 5px;
}
.content-bottom-content {
width: 100%;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #808080;
}
.content-bottom-self {
width: 100%;
margin: auto 0;
border-bottom: 1px solid #808080;
position: relative;
padding: 10px 0;
}
.content-bottom-self div {
height: 40px;
position: absolute;
top: 50%;
margin-top: -10px;
text-align: center;
}
.content-bottom-self span {
line-height: 100%;
}
.content-bottom-self p {
margin-left: 60px;
}
/**********************内容结束*********************/
/**********************尾部开始*********************/
.footer {
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
position: fixed;
bottom: 10px;
display: flex;
justify-content: space-around;
}
.footer button {
height: 50px;
width: 45%;
border-radius: 5px;
cursor: pointer;
border: 2px solid #5fc0cd;
}
.footer button:first-child {
background-color: #fff;
color: #5fc0cd;
}
.footer button:last-child {
background-color: #5fc0cd;
color: #fff;
}
/**********************尾部结束*********************/
2. 任务六大体布局，下拉框没实现
效果
布局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>护工列表</title>
<link rel="icon" type="image/x-icon" href="./images/icon.png"/>
<link rel="stylesheet" type="text/css" href="./css/nurse_list.css" >
</head>
<body>
<!--头部-->
<header class="header">
<div class="header-title">
<div class="header-title-center">
<div class="header-title-left">
<a href=""><span>找雇主</span></a>
</div>
<div class="header-title-right">
<a href=""><span>找护工</span></a>
</div>
</div>
</div>
<a href=""><img src="./images/gps.png" alt="返回按钮" width="20"></a>
</header>
<!--内容-->
<section class="content clearfix">
<div class="content-list-head">
<div>
<span>所在地 </span>
<img src="./images/drop.png" alt="" width="20">
</div>
<div>
<span>食宿 </span>
<img src="./images/drop.png" alt="" width="20">
</div>
<div>
<span>情况 </span>
<img src="./images/drop.png" alt="" width="20">
</div>
</div>
<div class="content-list-content">
<div class="content-list-content-first">
<img src="./images/calendar.png" alt="" width="20">
<span>服务日期</span>
</div>
<div class="content-list-content-second">
<span>2018-12-20 至 2018-12-30</span>
<a href="">25元/小时<img src="./images/arrow-right.png" alt="" width="15"></a>
</div>
<div class="content-list-content-first">
<img src="./images/gps.png" alt="" width="20">
<span>北京·大兴·安岭</span>
</div>
</div>
<div class="content-list-content">
<div class="content-list-content-first">
<img src="./images/calendar.png" alt="" width="20">
<span>服务日期</span>
</div>
<div class="content-list-content-second">
<span>2018-12-20 至 2018-12-30</span>
<a href="">25元/小时<img src="./images/arrow-right.png" alt="" width="15"></a>
</div>
<div class="content-list-content-first">
<img src="./images/gps.png" alt="" width="20">
<span>北京·大兴·安岭</span>
</div>
</div>
<div class="content-list-content">
<div class="content-list-content-first">
<img src="./images/calendar.png" alt="" width="20">
<span>服务日期</span>
</div>
<div class="content-list-content-second">
<span>2018-12-20 至 2018-12-30</span>
<a href="">25元/小时<img src="./images/arrow-right.png" alt="" width="15"></a>
</div>
<div class="content-list-content-first">
<img src="./images/gps.png" alt="" width="20">
<span>北京·大兴·安岭</span>
</div>
</div>
<div class="content-list-content">
<div class="content-list-content-first">
<img src="./images/calendar.png" alt="" width="20">
<span>服务日期</span>
</div>
<div class="content-list-content-second">
<span>2018-12-20 至 2018-12-30</span>
<a href="">25元/小时<img src="./images/arrow-right.png" alt="" width="15"></a>
</div>
<div class="content-list-content-first">
<img src="./images/gps.png" alt="" width="20">
<span>北京·大兴·安岭</span>
</div>
</div>
</section>
<!--尾部-->
<footer class="footer">
<div class="footer-center">
<div><img src="./images/home.png" alt="" width="40"> <br/><a href="">首页</a></div>
<div><img src="./images/editor1.png" alt="" width="60"></div>
<div><img src="./images/user.png" alt="" width="40"> <br/><a href="">我的</a></div>
</div>
</footer>
</body>
</html>
样式：
*{
padding: 0;
margin: 0;
text-decoration: none;
box-sizing: border-box;
outline: none;
}
html,
body {
width: 100%;
height: 100%;
background-color: #fff;
font-size: 10px;
min-width: 320px;
}
/*防止高度坍塌*/
.clearfix::before,
.clearfix::after {
content: '';
display: table;
clear: both;
}
/**********************头部开始*********************/
.header {
background-color: #5fc0cd;
width: 100%;
height: 50px;
text-align: center;
position: fixed;
top: 0;
z-index: 999;
font-size: 15px;
font-weight: bold;
}
.header-title {
width: 100%;
height: 100%;
}
.header-title-center {
background-color: #808080;
width: 40%;
height: 40px;
margin: 5px auto;
border-radius: 5px;
}
.header-title-left {
width: 50%;
height: 100%;
float: left;
line-height: 40px;
border-radius: 5px;
}
.header-title-left a {
color: #fff;
}
.header-title-right {
background-color: #fff;
width: 50%;
height: 100%;
float: left;
margin: 0 auto;
line-height: 40px;
border-radius: 5px;
}
.header-title-right a {
color: #5fc0cd;
}
.header a img {
float: right;
position: relative;
margin-right: 20px;
margin-top: -35px;
}
/**********************头部结束*********************/
/**********************内容开始*********************/
.content {
width: 100%;
height: 100%;
position: relative;
top: 50px;
}
.content-list-head {
background-color: #fff;
height: 40px;
width: 100%;
line-height: 40px;
display: flex;
position: fixed;
top: 50px;
text-align: center;
z-index: 999;
}
.content-list-head div {
flex: 1;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
}
.content-list-head div img{
vertical-align: middle;
position: relative;
left: 15px;
}
.content-list-head span:last-child {
border-right: none;
}
.content-list-content {
position: relative;
top: 50px;
border-bottom: 1px solid #808080;
}
.content-list-content-first {
width: 100%;
height: 40px;
line-height: 40px;
font-size: 15px;
color: #808080;
}
.content-list-content-first img {
vertical-align: middle;
position: relative;
top: -2px;
margin-left: 10px;
}
.content-list-content-second {
width: 100%;
height: 40px;
line-height: 40px;
font-size: 15px;
}
.content-list-content-second span {
padding-left: 10px;
}
.content-list-content-second a {
float: right;
margin-right: 20px;
}
/**********************内容结束*********************/
/**********************尾部开始*********************/
.footer {
background-color: #5fc0cd;
width: 100%;
height: 80px;
text-align: center;
position: fixed;
bottom: 0;
}
.footer-center {
width: 80%;
height: 100%;
display: flex;
justify-content: space-around;
margin: 10px auto;
}
/**********************尾部结束*********************/
3. 任务七版本选择大体布局
效果
布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>桌游精灵-版本选择</title>
<link rel="icon" type="image/x-icon" href="./images/icon.png"/>
<!--Bootstrap-->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./css/board_game.css" >
</head>
<body>
<!--头部-->
<header class="header">
<div>
<img src="./images/menu.png" alt="" width="30">
</div>
</header>
<!--内容-->
<section class="content clearfix">
<div class="content-top">
<span>上次游戏：捉鬼猜词版</span>
<img src="./images/arrow-right.png" alt="" width="15">
</div>
<div class="content-bottom">
<div class="content-bottom-title">
<span>捉鬼游戏</span>
</div>
<div class="content-bottom-content">
<p>简化版</p>
<span>有1133位用户在玩此款游戏</span>
</div>
<div class="content-bottom-content content-bottom-content2">
<p>简化版</p>
<span>有1133位用户在玩此款游戏</span>
</div>
<div class="content-bottom-content content-bottom-content2">
<p>简化版</p>
<span>有1133位用户在玩此款游戏</span>
</div>
</div>
<div class="content-right">
<img src="./images/arrow-right.png" alt="" width="30">
</div>
</section>
<!--尾部-->
<footer class="footer">
<div class="footer-dot footer-dot-using">
</div>
<div class="footer-dot">
</div>
<div class="footer-dot">
</div>
<div class="footer-dot">
</div>
</footer>
<!--Bootstrap-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
样式：
*{
padding: 0;
margin: 0;
text-decoration: none;
box-sizing: border-box;
outline: none;
}
html,
body {
width: 100%;
height: 100%;
background-color: #fff;
font-size: 10px;
min-width: 320px;
}
/*防止高度坍塌*/
.clearfix::before,
.clearfix::after {
content: '';
display: table;
clear: both;
}
/**********************头部开始*********************/
.header {
background-color: #5fc0cd;
width: 100%;
height: 50px;
line-height: 50px;
padding-left: 10px;
position: fixed;
top: 0;
z-index: 999;
}
/**********************头部结束*********************/
.content-top {
width: 80%;
height: 80px;
margin: 10px auto;
text-align: center;
line-height: 80px;
border: 1px solid #808080;
position: relative;
top: 50px;
}
.content-top img {
vertical-align: middle;
position: relative;
right: -30px;
}
.content-bottom {
position: relative;
top: 50px;
width: 90%;
border: 1px solid #5fc0cd;
margin: 0 auto;
}
.content-bottom-title {
width: 80%;
height: 60px;
margin: 0 auto;
text-align: center;
line-height: 60px;
}
.content-bottom-content {
height: 120px;
width: 100%;
text-align: center;
padding-top: 10px;
border-top: 2px solid #5fc0cd;
}
.content-bottom-content p {
background-color: #5fc0cd;
height: 80px;
width: 80%;
margin: 0 auto;
line-height: 80px;
}
.content-bottom-content2 {
border-top: none;
}
.content-right {
position: fixed;
right: 5%;
top: 50%;
}
/**********************内容开始*********************/
/**********************内容结束*********************/
/**********************尾部开始*********************/
.footer {
width: 30%;
height: 30px;
text-align: center;
position: fixed;
bottom: 0;
left: 35%;
display: flex;
}
.footer-dot {
background-color: #808080;
width: 10px;
height: 10px;
border-radius: 10px;
margin: 0 auto;
float: left;
justify-content: space-between;
}
.footer-dot-using {
background-color: #5fc0cd;
}
/**********************尾部结束*********************/
明天计划的事情：
继续任务七
遇到的问题：
1. 垂直居中这块还是不熟悉
2. 下拉框可以单独实现，未放到项目里
收获：
熟悉各种居中及基本布局
返回列表
评论