今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
今天完成了任务六，审核通过，还有看了下Bootstrap
明天计划的事情：（一定要写非常细致的内容）
开始任务七
遇到的问题：（遇到什么困难，怎么解决的）
遇到了如果说在一些特定的条件下
这个的话我的布局就是没有写底部标签， 直接在<main>里面写上了，设置一个颜色了不知道这样对不对
收获：（通过今天的学习，学到了什么知识）
开始看下关于Bootstrap知道了它是这么个玩意儿
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。
利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、
基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。
不过好像是说还要一点js的一部分基础知识啊
Bootstrap 包的内容
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
这将在 Bootstrap 基本结构 部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，
以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
还有3和4的区别啊
Bootstrap4 是 Bootstrap 的最新版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。
还有东西这么多。有的看了
耗时2018.9.13-2018.9.25
成果链接：https://jksmiss.github.io/start-a-project/task6/task6.html
我的脑图
官方脑图
首先使用了<headr>这样的语义化标签进行布局
中间的部分就使用了<main>
然后结尾部分就使用了<footer>
相对定位部分我就使用了在头部的部分，旁边的雪碧图上
旁边的是用了绝对定位
接着中间的部分我使用了相对定位加上绝对定位
其中的右边灰色的三角形部分，绝对，还有中间部分的宽高也是使用i相对定位做的
接下来的是下拉框部分了
这个部分是使用了hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
HTML 部分：
我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素。
使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。
使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
CSS 部分：
.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。
注意 min-width 的值设置为 160px。可以随意修改它。
注意: 如果你想设置下拉内容与下拉按钮的宽度一致，
可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
下面的这个部分我使用的是flex方式布局，在中间的那行字上面，然后设置好宽高以后接着进行设置下最后再使用统一的样式
这个是接下来的设置
接下来的是底部的设置
底部的设置我使用了固定定位，使用flex以后使用了三个轴左右两边，中间居中的
- position: fixed;
- display: flex;
- justify-content: space-around;
最后附上完整的
最后的部分就把按钮的样式边框给去除了
outline:none;是去除按钮标签自带的蓝色边框
最后附上任务六的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./task6.css">
</head>
<body>
<header>
<div class="alt">
<!-- 切换菜单栏 -->
<div class="demandbox">
<!-- 外部盒子 -->
<button class="demand" onclick="location.href='6.html'">找雇主</button>
<!-- 需求1 -->
<button class="demand2">找护工</button>
<!-- 需求2 -->
</div>
<button class="location"></button>
<!-- 第一个雪碧图 -->
</div>
<div class="ddbbox">
<!-- 下拉框选项外部盒子drop-down boxbox缩写 -->
<div class="ddb">
<!-- drop-down-box的缩写 -->
<div>
<!-- 第一个下拉框外部盒子 -->
<span class="site">所在地</span>
<span class="triangle"></span>
<!-- 倒三角形 -->
</div>
<ul class="dropdown-content">
<!-- 下拉框 -->
<li class="ddb1">1</li>
<li class="ddb1">2</li>
<li class="ddb1">3</li>
</ul>
</div>
<div class="ddb">
<!-- drop-down-box的缩写 -->
<div class="ddbbox2">
<!-- 第二个下拉框外部盒子 -->
<span class="rad">食宿</span>
<!-- room and board缩写 -->
<span class="triangle1"></span>
<!-- 倒三角形 -->
</div>
<ul class="dropdown-content1">
<!-- 下拉框 -->
<li class="ddb1">1</li>
<li class="ddb1">2</li>
<li class="ddb1">3</li>
</ul>
</div>
<div class="ddb">
<!-- drop-down-box的缩写 -->
<div>
<!-- 三个下拉框外部盒子 -->
<span class="cdt">病人情况</span>
<!-- condition的缩写 -->
<span class="triangle"></span>
<!-- 倒三角形 -->
</div>
<ul class="dropdown-content">
<!-- 下拉框 -->
<li class="ddb1">1</li>
<li class="ddb1">2</li>
<li class="ddb1">3</li>
</ul>
</div>
</div>
</div>
</header>
<main>
<div class="ibbox1">
<!-- information bar第一条信息栏外部盒子 -->
<div class="ibbox2">
<!-- 第一条内部信息栏盒子 -->
<div class="icon1"></div>
<!-- 中间第一个雪碧图 -->
<span class="sd">服务日期</span>
<!-- 中间第一行文字 -->
</div>
<div class="ttb">
<!-- 文字盒子 -->
<p>2015-7-5 至 2015-7-12</p>
<!-- 中间第二行文字 -->
<p class="time">25元/小时<span class="trigon"></span></p>
<!-- 时间样式 -->
<!-- 右边三角形 -->
</div>
<div class="tfb">
<!-- The following box缩写下面盒子 -->
<div class="icon2"></div>
<!-- 下面第一个雪碧图 -->
<span class="place">北京.通州.果园</span>
</div>
</div>
<div class="ibbox1">
<!-- information bar第一条信息栏外部盒子 -->
<div class="ibbox2">
<!-- 第一条内部信息栏盒子 -->
<div class="icon1"></div>
<!-- 中间第一个雪碧图 -->
<span class="sd">服务日期</span>
<!-- 中间第一行文字 -->
</div>
<div class="ttb">
<!-- 文字盒子 -->
<p>2015-7-5 至 2015-7-12</p>
<!-- 中间第二行文字 -->
<p class="time">35元/小时<span class="trigon"></span></p>
<!-- 时间样式 -->
<!-- 右边三角形 -->
</div>
<div class="tfb">
<!-- The following box缩写下面盒子 -->
<div class="icon2"></div>
<!-- 下面第一个雪碧图 -->
<span class="place">北京.通州.果园</span>
</div>
</div>
<div class="ibbox1">
<!-- information bar第一条信息栏外部盒子 -->
<div class="ibbox2">
<!-- 第一条内部信息栏盒子 -->
<div class="icon1"></div>
<!-- 中间第一个雪碧图 -->
<span class="sd">服务日期</span>
<!-- 中间第一行文字 -->
</div>
<div class="ttb">
<!-- 文字盒子 -->
<p>2015-7-5 至 2015-7-12</p>
<!-- 中间第二行文字 -->
<p class="time">45元/小时<span class="trigon"></span></p>
<!-- 时间样式 -->
<!-- 右边三角形 -->
</div>
<div class="tfb">
<!-- The following box缩写下面盒子 -->
<div class="icon2"></div>
<!-- 下面第一个雪碧图 -->
<span class="place">北京.通州.果园</span>
</div>
</div>
<div class="ibbox1">
<!-- information bar第一条信息栏外部盒子 -->
<div class="ibbox2">
<!-- 第一条内部信息栏盒子 -->
<div class="icon1"></div>
<!-- 中间第一个雪碧图 -->
<span class="sd">服务日期</span>
<!-- 中间第一行文字 -->
</div>
<div class="ttb">
<!-- 文字盒子 -->
<p>2015-7-5 至 2015-7-12</p>
<!-- 中间第二行文字 -->
<p class="time">45元/小时<span class="trigon"></span></p>
<!-- 时间样式 -->
<!-- 右边三角形 -->
</div>
<div class="tfb">
<!-- The following box缩写下面盒子 -->
<div class="icon2"></div>
<!-- 下面第一个雪碧图 -->
<span class="place">北京.通州.果园</span>
</div>
</div>
<div class="ibbox1">
<!-- information bar第一条信息栏外部盒子 -->
<div class="ibbox2">
<!-- 第一条内部信息栏盒子 -->
<div class="icon1"></div>
<!-- 中间第一个雪碧图 -->
<span class="sd">服务日期</span>
<!-- 中间第一行文字 -->
</div>
<div class="ttb">
<!-- 文字盒子 -->
<p>2015-7-5 至 2015-7-12</p>
<!-- 中间第二行文字 -->
<p class="time">45元/小时<span class="trigon"></span></p>
<!-- 时间样式 -->
<!-- 右边三角形 -->
</div>
<div class="tfb">
<!-- The following box缩写下面盒子 -->
<div class="icon2"></div>
<!-- 下面第一个雪碧图 -->
<span class="place">北京.通州.果园</span>
<!-- 下面地址文字样式 -->
</div>
</div>
</main>
<footer>
<div class="buttom-menu">
<!-- 底部菜单栏 -->
<span class="icon3"></span>
<!-- 首页雪碧图 -->
<button class="home-page">首页</button>
<!-- 首页 -->
</div>
<div class="bottom-conten">
<!-- 中心圆 -->
<button class="icon4"></button>
<!-- 中心的雪碧图 -->
</div>
<div class="buttom-menu">
<!-- 右边选项 -->
<span class="icon5"></span>
<!-- 右边的雪碧图 -->
<button class="my">我的</button>
<!-- 底部右边文字 -->
</div>
</footer>
</body>
</html>
还有CSS的部分
html {
font-size: 62.5%;
}
/* 设置全局尺寸大小 */
body {
margin: 0;
font-size: 1.6rem;
}
/* 设置中心部分字体 */
header {
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
/* 头部设置 */
.alt {
display: flex;
justify-content: center;
align-items: center;
height: 4.4rem;
background-color: #5FC0CD;
}
/* 切换菜单栏设置 */
.demandbox {
border-radius: .5rem;
background-color: #55A8B3;
}
/* 外部盒子 */
.demand {
width: 7.2rem;
height: 3.5rem;
margin-right: -.5rem;
padding: 0;
border: 0;
border-radius: .5rem;
font-size: 17px;
color: white;
background-color: #55A8B3;
outline: none;
}
/* 需求1设置 */
.demand2 {
width: 7.2rem;
height: 3.5rem;
padding: 0;
border: 0;
border-radius: .5rem;
font-size: 17px;
color: #5FC0CD;
background-color: white;
outline: none;
}
/* 需求2设置 */
.location {
position: absolute;
right: 1.5rem;
top: 1.1rem;
width: 2.1rem;
height: 2.2rem;
padding: 0;
border: 0;
background: url(./css_sprites.png) no-repeat;
background-position: -10px -10px;
zoom: .5;
outline: none;
}
/* 第一个雪碧图样式 */
.ddbbox {
display: flex;
text-align: center;
height: 4rem;
border-bottom: 1px solid #E1E5E7;
background-color: white;
}
/* 下拉框菜单样式 */
.ddb {
position: relative;
width: 100%;
}
/* 第一个选项样式 */
.site {
color: #999999;
font-size: 1.4rem;
line-height: 4rem;
}
/* 第一个选项内部样式 */
.dropdown-content {
display: none;
margin: 0;
padding: 0;
background-color: #5FC0CD;
}
/* 下拉框样式 */
.ddb1 {
display: block;
font-size: 1.4rem;
}
/* 下拉框文字样式 */
.triangle {
position: absolute;
top: 50%;
right: 5%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #AFBAC0;
transform: translate(-50%, -50%);
}
/* 第二个倒三角形 */
.ddb1:hover {
background: #AFBAC0;
}
/* 文字样式 */
.ddb:hover .dropdown-content {
display: block;
}
/* 下拉框出现样式 */
.ddbbox2 {
width: 100%;
margin: 5px auto;
border-left: 1px solid #E1E5E7;
border-right: 1px solid #E1E5E7;
}
/* 第二个下拉框外部盒子选项 */
.rad {
line-height: 3rem;
color: #999999;
font-size: 1.4rem;
}
/* 第二个下拉框文字样式 */
.triangle1 {
position: absolute;
top: 50%;
right: 5%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #AFBAC0;
transform: translate(-50%, -50%);
}
.dropdown-content1 {
display: none;
margin: 0;
padding: 0;
margin-top: 6px;
background-color: #5FC0CD;
}
.ddb:hover .dropdown-content1 {
display: block;
}
/* 中间新建立的类名 */
.cdt {
color: #999999;
font-size: 1.4rem;
line-height: 4rem;
}
/* 第三个下拉框选项文字样式 */
main {
margin-top: 100px;
margin-bottom: 69px
}
/* 中间部分设置 */
.ibbox1 {
padding: 10px 0;
border-bottom: 1px solid #E1E5E7;
}
/* 第一条信息栏外部盒子样式 */
.ibbox2 {
margin-left: 1.5rem;
}
/* 第一条内部信息栏盒子样式 */
.icon1 {
display: inline-block;
width: 1.2rem;
height: 1.2rem;
vertical-align: middle;
background: url(./css_sprites.png) no-repeat;
background-position: -138px -10px;
zoom: .5;
}
/* 中间第一个雪碧图样式 */
.sd {
font-size: 12px;
color: #5D5D5D;
}
/* 中间第一行文字样式 */
.ttb {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 20px;
}
/* 文字盒子 */
p {
display: inline-block;
font-size: 14px;
margin-left: 1rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*中间第二行文字*/
.Time-box {
display: inline-block;
float: right;
margin-top: 1.2rem;
margin-right: 1rem;
}
/* 右边时间盒子样式 */
.time {
color: #E63B0E;
font-size: 15px;
margin: 0;
}
/* 时间样式表 */
.trigon {
display: inline-block;
width: 10px;
height: 10px;
border-right: 3px solid;
border-bottom: 3px solid;
margin-right: .5rem;
transform: rotate(-45deg);
color: #5FC0CD;
}
/* 右边三角形样式 */
.tfb {
margin-left: 1.5rem;
}
/* 文字盒子样式 */
.icon2 {
display: inline-block;
width: .95rem;
height: 1.15rem;
vertical-align: middle;
background: url(./css_sprites.png) no-repeat;
background-position: -138px -54px;
zoom: .5;
}
/* 下面第一个雪碧图样式 */
.place {
font-size: 13px;
color: #999999;
}
/* 下面地址文字样式 */
footer {
position: fixed;
display: flex;
justify-content: space-around;
width: 100%;
bottom: 0;
border-top: 1px solid #E1E5E7;
background-color: #F8FAFB;
}
/* 底部标签样式 */
.buttom-menu {
margin: auto;
}
/* 底部样式左右 */
.icon3 {
display: block;
width: 2.3rem;
height: 2rem;
background: url(./css_sprites.png) no-repeat;
background-position: -72px -10px;
zoom: .5;
}
/* 底部第一个雪碧图样式 */
.home-page {
border: 0;
padding: 0;
font-size: 10px;
color: #5FC0CD;
background-color: #F8FAFB;
outline: none;
}
/* 底部文字样式 */
.bottom-conten {
width: 4.7rem;
height: 4.7rem;
background-color: #5FC0CD;
-webkit-border-radius: 50%;
}
/* 底部中心圆样式 */
.icon4 {
display: block;
width: 2rem;
height: 2rem;
margin-top: 1.35rem;
margin-left: 1.5rem;
border: 0;
zoom: .5;
background: url(./css_sprites.png) no-repeat;
background-position: -71px -77px;
outline: none;
}
/* 底部中心的雪碧图样式 */
.right-optionn {
position: relative;
height: 3.45rem;
}
/* 底部右边选项样式 */
.icon5 {
display: block;
width: 2.3rem;
height: 2rem;
zoom: .5;
background: url(./css_sprites.png) no-repeat;
background-position: -8px -74px;
}
/* 底部右边的雪碧图样式 */
.my {
border: 0;
padding: 0;
font-size: 10px;
color: #999999;
background-color: #F8FAFB;
outline: none;
}
/* 底部右边文字样式 */
.menul {
z-index: 1;
width: 7.2rem;
height: 3.5rem;
margin-right: -5px;
border-radius: .5rem;
font-size: 1.7rem;
color: #5FC0CD;
background-color: white;
border: 1px solid white;
}
/* 页面跳转CSS6.html样式左边文字 */
.menu-right {
width: 7.2rem;
height: 3.5rem;
margin-right: -5px;
font-size: 1.7rem;
color: white;
background-color: #55A8B3;
border: 1px solid #55A8B3;
border-radius: .5rem;
}
/* 页面跳转CSS6.html样式右边文字 */
margin:auto 垂直居中对齐的一种方式
onclick="location.href='6.html'">找雇主</button>跳转另一个页面
overflow: hidden;/*溢出隐藏*/
text-overflow: ellipsis;/*文本溢出省略号*/
white-space: nowrap;/*不换行*/
针对于行内元素无效，只有块级元素才有效
返回列表
评论