1.超出部分隐藏
li{
width:200px;
white-space:nowrap; /*超出部分不另起行*/
overflow:hidden; /*横向超出部分隐藏*/
text-overflow:ellipsis; /*好像没什么作用*/
border:1px solid red; /*边框*/
}
2.鼠标所在的位置显示为手
dt{cursor:pointer}
3.去除下划线
a{text-decoration:none}
Relative 定位
相对定位元素的定位是相对其正常位置。
Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
visibility:hidden;隐藏
伪类型
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
建立一个横向导航栏的方法之一是指定
li{display:inline;} float也能实现这个效果，但是这个能实现中间有
4.内填充padding一般用于按钮，文字与边框之间的填充
.dropbtn {
background-color: #4CAF50; //背景颜色
color: white; //文字颜色
padding: 16px; //内填充
font-size: 16px;
border: none;
cursor: pointer;
}
CSS3 word-wrap 属性 指定如果足够长得话，应该换行：
p.test {word-wrap:break-word;}
5.实现以下效果
Paste_Image.png
<section class="cpjl-h2 qpk-h21">
<h2>宝鹏公司经典案例<br>
<span>将商业策划、创意艺术、互联网技术与营销数据分析完美融合</span>
</h2>
</section>
<style>
/*这个是整体的效果，底边是2px的厚度实线*/
section.cpjl-h2{
width:1200px;
height:35px;
margin:60px auto 85px auto;
text-align:center;
border-bottom:#dddddd 2px solid;
position:relative;
}
/*这个是h2的修饰，这个类是可以多出使用的，但是在被使用的时候要注意修改宽度来适应自己*/
section.cpjl-h2 h2{
width:600px;
height:70px;
line-height:25px;
font-size:55px;
color:#333;
font-weight:bold;
background:#fff;
position:absolute;
left:25%;
top:0;
}
/*因为span标签也在h2中，所有要有自己的修饰才可以。字体要变小*/
section.cpjl-h2 h2 span{
font-size:20px;
color:#999;
}
section.qpk-h21 h2 {
width: 550px;
}
section.qpk-h22 h2 {
width: 300px;
left: 35.5%;
}
</style>
Paste_Image.png
底部效果
{{--主题部分与底部保持一定的高度距离--}}
<section class="hycj-ko"></section>
<section class="qpk-bo">本公司将保留最终的解释权 。</section>
<style>
section.qpk-bo {
width: 100%;
max-width: 1920px;
height: 100px;
margin: 0 auto;
line-height: 100px;
text-align: center;
color: #bababa;
background: #2f2f2f;
}
section.hycj-ko {
height: 30px;
overflow: hidden;
}
</style>