发表于： 2017-03-20 21:59:25
1 1093
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
完成任务8
了解了CSS3 阴影
HTML 元素的阴影，只要一行 CSS 声明即可。 最简单语法形式如下。
box-shadow:4px 4px 5px 8px #aaa inset; box-shadow
属性的这几值分别代表：水平偏移量、垂直偏移量、模糊量、扩展量、颜色、阴 影位于边框内部（默认位于边框外部，即 outset）。 最低限度，必须设定水平偏移量、垂直偏移量和颜色，这样会得到一个与元素宽度和高度大小 一致且为指定颜色的硬边阴影。如果水平和垂直偏移量是负值，阴影就会出现在元素左上方。 inset 关键字会把阴影放到盒子内部。另外，box-shadow 还支持多个阴影声明。
明天计划的事情：（一定要写非常细致的内容）
继续了解Bootstrap
开启完成任务9,10
任务9:修真院——一个响应式的企业网站
任务10:51包装——一个常见的表单页面 24-48小时
- CSS制作流程图；
- CSS模拟表单元素；
- 熟练响应式布局
遇到的问题：（遇到什么困难，怎么解决的）
导航栏小尺寸切换后也有白色下划线
.header2-1 span:hover {
box-sizing: border-box;
border-bottom: solid 1px white;
}
内容区第一部分文字居中
.p3 {
width: 80%;
margin: 0 auto;
white-space: pre-wrap;
text-align: center;
font-size: 16px;
color: rgb(153, 153, 153);
}
如何学习部分以4-2-1形式切换
<div class="col-md-3 col-sm-3 col-xs-6 col-supersmall li-2">
<span class="round p4">
<b>8</b>
</span>
<span class="p6 p-fixed-width">
<b>完成职业技能完，升级业界大牛</b>
</span>
</div>
战略合作企业不需要边框，
以hover伪元素显示阴影效果
职业列表页，图片与文字对齐
.fs5{
padding: 0 5px;
font-size: 12px;
color: rgb(153,153,153);
text-align: center;
}
小尺寸时下拉框文字居中 轮播图下面那一部分文字也要居中
text‐align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text‐align 并不控制块元素自己的 对齐，只控制它的行内内容的对齐。
center:行内内容居中。
.header2-1 span {
display: block !important;
padding: 10px 15px;
width: auto !important;
height: auto !important;
line-height: 20px !important;
font-size: 14px !important;
: center;
}
如何学习的数字圆圈使用阴影效果实现
.round {
display: inline-block;
width: 23%;
padding: 11.5% 0;
border-radius: 50%;
border: solid 1px rgb(227, 227, 227);
text-align: center;
line-height: 0;
background-color: white;
box-shadow: 1px 1px 2px #888;
}
优秀学员展示，底部圆圈要看得到轮廓
.round3 {
display: inline-block;
margin: 0 3px 0 0;
padding: 0;
width: 13px;
height: 13px;
border-radius: 50%;
box-shadow: 0 0 2px #888;
}
战略合作企业hover伪元素有阴影效果
/*战略合作企业hover伪元素有阴影效果 */
.container2-3-1:hover {
box-shadow: 1px 1px 1px 1px #aaa outer;
}
box-shadow 属性的这几值分别代表：水平偏移量、垂直偏移量、模糊量、扩展量、颜色、阴影位于边框内部（默认位于边框外部，即 outset）
友情链接有绿色下划线
HTML代码:
<ul>
<li><a href="#"><span></span>手机软件</a></li>
<li><a href="#"><span></span>教师招聘</a></li>
<li><a href="#"><span></span>找工作</a></li>
<li><a href="#"><span></span>手机软件</a></li>
<li><a href="#"><span></span>教师招聘</a></li>
<li><a href="#"><span></span>找工作</a></li>
<li><a href="#"><span></span>手机软件</a></li>
<li><a href="#"><span></span>教师招聘</a></li>
<li><a href="#"><span></span>找工作</a></li>
<li><a href="#"><span></span>手机软件</a></li>
<li><a href="#"><span></span>手机软件</a></li>
<li><a href="#"><span></span>教师招聘</a></li>
<li><a href="#"><span></span>找工作</a></li>
<li><a href="#"><span></span>手机软件</a></li>
<li><a href="#"><span></span>教师招聘</a></li>
<li><a href="#"><span></span>找工作</a></li>
<li><a href="#"><span></span>手机软件</a></li>
<li><a href="#"><span></span>教师招聘</a></li>
<li><a href="#"><span></span>找工作</a></li>
<li><a href="#"><span></span>手机软件</a></li>
</ul>
CSS 代码:
.links{
text-align: left;
}
.links li{
display: inline-block;
width: 9rem;
font-weight: 600%;
line-height: 3rem;
list-style-type: disc;
}
.links li a{
color: #999999;
padding-bottom: 5px;
border-bottom: 1px solid transparent;
}
/*悬停在友情链接上出现绿色下划线*/
.links li a:hover{
text-decoration:none;
border-bottom: 1px solid #26a26f;
}
.links li a span{
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #999999;
margin-right: 1rem;
vertical-align: middle;
}
如何学习在992px-768px要么两行，要么四行
<!-- words1 start -->
<div class="row top1">
<div class="col-lg-3 col-md-3 col-sm-6 inner1">
<i></i>
<p>
<b>高效</b>
</p>
<p>将五到七年的成长时间，缩短到一年到三年。</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 inner2">
<i></i>
<p>
<b>规范</b>
</p>
<p class="p3 ">标准的实战教程，不会走弯路。
</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 inner3">
<i></i>
<p>
<b>人脉</b>
</p>
<p>同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路。</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 inner4">
<i></i>
<span>
<b>12400</b>
</span>
<p>累计在线学习人数</p>
<i></i>
<span>
<b>12400</b>
</span>
<p>累计在线学习人数</p>
</div>
</div>
<!-- words1 end -->
在小屏幕设备 平板(>=786px).将div的属性设置为col-sm-6,就可以将屏幕平均分为两列
职位列表用其他表示那么多企业不推荐， 另外hover变色没有实现
/*左侧列表的悬停变色*/
.list-link:hover .list-company {
color:#ff650e;
}
收获：（通过今天的学习，学到了什么知识）
HTML <meta> 元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元数据信息.
http-equiv
这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content 来定义
怎么使用媒体查询？
一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能限制样式表范围的表达式组成, 例如 宽度，高度和颜色。在CSS3中添加的媒体查询，允许内容的呈现针对一个特定范围的输出设备而定制，而不必改变内容本身。
语法
媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范的表达式. 这些表达式描述了媒体特征, 最终会被解析为true或false. 如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型, 并且所有的表达式的值都是true, 那么该媒体查询的结果为true.
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
From <https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries>
返回列表
评论