大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
方案:采用单页面设计
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、雅安服务器托管、营销软件、网站建设、通海网站维护、网站推广。
技术:rem,媒体查询,less
设计图:750px
在index.less中引入common.less @import 'common'
@import是由css提供,只有在ie5以上才能被识别,引用的css会在页面加载完后才会加载引用的css;可以将一个样式文件导入另一个样式文件里 @import '文件名'
link属于html标签,页面加载的时候会被同时加载,不存在浏览器兼容问题,引入样式的权重大于@import,link是把一个样式文件引入带html页面里去
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
display:flex;
不会让容器本身取消它的块装的属性,但它的子元素会变成行内块的的属性
它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间 。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式:
text,password,密码框,radio单选框,checkbox复选框,
button按钮,file上传文件,image提交式图片,submit/reset提交/重置按钮
outline:none;去除就不显示了
在input中想要使用padding调整文字显示的位置时使用padding会变大盒子,影响后面的布局,所以只有把box-sizing:border-box;写上去就可以解决这个问题
你直接在没有任何设置的情况下调整页面窗口大小,发现内容偏离或者显示不全,那就是需要设置固定宽高才能适应页面变化,采用rem控制.
父级是没有样式的div/ul等块级元素;父级盒子内部只有浮动元素,父级没有设置高度和宽度
.ad{
flex方法针对父盒子是一个行内元素,flex方法可以使其中的子元素变成行内块(触发BFC这是a没有塌陷被img子元素撑起来的原因)
display:flex;
a img{
flex:1;
width:100%;
*// float: left;*
// width: 33.3%;
}
}
1.less+媒体查询+rem
2.flexible.js
被后面覆盖了?因为行内元素里面没有写内容
因为元素是行内元素,不能设置宽高,只有里面有内容的时候才能显示出背景颜色
因为元素设置了rem为单位的宽和高,所以它的大小是会随设置的媒体查询结果改变,但是背景图的大小是由bacjground-size设置的,因为没有设置这个,所以没能实现一同变化