DIV用于搭建网站结构（框架），CSS用于创建网站表现（样式/美化） DIV+CSS模式设计网站的优势：1、表现和内容分离。 2代码简洁，提高网页浏览速度。 3、易于维护，改版。 4、提高搜索引擎对网页索引的效率 大部分标签都有意义，例如a标签创建链接h标签创建标题 div和span是无意义的标签，但是div和span可以与css，结合起来。应用就非常的广泛。原文：https://www.cnblogs.com/dream2060/p/1005...
1. 盒子 针对于块元素来说(比如div,ul,li,h1等) 基本属性: 外边距 margin(当前盒子与其他元素的距离) margin-top margin-right margin-bottom margin-left 基本用法:(margin:0 auto能让块级元素在父元素中居中显示) margin:10px; 上右下左 margin:0 10px; 上下，左右 margin:0 10px 5px; 上 左右 下 margin:0 1...
我之前写九宫格自适应布局的时候，每个格子是使用媒体查询器（@media）或者js动态设置css，根据不同的手机屏幕宽度，适配不同手机，但是这样有个很大的缺点，那就是移动端的屏幕尺寸太多了，就得写很多代码，才能实现我们想要的效果。今天突发奇想，使用了纯css实现了我想要的效果，下面就和大家来分享，上代码;<!DOCTYPE html> <html><head><meta charset="utf-8"><title>九宫格</title><meta name="viewport" content="maximum-s...
随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV CSS制作方法，jb51.net也成为了CSS网页布局技术学习的先锋站点，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。 如今大部分网站仍然采用表格嵌套内容的方式来制作网站，虽然此方法对于我们来说比较熟悉、比较上手；但是，它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法——DIV CSS。 CSS网页布局的意义体现...
一、概述 CSS网格布局（Grid）是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。首先来介绍几个概念:想象一个三行三列的布局，网格线就是构成网格所有的线条，三行三列的布局每行就会有4条网格线。 网格轨道就是相邻两条平行的网格线之间的部分。和flex布局一样，他会有父容器和子项目，在这儿我们称为网格容器和网格项。 接下来，我们从网格容器到网格项的各个基本属性来介绍网格布局。二、 网格容器将属性 disp...
案例一：导航菜单的制作垂直菜单<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</title><style type="text/css">* {margin: 0;padding: 0;font-size:14px;}ul{list-style:none;width:100px;}a{text-decoration:none;display:block;height:30px;line-height:30px;width:100px;background-color:#ccc;margin-bottom: 3px;text-align:center;}a:hover{color:red;font-weight:bold;bac...
<!DOCTYPE html>CSS4-布局1-基本属性属性：displayvisibilityfloatclearHTML元素类型：行内元素，块级元素块级元素：最大的区别：换行行内元素：不换号<style>div{background:#f00;width:200px;height:100px;}span{background:#0f0;width:200px;height:100px;}/*display*/div{display:inline;} /*元素转为行内*/span{display:block;}/*元素转为块级*/div,span{display:inline-block;}/*元素转为行内块级综合，IE6/7不支持块级元素转...
一、admin页面布局及路由创建0）cmd批量创建目录及子目录//创建各个目录，及charts和子目录bar md home category product role user charts\bar charts\line charts\pie 或 mkdir home category product role user charts\bar charts\line charts\pie目录结构│ admin.jsx │ ├─category ├─charts │ ├─bar │ ├─line │ └─pie ├─header │ header.less │ index.jsx │ ├─home ├─left │ in...
DIV+CSS中让布局居中_背景图片居中_文字内容居中原文：http://www.cnblogs.com/as3lib/p/4466282.html
tips：css中“>”是: css3特有的选择器，A>B 表示选择A元素的所有子B元素。 与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。 .a，.b｛逗号指相同的css样式｝；.a .b｛空格指后代元素｝；.a>.b｛大于号指子代元素｝； 一、浮动解决方案代码：<!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-Compati...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" /><title>CSS未知高度垂直居中</title><style type="text/css">html,body{ height: 100%; padding:0; margin:0;}body{ min-height: 200px; text-align: center; min-wid...
方法1:左边设置绝对定位，右边设置左外边距，大小和左边的宽度相等//CSS部分：.contain{position :relative;height: 300px;}.left{position: absolute;left: 0;top: 0;width: 200px;height: 300px;background: red;}.right{/*使用左外边距*/margin-left: 200px;height: 300px;background: blue;}//html部分： <div class="contain"><div class="left">左边定宽</div><div class="right">右边自适应</div></div>方法2：左边设置左浮...
以前使用瀑布流都要用js，现在有了css3，可以轻松实现了。掌握点：1、column-count 把div中的文本分为多少列2、column-width 规定列宽3、column-gap 规定列间隙4、break-inside: avoid; 避免元素内部断行并产生新列注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。 实例： 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>CSS3瀑布流</title> 6<style> 7/*大层*/ 8 .con...
+ display:grid 指定一个容器采用网格布局 ，采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。一、容器属性默认情况下 容器元素都是块级元素，但也可以设置成行内元素display:inline-block Note:设置网格布局后，容器子元素（项目）的float、display:inline-block、 display:table-cell、 vertical-align 和Column-*等设置都将失效 2、grid-template-columns 属性 grid-templ...
使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。 使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。 在深入了解这种方法之前，让我们先来写份HTML文档实例：<div id="wrapper"><div id="main"><di...