发表于: 2018-04-24 21:58:49

1 474


今天做的事情

       任务8代码的编辑

明天计划的事情

     继续任务8的布局

遇到的问题

     

<div class="navbar  navbar-default" role="navigation">
<div class="container">
<div class="navbar-header nav-title">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a class="navbar-brand " href="#">tupian</a>

</div>
<div class="collapse navbar-collapse navbar-right is-collapse">
<ul class="nav navbar-nav">
<li>
<a href="#">
<span class="glyphicon glyphicon-home">首页</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-list">资讯</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-link">信息</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-headphones">关于我们</span>
</a>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>



今天布局了任务8的头部菜单栏,但是字体颜色怎么改变还没有找到办法


学到的知识:

    头部导航条的布局的知识,,

 

      头部导航条的布局基本概念如下,首先给一个盒子,类名navbar,导航条下用ul无需列表布局四个导航栏,并且向右浮动,给一个navbar-header布局导航栏头标签,内部用a链接,同时将修真院的图片作为背景添加到a标签内,这样就有了一个返回首页的效果,同时给头标签navbar添加4个span,当屏幕宽度缩小,右边四个标签就会缩小到span标签内部。


任务4-7总结!!

        任务4


        



总结:首先是头部标签,注册登录关闭三个按钮分别用三个span标签包裹,然后一个向左浮动,一个向右浮动,同时设置text-align:center。头部header标签设置position:fixed;top:0;使其固定在页面顶部。

   中部表单用form,input来布局,一个div包含块,左边是图标,右边放置input,同时设置input的class,type,placeholder等属性

    底部使用footer标签,position:fixed,bottom:0;规定在页面底部,text-align:center;设置文本居中,任务4布局完成。


任务5

     



总结:任务5头部布局跟任务4基本相同,需要掌握新的知识从顶部个人信息处开始,首先是背景图像引入,定位,是否拉伸覆盖等,需要掌握详尽background属性,background-img引入图片,background-size确定尺寸,background-position,确定图片是否偏移。

      第二点事ul无序列表的布局,页面中部内容使用ul无序列表来布局,有一个内容就是用after伪元素来画分隔符,after伪元素以为在正常元素后跟一个伪元素,为这个元素设置好样式,就实现了竖线分隔符的效果。

      第三点是自适应的内容:使用rem单位代替px单位实现初步的自适应,rem单位为相对单位,是相对html根元素来计算的,所以当屏幕尺寸变化的时候,相应的网页元素也会相应变化。

 任务6



css任务6总结:雪碧图制作,雪碧图制作用雪碧图制作软件就可以了,重点是使用时,使用background-position来显示图片,确定适应的偏移度,是图片准确的显现在需要定位的盒子内。

          第二点是浮动与清除浮动:设置元素向左或者向右浮动,浏览器会遵循html文件的先后顺序来浮动元素,比如说有三行span标签都设置了向右浮动,那么在html中最先被浏览器读到的span会浮动到最右边,因为浏览器会最先读取到它。

         第三点是bootstrap布局,这里页面主体内容还是使用了ul无序列表来实现的,bootstrap是官网推荐的,只是简单你的了解,bootstrap是一个预设了css样式的库,最大的特点是栅格布局,所有的row必须包含在container内,页面内容都在列中,一行一般分为12列,分别有xs,smmd,lg四中尺寸,当屏幕尺寸超过其中一个单位的临界点是,页面就会相应变化,实现响应式布局。


任务7





总结:第一页面,position:fixed;定位右边黄色小三角相对于整个页面定位,下面4个小圆点使用 i 标签,设置display:inline-block;border-radius:50%;实现小圆圈效果。

        第二个页面,使用flex布局实现九宫格布局且实现自适应,

        第三个页面,背景半透明,用 opacity 属性就好了。



返回列表 返回列表
评论

    分享到