任务进展
1. 任务进度：40%；
① 效果呈现：
2. 今日情况：
① 实现下拉菜单，通过引用bootstrap的文件，再加上通过index.css修改菜单样式：
HTML
<header class="navbar navbar-fixed-top navbar-default" id="home_page">
<article class="dropdown">
<button
type="button"
class="btn dropdown-toggle"
data-toggle="dropdown"
>
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<ul class="dropdown-menu">
<li class="text-center">设置</li>
<li class="text-center">关于</li>
</ul>
</article>
</header>
<!--标题栏或导航栏-->
index.CSS
#home_page .dropdown-toggle {
width: auto;
height: 4.4em;
}
#home_page .dropdown-menu {
width: 5em;
min-width: 5em;
font-size: 1.6em;
} /* 定义下拉菜单的按钮和字体大小 */
② 实现轮播图，应用bootstrap的轮播图插件，再通过index.css修改样式和位置；
HTML
<section class="panel carousel slide" id="sel_game">
<ol class="carousel-indicators">
<li data-target="#sel_game" data-slide-to="0" class="active"></li>
<li data-target="#sel_game" data-slide-to="1"></li>
<li data-target="#sel_game" data-slide-to="2"></li>
<li data-target="#sel_game" data-slide-to="3"></li>
</ol>
<!--“捉鬼游戏”板块轮播计数器-->
<div class="carousel-inner">
<div class="item active">
<div class="panel-heading text-center">
捉鬼游戏
</div>
<!--“捉鬼游戏”板块头部-->
<div class="divider"></div>
<!--“捉鬼游戏”板块分隔线-->
<div class="panel-body">
<ul class="list-group list-unstyled">
<li class="list-group-items">
<button
class="btn btn-block btn-primary list-group-item-heading"
type="button">
简化版
</button>
<p class="list-group-item-text text-center">
有1133个用户正在玩此款游戏
</p>
</li>
<li class="list-group-items">
<button
class="btn btn-block btn-primary list-group-item-heading"
type="button">
猜词版
</button>
<p class="list-group-item-text text-center">
有1133个用户正在玩此款游戏
</p>
</li>
<li class="list-group-items">
<button
class="btn btn-block btn-primary list-group-item-heading"
type="button">
白痴版
</button>
<p class="list-group-item-text text-center">
有1133个用户正在玩此款游戏
</p>
</li>
</ul>
</div>
</div>
<div class="item">
<div class="panel-heading text-center">
谁是卧底
</div>
<div class="divider"></div>
<div class="panel-body"></div>
</div>
<div class="item">
<div class="panel-heading text-center">
狼人游戏
</div>
<div class="divider"></div>
<div class="panel-body"></div>
</div>
<div class="item">
<div class="panel-heading text-center">
炸狼堡
</div>
<div class="divider"></div>
<div class="panel-body"></div>
</div>
</div>
<!--“捉鬼游戏”板块轮播内容-->
<a class="carousel-control right" href="#sel_game" data-slide="next">
<span class="glyphicon glyphicon-triangle-right"></span>
</a>
<!--“捉鬼游戏”板块翻页-->
</section>
<!--“捉鬼游戏”板块-->
index.CSS
由于修改轮播图的底下指标样式，连悬浮状态的样式以及"active"类名的样式要一样，而不是声明点击状态（:active);
#sel_game .panel-heading {
height: 2.3em;
font-size: 2em;
color: #fbb435;
} /* 定义面板头部的样式 */
#sel_game .divider {
border-bottom: 0.1em solid #fbb435;
} /* 定义分隔线的样式 */
#sel_game .panel-body {
height: 35em;
padding: 0;
} /* 定义内容区的高度和内间距 */
#sel_game .list-group {
padding: 0 3.6em;
} /* 定义内容区的左右间距 */
#sel_game .panel-body button {
height: 4.25em;
margin-top: 0.875em;
font-size: 1.6em;
background-color: #69d1e9;
} /* 定义内容区按钮的样式 */
#sel_game .panel-body p {
margin-top: 1em;
font-size: 1.2em;
color: #787878;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} /* 定义按钮下的文字样式及隐藏的省略号样式 */
#sel_game .carousel-indicators {
bottom: 1em;
margin-bottom: 0;
height: 1em;
} /* 定义轮播图底下指标的位置 */
#sel_game .carousel-indicators li {
width: 1em;
height: 1em;
border-radius: 50%;
background-color: #f0f0f0;
}
#sel_game .carousel-indicators li:hover,
#sel_game .carousel-indicators .active {
background-color: #69d1e9;
} /* 定义轮播图底下指标的样式和点击状态 */
#sel_game .carousel-control {
margin-right: 0.2em;
top: 50%;
width: 1.4em;
height: 1.8em;
background: none;
opacity: 1;
} /* 定义向前翻页的控制器的位置 */
#sel_game .glyphicon-triangle-right {
font-size: 1.7em;
color: #fbb435;
} /* 定义向前翻页的控制器的样式 */
#sel_game .carousel-control:active {
box-shadow: none;
opacity: 0.5;
}
3. 任务问题：
① 已尝试在线自定义bootstrap的样式，但部分例如active状态的发光样式无法调整，且不能保存，一旦不小心刷新了就又要重新一个一个填，有时候还会出现禁止下载的情况，可能在border样式上，我想其没有，更改为none之后点击下载就报错了，自定义样式（https://v3.bootcss.com/customize/）；
② 全局的字体样式，及如各种状态(success/info/warming/danger/primary)的全局颜色等可以自定义，但全局字体样式如填写为em单位，会导致html的根目字体rem变得很奇怪，且颜色应用后，发现颜色偏深一点；
③ 由此对自定义样式后呈现的默认样式，以及在index.css进行修改调整的配合还不够熟悉，尤其插件的使用，由于JS插件依赖Jquery插件，所以在引用时不用defer、async的声明（难怪之前defer、async一起用导致JS堵塞，动效实现不了）；
④ 已尝试应用字体图标代替图标图片，如引用默认的字体图标glyphicon，还是要把fonts文件夹里的各种字体类型连文件夹一起放在该网站的根目录上，才能显示；
4. 明天任务：
① 继续完成剩余两个页面，并尝试实现只有<main>标签部分的跳转，即在同一个html文件实现三个页面的交互；
② 做着做着有时候一出错就纠结很久，然后就做着很慢，无奈；
返回列表
评论