[散修弟子]CSS-8074|2019年07月16日的日报-技能树.IT修真院

发表于： 2019-07-16 00:20:39

1 899

终于腾出点时间来继续任务。。今天把积攒下来的一些东西写在一起吧。

今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

1. 复习了viewport的知识，了解了更多详细的内容

viewport详解，为什么要用 <meta name="viewport" content="width=device-width, initial-scale=1.0">

https://www.cnblogs.com/2050/p/3877280.html

viewport指的是设备上的可视区域的大小
Ideal viewport指无论何种像素密度的屏幕都能显示差不多的效果，不会有文字等过大过小的问题
不设置viewport会导致小设备宽度上出现横向滚动条
设置width=device-width即可将默认layout viewport的宽度设为设备屏幕宽度
设置initial-scale=1.0也能达到类似的效果，这是因为initial-scale是基于ideal viewport进行的，1.0倍率下刚好缩放到ideal viewport大小
只设置width, iphone/ipad会出现横置设备仍采用竖屏ideal viewport的问题
只设置initial-scale=1.0,IE会出现上面的问题
于是同时设置width=device-width, initial-scale=1.0 是最佳的选择。

2. 学习了inline-block的用法以及相较float的优点

https://www.cnblogs.com/Ry-yuan/p/6848197.html

3. 学习了如何去掉inline-block元素之间的间隙

4. 学习了如何将文字垂直居中

使用 text-align: center 的同时，使用 line-height: xx px. 如此设置，文字将会按照 line-height的高度自动计算文字垂直居中位置。

5. 学习了一种css模拟下拉菜单的方法

案例源代码

自己实现相同效果的代码

整理模仿过程中遇到的问题和心得

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

ul{

list-style: none;

}

.nav>li{

float: left;

}

ul a{

display: block;

text-decoration: none;

width: 100px;

height: 50px;

text-align: center;

line-height: 50px;

color: white;

background-color: #2f3e45;

}

.nav>li:first-child a{

border-radius: 10px 0 0 10px;

}

.nav>li:last-child a{

border-radius: 0 10px 10px 0;

}

.drop-down{

/*position: relative;*/

}

.drop-down-content{

padding: 0;

display: none;

/*position: absolute;*/

}

h3{

font-size: 30px;

clear: both;

}

.drop-down-content li:hover a{

background-color:red;

}

.nav .drop-down:hover .drop-down-content{

display: block;

}

</style>

</head>

<body>

<ul>

<li><a href="#">Dropdown</a></li>

<li><a href="#">Dropdown</a>

<ul>

</ul>

</li>

<li><a href="#">Dropdown</a></li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

* {

padding: 0;

}

body ul {

list-style: none;

}

li {

color: white;

background-color: #2F3E45;

width: 100px;

height: 50px;

}

.nav-list > li {

font-size: 14px;

text-align: center;

line-height: 50px;

float: left;

text-decoration: none;

}

.nav-list > li:first-child {

border-radius: 10px 0 0 10px;

}

.nav-list > li:last-child {

border-radius: 0 10px 10px 0;

}

.nav-list > li:hover .dropdown-list > li {

display: block;

}

.dropdown-list > li {

display: none;

}

.dropdown-list > li:hover {

background-color: red;

}

</style>

</head>

<body>

<ul>

<li>Dropdown</li>

<li>Dropdown

<ul>

</ul>

</li>

<li>Dropdown</li>

</ul>

</body>

</html>

导航栏可以用两层ul嵌套的方式实现。注意第二层ul应该镶嵌在第一层li元素的内部（如果不这么做，按照当前第一层li向左浮动的实现，第二层ul会横插在文档流中间，隔开第一曾的li们）

文字居中的超棒手段。使用 text-align: center 的同时，使用 line-height: xxpx. 如此设置，文字将会按照 line-height的高度自动计算文字垂直居中位置。

指定角圆角。很简单但是之前没有意识到可以如此使用。

:hover等选择器不必在css选择器末尾。在本例中，我们检测的是第一层ul的li是否被hover, 但是影响的是第二层ul的可视与否。

反思与源代码的差距：

源代码避免了无脑使用 *{padding:0;}，而是在可能出问题的第二层li元素处专门添加了这个属性值，目的在于消除下拉菜单由于默认padding导致的位置偏移。

源代码在li中使用了a标签。没有开发经验的我直接在li中放置了文字内容。

css有比较冗余的情况。比如加粗部分，其实可以直接让 .dropdown-list 不显示，其效果和让li不显示是完全相同的

6. 实践了雪碧图的使用

我的雪碧图：

*课外：

学习了部分HTML5知识，如下

明天计划的事情：（一定要写非常细致的内容）

1. 完成任务6 主体部分

2. 学习剩余的集中模拟下拉菜单的方法

3. 学习bootstrap，尝试寻找实现header中滑动按钮的更佳解决方案

3. 继续学习HTML5

遇到的问题：（遇到什么困难，怎么解决的）

1. [Resolved]切图背景不透明

这个问题说来也尴尬，完成前几个任务的时候明明切图都很顺利，但这个任务用到切图的时候，总是会留下白色背景。于是又研究了一番，原来是输出的时候格式设置的是最高质量的JPEG格式。改成PNG-24输出就好了。

网上查了一下原因，

“ JPEG格式是以 24 位颜色存储单个位图。因此JPG格式是不支持透明背景属性的。解决方法:可以将PS文件保存为PNG格式,这样的背景就是透明”

2. [Unresolved] Edit图标合并图层后蓝色圆形的图层会消失（或许是被覆盖）

这里应该有一个合并图层的选项的。我记得任务三的一些按钮也是一个白色的前景图加蓝色的背景图构成的，那时合并图层就解决了。不知道为什么这次不行。还没有解决。

3. [Resolved] 如何实现按钮与其说明文字上下排列同时对其

这里我使用的方法是：对同一组的图标和文字使用相同的width, margin, 并为文字标签添加display: inline-block。 inline-block的作用是使div的宽度等于其文字内容的宽度。

4. [Resolved] 找雇主和找护工这个toggler我试了几种方案才试出来了实现办法，不过感觉这个方法不算太好。我写了两个div按钮分别是找雇主和找护工，然后让找护工包含active类，再给active类加上高亮按钮的样式。而找雇主按钮则为默认样式（白字没有背景色）。深色的背景色是另一个div,它只用来做背景效果。

我注意到题目要求用bootstrap，所以我猜测这个toggler可能有更好的封装过的实现方法。等待后续学习。

目前半成品效果如下图：