官网的页面

最新推荐文章于 2024-09-24 11:22:03 发布
最新推荐文章于 2024-09-24 11:22:03 发布
阅读量40 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77039810/article/details/131065959
版权
该代码展示了一个使用HTML和CSS构建的响应式导航菜单。当鼠标悬停在主菜单项上时，子菜单会以过渡效果显示。菜单设计包括浮动元素、相对定位以及颜色和背景的切换，适应不同屏幕尺寸。
摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            .contaner
            {
            border: 1px solid white;
             width: 100%;
             height: 70px;
             background-color: #9a3032;
            }
            
            .nav>div{
                float: left;
                color:white;
                
                line-height:70px;
                margin-left: 10px;
                position: relative;
                padding-left: 5px;
                padding-right: 5px;
            }
            .nav{
                width: 900px;
                height: 70px;
                margin: auto;
            }
            .nav>div:hover{
                color:#9a3032;
                background-color: white;
                transition: 0.4s;
                
            }
            .nav>div:hover>.menu{
                display: block;
            }
            .menu>ul>li{
                color: black;
                line-height: 30px;
                margin-righe: 40px;
                font-size: 14px;
                list-style: none;
                
            }
            .menu>ul>li::before{
                display:inline-block;
                content:"" ;
                width:5px;
                height:5px;
                border-radius: 50%;
                background-color:#9a3032;
                margin-right:10px;
                
            }
            .menu>*{
                float: left;
            }
            .menu{
                background-color: white;
                width: 300px;
                display: none;
                position: absolute;
                padding: 10px;
                left: 0px;
            }
            body>img{
                width: 100%;
            }
        </style>
    </head>
    <body>
        
        <div class="contaner">
        <div class="nav">
            <div>首页</div>
            <div>学校概况
            <div class="menu">
            <img src="./img/xiaoy.png" alt="">
            <ul>
                <li>学校简介</li>
                <li>校长寄语</li>
                <li>学校领导</li>
                <li>学校风光</li>
                <li>学校标识</li>
            </ul>
            </div>
            </div>
            <div>组织机构
            <div class="menu">
            <img src="./img/xiaoy.png" alt="">
            <ul>
                <li>党群工作</li>
                <li>行政部门</li>
                <li>二级学院</li>
                
            </ul>
            </div>
            </div>
            <div>党群工作
            <div class="menu">
            <img src="./img/xiaoy.png" alt="">
            <ul>
                <li>党建工作</li>
                <li>团委工作</li>
                <li>工会工作</li>
                
            </ul>
            </div>
            </div>
            <div>教育教学<div class="menu">
            <img src="./img/xiaoy.png" alt="">
            <ul>
                <li>本科教育</li>
                <li>职业教育与继续教育</li>
                <li>教研与科研</li>
                <li>教学动态</li>
                
            </ul>
            </div>
            </div>
            <div>国际教育<div class="menu">
            <img src="./img/xiaoy.png" alt="">
            <ul>
                <li>国际交流中心</li>
                <li>国际教育学院</li>
                <li>国际联合培养</li>
                <li>英才计划</li>
                
            </ul>
            </div>
            </div>
            <div>校园生活<div class="menu">
            <img src="./img/xiaoy.png" alt="">
            <ul>
                <li>住宿服务</li>
                <li>网络服务</li>
                <li>综合服务</li>
                
            </ul>
            </div>
            </div>
            <div>学生服务<div class="menu">
            <img src="./img/xiaoy.png" alt="">
            <ul>
                <li>学工动态</li>
                <li>学生会</li>
                <li>学生资助</li>
                <li>心理健康</li>
                <li>资料下载</li>
            </ul>
            </div>
            </div>
            <div>招生就业<div class="menu">
            <img src="./img/xiaoy.png" alt="">
            <ul>
                <li>招生网</li>
                <li>就业网</li>
                
            </ul>
            </div>
            </div>
            <div>人才招聘<div class="menu">
            <img src="./img/xiaoy.png" alt="">
            <ul>
                <li>招聘公告</li>
                <li>联系我们</li>
                
            </ul>
            </div>
            </div>
            <div>校友会</div>
            </div>
        </div>
        <img src="./img/背景.png" alt="">
    </body>
</html>

 

苒苒鸭
关注
从QQ打开的页面显示非官网页面是什么意思
weixin_42575505的博客
01-16 1213
当您从QQ打开的页面显示非官网页面时，这意味着您访问的网页不是该网站的官方网页。这可能是因为您访问了一个欺骗网站，或者是因为您输入了错误的网址。建议您小心并确认网址是否正确。 ...
HTML+CSS实现学校官网页面
weixin_68047790的博客
11-09 5224
HTML实现学校官网页面
仿element-ui搭建官网页面
qq_39285178的博客
07-29 1731
仿element-ui官网
HTML模仿小米官网页面
qq_54110518的博客
11-22 2564
具有 主界面，购物车，登录，注册，等页面 主要运用html和JavaScript来编写 下面是首页效果图，适合手机端
教你用html和css仿制小米官网页面
SunAndYou
12-13 9484
学习HTML和css也已经有一两个月了。比起后端的c语言和java感觉前端真的轻松，而且视觉冲击很大，写完后浏览器打开会立刻感受到满满的成就感。就像是看着一个孩子在自己手中慢慢的变成自己想要的模样！因为在学校天天都有琐事的原因，导致学习效率并不是很高。大三了，还有考研，还要参加互联网＋比赛和大创项目。每天真的好忙啊，但有时候又会没有动力学习。这几天又没去图书馆，害，大概是废了。又想考研，又想参加比赛，还想学好编程，要做的事真的太多了，就会导致一事无成。
动态小米官网页面设计（内含最详细实现的源码）
热门推荐
hey，欢迎浏览我的博客，希望能给你提供帮助。
10-31 1万+
实现页面展示： html网页源码：（以xiaomi.html命名文件） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="st.
第一个完整页面来啦~小米官网
X-77
11-08 1万+
不知不觉学习前端已经快4个月啦，之前没学JavaScript之前做的项目都只能看不能玩，小米官网这个页面算上写出的第一个相对完整一点的项目，虽然需要进步的地方还有很多，但是未来可期！ 本篇博客主要是针对在书写这个项目时遇到的一些问题，找出对应的方法，记录一下自己在写这个项目时踩过的坑。 一、首页的制作 首页的主要效果有如下几个： 下载APP、购物车的制作 两个导航栏的制作 轮播图的制作 当我们把布局大致完成后，就需要开始使用JavaScrip...
html华为官网静态网页,Web静态页面：华为商城主页
weixin_29885875的博客
06-21 5949
华为商城主页(Web静态页面)这是我的第一篇博客，主要分享一下期末大作业：华为商城主页，只涉及静态页面。结构框架：华为商城首页，根据每个部分的功能，可以将整个页面分为三部分： 头部header、主内容区content、页脚footer。header部分：可由上至下分为3块： 新品推荐h-new、导航条h-nav、头部内容区h-content。其页面内容代码如下：………content部分： 这部分内...
使用HTML+CSS完成华为官网登录页面效果（静态页面）
qq_52882006的博客
09-20 2722
【代码】使用HTML+CSS完成华为官网登录页面效果（静态页面）
Tomcat配置Web默认页面
m0_67393039的博客
04-27 7233
Web默认页面 当访问一个Web应用时，通常需要指定访问的资源名称，如果，没有指定资源名称，则会访问默认的页面 比如，在访问网易体育的新闻页面时，需要输入 http://sports.163.com/index.html 有的时候，希望只输入 http://sports.163.com/ 就可以访问网易体育新闻页面 实现这样的需求 只需要修改WEB-INF目录下的web.xml文件的配置即可 首先，查看Tomcat服务器安装目录下的web.xml文件的配置，打开<Tomcat根目录>conf目录
OPPO官网页面前端代码
01-10
在OPPO官网的前端设计中，CSS可能被用来设置字体、颜色、背景、边距、布局、动画效果等，使页面呈现出品牌特色和视觉吸引力。CSS选择器如类选择器、ID选择器、伪类等被用来精确地定位和应用样式。同时，CSS3引入了更...
jQuery全屏页面滚动效果苹果官网页面上下滚动效果代码.zip
12-02
"jQuery全屏页面滚动效果苹果官网页面上下滚动效果代码" 提供的正是这样一种实现方式，通过利用jQuery库来模拟苹果官网的滚动效果。 jQuery是一个轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理、...
Html+css制作静态官网页面.zip
06-03
Html+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml...
html+css制作静态官网页面.zip
03-05
html html+css制作静态官网页面. html+css制作静态官网页面. html+css制作静态官网页面. html+css制作静态官网页面. html+css制作静态官网页面. html+css制作静态官网页面.
王者荣耀官网页面源码.zip
01-21
《王者荣耀官网页面源码》是针对游戏《王者荣耀》的官方网站前端设计进行的代码解析，主要涉及的技术栈包括HTML5、CSS以及JavaScript。这份压缩包包含了构成网页的基本元素，分别是CSS文件、图片资源、JavaScript...
html TAB切换按钮变色、自动生成table
TrueLink的博客
09-24 603
/ 为当前点击的按钮添加.active-tab类。/* 文本颜色变为白色，以便在蓝色背景上可见 */// 移除所有按钮的.active-tab类。/* 鼠标悬停时显示手指形状 */// 动态生成选项卡头部和内容。// 动态生成选项卡头部和内容。/* 选中时背景色变为蓝色 */// 默认显示第一个选项卡的内容。/* 增加内边距以便点击 */// 显示对应的选项卡内容。/* 初始背景色透明 *//* 添加一些间隔 */// 更多数据...// 更多数据.../* 简单的样式 */
HTML粉色烟花秀
兔子王
09-21 8136
HTML语言实现的粉红色跨年烟花秀的完整代码。
python：基于django的html二维码页面生成功能页面
我是你大爷
09-23 685
这里给出一个基于django的html二维码页面生成功能页面，具有文件上传和订单提交两个功能，使用javascript来代理实现交互功能（包含无限扩展内容框生成功能）。
html TAB切换按钮变色、自动生成table--使用函数优化结构
最新发布
TrueLink的博客
09-24 1001
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Dynamic Tabs with Table Data</title> <style> /* 简单的样式 */ .tab-content { display: none; border: 1px solid #ccc; padding: 1px
html学校官网页面仿写
08-07
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，如果你想仿写学校官网页面，首先你需要了解一些基本的HTML结构元素和布局技术。以下是一个简单的步骤： 1. **设置基础框架**： - 使用`<!...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值