您的位置：首页 > 运维架构 > 网站架构

《页面架构》课堂交流区问题汇总

2016-06-28 18:21 387 查看
本课程为网易云课堂 - - 前端开发工程师 - - 《页面架构》学习总结

居中布局

问题一：水平列表的底部对齐

如图所示，一个水平排列的列表，每项高度都未知，但要求底部对齐，有哪些方法可以解决呢？

    


解决方案：

方法一：子元素设置：display：inline-block + vertical-align:bottom

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平列表的底部对齐</title>
<style type="text/css">
.parent{
height:500px;
width:800px;
border:1px solid #CCC;
text-align:center;
}
.child{
display:inline-block;
vertical-align:bottom;
}
.child_a{
width:150px;
height:100%;
background:red;
}
.child_b{
width:150px;
height:75%;
background:green;
}
.child_c{
width:150px;
height:50%;
background:black;
}
.child_d{
width:150px;
height:25%;
background:yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child child_a">我是最左边的</div>
<div class="child child_b">我是老二，嘿嘿</div>
<div class="child child_c">我是倒数第二！能看到我吗？</div>
<div class="child child_d">我是倒数第一吆~</div>
</div>
</body>
</html>


方法二：position:relative + 子元素：position:absolute + bottom：0

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平列表的底部对齐</title>
<style type="text/css">
.parent{
height:500px;
width:800px;
border:1px solid #CCC;
text-align:center;
position:relative;
}
.child{
position:absolute;
bottom:0;
}
.child_a{
width:150px;
height:100%;
left:15px;
background:red;
}
.child_b{
width:150px;
left:180px;
height:75%;
background:green;
}
.child_c{
width:150px;
left:345px;
height:50%;
background:black;
}
.child_d{
width:150px;
left:510px;
height:25%;
background:yellow;
}
</style>
</head>

<body>
<div class="parent">
<div class="child child_a">我是最左边的</div>
<div class="child child_b">我是老二，嘿嘿</div>
<div class="child child_c">我是倒数第二！能看到我吗？</div>
<div class="child child_d">我是倒数第一吆~</div>
</div>
</body>
</html>


方法三：父元素：dispaly:flex + align-items:flex-end

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平列表的底部对齐</title>
<style type="text/css">
.parent{
height:500px;
width:800px;
border:1px solid #CCC;
text-align:center;
display:flex;
align-items:flex-end;
}
.child{
margin-left:15px;
}
.child_a{
width:150px;
height:100%;
background:red;
}
.child_b{
width:150px;
height:75%;
background:green;
}
.child_c{
width:150px;
height:50%;
background:black;
}
.child_d{
width:150px;
height:25%;
background:yellow;
}
</style>
</head>

<body>
<div class="parent">
<div class="child child_a">我是最左边的</div>
<div class="child child_b">我是老二，嘿嘿</div>
<div class="child child_c">我是倒数第二！能看到我吗？</div>
<div class="child child_d">我是倒数第一吆~</div>
</div>
</body>
</html>


方法四：弹性盒模型

  相关重点文章推荐：

  《CSS3实战》笔记–弹性盒模型（一）

  《CSS3实战》笔记–弹性盒模型（二）

  《CSS3实战》笔记–弹性盒模型（三）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平列表的底部对齐</title>
<style type="text/css">
.parent{
height:500px;
width:800px;
border:1px solid #CCC;
display:box;   //  设置为盒子显示
display:-moz-box;
display:-webkit-box;
orient:horizontal;  //  定义父元素内子元素的流动
-mozbox-orient:horizontal;
-webkit-orient:horizontal;
box-align:end;
-moz-box-align:end;
-webkit-box-align:end;
}
.child{

}
.child_a{
width:200px;
height:500px;
background:red;
}
.child_b{
background:green;
width:200px;
height:350px;
}
.child_c{
background:black;
height:250px;
width:200px;
}
.child_d{
width:200px;
height:150px;
background:yellow;
}
</style>
</head>

<body>
<div class="parent">
<div class="child child_a">我是最左边的</div>
<div class="child child_b">我是老二，嘿嘿</div>
<div class="child child_c">我是倒数第二！能看到我吗？</div>
<div class="child child_d">我是倒数第一吆~</div>
</div>
</body>
</html>


问题二：实现一个幻灯布局

  一个幻灯片效果如图：

    


  已知结构如下：

<div class="slide">
<!-- 图片省略 -->
<!-- 以下是指示器 -->
<div class="pointer"><i></i><i></i><i></i></div>
</div>


  要求如下：幻灯（slide）宽高未知，指示器（pointer）在底部且水平居中，距离底部10px，指示器中的圆直径为10px，个数未知，背景为黑色，间距为5px，请完成CSS。

  解答：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>幻灯图</title>
<style type="text/css">
.slide{
width:600px;
height:300px;
background:#9dc3e6;
position:relative;
}
.pointer{
position:absolute;
left:50%;
transform:translate(-50%);
bottom:10px;
}
.pointer i{
display:block;
float:left;
margin-right:5px;
width:10px;
height:10px;
border-radius:50%;
background-color:black;
}
.pointer i:last-child{
margin-right:0;
}
</style>
</head>

<body>
<div class="slide">
<!-- 图片省略 -->
<!-- 以下是指示器 -->
<div class="pointer">
<i></i>
<i></i>
<i></i>
</div>
</div>
</body>
</html>


多列布局

问题一：一个全等四宫格的实现

  一个未知宽高的容器，要被均分为四个相同大小格子（即四个容器），且格子间有10px间距（即十字型空隙），有哪些方法可以解决呢？

    


  方法一：（效果不好，Firefox浏览器效果基本可以，需要css微调）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个全等四宫格的实现</title>
<style type="text/css">
*{margin:0;padding:0;}
.parent{
border:1px solid #CCC;
margin:0 auto;
width:420px;
height:420px;
}
.box{
background:#009999;
height:200px;
width:200px;
display:inline-block;
}
.box:nth-child(1){
margin:0 17px 0 0;
}
.box:nth-child(even){
margin:0 0 0 -2px;
}
.box:nth-child(3){
margin:17px 17px 0 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>
</body>
</html>


  方法二： （display：flex）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个全等四宫格的实现</title>
<style type="text/css">
.parent{
width:410px;
height:410px;
border: 1px solid #CCC;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-between;
}
.box{
width:200px;
height:200px;
background:#009999;
}
.box3{
align-self:flex-end;
}
.box4{
align-self:flex-end;
}
</style>
</head>
<body>
<div class="parent">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>
</body>
</html>


  方法三：box-sizing:border-box; background-clip:content-box;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一个全等四宫格的实现</title>
<style type="text/css">
html,body{height:100%;}
.parent{
width:50%;
height:50%;
border: 1px solid #CCC;
}
.box{
background:#009999;
float:left;
width:50%;
height:50%;
box-sizing:border-box;
background-clip:content-box;
}
.box1{
padding-right:10px;
padding-bottom:10px;
}
.box2{
padding-bottom:10px;
}
.box3{
padding-right:10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>
</body>
</html>


全屏布局

问题：已知HTML结构和效果图如下：

<div class="a">
<div class="b">Hello World</div>
</div>


  假设以上父元素称为A，子元素称为B

    


  请写出CSS以实现以下弹窗需求：弹窗（B）固定在浏览器窗口中间，弹窗背景色为白色，弹窗宽高由其内容决定，弹窗四周为黑色半透明（0.5透明度）遮罩。

  HTML代码：

<div class="a">
<div class="b">
<!-- 测试弹窗高度由内容决定
<p>Hello World</p>
<p>Hello World</p>
-->
Hello World
</div>
</div>


  CSS代码：

.a {
position: fixed;
height: 100%;
width: 100%;
background-color: #000;
opacity: 0.5;
filter: alpha(opacity=50);
}
.b {
background-color: #fff;
display: inline-block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}


响应式

高清屏的背景图片适配

  当我们把一个图标做成CSS中的背景图，在视网膜屏上预览时会发现图标是模糊的，所以我们会同时准备一个2倍大小的图标给高清屏，那么问题来了，怎么实现在普通屏下是普通背景图，而在高清屏下是用的高清图呢？

  解答：

方法一：
<img>
标签引用的图片

  通过js做自动适配

<img class="photo" src="./photo.jpg" style="width:300px;height:200px;" />
<script type="text/javascript">$(document).ready(function () {
if (window.devicePixelRatio > 1) {
var images = $("img.photo");
images.each(function(i) {
var x1 = $(this).attr('src');
var x2 = x1.replace(/(.*)(\.\w+)/, "$1@2x$2");
$(this).attr('src', x2);
});
}
});</script>


  Retina.js 提供了更加完善的解决方案，自动匹配屏幕分辨率的同时，还可以检测服务器上是否存有当前图片的 @2X 版本，以决定是否替换。

  优点：

操作简单

普通屏幕下不会加载 @2X 的大尺寸图片，节约带宽


  缺点：

Retina 屏幕下，标准图片和高清的图片都会被加载

图片在显示过程中会被重绘

有些老版本浏览器下存在兼容问题（一些老版本浏览器如 IE6、7 会显示得非常失真）


  方法二：CSS的media标签

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5), /* 注意这里的写法比较特殊 */
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
#logo {
background-image: url(./logo@2x.png);
background-size: 100px auto;
}}


  优点：

只会加载匹配当前设备的最适图片

跨浏览器兼容


  缺点：

如果背景图片很多的话，需要编写非常冗长的代码


  方法三：css的image-set方法

background-image: -webkit-image-set(url(./logo.png) 1x, url(./logo@2x.png) 2x);


  **优点：**css中编写，图片集中，代码量少

  缺点：存在兼容性问题，仅支持background-image属性，而不能使用在“”标签中，是css4的草案。

问题：完成响应式布局的实现

  已知一个自适应布局的HTML结构如下：

<div class="parent">
<div class="side"></div>
<div class="main"></div>
</div>


  请完成以下响应式要求：

默认情况，PC电脑（假设视窗都大于等于1000px）访问：两列布局，.parent宽960px且水平居中，左列.side宽300px，右列.main宽650px，列间距10px。



当用平板（假设视窗都大于400px且小于1000px）访问：两列布局，.parent宽度撑满，右列.main自适应剩余宽度，两列间距仍旧为10px。



当用手机（假设视窗都小于等于400px）访问：上下两行布局，.parent宽度撑满，.side和.main宽度也撑满，行间距为10px。



  解答

       <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完成响应式布局的实现</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: lightgray;
}
/* 默认情况：两列布局，.parent宽960px且水平居中，左列.side宽300px，右列.main宽650px，列间距10px*/
.parent {
width: 960px;
height: 100%;
margin: 0 auto;
}
.side {
float: left;
background-color: lightblue;
width: 300px;
height: 100%;
}
.main {
background-color: red;
width: 650px;
margin-left: 310px;
height: 100%;
}
/* 当用平板（假设视窗都大于400px且小于1000px）访问：两列布局，.parent宽度撑满，右列.main自适应剩余宽度，两列间距仍旧为10px。 */
@media screen and (min-width: 400px) and (max-width: 1000px) {
.parent {
width: 100%;
}
.main {
width: auto;
}
}
/* 当用手机（假设视窗都小于等于400px）访问：上下两行布局，.parent宽度撑满，.side和.main宽度也撑满，行间距为10px。 */
@media screen and (max-width: 400px) {
.parent {
width: 100%;
}
.side {
width: 100%;
float: none;
}
.main {
width: 100%;
margin-left: 0;
margin-top: 10px;
}
}
</style>
</head>
<body>
<div class="parent">
<div class="side"></div>
<div class="main"></div>
</div>
</body>
</html>


页面优化

问题：页面优化的方法

减少请求。

减少文件大小。

提升页面性能。

提升可读性，维护性。

减少请求

图片合并（62%的内容是图片）

    1）选择合适的图片格式（PNG，JPG）。

    2）压缩图片（imageOptim,imageAlpha,JPEGmini）

CSS合并

    1）多个CSS文件合并为一个。

    2）少量CSS样式内联

    3）避免使用import（同步的单线程请求）的方式引入CSS文件。

    4）值缩写。（margin,padding,border,border-radius,font,background）

    5）省略值为0的单位。（0px,0%,0.5）

    6）颜色值最短表示（red,rgb(255,255,0),rgba,#333）

   7）选择器合并(.m-logo,.m-var)

    8）文件压缩（上线前，去空格）

页面性能优化

加载顺序（CSS放上面，JS放下面）

减少标签数量

选择器长度

耗性能属性（expression）

图片设置宽高

所有表现用CSS实现

可读性，可维护性

规范

语义化

尽量避免HACK

模块化

注释

问题：代码优化

  请对以下CSS进行优化:

h1{font-weight: bold;}
h2{font-weight: bold;}
h3{font-weight: bold;width:100px;}
.g-bd{
border-top: 1px solid #000;
border-right: 1px solid #f00;
border-bottom: 1px solid #f00;
border-left: 1px solid #000;
color: #bbff22;
}
.m-tab{
margin-top: 10px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
color: rgb(255,0,0);
}
.m-tab li a{
display: block;
padding: 0px 10px;
font-family: "Microsoft YaHei", simsun;
font-size: 20px;
line-height: 1.5;
}
.m-side{
width: 200px;
background-image: url(bg.png);
background-repeat: repeat-y;
background-color: #ccc;
}


  解答：

h1,h2,h3{font-weight: bold;}
h3{width:100px;}
.g-bd{border: 1px solid #000;border-color: #000 #f00 #f00 #000;color: #bf2;}
.m-tab{margin:10px 10px 20px;color: red;}
.m-tab li a{display: block;padding: 0 10px;font: 20px/1.5 "Microsoft YaHei", simsun;}
.m-side{width: 200px;background: #ccc url(bg.png) repeat-y;}


规范

  ####问题：制订一份CSS规范

  解答：

一、文件规范

1.文件按照通用类和业务类进行归档

2.文件使用外联引入，其他一些样式使用内联引入

3.文件名采用小写字母，可适当加中划线，然后使用数字来表示版本

4.编码采用utf-8格式


二、注释规范

1.块状注释：统一缩进，在被注释对象之上

2.单行注释：文字两端空格，在被注释对象之上

3.行内注释：文字两端空格，分号之后


三、命名规范

1.采用分类命名，布局类以g-开头，实际内容以m-开头

2.命名具有可读性且长度适中，适当缩写

3.语义化命名方式


四、书写规范

1.多行书写，便于阅读

2.默认缩进为两个空格

3.css规则内一个空格

4.需要保留最后一个属性值的分号

5.属性书写顺序按照：位置属性——自身盒模型相关属性——显示属性 的顺序来书写

6.尽量少使用Hack，ie6采用_开头，ie67采用*开头，先写ie67的，再写ie6的

7.color命名采用十六进制，且尽量缩写

8.url()文件格式不加引号


五、其他规范

1.<!DOCTYPE html> 顶格开始文档声明

2.闭合标签均闭合，自闭合标签也需要闭合

3.属性采用单引号，readonly、checked等属性可以直接写，不用=""

4.采用缩进体现层级，正确嵌套，但不宜太深，影响性能

5.注释：<!-- A --> xxx <!-- /A -->

6.标签属性均小写

7.文件语义化命名，且不能过长

8.保留源文件

9.使用sprite技术来合并图片

10.图片按照模块、业务、页面来划分


模块化

问题：页面模块化优点

  解答：

利于多人协同开发

便于扩展和重用

可读性，可维护性好

灵活，快速，高效.不会出现样式污染
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航