发表于: 2017-03-10 23:14:51

1 571


学习情况:

1、初步接触bootsrap,个人理解是很多css样式(好像主要是栅格和下拉菜单?)模板大合集,省去自己手动编写基本部分,剩余修改的在自己css里面补充。推荐一个中文的网站 http://www.runoob.com/bootstrap/ ,比较直接明了。head部分需增加样式链接:

<link href="./bootstrap.min.css" rel="stylesheet" type="text/css">

    <link href="自己的代码.css" rel="stylesheet" type="text/css">

    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>

    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

2、个人在任务6只有下拉菜单使用的bootsrap的样式,算是初次尝试,然后重新定义宽度高度背景色等信息,大范围使用感觉还是不习惯。

3、下拉框右侧小三角形也是bootsrap自带的样式,重新修改尺寸。代码:

.caret{

    float: right;

    border-top: 6px solid #000;

    border-right: 6px solid transparent;

    border-left: 6px solid transparent;

}

4、初试雪碧图sprites,需要先将小图片合成在一起,应用时将背景图设置为合成大图,利用位置关系将需要的小图定位(background-position:0 0)位置确定即可。本任务使用的日期和位置两个小图合成并应用。

5、超出部分省略号代替:

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 1;//固定为1行

    overflow: hidden;

6、屏幕宽度过小时需响应式自适应。需使用媒体查询,自定义屏幕宽度范围下的变动代码。

@media   (max-width: 400px) { //小于400px宽度时的css样式

    html{font-size: 45%}   //页面文字部分字体大小变为45%。

    }

问题:1、小三角形为直接使用,看了代码也没太明白形成的原理,后面有机会再研究。

2、bootsrap代码太繁琐,初学者拿来就用,对实际代码的意义其实不太熟,是否有必要深入了解弄清楚之后再实际应用?


计划:好像又是跨越式任务7,需要学习的东西较多,明天先试试大框架,周日休息,争取周二出一稿。


返回列表 返回列表
评论

    分享到