css操纵目录与导航栏的制做(水平导航栏条、竖直

日期:2020-10-21 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序


拷贝编码
编码以下:

<style type="text/css">
/*body默认设置是有边距的*/
body{ margin:0;}
/*ul默认设置是有边距的因此先将边距去掉IE78要是再加margin便可以了 但IE6不好 因此要再加padding 能够完成全部访问器的适配*/
ul{list-style:none; margin:0; padding:0;}
</style>
<body>
<ul>
<li>天才</li>
<li>各村各寨</li>
<li>天干</li>
<li>才工</li>
<li>雪原</li>
</ul>
</body>

1.设定目录标记的款式:list-style-type

none 无标记
disc 实体线的小圆点。(默认设置)
circle 空心的小圆点。
square 实心的小方块。
decimal 1,2,3...
lower-roman i,ii,iii...
upper-roman I,II,III...
lower-alpha a,b,c,d,e...
upper-alpha A,B,C,D,E...


拷贝编码
编码以下:

<style type="text/css">
ul{list-style:none;}
#df{list-style:lower-roman;}
</style>
</head>
<body>
<ul>
<li id="df"> 站在时光的岸上,向自身的往日打个水漂吧……</li>
<li>2011我娶你,2012我维护你,2013爱你1生,2014爱你1世!</li>
<li>人生就像1场旅游,在意的并不是目地地。而是沿途的"SB",和应对"SB"时的情绪!</li>
<li>臭男生都喜爱骚女性。</li>
<li>系好安全性带,正前方或许有场感情正等着你。</li>
<li>枕着复印机睡,就可以复印出1彻夜的梦吧?</li>
</ul>
</body>

2.设定目录标记的款式用照片(这类方式非常少用):list-style-image


拷贝编码
编码以下:

<style type="text/css">
body{margin:50px;}
ul{list-style:none; margin:0; padding:0; list-style-image:url(fasfas.gif); line-height:150%;}
</style>
<body>
<ul>
<li>天才</li>
<li>各村各寨</li>
<li>天干</li>
<li>才工</li>
<li>雪原</li>
</ul>
</body>

3.设定清单新项目上下移:list-style-position
inside 清单新项目较往右移。
outside 清单新项目一切正常显示信息(默认设置的特性)。


4.以情况照片做为新项目目录标志:这类方式较为好(常见),能够随便调动


拷贝编码
编码以下:

<style type="text/css">
body{
margin:50px;
}
ul{
list-style:none;
margin:0;
padding:0;
}
ul li{
background:url(fasfas.gif) no-repeat left 50%;/*只显示信息1个*/
padding-left:20px;
}
</style>
<body>
<ul>
<li>天才</li>
<li>各村各寨</li>
<li>天干</li>
<li>才工</li>
<li>雪原</li>
</ul>
</body>

5.内联目录:

ul和li默认设置是区块的,查询是不是是区块能够再加色调检测,将目录变换为内联以后新项目标志会看不到,可使用波动或应用下面的列子来完成

这里的 display 特性是块级值的设定,界定是不是要变成块.Inline 是是内联,block 是区块.


拷贝编码
编码以下:

<style type="text/css">
body{margin:50px;}
ul{list-style:none; margin:0; padding:0;}
li{display:inline;}
</style>
<body>
<ul>
<li>天才</li>
<li>各村各寨</li>
<li>天干</li>
<li>才工</li>
<li>雪原</li>
</ul>
</body>

6.情况照片和内联目录:应用这类方式再将li变为内联的情况下情况照片依然还在


拷贝编码
编码以下:

<style type="text/css">
body{margin:50px;}
ul{list-style:none; margin:0; padding:0;}
li{display:inline; background:url(fasfas.gif) no-repeat left center; padding-left:20px;}
</style>
<body>
<ul>
<li>天才</li>
<li>各村各寨</li>
<li>天干</li>
<li>才工</li>
<li>雪原</li>
</ul>
</body>

7.竖直导航栏栏:


拷贝编码
编码以下:

<style type="text/css">
body{margin:50px;}
ul{list-style:none; margin:5px; padding:2px; width:250px; font-size: 19px;}
li { background: #ddd url(fasfas.gif) no-repeat 10px center; margin: 0; padding: 2px 35px; border-left: 1px solid #fff;
border-top: 1px solid #fff; border-right: 1px solid #666; border-bottom: 1px solid #aaa;}
</style>
<body>
<div>
<ul>
<li><a href="#">Drubjs Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
</body>

8、建立竖直旋转的目录:


拷贝编码
编码以下:

<style type="text/css">
body{
margin:50px;
}
ul{
list-style:none;
margin:0;
font-size:16px;
}
ul li a{
display:block;
width:200px;
height:40px;
line-height:40px;
color:#000;
text-decoration:none;
background:#94b8e9 url(2014-03-08_220129.gif) no-repeat left center;
Text-indent:50px;
}
a:hover{
background-position: right bottom;
}

</style>
<body>
<div>
<ul>
<li><a href="#">Drubjs Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
</body>

9.建立水平导航栏条:


拷贝编码
编码以下:

<style type="text/css">
body{
margin:50px;
}
ul{
list-style:none;
margin:0px;
padding:0px;
width:798px;
line-height:50px;
background:#faa819 url(2014-03-08_223706.png) repeat-x;
font-size:16px;
float:left;/*要访问器适配,这里也要波动*/
}

/*这里不必用内联,由于调不上高宽比*/
ul li {
float: left;
width:114px;
background: url(2014-03-08_223754.png) no-repeat right center;
text-align:center;
}
ul a {
color:#fff;
padding: 0 4px;
/*background: url(2014-03-08_223754.png) no-repeat right center;*/
text-decoration: none;
}/**/

</style>
<body>
<div>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
</body>