HTML和CSS学习记录

CSS

1. 用margin居中

margin:auto用来居中,这个用法,不能用在全长度上,要用在宽度width是固定数值或固定比例上。
代码举例:

.content_li
{
    width: 70%;
    margin: auto;
}

2. id和class

#用在id前面,.用在class前面。
代码举例:
class

.footer
{
    background-color: #85c80f;
    font-family: "Microsoft YaHei" ! important;
}

html中写:

class="";

id

#footer
{
    background-color: #85c80f;
    font-family: "Microsoft YaHei" ! important;
}

html中写:

id="";

id的优先级高于class。

3. 菜单的下划线

实际上是菜单的下边框。

按照《十天学会DIV+CSS.chm》中的做法,下划线始终只出现在文字下。

用chrome的审查元素,一个样式一个样式地去勾选,终于发现问题出现在全局样式的ul li。前几天为了省事,写了一个全局的ul li{float:left} 把这个去掉,只在需要的地方写。结果就好了。

更改情况:

4. div的显示与隐藏

被显示和隐藏的div,初始display为none。这个要写在元素里,不能写到外部样式表中去。

代码:

写js时,注意“=”和“==”不能误用:

    function showandhidden(){ 
        var div1=document.getElementById("babymenu"); 
        if(div1.style.display=='none')
            {
                div1.style.display='block';
            }
        else
            {
                div1.style.display='none';
            } 
        }

if判断中,起初写的“=”,结果就只能执行一次,后面就无效了…… 这个错误应该是后来引入的,昨天写的还是“==”呢。

5. div显示后其他元素移位问题

菜单div显示后,conten中其他的元素(分类列表)下移。试图用div覆盖来解决,但是div覆盖多为覆盖到之前元素的(见:CSS中div覆盖另一个div),方法是margin-top为负值。

后来在隐藏与显示:display/visibility/visible区别中发现其他显示和隐藏方法:

<div style="display:">显示</div>
<div style="display:none;">隐藏不占位</div>

<div style="visibility:">显示</div>
<div style="visibility:hidden;">隐藏占位</div>

<div visible="true" runat="server">显示</div>
<div visible="false" runat="server">消失不占位</div>

隐藏还占位的,就是visibility的hidden了.于是改代码为:

<div id="babymenu" style="visibility:hidden; ">
……
……
<script type="text/javascript"> 
    function showandhidden(){ 
        var div1=document.getElementById("babymenu"); 
        if(div1.style.visibility=='hidden')
            {
                div1.style.visibility='';
            }
        else
            {
                div1.style.visibility='hidden';
            } 
        }
</script>  

运行结果暂时可以:

点击前:

点击后:

但是:当增加了宝宝信息后,菜单变长了。这些元素列表再下移,就不好看了。

所以这是临时解决方案,还是要找到覆盖列表的方法。

6. div显示与隐藏功能的复用

在原来的脚本中,showandhidden函数,在另一个地方想再实现这个功能——例如右边的搜索框,点击放大镜图片,显示搜索框,再点击隐藏——就需要再抄一遍代码,另外给div1赋值。感觉这个重复劳动可以省去。

起先试图类,搜索了一下,Javascript定义类(class)的三种方法 - 阮一峰的网络日志,阮一峰说这个本来是不支持类的,只能模拟。支持类的我也还闹不清楚。放弃。

中间试着给function加参数,加了两个参数,divcontrol和div1。然后发现divcontrol,其他人是在另一个函数来定义的,效果是让html中少写一个onclick。javascript如何实现点击切换div的显示和隐藏-蚂蚁部落 根据这里用的window.onload思索,估计也就只能一次性用用。

接着把divcontrol去掉,仍然在html中加上onclick动作。

突然发现:有了参数div1之后,它不会在我未赋值时说div1未赋值了。于是改成这样:

<script type="text/javascript">
    function showandhidden(div1){
        if(div1.style.visibility=='hidden')
            {
                div1.style.visibility='';
            }
        else
            {
                div1.style.visibility='hidden';
            } 
        }
</script> 

最简方法函数了。

在html中:

<div class="headerleft" onclick="showandhidden(babymenu)";>  

注意不能在babymenu上加引号。

运行成功。

于是在搜索按钮上照旧:

<img src="/assets/images/search.png" width="30" height="30" onclick="showandhidden(searchbar);" />  

完美实现! XD

回想一下,就应该直接用参数控制。因为使用形参不熟练,所以绕了一大圈,又回到这里来了。

7. 元素右对齐

欲实现效果:

原先三个元素时,用margin-left=62.5%,增加了第四个元素,这个数值就不够了。需要自动右对齐。

现在代码:

    <div class="headerright">
        <span style="float:right"><a href="/github/babyrecord/templates/takephoto.html"><img src="/github/babyrecord/assets/images/camera.png" width="30" height="30"/></a></span>
        <span style="float:right"><a href="/github/babyrecord/templates/sendmail.html"><img src="/github/babyrecord/assets/images/mail.png" width="30" height="30"/></a></span>
        <span style="float:right" style="float:right"><img src="/github/babyrecord/assets/images/search.png" width="30" height="30" onclick="showandhidden(searchbar);" /></span>
        <span style="float:right"><a href="/github/babyrecord/templates/add.html"><img src="/github/babyrecord/assets/images/add.png" width="30" height="30"/></a></span>    
    </div>    
……
……
.headerright
{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align:right;
}