-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
66 lines (60 loc) · 2.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<meta charset="utf-8">
<title>前端能力提升练习</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="js/google-code-prettify/prettify2.css">
<style>
.css-list li{margin:10px auto 50px; padding:0; }
.css-list img{vertical-align:top;max-width: 100%;}
</style>
<script id="precode">
</script>
</head>
<body>
<div class="wrap">
<h1>前端能力提升练习</h1>
<p>练习 html/css 布局实现，提升技巧能力。</p>
<p><strong>说明：</strong>以下的每个练习并没有特别的说明，你要仅仅通过截图，发现其实现时需要注意的事项 ，并联系布局技巧，你可以尝试练习去发现其中的奥秘...</p>
<ol class="css-list">
<li><img src="img/css001.png" alt="hover切换背景，中间线共用" /></li>
<li><img src="img/css002.png" alt="全宽的不对称topbar" /></li>
<li><img src="img/css003.png" alt="经典的两列布局，定宽？自适应？" /></li>
<li><img src="img/css004.png" alt="tab切换的下边线" /></li>
<li><img src="img/css005.jpg" alt="圆形遮罩还有箭头怎么做好呢？" /></li>
<li><img src="img/css006.jpg" alt="垂直文字，怎么做最好？" /></li>
<li><img src="img/css007.png" alt="tags标签，丰富的色彩变化怎么实现方便" /></li>
<li><img src="img/css008.png" alt="表格实现" /></li>
<li><img src="img/css009.png" alt="产品/订单列表" /></li>
<li><img src="img/css010.png" alt="排序hover及选中的样式变化" /></li>
<li><img src="img/css011.png" alt="最高价最低价，兼容性及交互问题很多" /></li>
<li><img src="img/css012.png" alt="搜索筛选列表" /></li>
<li><img src="img/css013.png" alt="经典的产品列表" /></li>
<li><img src="img/css014.png" alt="这个选中状态有点技巧，出边界了" /></li>
<li><img src="img/css015.png" alt="operbar 浮动操作面板" /></li>
<li><img src="img/css016.png" alt="模拟表格实现动态宽度" /></li>
</ol>
<p>敬请关注相对完美的解决方案...</p>
<div style="height:500px;"></div>
<h4>简单指导</h4>
<ol>
<li>使用margin负边距实现</li>
<li>定位，巧用宽度50%</li>
<li>经典两列布局，左定宽，右自适应且优先加载</li>
<li>要压住下边框，考虑到随页面滚动跟随</li>
<li>遮罩+css箭头</li>
<li>交互</li>
<li>tags标签</li>
<li>经典的产品列表</li>
<li>订单列表</li>
<li>默认hover及选中状态，注意处理好公共边</li>
<li>聚焦时显示操作面板</li>
<li>筛选条件</li>
<li>经典产品列表</li>
</ol>
</div>
<script src="js/google-code-prettify/prettify.js" async="async"></script>
<script src="js/learn.js" async="async"></script>
</body>
</html>