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>的宽度