在开发中，我们经常需要使用到三列布局，即左右元素宽度固定，中间元素自适应。废话不多说，直接上代码：<div class="box"><div class="left"></div><div class="center"></div><div class="right"></div></div><style> .box{display: flex;height: 60px;width: 100%;background-color: red;} .center{flex: 1;background-color: yellow;} .left,.right{width: 60px;background-color: pink;}</style> 相比较之前使用的的浮动（flo...
一个网页要说最多的还是文字，上篇博客说CSS样式是一个网页的精髓，那网页中最直接表现出来的就是文字和图片，还有一些所谓的表单，首先先说最为熟悉和常用的文字。让CSS控制网页中的文字，使它不再那么枯燥平淡，从此网页文字变得绚丽多彩。一、文字样式 文字样式主要包括文字的大小、颜色、字体等，具体包括如下写一个小例子，综合运用上述所有的文字效果样式：代码：<html> <head><title>文字字体</title> <style> body{b...
用flex实现css里的三大经典布局，不需要额外很多代码。1,垂直居中 ：子元素在父元素中，水平垂直居中。justify-content：center设置水平方向居中，align-center设置垂直方向居中。<div id="parent"><div id="child"></div></div>#parent { /* align-content和align-items必须配合使用 */display: flex;justify-content: center;align-content: center;align-items: center;width: 300px;height: 300px;outline: solid 1px;}#child ...
4. 背景布局（1）background基本语法background : background-color || background-image || background-repeat || background-attachment || background-position 语法取值该属性是复合属性。请参阅各参数对应的属性。 默认值为：transparent none repeat scroll 0% 0%。使用说明设置对象的背景样式。如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。例如：设置 background : white 等...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试box-sizing</title><style>html, body, div {margin: 0;padding: 0;}#main {width: 100%;overflow: hidden;}#left {float: left;width: 10%;margin-bottom: -1000px;padding-bottom: 1000px;background: red;}#right {float: left;margin-bottom: -1000px;padding-bottom: 1000px;background: yellow;}</style></head><body><div id="main"><div id="left"...
代码： 1<!-- 1 float --> 2<h3 class="block">第一种方法-float</h3> 3<div class="tips"> 4<h4 class="tips-info">关键点</h4> 5<ol> 6<li>结构顺序：左，中，右</li> 7<li>中间盒模型的margin-left、margin-right分别是左右盒模型的宽度、障眼法:中间盒模型使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。</li> 8<li>注意，结构上，左边盒模型、右边盒模型、中间盒模型</li> 9</ol> 10</div> 1...
我们遇到过很多的企业网站或其它小型的展示类网站，有一些共同的特点，即顶部放一个大的导航或BANNER，右侧是链接或图片，左侧放置内容，页面底部放置版权信息等。这样的形式是国内经典式的布局，我们这里不对它的视觉效果作过多的讨论，我们今天说说如何用DIV+CSS实现三行两列的布局。我们看下面的图片：这样的结构大家再熟悉不过了，我们该如何用DIV+CSS实现它呢。我们看下面的分析图片：它们相对应的关系如下： Example Source ...
实现效果：500 Internal Server Error(图片为效果图：上——左右——下)代码：<!DOCTYPE html> <html> <head> <!--或者利用DW里面的母版--> <style type="text/css"> *{ margin:0; padding:0;} #container { width:70%; background-color:Red; margin:0px auto; } #container #header { height:150px; ...
<html><head><title>一列布局</title><style type="text/css">body{margin:0;padding:0;text-align:center}/*一列的布局样式*//*margin:0 auto使div居中*/.top{width:800px;height:50px;background:#00f;margin:0 auto}.main{width:800px;height:250px;background:#ccc;margin:0 auto}.foot{width:800px;height:50px;background:#f00;margin:0 auto}</style></head><body><!--/*一列的布局样式*/-->一列的布局样式<br/><div class=...
<---容器属性---> #布局主轴方向 flexDirection :row :从左向右依次排列 row-reverse :从右向左依次排列column :从上向下排列column-reverse:从下向上排列#元素沿着主轴对齐方式 justifyContent:flex-start :与主轴起点对齐center :主轴居中对齐flex-end :与主轴终点对齐space-around :每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍space-between:两端对齐，项目之间的...
display：table布局单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等.table表格中的单元格最大的特点之一就是同一行列表元素都等高。display:table-cell下的列表布局最适用的场景是：列表个数不固定，但是，无论列表几个，都平分容器空间。什么意思呢？就是如果4个列表，希望每个宽度25%，3个就33.3333%，2个列表希望每个宽度50%。此时，没有比display:table-cell更合适的技术了。设置了display:table-cell的元素对...
前言 我们在手机上布局一般是这个样子的：其中头部对整个mobile的设计至关重要，而且坑也很多：① 一般来说整个header是以fixed布局，fixed这个产物在移动端来说本身坑就非常多② 在Hybrid应用中，Header很多时候扮演了不一样的角色，首先要完成以webview(window)为容器的功能，又要调用native提供的接口Hybrid中Header的实现往往是一个难点，主要原因是同一套接口，要保证H5站点与native处于不一样的环境调用相同的接口，完成不同...
在CSS布局中，ul,li的运用是非常常见的。配合DIV与CSS，创建无表格布局。其实Dreamweaver中也有自带的CSS布局的范例，如下图：LI代码的格式化:A).运用CSS格式化列表符： ul li{list-style-type:none;}例如下面的： 供求信息 B).如果你想将列表符换成图像，则： ul li{list-style-type:none;list-style-image: url(images/icon.gif); }例如下面的： 供求信息 C).为了左对齐，可以用如下代码： ul{list-style-type:none;margin:0px; ...
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11} 12 13 ul{ 14 width: 200px; 15 height: 500px; 16 border: 4px red solid; 17 18 margin: 0 auto; 19 20/* 设置弹性容器 */ 21 ...
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。Margin: Margin属性用于设置两个元素之间的距离。Padding: Padding属性用于设置一个元素的边框与其内容的距离。Clear: 使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使...