1.下拉框:
<select name="select" id="select_k1" class="xla_k">
<option value="选择品牌1">长沙华创国际广场</option>
<option value="选择品牌2">财富广场</option>
<option value="选择品牌3">保定华创国际广场</option>
<option value="选择品牌4">三门峡国际广场</option>
</select>
2.虚线分割线:
<hr style="border:1px dashed #cbcbcb"/>
3.红色边框:
border: 1px solid red;
4.清除ul前面的样式(比如圆点):list-style:none;
5.添加背景图片:background-image:url(“image//nav_bg.jpg”);
6.父子之间的间距用padding,比如内容与边框的左距离用padding-left
兄弟之间的距离用margin
7.为了清楚float:left带来的问题,可以在父元素里面加overflow:hidden;
8.左右居中:text-align:center;
上下居中:line-height:高度;
9.使内联元素变成块级元素:display:block;
ul{
list-style: none;
background-image: url("image/nav_bg.png");
overflow: hidden;
padding-left:30px;
}
li{
float: left;
height: 36px;
font-size: 16px;
width: 130px;
text-align: center;
line-height: 36px;
margin-left: 20px;
}
ul li a{
display: block;
color: white;
text-decoration: none;
height: 100%;
}
ul li a:hover{
background-color: #6694BD;
}
10.设置字体:font-family: "华文琥珀";
11.<a href="#part1">第一段</a>
代表点击“第一段”就可以跳转到id为part1的那一整段
12.设置背景图片的平铺方式:background-repeat: no-repeat;(repeat-x,repeat-y)
13.设置背景图片上下左右居中的位置:background-position:center center;
15.只设上边框:border-top: 10px dashed green;
16.把左右边框颜色设置为透明,再把下边框去掉可得到一个倒三角图形而且只占三角区域
border-right-color: transparent;
border-left-color: transparent;
border-bottom: none;