-
很怀念· ·················
查看全部 -
这个面试的时候问我，我连这个都不会说明可能我对这个还是没有实践经验的，只能说我自己确实没有太大努力查看全部
-
一列布局：通常作为网页的首页。
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>布局</title> <style type="text/css"> body{margin:0;padding:0} .top{height:100px;background:blue} .main{width:800px;height:300px;background:#cc;margin:0 auto} .foot{width:800px;height:100px;background:#900} </style> </head> <body> <div class="top"></div> <div class="main"></div> <div class="foot"></div> </body> </html>查看全部 -
布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机地排列组合。
网页设计的特点：网页的宽度可以自适应；网页的长度理论可以无限延长。
常见的网页布局：头部、尾部、分成两栏或者三栏。
分栏又称为分列，常见的布局分为：一列布局、两列布局、三列布局和混合布局。
前端工程师:如何利用CSS中浮动定位手段，完成UI设计中的布局要求。前端工程师就是将技术和艺术相融合的岗位。
查看全部 -
绝对定位：position:absolute
居中：margin：0 ........
查看全部 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff;text-align:center;}
.top{background:gray;width:100%;height:100px;}
.main{width:100%;}
.right{height:600px;background:green;position:absolute;left:210px;right:0;}
.left{width:200px;height:600px;background:blue;}
.foot{background:red;width:100%;height:50px;position:absolute;bottom:0;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
查看全部 -
完查看全部
-
清除函数 clear:both
水平居中 margin:0 auto
左浮动 float:left
右浮动 float:right
高 height
宽 widht
查看全部 -
main的布局思路
1.两列都是自适应
第一步将左右两个模块的高度颜色确定下（方便观察），不用设置宽度（默认即自适应）
第二步将左右两个元素用float进行左右浮动（因为没有数值要求所以可以不用position：absolute绝对定位）
2.中间宽度固定
第一步将main部分该固定的宽度固定下来
第二步也是利用float将子元素左右浮动，并设置其大小，用比例百分比固定可以，用固定像素设置也可以
3.左边做固定宽度 右边做自适应
第一步先把左边模块固定好大小，这时用可用float或绝对定位将模块定位或浮动左边
第二步不设置右边模块的宽度（即默认自适应），定位要用position：absolute绝对定位 并设置left的大小以和左边元素对齐。
查看全部 -
我们利用margin:0 auto;属性将定宽块状元素进行居中
查看全部 -
中间main模块的思路
left按要求设置宽度，利用绝对定位将模块定位左边
right宽度自适应的话不要设置其宽度，利用绝对定位将模块定位在距离左边200px的位置
注意float与position的区别：
float仅仅只是将元素浮动到左边或者右边，没有任何数值要求
但是当有数值要求时，用绝对定位position更加精确。
查看全部 -
块挨着块
块嵌套块
块叠压着块
查看全部 -
布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合
网页设计的特点：
网页可以自适应宽度。
网页的长度理论上没有限制
常见的网页布局一般分为三部分：头部、内容主体、底部。
分栏有称为分列，常见的布局有：
一列布局
两列布局
三列布局
混合布局
查看全部 -
可以让元素脱离文档流：浮动float和绝对定位absloute
查看全部 -
布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合
网页设计的特点：
网页可以自适应宽度
网页的长度理论上没有限制
分栏又称为分列，常见的布局分为：一列布局，二列布局，三列布局，混合布局（多）
查看全部
举报