第六天divcss常见布局、ie6兼容性公共层代码优化核心.pdfVIP

DIV+CSS 一、CSS基础知识 二、选择器 三、常见元素属性 1.高宽尺寸 2.边框 3. 颜色 4.字体和文本 5.表格 6.背景 7.列表 8.外间距、内间距 9.布局 四、DIV+CSS常见布局 DIV+CSS常见布局 课程提要 一列固定宽度 一列宽度自适应 二列固定宽度 二列宽度自适应 两列：左侧宽度固定，右列宽度自适应 两列：左侧宽度自适应，右列宽度固定 两列：宽度固 中 三列：左右栏宽度固定，中间列宽度自适应 高度自适应 水平列表导航栏 DIV+CSS常见布局 一列固定宽度 style div{ width:300px; height:300px; background:blue; } /style div/div DIV+CSS常见布局 一列宽度自适应 style div{ width:90%; height:300px; background:blue; } /style div/div /*居中效果，再加上以下CSS 代码*/ div{ margin:0px auto; } 响应式布局 @media only screen and (max-width: 767px) {} div{ width:100%; height:150px; background:#03F; } @media (max-width:414px){ div{ width:80%; height:100px; background:#0C0; } } DIV+CSS常见布局 自适应导航条 ul style lia href=###首页 /a/li *{margin:0px; padding:0px;} lia href=###首页 /a/li ul,li{list-style:none;} lia href=###首页 /a/li ul{overf