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

  • 相关阅读:
    Servlet概述
    JAVA WEB开发环境与搭建
    Java scirpt简介
    用HTML+CSS编写一个计科院网站首页的静态网页
    CSS样式
    HTML简介
    Web服务器的原理
    静态网页与动态网页的区别
    debugger工具的使用以及调试
    javascript页面刷新的几种方法
  • 原文地址:https://www.cnblogs.com/zhangrui0328/p/8685667.html
Copyright © 2020-2023  润新知