今天完成的事情：
今天把三个页面完成了 响应式也加上了 先来理解下代码
这个代码只是测试用的。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.one {
width: 80%; /定义行的宽度和居中 弹性盒子 可以一行展示
margin: 0 auto;
display: flex;
}
.list { /列
word-break:break-all; / 文字和英文 在适当的位置换行
font-size: 12px; /字体大小
margin-top: 5%; /外边距5%
display: flex; /弹性盒子
overflow: hidden; /溢出隐藏 把溢出的部分隐藏掉
position: relative; /相对定位 子绝父相 这样绝对定位了跑不出这个范围
}
.list td {
padding: 10px; 内边距10像素
}
.tx { /头像 左浮动 脱离文档流
float: left;
}
.bt {
font-size: 13px; /标题字体大小
margin-top: 15px; /上外边距15px
margin-left: 150px; /左外边距调整适当位置
}
td {
border: 1px solid #ddd; /边框
}
.red {
margin-left: 10px; /星星的位置
}
.red1 {
color: #f01400; / 字体颜色 红色
}
.number {
font-size: 13px; /字体大小
}
.ddd {
color: #c6c6c6; /字体颜色
}
.star {
margin-left: 10px; /星星的左外边距
margin-top: -5px; /星星的上外负边距
}
table{
table-layout:fixed; /让表格的 列宽由表格宽度和列宽度设定
}
.ybk {
border-right: 0; /去除右边框
}
.zbk {
border-left: 0; /去除左边框
text-align: end; /让字体靠终点
}
.ppp {
position: absolute; /绝对定位 脱离文档流 覆盖表格
height: 446px; /高度
width: 100%; /宽度100%
z-index: 111; /层级
background:url(./img/ios.png); /覆盖的图片 这里错了，应该自己作图的 已经做完 整改好了
right: 100%; /图片终点位置 配合动画实现滑动效果
transition:right 1s; 动画时间1秒
}
.list:hover .ppp { /通过list触发图， 起点为右侧开始
right: 0;
}
</style>
</head>
<body>
<div class="row one">
<div class="col-1-3 col-sm-1-3 col-lg-1-3 list">
<div class="ppp">
<p style="color: #fff;">一个星期整理好包裹关系</p>
</div>
<table>
<tbody>
<tr>
<td colspan="12" style="padding-right: 0;">
<img class="tx" src="./img/cs.png">
<p class="bt"><strong>Web前端开发工程师</strong></p>
<span
class="introduce">Web前端开发工程师，主要职责是利用（X）HTML/CSS/JavaScript/flash等各种Web技术进行产品的开发</span>
</td>
</tr>
<tr>
<td colspan="6">
<span class="ddd">门槛</span><img class="star" src="./img/star.png">
</td>
<td colspan="6">
<span class="ddd">难易程度</span><img class="star" src="./img/star.png"><img class="star"
src="./img/star.png">
</td>
</tr>
<tr>
<td colspan="6">
<span class="ddd">成长周期</span><span class="red">1-3</span>年
</td>
<td colspan="6">
<span class="ddd">稀缺程度</span><span class="red">345</span>家公司需要
</td>
</tr>
<tr>
<td rowspan="3" colspan="4" style="text-align: center;">
<span class="ddd">薪资待遇</span>
<td colspan="5" class="ybk"> 0-1年</td>
<td colspan="3" class="zbk"> 5k-10k月</td>
</td>
</tr>
<tr>
<td colspan="5" class="ybk"> 1-3年</td>
<td colspan="3" class="zbk">10k-20k月</td>
</tr>
<tr>
<td colspan="5" class="ybk"> 0-1年</td>
<td colspan="3" class="zbk">20k-50k月</td>
</tr>
<tr>
<td colspan="12" class="number"><strong>有<span class="red1">286人</span>正在学</strong></td>
</tr>
<tr>
<td colspan="12" class="ddd">提示:在你学习之前你应该已经掌握XXXX、XXXX、XX等语言基础</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
这个之前怎么也没想明白。。。。 用抠来的图往上盖 怎么都觉得效果不好 最后还是自己做了一个图
通过绝对定位脱离文档流 配合相对定位 层级关系优先 透明实现
在768的时候平板为了美观 表格整体缩小了
576的时候 就是一行了
然后查看手机端 发现页尾有点错乱 改完效果如图
导航栏修改了下字体大小 这个就是盒子套盒子实现的 想个大概 动手多实现就好了
添加了页面跳转
第三张图列表的td 宽度 没理解就很难 还有这个覆盖
第二张图 难点不多
这个用师兄的办法更美观了 之前是直接把下方的内容隐藏掉的
overflow属性
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
hidden 内容会被修剪，并且其余内容是不可见的。
第一张图返回来修改了下对齐方式 发现做完三张图在回头看第一张 一些之前觉得难的现在也可以明白了 包括简单的对齐
文本保护距离也设置好了
页面的跳转还没添加
通过任务8 理解了栅格的基本运用 媒体查询的使用 响应式方式
先做的1 然后3 在做2发现2没什么难点 都做完再返回看 做完了也不觉得有多难了
第一个页面俩个轮播图 需要修改下id 就可以分开用了
任务 8 耗时 8天 明天再检查下 没有问题学习深度思考
明天计划的事情：
学习深度思考，了解任务10
遇到的问题：
师兄都帮忙解决了
收获：
这个真的蛮多的，对前面知识的一个总结吧
返回列表
评论