发表于: 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,需要学习的东西较多,明天先试试大框架,周日休息,争取周二出一稿。
评论