web开发简单的html网页

最新推荐文章于 2024-07-14 10:25:44 发布

Sermiscry

最新推荐文章于 2024-07-14 10:25:44 发布

阅读量501

点赞数

分类专栏： web 文章标签： css html5 html

本文链接：https://blog.csdn.net/Sermisry/article/details/120033193

版权

web 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

文章目录

二级菜单
简单的网页

二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="navbar">
        <div class="nav">
            <ul>
                <li>
                    <a href="javascript:;">一级菜单1</a>
                </li>
                <li>
                    <a href="javascript:;">一级菜单2</a>
                    <ol>
                        <li><a href="javascript:;">二级菜单1</a></li>
                        <li><a href="javascript:;">二级菜单2</a></li>
                        <li><a href="javascript:;">二级菜单3</a></li>
                        <li><a href="javascript:;">二级菜单4</a></li>
                        <li><a href="javascript:;">二级菜单5</a></li>
                        <li><a href="javascript:;">二级菜单6</a></li>
                    </ol>
                </li>
                <li>
                    <a href="javascript:;">一级菜单3</a>
                    <ol>
                        <li><a href="javascript:;">二级菜单1</a></li>
                        <li><a href="javascript:;">二级菜单2</a></li>
                        <li><a href="javascript:;">二级菜单3</a></li>
                        <li><a href="javascript:;">二级菜单4</a></li>
                        <li><a href="javascript:;">二级菜单5</a></li>
                        <li><a href="javascript:;">二级菜单6</a></li>
                    </ol>
                </li>
                <li>
                    <a href="javascript:;">一级菜单4</a>
                    <ol>
                        <li><a href="javascript:;">二级菜单1</a></li>
                        <li><a href="javascript:;">二级菜单2</a></li>
                        <li><a href="javascript:;">二级菜单3</a></li>
                        <li><a href="javascript:;">二级菜单4</a></li>
                        <li><a href="javascript:;">二级菜单5</a></li>
                        <li><a href="javascript:;">二级菜单6</a></li>
                    </ol>
                </li>
                <li>
                    <a href="javascript:;">一级菜单5</a>
                </li>
                <!-- 这个元素来定义滑动的线条 -->
                <li class="underline"></li>
            </ul>
        </div>
    </div>
</body>
</html>

* {
    padding: 0;
    margin: 0;
}

body {
    /* 宽度占浏览器可视区域的高度 */
    width: 100vm;
    background-color: #f2f2f2;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #000;
}

.navbar {
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.navbar .nav {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}

.navbar .nav ul {
    position: relative;
    display: flex;
    /* 让子元素平均分配宽度 */
    justify-content: space-around;
    width: 100%;
    height: 100%;
}

.navbar .nav ul > li {
    width: 100%;
    height: 100%;
}

.navbar .nav ul > li > a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 70px;
    text-align: center;
}

.navbar .nav ul > li ol {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    /* 让盒子先沿着Y轴缩放到0，也就是隐藏了 */
    transform: scaleY(0);
    /* 需要将盒子从上面缩放下来，设置一下中心点即可，设置到最上面的中心位置 */
    transform-origin: 50% 0;
    /* 设置过渡 */
    transition: all 0.6s;
}

.navbar .nav ul > li ol li {
    height: 70px;
    border-bottom: 1px solid rgb(245, 245, 245);
}

.navbar .nav ul > li ol li a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 70px;
    text-align: center;
}

.navbar .nav ul > li ol li:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.navbar .nav ul > li:hover ol {
    transform: scaleY(1);
}

/* 设置一下盒子的线条 */
.navbar .nav ul .underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 240px;
    height: 6px;
    /* 设置一下盒子左上角和右上角的圆角 */
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #cc3333;
    /* 加过渡 */
    transition: all 0.5s;
    /* 线条会影响鼠标移入li的效果，所以这里加上pointer-event */
    pointer-events: none;
}

.navbar .nav ul .underline::before {
    content: "";
    /* 使用before伪元素设置三角 */
    position: absolute;
    top: -10px;
    /* calc方法自动计算数值让盒子居中 */
    left: calc(50% - 9px);
    background-color: inherit;
    width: 18px;
    height: 10px;

    clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.navbar .nav ul > li:nth-child(2):hover ~ .underline {
    left: 240px;
    background-color: #ff9933;
}

简单的网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>giftbag</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header-wrap">
        <div class="header-top">
            <div class="header-content">
                <div class="search">
                    <form action="" method="get">
                        <div class="search-wrap">
                            <input type="search" class="search-keyword">
                            <input type="submit" class="search-submit" value="">
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <nav class="header-submenu">
            <div class="header-submenu-wrap">
                <ul class="header-submenu-list clear-fix">
                    <li class="menuItem"><a href="#">首页</a></li>
                    <li class="menuItem"><a href="#">游戏中心</a></li>
                    <li class="menuItem"><a href="#">游戏礼包</a></li>
                    <li class="menuItem"><a href="#">游戏开测</a></li>
                    <li class="menuItem"><a href="#">坛子新闻</a></li>
                    <li class="menuItem"><a href="#">坛友论坛</a></li>
                    <li class="menuItem"><a href="#">手游排行</a></li>
                    <li class="menuItem"><a href="#">游戏专区</a></li>
                    <li class="menuItem"><a href="#">手游攻略</a></li>
                    <li class="menuItem"><a href="#">坛客评测</a></li>
                    <li class="menuItem"><a href="#">游戏视频</a></li>
                </ul>
            </div>
        </nav>
    </header>

    <div class="gift-wrap">
        <div class="gift-ad">
            <img src="img/giftcenter/13.jpg">
        </div>
        <div class="gift-content">
            <div class="gift-location">
                您的位置:<a href="">首页</a>&gt;<a href="">游戏礼包</a>
            </div>
            <div class="gift-filter">
                <div class="gift-filter-count">
                    <span class="s1">分类筛选</span><span>共计<span class="s2">761</span>款游戏，本周新增<span class="s2">69</span>款</span>
                </div>
                <div class="gift-filter-category">
                    <ul>
                        <li>
                            <span>联网类型</span>
                            <div class="category-wrap">
                                <span class="focus"><a href="">全部</a></span>
                                <span><a href="">网游</a></span>
                                <span><a href="">单机</a></span>
                            </div>
                        </li>
                        <li>
                            <span>游戏类型</span>
                            <div class="category-wrap">
                                <span class="focus"><a href="">全部</a></span>
                                <span><a href="">角色</a></span>
                                <span><a href="">策略</a></span>
                                <span><a href="">休闲</a></span>
                            </div>
                        </li>
                        <li>
                            <span>游戏特征</span>
                            <div class="category-wrap">
                                <span class="focus"><a href="">全部</a></span>
                                <span><a href="">魔幻</a></span>
                                <span><a href="">仙侠</a></span>
                                <span><a href="">武侠</a></span>
                            </div>
                        </li>
                        <li>
                            <span>音序</span>
                            <div class="category-wrap">
                                <span class="focus"><a href="">全部</a></span>
                                <span><a href="">A</a></span>
                                <span><a href="">B</a></span>
                                <span><a href="">C</a></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="chanel">
                <ul class="chanel-list clear-fix">
                    <li class="top"><a href="">人气最高</a></li>
                    <li class="update"><a href="">近期更新</a></li>
                    <li class="count">共有18888条</li>
                </ul>
            </div>
            <div class="geme-list-wrap">
                <ul class="game-list">
                    <li class="game">
                        <div class="game-img">
                            <img src="img/0930/1443149272415437.jpg">
                        </div>
                        <div class="game-info">
                            <p><span class="game-name">暗黑黎明</span>暗黑黎明登陆即送288元大礼包</p>
                            <p>类型:<span>角色 魔幻</span>状态:<span>公测</span>更新时间:<span>2020-06-28</span></p>
                            <p>简介:兵临城下，一触即发!</p>
                            <p>
                                <span><a href="" class="hhhs">游戏专区</a></span>
                                <span><a href="">领取礼包</a></span>
                                <span><a href="">进入论坛</a></span>
                                <span><a href="">点击下载</a></span>
                            </p>
                        </div>
                    </li>
                    <li class="game">
                        <div class="game-img">
                            <img src="img/0930/1443149272415437.jpg">
                        </div>
                        <div class="game-info">
                            <p><span class="game-name">暗黑黎明</span>暗黑黎明登陆即送288元大礼包</p>
                            <p>类型:<span>角色 魔幻</span>状态:<span>公测</span>更新时间:<span>2020-06-28</span></p>
                            <p>简介:兵临城下，一触即发!</p>
                            <p>
                                <span><a href="">游戏专区</a></span>
                                <span><a href="">领取礼包</a></span>
                                <span><a href="">进入论坛</a></span>
                                <span><a href="">点击下载</a></span>
                            </p>
                        </div>
                    </li>
                    <li class="game">
                        <div class="game-img">
                            <img src="img/0930/1443149272415437.jpg">
                        </div>
                        <div class="game-info">
                            <p><span class="game-name">暗黑黎明</span>暗黑黎明登陆即送288元大礼包</p>
                            <p>类型:<span>角色 魔幻</span>状态:<span>公测</span>更新时间:<span>2020-06-28</span></p>
                            <p>简介:兵临城下，一触即发!</p>
                            <p>
                                <span><a href="">游戏专区</a></span>
                                <span><a href="">领取礼包</a></span>
                                <span><a href="">进入论坛</a></span>
                                <span><a href="">点击下载</a></span>
                            </p>
                        </div>
                    </li>
                    <li class="game">
                        <div class="game-img">
                            <img src="img/0930/1443149272415437.jpg">
                        </div>
                        <div class="game-info">
                            <p><span class="game-name">暗黑黎明</span>暗黑黎明登陆即送288元大礼包</p>
                            <p>类型:<span>角色 魔幻</span>状态:<span>公测</span>更新时间:<span>2020-06-28</span></p>
                            <p>简介:兵临城下，一触即发!</p>
                            <p>
                                <span><a href="">游戏专区</a></span>
                                <span><a href="">领取礼包</a></span>
                                <span><a href="">进入论坛</a></span>
                                <span><a href="">点击下载</a></span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="pager-list">
                <a href="">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a>
                <a href="">6</a><a href="">下一页</a><a href="">...共305页</a>
            </div>
        </div>

    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f3f0eb;
}

li {
    list-style: none;
}

/*搜索框*/
.header-wrap {
    width: 100%;
    min-width: 1180px;
    position: fixed;
    top: 0;
    z-index: 1000;
}

.header-top {
    width: 100%;
    min-width: 1180px;
    height: 70px;
    background-color: #2a2d2c;
}

.header-content {
    width: 1180px;
    margin: 0 auto;
    height: 70px;
}

.search {
    width: 285px;
    padding: 15px 0;
    margin: 0 auto;
}

.search-wrap {
    width: 285px;
    height: 40px;
    border-radius: 20px;
    background-color: #fff;
}

.search-keyword {
    width: 190px;
    height: 20px;
    /*border: 1px solid red;这个的作用是定位*/
    border: 0;
    padding: 10px;
    box-sizing: content-box;
    /*search的默认盒子模型是border-box，也就是border和padding是算在width和height里面的*/
    margin-left: 20px;
    float: left;
}

.search-submit {
    width: 50px;
    height: 40px;
    border: 0;
    border-radius: 0 20px 20px 0;
    margin-left: 5px;
    background: url(img/tips_tz.png) no-repeat -190px -64px;
    background-color: #ffdc35;
}

/*导航栏*/
.header-submenu {
    width: 100%;
    height: 47px;
    min-width: 1180px;
    background-color: #fff;
}

.header-submenu-wrap {
    width: 1180px;
    margin: 0 auto;
}

.header-submenu-list > li {
    float: left;
    list-style: none;
    margin: 17px 15px;
    font-size: 18px / 30px;
    width: 77px;
    text-align: center;
}

.header-submenu-list > li > a {
    text-decoration: none;
    color: #000;
}

.header-submenu-list > li > a:hover {
    color: red;
}
/*清除li的浮动*/
.clear-fix::after {
    content: "";
    display: block;
    height: 0;
    clear:both;
}

/*广告图和面包屑*/
.gift-wrap {
    width: 1180px;
    margin: 117px auto;
}

.gift-ad {
    width: 100%;
    margin-top: 10px;
}

.gift-content {
    width: 1140px;
    background-color: #fff;
    padding: 0 20px;
}

.gift-location {
    height: 34px;
    line-height: 34px;
    font-size: 14px;
    color: #a6a6a6;
}

.gift-location > a {
    color: #a6a6a6;
    text-decoration: none;
}

.gift-location > a:hover {
    color: red;
    text-decoration: underline;
}

/*分类筛选*/
.gift-filter {
    font-size: 14px;
    color: #000;
}

.gift-filter-count {
    border-bottom: 1px solid #e5e5e5;
}

.gift-filter-count .s1 {
    font-size: 18px;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid red;
    margin-right: 20px;
}

.gift-filter-count .s2 {
    color: red;
}

.gift-filter-category {
    margin-top: 13px;
}

.gift-filter-category li {
    list-style: none;
    border-bottom: 1px dashed #e5e5e5;
    display: flex;
    flex-direction: row;
    height: 35px;
    line-height: 35px;
}

.category-wrap {
    margin-left: 30px;
}

.category-wrap a {
    text-decoration: none;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    border: 1px solid #e5e5e5;
    padding: 0 15px;
    margin-right: 30px;
    color:#000;
}

.category-wrap .focus > a {
    background-color: #000;
    color: #fff;
}

.category-wrap a:hover {
    background-color: red;
    color: white;
}

/*游戏列表页*/
.chanel {
    margin-top: 22px;
}

.chanel-list > li a {
    display: inline-block;
    text-decoration: none;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    color: #000;
}

.chanel-list > li a:hover {
    color: white;
    background: red;
}

.chanel-list {
    border: 1px solid #e5e5e5;
    height: 40px;
}

.chanel-list .top {
    float: left;
    border-right: 1px solid #e5e5e5;
}

.chanel-list .update {
    float: left;
    border-right: 1px solid #e5e5e5;
}

.chanel-list .count {
    float: right;
    border-left: 1px solid #e5e5e5;
}


/*
.chanel-list {
    list-style: none;
    display: flex;
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
    height: 40px;
    line-height: 40px;
}

.chanel-list a {
    text-decoration: none;
    font-size: 12px;
    padding: 2px 10px;
    border-right: 1px solid #e5e5e5;
}

.count {
    position: absolute;
    right: 20px;
}
*/

.geme-list-wrap {
    font-size: 14px;
    color: #bfbfbf;
}

.game-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.game {
    width: 570px;
    display: flex;
    padding: 45px 0;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 2px solid #e5e5e5;
}

.game-img img {
    height: 120px;
    width: 120px;
    border-radius: 15px;
}

.game-info {
    margin-left: 20px;
}

.game-name {
    font-size: 18px;
    font-weight: bold;
    margin-right: 10px;
}

.game-info p:first-child {
    color: #000;
}

.game-info p:nth-child(2) span {
    color: #000;;
}

.game-info p {
    height: 30px;
    line-height: 30px;
}

.game-info p:last-child a {
    width: 85px;
    height: 30px;
    text-decoration: none;
    display: inline-block;
    line-height: 30px;
    color: #bfbfbf;
    border: 1px solid #e5e5e5;
    text-indent: 24px;
    font-size: 15px;
}

.game-info p:last-child a:hover {
    /* background-color: red; */
    /* 由于a里面有图片，所以这里不能设置背景颜色 */
    color: red;
}

.game-info p:last-child span:nth-child(1) a {
    background: url(img/tips_tz.png) no-repeat -15px -9px;
}
.game-info p:last-child span:nth-child(2) a {
    background: url(img/tips_tz.png) no-repeat -15px -43px;
}
.game-info p:last-child span:nth-child(3) a {
    background: url(img/tips_tz.png) no-repeat -15px -80px;
}
.game-info p:last-child span:nth-child(4) a {
    background: url(img/tips_tz.png) no-repeat -15px -122px;
}

/*分页和导航条*/
.pager-list {
    padding: 40px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.pager-list a {
    display: inline-block;
    height: 30px;
    padding: 0 15px;
    line-height: 30px;
    border: 1px solid #e5e5e5;
    text-decoration: none;
    margin-left: 3px;
    color: #000;
}

.pager-list a:hover {
    background-color: red;
    color: white;
}

Sermiscry

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web开发简单的html网页

文章目录二级菜单简单的网页二级菜单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>二级菜单</title> <link rel="stylesheet" href="style.css"></head><body> <div class="navbar">
复制链接

扫一扫