0329-0401难点

1无序排列中将日期整齐统一的置于右边的方法,效果如下图所示

解决方法:body中如此设置

	   	     	
	   	     	   <ul style="list-style-position: inside;" >
	   	     	   	<li>学校制定完成首个山东省师资.. <span class="xinwenriqi">3-30</span></li>
	   	     	   	<li>学科建设领导小组会议召开 <span class="xinwenriqi">3-29</span></li>
	   	     	   	<li>学校举行学习贯彻全国“两会”...<span class="xinwenriqi">3-29</span></li>
	   	     	   	<li>淄博市体操协会在我校成立 <span class="xinwenriqi">3-29</span></li>
	   	     	   	<li>服务新旧动能转换重大工程专题...<span class="xinwenriqi">3-29</span></li>
	   	     	   	<li>淄博市统一战线理论研究基地落...<span class="xinwenriqi">3-29</span></li>
	   	     	   </ul>

head的style中如此设置

   .xinwenriqi{
            float: right;
            
        }

要点:利用span不如div霸道的特点,将其放入<li>中向右漂浮。不可把“新闻日期”左面的文字一起span然后向左漂浮,否则会产生<li>的点没有一同向左漂浮而居中的现象。

.........................................................................................................................................................................................................................................................

2设置导航中文字右边的灰点的方式

效果图如下:

方法:(1)先在head中的style里定义一个灰点的class,让灰点垂直居中

    .dian{
            width: 4px;
            height: 4px;
            background-color: gray;
            margin-top: 22px;
           
                          }

(2)在body的<li>中将灰点设置为<li>的一员

	<ul style="list-style: none;">
					
				
				<li>图书馆</li>
				<li class="dian"></li>
				<li>信息公开</li>
			    <li class="dian"></li>
				<li>招标采购</li>
	 	        <li class="dian"></li>
	 	        <li>办公系统</li>
				<li class="dian"></li>

 .........................................................................................................................

3导航中短文字和长文字的间距不一样

方法,去掉style中<li>的宽度

 

posted @ 2018-04-01 09:14  张锐0328  阅读(113)  评论(0编辑  收藏  举报