HTML5+CSS3+JS 自适应web主页

最新推荐文章于 2024-08-06 18:58:51 发布

不吃鱼的猫748

最新推荐文章于 2024-08-06 18:58:51 发布

阅读量3.2k

点赞数 2

分类专栏： html5+css3+JavaScript实战

本文链接：https://blog.csdn.net/qq_29681777/article/details/95784170

版权

html5+css3+JavaScript实战专栏收录该内容

5 篇文章 3 订阅

订阅专栏

该项目主要特点：

主要应用HTML5、CSS3、和JavaScript这几项技术，未使用任何框架。
实现了Web主页的大部分页面元素，包括：顶部工具导航菜单、登录链接、左侧导航菜单、右侧菜单、左侧菜单项与页面主体内容的联动和页面页脚等。
实现了自适应Web主页媒体查询功能，可以根据浏览器分辨率大小自动调整页面元素的布局。

效果如下所示

代码如下:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>HTML5+CSS3+JS-自适应主页</title>
</head>
<body>
    <header>
        <div id="navmenu">
            <span class="title">HTML5+CSS3+JS-自适应主页</span>
            <span class="loginleft"><a href="#">登录</a></span>
            <ul>
                <li class="borderleft"><a href="#" target="_blank">主页</a></li>
                <li><a href="#" target="_blank">导航菜单</a></li>
                <li><a href="#" target="_blank">导航菜单</a>
                    <ul>
                        <li class="top"><a href="#" target="_blank">导航菜单</a></li>
                        <li><a href="#" target="_blank">导航菜单</a></li>
                        <li><a href="#" target="_blank">导航菜单</a></li>
                    </ul>
                </li>
                <li><a href="#" target="_blank">关于我们</a>
                    <ul>
                        <li class="top"><a href="#" target="_blank">关于我们</a></li>
                        <li><a href="#" target="_blank">关于我们</a></li>
                        <li><a href="#" target="_blank">关于我们</a></li>
                    </ul>
                </li>
            </ul>
            <span class="login"><a href="#">登录</a></span>
        </div>
    </header>
    <br>
    <div class="content">
        <div class="leftBox">
            <div class="navleft">
                <ul class="navleftmenu">
                    <li><a onclick="on_html5_click()">HTML5</a></li>
                    <li><a onclick="on_css3_click()">CSS3</a></li>
                    <li><a onclick="on_js_click()">JavaScript</a></li>
                    <li><a onclick="on_chrome_click()">Chrome</a></li>
                    <li><a onclick="on_firefox_click()">Firefox</a></li>
                    <li><a onclick="on_safari_click()">Safari</a></li>
                </ul>
            </div>
        </div>
        <div class="middleBox">
            <p>large image:</p>
            <img id="id-image-large" src="" alt="image_large"/>
        </div>
        <div class="rightBox">
            <p>small image:</p>
            <img id="id-image-small" src="" alt="image_small"/>
        </div>
    </div>
    <footer>
        <p>copyright &copy; 2019 king &amp; king.</p>
    </footer>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

css\style.css

@charset "utf-8";
/**
 * CSS - style.css
*/
* {
    margin:0;
    padding:0;
}
header {
    display: flex;
    width: 100%;
    background: #fff;
}
#navmenu {
    float: none;
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: auto;
    font-family: helvetica;
    font-size: 14px;
    color: #666;
    background-color: #f8f8f8;
}
#navmenu span.title {
    float: left;
    position: relative;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 20px;
    font-family: helvetica;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-align: center;
}
#navmenu span.loginleft {
    float: left;
    position: relative;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 20px;
    font-family: helvetica;
    font-size: 12px;
    color: #666;
    text-align: center;
    visibility: hidden;
}
#navmenu ul {
    list-style-type: none;
}
#navmenu ul li {
    float: left;
    position: relative;
}
#navmenu ul li a {
    border-right: 1px solid #e9e9e9;
    padding: 20px;
    display: block;
    color: #666;
    text-decoration: none;
    text-align: center;
}
#navmenu ul li a:hover {
    background: #c0c0c0;
    color: #fff;
}
#navmenu ul li ul {
    display: none;
}
#navmenu ul li:hover ul {
    display: block;
    position: absolute;
    top: 56px;
    min-width: 190px;
    left: 0;
}
#navmenu ul li:hover ul li a {
    display: block;
    background: #c0c0c0;
    color: #fff;
    width: 110px;
    text-align: center;
    border-bottom: 1px solid #f2f2f2;
    border-right: none;
}
#navmenu ul li:hover ul li a:hover {
    background: #c0c0c0;
    color: #fff;
}
.borderleft {
    border-left: 1px solid #e9e9e9;
}
.top {
    border-top: 1px solid #f2f2f2;
}
#navmenu span.login {
    float: right;
    position: relative;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 20px;
    font-family: helvetica;
    font-size: 12px;
    color: #666;
    text-align: center;
    visibility: visible;
}
#navmenu span.login a {
    font-size: 12px;
    color: #888;
}
.content {
    zoom:1;
}
.content:after {
    content: ".";
    display: flex;
    height: 0;
    clear: both;
    visibility: hidden;
}
.content .leftBox {
    float: left;
    width: 20%;
    min-width: 192px;
    height: auto;
    margin: 5px;
    background: #e8e8e8;
    display: inline;
    -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    -o-transition: width 1s ease;
    -ms-transition: width 2s ease;
    transition: width 1s ease;
}
.content .middleBox {
    float: left;
    width: 60%;
    min-width: 320px;
    height: auto;
    margin: 5px;
    background: #f0f0f0;
    display: inline;
    -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    -o-transition: width 1s ease;
    -ms-transition: width 1s ease;
    transition: width 1s ease;
}
.content .middleBox p {
    margin: 8px;
    padding: 4px;
}
.content .middleBox img {
    margin: 8px;
    padding: 4px;
}
.content .rightBox {
    float: left;
    width: 15%;
    min-width: 128px;
    height: auto;
    margin: 5px;
    background: #e8e8e8;
    display: inline;
    -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    -o-transition: width 1s ease;
    -ms-transition: width 2s ease;
    transition: width 1s ease;
}
.content .rightBox p {
    margin: 4px;
    padding: 2px;
}
.content .rightBox img {
    margin: 4px;
    padding: 2px;
}
.navleft {
    float: left;
}
.navleft ul {
    list-style-type: none;
}
ul.navleftmenu {
    width: auto;
    padding: 8px 16px 8px 16px;
}
ul.navleftmenu li {
    margin: 8px 0 8px 0;
}
ul.navleftmenu li a {
    background: #cbcbcb;
    color: #666;
    padding: 7px 15px 7px 15px;
    width: 96px;
    display: block;
    text-decoration: none;
    /*-webkit-transition:all 0.3s ease-out;
    -moz-transition:all 0.3s ease-out;
    -o-transition:all 0.3s ease-out;
    -webkit-box-shadow:2px 2px 4px #888;
    -moz-box-shadow:2px 2px 4px #888;
    -o-box-shadow:2px 2px 4px #888;*/
}
ul.navleftmenu li a:hover {
    background: #a8a8a8;
    color: #fff;
    padding: 7px 20px 7px 26px;
}
footer {
    clear: both;
    position: relative;
    width: 100%;
    margin: auto;
    padding: 16px 0 16px 0;
    bottom: 0;
    text-align: center;
    color: #666;
    background-color: #eee;
}
/*
 * media screen queries
*/
@media only screen and (min-width: 1024px) {
    .content{
        width: auto;
        height: auto;
        margin: auto
    }
}
@media only screen and (min-width: 800px) and (max-width: 1024px) {
    #navmenu span.title {
        width: 100%;
        background-color: #fff;
    }
    #navmenu span.loginleft {
        visibility: visible;
    }
    #navmenu span.login {
        visibility: hidden;
    }
    .content{
        width: 100%;
        height: auto;
    }
    .leftBox {
        width: 30%;
    }
    .middleBox {
        width: 65%;
    }
    .rightBox {
        visibility: hidden;
        width: 0;
    }
}
@media only screen and (min-width: 400px) and (max-width: 800px) {
    #navmenu span.title {
        width: 100%;
        margin: auto;
        background-color: #fff;
    }
    #navmenu span.loginleft {
        width: 100%;
        margin: auto;
        visibility: visible;
        background-color: #fff;
    }
    #navmenu span.login {
        visibility: hidden;
    }
    .content{
        width: 100%;
        height: auto;
    }
    .leftBox {
        width: 30%;
    }
    .middleBox {
        width: auto;
    }
    .rightBox {
        visibility: hidden;
        width: 0;
    }
}
@media only screen and (max-width: 400px) {
    .leftBox, .middleBox, .rightBox {
        float: left;
        position: relative;
        width: 98%;
        height: auto;
    }
}

js/index.js

function on_html5_click() {
    document.getElementById("id-image-large").setAttribute("src","images/html5-256x256.png");
    document.getElementById("id-image-small").setAttribute("src","images/html5-64x64.png");
}

function on_css3_click() {
    document.getElementById("id-image-large").setAttribute("src","images/css3-256x256.png");
    document.getElementById("id-image-small").setAttribute("src","images/css3-64x64.png");
}

function on_js_click() {
    document.getElementById("id-image-large").setAttribute("src","images/js-256x256.png");
    document.getElementById("id-image-small").setAttribute("src","images/js-64x64.png");
}

images文件夹链接

提取码：oubd