发表于: 2019-05-22 21:14:41
1 841
今天完成事情:
了解阴影---box-shadow属性的简单运用该属性有四个值。1-X轴偏移--负值阴影在左,正值阴影在右 2-Y轴偏移--负值阴影在左,正值阴影在右 3-模糊半径不可为负值,值越大边缘越模糊 4-阴影扩展半径。 属性默认为外阴影,设置inset则阴影为内阴影。
在bootstrap中文网上找插件修改完成了导航栏部分。
<nav class="row navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">
<div>
<span class="hd-bottom-text-top">修真院</span>
<span class="hd-bottom-text-bottom">www.jnshu.com</span>
</div>
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-bot " id="navbarNav">
<ul class=" navbar-nav " >
<li class="nav-item ">
<a class="nav-link text-white" href="task8.html">首页</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="task08.html" >职业</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="task008.html">推荐</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="task8.html" >关于</a>
</li>
</ul>
</div>
</nav>
使用word-wrap: break-word;解决英文不断行导致撑大盒子的问题。
为页面内容添加hover效果。
页面三使用id属性设置锚链接实现页面内跳转。
<a class="block-center-link" href="#aaa">前端开发</a>
<p class="row page-title" id="aaa">前端开发方向</p>
简化页面代码。
完成任务8。
明天计划的事情:
规范任务8代码,了解css模拟表单。
评论