黑马程序员技术交流社区
标题: H5C3手动布局页面的那些细节 [打印本页]
作者: Joel90 时间: 2019-11-29 19:47
标题: H5C3手动布局页面的那些细节
本帖最后由 Joel90 于 2019-11-30 15:36 编辑
时光荏苒，岁月如梭，在黑马上课时每天都得预习、学习、复习、做练习，像是每天都有48小时一般，然而，到现在升级考试结束，回首一望，11月这个月掐头去尾也就算走完了，恍惚间又似有光阴似箭之感。翻翻笔记，努力回想这匆匆掠过的一月我都学了些啥，最后的项目课以及升级考试的大题都是H5C3手动布局，那不如就将这其中的一些细节揪出，罗列成帖，以飨各位良师益友（以便尽快完成发帖任务
）。
以下各项没有逻辑上的先后，纯粹是想到哪就写到哪~
1. 输入!按Tab自动生成页面骨架之后
首先html根标签有个lang属性，在Chrome中lang属性值为en时，默认是Arial字体，16px大小，我们常会改为zh-CN，默认微软雅黑字体，16px大小。
然后TDK三大标签涉及SEO优化，虽说里面的具体内容有待SEO人员来修改或补充，但我们可以先准备好。
接着引入CSS样式时，要注意先后顺序，可以先有一个base.css，一个common.css，然后每个页面都要有相对应的css。需要favicon的也不要忘了引入哦。
最后在body中对标题标签的使用要注意，h1只用一次，且是用于放网站logo，而h2一般在每个页面中只用两次，用于放权重高的标题文本，至于h3~h6，就随便了。
2. 网站logo的布局有讲究
实际开发中logo的布局有固定套路，因为需要进行logo SEO的优化。
首先外层要有一个div.logo盒子，负责布局的，不能省略，
然后里面放 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要！（h1是语义化的，用于SEO提权，不能直接替代外层div.logo盒子。）
h1 里面再放一个链接a，链接是要返回首页的，再把 logo 作为背景图片给链接a。（注意：链接a要转化显示模式为块级元素，宽高与外层盒子一致，确保整个logo都能点击。）
为了搜索引擎收录我们，我们链接ａ里面还要放文字（网站名称），但是文字不要显示出来。
- 隐藏方法1：用 text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow: hidden; （淘宝的做法）
- 隐藏方法2：直接给 font-size: 0; 就看不到文字了（京东的做法）
最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了。
代码示例：
[HTML] 纯文本查看 复制代码
<!-- logo模块 -->
<div class="logo">
<h1>
<a href="index.html" title="品优购商城">品优购商城</a>
</h1>
</div>
[CSS] 纯文本查看 复制代码
/* header 头部制作 */
.header {
position: relative;
height: 105px;
}
.logo {
position: absolute;
top: 25px;
width: 171px;
height: 61px;
}
.logo a {
display: block;
/* 注意a链接要转化为块 */
width: 171px;
height: 61px;
background: url(../images/logo.png) no-repeat;
/* font-size: 0;京东的做法*/
/* 淘宝的做法让文字隐藏 */
text-indent: -9999px;
overflow: hidden;
}
3. 网页头部header的布局模式
其实怎么方便怎么简单，就怎么来好了。
像这样的，可以用浮动，一个div.logo左浮动，一个div.nav右浮动即可。
而像这样的，子级盒子有点多，最好就用定位来布局。
4. 奇葩的搜索框
常见的网页顶部的搜索框，一般都是一个输入框，加一个搜索按钮。在刚学CSS的时候，想实现这个小模块却总是各种错乱，要不高度不一致，要不贴不紧对不齐，还有边框样式难统一。后来做的多了，也就发现了其中的套路。
由于input输入控件和button元素的默认样式太不一样，因此需要先清除他们的默认样式，例如：
[CSS] 纯文本查看 复制代码
input {
padding: 0;
border: 0 none;
}
button {
border: 0 none;
}
然后就可以愉快地给他俩设置一致的高度和各自的宽度了。
接着，这俩虽然都是行内块，但中间却总会有间隙，我们还需要让他俩浮动起来，才能保证无缝拼接。（网上流传的插入注释法好像也可以。）
最后，输入框的框呢？其实都是交给父级盒子div.search了，给父级盒子设置border属性，就再也不担心input和button的边框样式不统一了。
最后最后不要忘了给input和button里面的文本设置相关的属性哦，提示文本距离左边框的空隙除了用padding-left控制，也可以使用text-indent哦。
代码示例：
[HTML] 纯文本查看 复制代码
<!-- search搜索框模块 -->
<div class="search">
<input type="search" name="" id="" placeholder="语言开发">
<button>搜索</button>
</div>
[CSS] 纯文本查看 复制代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.search {
position: absolute;
left: 346px;
top: 25px;
width: 538px;
height: 36px;
border: 2px solid #b1191a;
}
.search input {
float: left;
border: none;
width: 454px;
height: 32px;
padding-left: 10px;
}
.search button {
float: left;
border: none;
width: 80px;
height: 32px;
background-color: #b1191a;
font-size: 16px;
color: #fff;
}
备注：input输入框在Chrome中的默认样式是有2px的边框，向外扩大，另外还有1px的上下内边距，再次把盒子的高度撑大，按input的默认样式的话，宽会增加4px，高会增加6px，所以一般都要预先清除它的border和padding，或者给它加上box-sizing: border-box; 。而button元素，正好相反，默认就是border-box，加了边框宽高也不变。除了预先清除它俩的border和padding外，还可以通过设置同样的box-sizing属性来实现对整齐。
5. 不定宽度的定位盒子向哪边扩展
实际开发中有些元素的宽度、高度都是不确定不写死的，如果它是定位元素，那么定位的那条边相对于参照边就一定是不动的，当后期增加了内容，撑开它的宽度或高度时，只会向对应的另一边扩展！这一点只需要在写的时候注意一下即可，不要只求一时方便。
具体来说，宽度不定的定位盒子，边偏移指定的是left，则往右撑开、扩展，反之边偏移指定right的话，就往左撑开、扩展。而高度不定的同理，边偏移指定top的，就自上向下撑开、扩展，边偏移指定bottom的反之。总之，边偏移就是把指定边、参照边、以及之间的距离都定死了，这一边就不会因内容多少而变动了。
备注：边偏移是边到边的距离，是定位元素各条边界到所参照对象（相对定位参照自己，绝对定位参照父级盒子或浏览器，固定定位参照浏览器可视窗口）的对应边线的距离。
6. banner轮播图模块的固定套路
直接上图上代码吧。
代码示例：
[HTML] 纯文本查看 复制代码
<div class="focus fll">
<!-- 小箭头用span也可以 -->
<a href="#" class="arrow-l"> < </a>
<a href="#" class="arrow-r"> > </a>
<!-- 轮播图不止一张，固定结构 ul > li > a > img，这样便于后期编写js逻辑代码 -->
<ul>
<li>
<a href="#"><img src="upload/focus.jpg" alt=""></a>
</li>
</ul>
<!-- 小圈圈或小点点用li的边框和背景色来实现，外层ol便于与上面的ul区分开 -->
<ol class="circle">
<li></li>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
[CSS] 纯文本查看 复制代码
/* 外层大盒子要设置position: relative; */
.arrow-l,
.arrow-r {
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-family: 'icomoon';
font-size: 18px;
}
.arrow-r {
right: 0;
}
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
/*background-color: #fff;*/
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 3px;
border-radius: 50%;
/*鼠标经过显示小手*/
cursor: pointer;
}
.current {
background-color: #fff;
}
7. 选项卡tab栏的固定套路
tab栏的布局是 ul > li > a ，然后有多少个tab选项卡，那么下面对应就必须有多少个内容块，但是，每一次只会显示一个内容块，其他内容进行隐藏，以后用js控制。等后面我们学习了js之后，就要配合js来实现tab栏的切换。
8. 固定定位定在版心左右的小算法
先给固定定位的小盒子设置边偏移，如left: 50%; ，让其左边贴到浏览器可视区一半宽度的位置，接着再给它设置margin-left等于版心宽度一半的距离，这样就可以让固定定位的小盒子紧贴在版心的右侧了。（如果贴紧不好看，margin-left的值可以比版心宽度的一半再多加几个像素，距离产生美。）
如果要是往右边算过来，先 right:50%，再设置 margin-right （相对方向的margin-left无效）就得用 负值，如果是 负 版心宽度的一半，就是固定定位小盒子的右边界贴版心盒子的右边线了，所以还得再 负 小盒子自身的宽度。因此，做贴在版心右边的小盒子，就从左边算过去，而贴版心左边的小盒子，则从右边算过来，更方便。
9. 装饰性的图片使用background引入
在项目文件夹中，装饰性的图片我们一般放在img文件夹或images文件夹里，而内容图片则是放在upload文件夹里， 内容图片会经常更新，而装饰性的图片或图标只是用于帮助用户迅速理解元素的含义而无需阅读文本，即使删除这些图标，元素的含义也不会消失。
所以建议使用background或是background-image属性来引入这类图片。
另外，当引入外部网站的图片资源时，因为你无法编辑该图片，所以这种情况也是使用background更加便于控制图片的位置和大小（background-position、background-size、等属性）。
10. 在CSS Reset重置代码中设置box-sizing
[CSS] 纯文本查看 复制代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
11. 脱标的盒子不需要再设置显示模式
设置了浮动或者定位的元素盒子，浏览器会默认转化为块，自动具有类似于行内块的属性，此时再使用display设置显示模式是没有意义的。
也就是说，无论之前是行内元素、块级元素还是行内块，也无论用display转换成了哪种，在设置了浮动或定位而脱标之后（相对定位不脱标），就都是脱标的盒子，可以直接给定宽高，不要转换。
另外，脱标的盒子也不会有外边距合并或者塌陷的问题了。
12. 版块标题使用line-height控制垂直居中
版块标题文本的上面和下面的空白，往往高度不同，此时最好是量出一个文本正好处于垂直居中的高度，作为盒子的高度，而上方更多的空白部分使用父级盒子的padding-top设置（margin-top也可以，但要注意塌陷问题），然后给盒子设置line-height等于自身高度，控制标题文本垂直居中。
这样，后期修改标题文本的样式，就不需要再次测量了，只要line-height等于盒子自身高度，就能自动垂直居中。
注意line-height一般设置为偶数值，因为字体的太小基本都是偶数单位的，行高使用偶数避免上下间距平分时的误差，最小像素只能是1个整的像素。
13. 版块标题的水平线
给标题文本的盒子设置绝对定位，盖住留在标准流的细线盒子即可，左右两侧的空白使用padding加上背景色实现。或者标题文本的盒子和作为细线的盒子都设置定位模式，然后给标题文本的盒子设置一个更大的z-index属性值。
利用浮动元素脱标也可以实现，但是就不符合子级盒子“一浮全浮”的习惯了。
14. 文本域控件的resize属性
文本域控件textarea元素默认可以由用户调整大小，但是为了不让它的大小影响我们后面的元素的布局，可以设置 resize: none; 来禁止用户调整textarea的大小。
但是，这样的用户体验不好，用户可能无法舒适地输入，此时建议使用min-width、max-width、min-height以及max-height属性，这些属性可以限制textarea元素的大小，而且用户也可以更舒服地输入数据。
[CSS] 纯文本查看 复制代码
textarea {
min-width: 100%;
max-width: 100%;
min-height: 200px;
max-height: 400px;
}
15. 去掉默认的蓝色边框outline之后
给表单元素设置outline: none; 去掉默认的蓝色轮廓线之后，可能造成元素无法获取焦点，导致无法通过键盘访问网站、链接打不开、无法注册等Bug。
建议禁用默认的聚焦样式之后，也指定取而代之的聚焦状态样式。例如
[CSS] 纯文本查看 复制代码
.button:focus {
outline: none;
box-shadow: 0 0 3px 0 blue;
}
16. vertical-align属性
该元素只能用于行内元素或者行内块。要注意搞清楚该属性各个值的具体意义：
但是呢，具体意义在这里三言两语说不清楚，请各位自行参考张鑫旭《CSS世界》一书的第五章吧，比较复杂！ 一般在CSS Reset里用标签选择器统一设置 img {vertical-align: middle;} ，可以解决图片底部默认有空白缝隙的问题。
17. 利用行内块元素之间的默认间距
可以用于制作页码显示和切换的导航，用一个父级div装上一堆链接a即可。
- 把这些链接ａ盒子转换为行内块， 之后给父级div设置 text-align:center; 就能保证他们水平居中，
- 而且正好利用行内块元素中间默认有缝隙，
- 注意当前页数的那个a，还有显示为省略号的那个a，如果是直接把边框去除，那么在切换页面时会出现这些a元素的位置抖动，因为边框也是占位置的，虽然只有两三个像素。推荐保留边框，颜色设为transparent 即可，或者设置CSS3盒模型 box-sizing: border-box; 也可以解决这个问题。
18. 伪元素的使用
尽量不要在HTML中添加空元素，如空的div或者空的span，可以使用 ::before和 ::after伪元素来达成同样的效果。
伪元素一般就是用于制作装饰性的小盒子的。
注意伪元素与其他元素的层级关系，给谁添加伪元素，就相当于给它增加了子级元素。 ::before伪元素是加在内容之前， ::after伪元素是加在内容之后，都是与内容同级的子元素，所以只能给双标签的元素添加伪元素，单标签没有内容，无法添加。
19. 时间不早了，暂且罗列至此。
To Be Continued....
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |