1<divclass="wrapper">2<divclass="cell">3<divclass="content">4<h1>把div显示方式设置为表格</h1>5</div>6</div>7</div> 1.wrapper{display:table;background:#FC172E;width:30%;height:600px;} 2.cell{3display:table-cell;4vertical-align:middle;5} 运行效果: 优点: content 可以动态改变高度...
1 <div class="wrapper"> 2 <div class="cell"> 3 <div class="content"> 4 <h1>把div显示方式设置为表格</h1> 5 </div> 6 </div> 7 </div> 1. 2. 3. 4. 5. 6. 7. 1 .wrapper {display:table;background: #FC172E;width: 30%;height: 600px;} 2 .cell { 3 display:table-cel...
<divclass="scroll-container"><divclass="content-wrapper"><divclass="content"><!-- 实际内容 --></div></div></div> CSS: 代码语言:css 复制 .scroll-container{width:300px;height:200px;overflow-x:scroll;}.content-wrapper{width:1000px;}.content{width:1200px;text-align:center;} ...
命名规则:使用骆驼命名规则,即第一个英文单词小写,从第二个英文单词起,头一个字母大写 如:leftcontent,写成:leftContent 栏目等级:col1 col2 col3 col4 col5 col6 宽度从大到小依次排列 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:col 页面外围控制整体布局宽度:wrapper 左右中:...
<divclass="scroll-container"><divclass="content-wrapper"><divclass="content"><!-- 实际内容 --></div></div></div> CSS: 代码语言:css 复制 .scroll-container{width:300px;height:200px;overflow-x:scroll;}.content-wrapper{width:1000px;}.content{width:1200px;text-align:center;} ...
<divclass="wrapper"><divclass="cell"><divclass="content"><h1>把div显示方式设置为表格</h1></div></div></div> .wrapper{display:table;background:#FC172E;width:30%;height:600px;}.cell{display:table-cell;vertical-align:middle; }
<divclass="wrapper"><divclass="content"><!-- 内容 --></div><divclass="fixed"><!-- 需要固定的子div --></div></div> 1. 2. 3. 4. 5. 6. 7. 8. CSS样式 .fixed{position:absolute;top:0;width:100%;background-color:#fff;} ...
在XHTML中定义ID时都用得上，主要是方便CSS定义样式时能一眼看穿。所以，CSS命名仅作参考。(1)页面结构类 容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper (2)导航类 导航：nav 主导航：...
1、把文字放到table中，用vertical-align property 属性来实现居中。<div id="wrapper"> <div id="cell"> <div class="content">Content goes here</div> </div> </div> 2、使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中...
<div class="wrapper"> <div class="content"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specim...