一份HTML、CSS总结代码

最新推荐文章于 2023-12-15 08:56:02 发布

小小帕金森

最新推荐文章于 2023-12-15 08:56:02 发布

阅读量726

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/weixin_40615146/article/details/87887004

CSS 专栏收录该内容

3 篇文章

订阅专栏

这是一份关于学习HTML以及CSS过后的一个小Demo，bug还是有不少的，例如CSS中的鼠标悬浮事件的冲突，以及在谷歌浏览器上面的bug
主要的一些功能已经具体写在代码中了其中，重点完成的是：
CSS的悬浮下拉框、CSS鼠标悬浮事件以及@media，页面状态的匹配问题

HTML部分：

<!-- 作者:小小帕金森
     时间:2019.2
     描述：制作一个页面
     参考页面：https://consumer.huawei.com/cn/
     参考页面：https://www.vmall.com/huawei?cid=91712
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>一份网址</title>
    <link rel="stylesheet" type="text/css" href="css/noTwoDemoCss.css" />

    <!-- JavaScript部分 -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
    //菜单部分的JavaScript
    /**描述：
    主要事件一：使得一张小图片按照时间而改变（未实现）
    */
        function sendUser(){
            var time=new Date().getHours();//获取时间
            imgSend=document.getElementById("send");
            if (time>=7&&time<19) {
                imgSend.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549971338869&di=e6e60911a02d63608a42ee22567f2c17&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F0b7b02087bf40ad11614578d5c2c11dfa8eccee8.jpg";
            } else {
                imgSend.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550566180&di=29fbe33b7a36177556121b80efea71be&imgtype=jpg&er=1&src=http%3A%2F%2Fphotocdn.sohu.com%2F20150927%2Fmp33544589_1443365874390_7.gif";
            }
        }



        /**************************第二部分div的功能实现***************************/

        /**描述：
        主要事件：使得鼠标悬浮到div后，div会出现动画
        */
        // function changeDivTwo(){
        //     document.getElementById("change").style.backgroundColor='cornflowerblue';
        //     document.getElementById("change").style.width='100%';
        // }
        // function changeDivTwoup(){
        //     document.getElementById("change").style.backgroundColor='white';
        //     document.getElementById("change").style.width='1px';
        // }//由于JavaScript的动画本人无法实现，因此选择使用jQuery来实现动画
    </script>

</head>
<body>
    <!-- 菜单部分 -->
    <div id="menu">
        <div id="welcome" title="welcome">欢迎来到星空</div>
        <div id="moper">
            <ul id="menu">
                <a id="welcome" href="noTwoDemo.html"><li>首页</li></a>
                <li>联系到我
                    <ul>
                        <li>微信</li>
                        <li>QQ</li>
                        <li>邮箱</li>
                    </ul>
                </li>
                <li>您的操作
                    <ul>
                        <li>最小化窗口</li>
                        <li>最大化窗口</li>
                        <li>离开该窗口</li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- 一个填充用的div -->
        <div id="display" style="width:600px;height:100%"></div>
        <div id="login">
            <div id="login1" title="使用已有账号登录">登录</div>
            <div id="login2" title="新用户注册账号">注册</div>
        </div>
        <div style="width:50px;float:left;"></div>
        <div id="send">
            <img id="send" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549971280317&di=a721fe092192c28c33f66f178273cd02&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20170922%2F2720255ec77d413bb80eb2e2cf294c79.gif" onclick="sendUser()">
        </div>
    </div>


    <!-- 一个用来填充的div:保证浮动固定的div不会遮盖住下一个div -->
    <div style="height: 50px;"></div>

    <!-- 内容部分 -->
    <div id=all>
        <!-- 第一个内容 -->
        <div id="one">
            <!-- 一个用来充数的div -->
            <div style="height: 120px;"></div>
            <h1>这，是一片星空</h1>
            <!-- 一个用来充数的div -->
            <div style="height: 20px;"></div>
            <div style="float:left;width:675px;height:50px"></div>
            <a class="know" href="https://blog.youkuaiyun.com/weixin_40615146" target="_blank">
                <div id="know" title="something about me">了解更多</div>
            </a>
            <div style="float:left;width:675px;height:50px"></div>
        </div>

        <!-- 第二个内容 -->
        <div id="two">  
                <div style="height:70px;width: 700px;;float:left"></div>
                <div style="height:70px;width: 100px;;float:left;border-bottom: cornflowerblue solid 4px;"></div>
                <div style="height:70px;width: 700px;;float:left"></div>
            <!-- 用于填充的div -->
            <div style="height:70px;"></div>
            <div style="letter-spacing: 2em;text-indent: 2em;"><h1>星空下的森林</h1></div>
            <!-- 用于填充的div -->
            <div style="height:50px;"></div>
            <div id="two-filler"></div>
            <div id="two-con">
                <a href="https://baike.baidu.com/item/%E6%B4%BE%E5%A4%A7%E6%98%9F/81312" target="_blank">
                    <div id="con-all">
                        <div id="something" title="派大星">
                            <div id="change"></div>
                            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3116800538,2438524433&fm=26&gp=0.jpg" alt="派大星">
                        </div>
                    </div>
                </a>

                <a href="https://baike.baidu.com/item/%E7%97%9E%E8%80%81%E6%9D%BF/7280507?fr=aladdin" target="_blank">
                    <div id="con-all">
                        <div id="something" title="痞老板">
                            <div id="change"></div>
                            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3299254021,481880686&fm=26&gp=0.jpg" alt="痞老板">
                        </div>
                    </div>
                </a>

                <a href="https://baike.baidu.com/item/%E8%9F%B9%E8%80%81%E6%9D%BF/7280016?fr=aladdin" target="_blank">
                    <div id="con-all">
                        <div id="something" title="蟹老板">
                            <div id="change"></div>
                            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=84653229,1303151446&fm=26&gp=0.jpg" alt="蟹老板">
                        </div>
                    </div>
                </a>

                <a href="https://baike.baidu.com/item/%E7%AB%A0%E9%B1%BC%E5%93%A5/6792964" target="_blank"></a>
                    <div id="con-all">
                        <div id="something" title="章鱼哥">
                            <div id="change"></div>
                            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4253935517,353196686&fm=26&gp=0.jpg" alt="章鱼哥">
                        </div>
                    </div>
                </a>

                <a href="https://baike.baidu.com/item/%E6%B5%B7%E7%BB%B5%E5%AE%9D%E5%AE%9D/16859785" target="_blank">
                    <div id="con-all" style="width:600px;">
                        <div id="something" style="width:600px;" title="海绵宝宝">
                            <div id="change" style="width:600px;"></div>
                            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550058582906&di=2544fe3ac6711c7ba2e86877395a0588&imgtype=0&src=http%3A%2F%2Fimages4.fanpop.com%2Fimage%2Fphotos%2F17100000%2F-The-Spongebob-Squarepants-Movie-spongebob-squarepants-17198708-1360-768.jpg" alt="海绵宝宝" style="width:600px">                    
                        </div>
                    </div>
                </a>

            </div>
            <div id="two-filler"></div>
        </div>

        <!-- 第三个内容 -->
        <div id="three">
            <div style="height:650px"></div>
            <hr style="height:4px;width:100px;background-color:cornflowerblue;border:none;" />
            <div style="letter-spacing: 2em;text-indent: 2em;"><h1>星空下的河流</h1></div>
            <!-- 用于填充的div -->
            <div style="height:50px;"></div>
            
        </div>


        <div id="four"></div>
    </div>
</body>
</html>

CSS部分：

div#all{
    width: 1500px;
    margin: auto;
}


/****************************菜单部分div************************/

/*描述：
主要事件一：div相对于页面窗口的固定
主要事件二：无序列表在div当中的横向排列
主要事件三：CSS完成鼠标悬浮下拉窗
*/
div#menu {
    width: 100%;
    height: 50px;
    background-color: rgb(243, 243, 243);
    /*绝对固定于窗口*/
    position: fixed;
}
div#menu div{
    float: left;
    height: 100%;
    line-height: 50px;
    font-family: '黑体';
    font-size: large;
    text-align: center;
}
div#welcome {
    width: 150px;
    cursor: wait;
}
div#moper {
    width: 500px;
    cursor: pointer;/*光标样式*/
}

/*使得整个列表在div中居中*/
ul#menu {
    display: table;
    line-height: 50px;
    /*可以使得ul的标题不显示，也就可以保证li在div中横向居中排列了*/
    margin: 0px;
    /* padding: 0px; */
}
ul#menu li {
    float: left;
    width: 100px;
    list-style: none;
    /* list-style-type: none; */
}

/*****鼠标悬停的下拉框*****/
ul#menu li ul {
    position: absolute;/*设定弹窗的外框*/
    display: none;
    background-color: white;
    border: 1px rgb(243, 243, 243) solid;
    border-radius: 3px;
    width: 100px;
    margin: 0px;
    padding: 0px;
    color: black;
}

ul#menu li:hover {
    background-color: rgb(202, 202, 202);
}

ul#menu li:hover > ul {
    box-shadow: 0 0 10px rgb(85, 79, 79);
    display: block;
}

a#welcome {
    color: black;
    text-decoration: none;
}

/********登录以及注册部分**********/
#login {
    width: 150px;
    height: 100%;
    cursor: pointer;
}
#login div {
    width: 75px;
    text-align: center;
    height: 100%;
}
#login div:hover {
    background-color: rgb(202, 202, 202);
}
div#send {
    width: 50px;
    float: left;
    cursor: pointer;
}

/*********图片部分**********/
#send img {
    width: 50px;
    height: 50px;
}

/****************************第一部分div************************/

/*描述：
主要事件一：背景图的布置
主要事件二：字词在div中的水平/垂直居中
主要事件三：边框以及圆角边框的实现
主要事件四：css中鼠标的悬浮事件
主要事件五：@media，页面状态的匹配问题
*/
/*当页面大于1500px的时候，one的div不显示*/
@media(max-width:1500px) {
    div#one {
        display: none;
    }
    div#display {
        display: none;
    }
}
div#one {
    width: 100%;
    height: 450px;
    background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549054895690&di=5d14e28e948adceeff4ea9c724d6ecec&imgtype=0&src=http%3A%2F%2Fp1.qhimgs4.com%2Ft01f913109be3ce6543.gif);
    background-size: 100%;/*以此保证背景图能够平铺而不是重复*/
    color: white;
    text-align: center;
    /*字间距*/
    letter-spacing: 3em;
    text-indent: 3em;
    cursor: default;
}
div#know {
    width: 150px;
    height: 50px;
    font-family: '黑体';
    font-size: x-large;
    letter-spacing:8px;
    text-indent: 8px;/*首行缩进8个像素，保证字体居中*/
    /* margin: auto; *//*使用此方法会使得与“了解更多”相平行的整行点击都会点进这个链接中*/
    float: left;
    /*字体上下居中*/
    line-height: 50px;
    /* display: table-cell; */
    /*边框的实现(如果不添加“solid”边框则不显示)*/
    border: 1px solid;
    border-color: white;
    /*圆角边框*/
    /* border-radius: 50px; *//*如果这行不注释掉，那么这行代码会被下一行覆盖，这行不会执行*/
    border-radius: 3px;
}
div#know:hover {
    background-color: white;
    color: black;
}
/*定义一些a链接字体的样式*/
a.know {
    color: white;
    text-decoration: none;/*把底部白线弄掉*/
}
/* a.know:hover {
    color: black;
} */

/****************************第二部分div************************/
/**描述：
主要事件一：完成鼠标悬浮的动画
主要事件二：完成鼠标悬浮的图片透明度改变
*/

div#two {
    color:black;
}
div#two div {
    text-align: center;
}
#two-filler {
    float: left;
    width: 300px;
    height: 608px;
}
div#two-con{
    float: left;
    /*在这里不使用“margin:auto，因为使用该方式会使得往下的css动画失败*/
    width: 900px;
    height: 608px;
}
div#something {
    background-color: white;
    width: 300px;
    height: 304px;
    line-height:300px;
    font-family: '黑体';
    color: cornflowerblue;
    cursor: pointer;
}
#con-all {
    width: 300px;
    height: 304px;
    float: left;
}

div#change {
    height: 4px;
    width: 300px;
}

div#something img {
    width: 300px;
    height: 300px;
    /*图片透明度设置*/
    opacity: 0.6;
    filter: alpha(opacity=60);/*针对IE8以及更早的版本*/
}

div#something img:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

/*鼠标悬浮后的动画（背景色动态改变）*/
div#something:hover {
    animation: change 0.5s;
    -moz-animation: change 0.5s; /* Firefox */
    -webkit-animation: change 0.5s;  /* Safari 和 Chrome */
    -o-animation: change 0.5s; /* Opera */
    color:white;
    background-color: cornflowerblue;
}
@keyframes change {
    0%{width: 1px;background-color: cornflowerblue};
    100%{width: 100%;background-color: cornflowerblue};
}
/*火狐*/
@-moz-keyframes change {
    0%{width: 1px;background-color: cornflowerblue};
    100%{width: 100%;background-color: cornflowerblue};
}
/*Safar和谷歌*/
@-webkit-keyframes change {
    0%{width: 1px;background-color: cornflowerblue};
    100%{width: 100%;background-color: cornflowerblue};
}
/*欧朋*/
@-o-keyframes change {
    0%{width: 1px;background-color: cornflowerblue};
    100%{width: 100%;background-color: cornflowerblue};
}


/****************************第三部分div************************/

div#three {
    text-align: center;
}

其中的界面实现为完全手敲。