练习制作一个游戏官网主页(标题导航栏)

html

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <link rel="stylesheet" href="../CSS/神女控headfoot.css"/>    <title>神女控官网</title></head><body><div id="head" class="head">        <div class="headnav">            <div class="navBtn1 navBtnCell">                <div class="headlogo">                    <a href="神女控官网.html">                        <img src="../HTML/images/navlogo_01.png" alt="首页logo"/>                    </a>                </div>            </div>            <div class="navBtn2 navBtnCell">                <div class="mainBtn">                    <a href="#">介绍</a>                </div>            </div>            <div class="navBtn3 navBtnCell">                <div class="mainBtn">                    <a href="#">下载</a>                </div>            </div>            <div class="navBtn4 navBtnCell">                <div class="mainBtn">                    <a href="#">贴吧</a>                </div>            </div>            <div class="navBtn5 navBtnCell">                <div class="mainBtn">                    <a href="#">联系我们</a>                </div>            </div>        </div></div><div id="content" class="content">    <div class=""></div></div><div id="foot" class="foot"></div></body></html>

CSS
body{    background-image: url("../HTML/c9d7160bbe6c8b8892b4b19eef01cf33.jpeg");    background-position: 50% 0;    background-repeat: no-repeat;    margin: 0 auto;}.head{    height: 100px;    position: relative;}.content{    height: 976px;    position: relative;}.foot{    height: 100px;    position: relative;    background-image: url("../HTML/foot-1.png");}.headnav{    position: relative;    overflow: hidden;}.navBtn1{    width: 210px;    height: 100px;}.navBtn2{    width: 280px;    height: 100px;}.navBtn3{    width: 280px;    height: 100px;}.navBtn4{    width: 280px;    height: 100px;}.navBtn5{    width: 280px;    height: 100px;}.navBtnCell{    margin-right: 1px;    float: left;}.mainBtn{    color: brown;    text-align: center;    font-size: 30px;    padding-top: 35px;}.mainBtn a{    text-decoration: none;    font-family: 微软雅黑;    color: #271636;}

初步效果图:

				
时间: 2024-10-09 10:21:42

练习制作一个游戏官网主页(标题导航栏)的相关文章

如果你想为您的公司制作(修改)一个企业官网,那么请先看看这篇文章

一个企业网站有什么功能?,为什么要为自己的企业做自己的官网! 1.企业宣传作用,(似乎是废话) 2.在线交易作用. 事实上,给你的网站接入企业支付宝,微信支付等.可以达到实时交易的功能,但很多网站都忽视了这点. 3.资料下载 我们完全可以将企业的一些共享资料,比如合同模版,产品资料放到企业官网供客户下载,但同样,对于很多企业都完全忽视了这点. 4.在线客服作用. 将自己的官网加入一些在线客服软件,比如 CC客服,53客服等,可以实时的跟访问到您官网的用户进行沟通.常见的有医院官网,几乎所有的医院

使用CocosSharp制作一个游戏 - CocosSharp中文教程

注:本教程翻译自官方<Walkthrough - Building a game with CocosSharp>,官方教程有很多地方说的不够详细,或者代码不全,导致无法继续,本人在看了GoneBananas项目代码后,对本教程进行了部分修改,但当前只涉及Android方面,iOS因没有环境验证代码,暂未修改. 本人博客地址:http://fengyu.name 原文链接:http://fengyu.name/?cat=game&id=295 相关资源: 离线PDF文档:Downloa

一个可以拓展的垂直多级导航栏 Demo

大四党忙忙碌碌找工作,博客荒废久矣,可谓:终日昏昏醉梦间,忽闻春尽强登山.因过竹院逢僧话,偷得浮生半日闲. 这是个垂直的导航栏,可以有无限多层的子级菜单,看代码注释就够了: 1 <!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>sidebarMenu</title> 5 </head> 6 7 <ul id="menuid"

使用bootstrap3.0搭建一个具有自定义风格的侧边导航栏

由于工作变动,新的项目组,可能会涉及到更多的类似于后台管理系统这一类的项目,而且开发可能更加偏向于传统型的开发,希望今后能够在新的项目中能够用得上vuejs吧! 接手项目的时候,就是一个后台管理系统,而且采用了Bootstrap进行搭建,页面大致模型也基本搭建成功了.然后看到页面上有一个侧边栏,之前是他们从别的地方找出来的一个侧边栏,给人的感觉总是差那么点意思.所以重构了一下.具体的效果,请移步bootstrap-sidebar . 其实主要就解决了两个问题: 1.与内容等高,最小高度为一屏的高

仿QQ浏览器mac版官网主页 html+css3特效

这是一款超酷的CSS3动态背景动画特效,CSS3仿QQ浏览器官网彗星动画背景特效. 在线演示本地下载 原文地址:https://www.cnblogs.com/wwhhq/p/8280750.html

用jquery插件写一个小米官网左侧二级菜单

知识点:静态布局思路,jquery动态布局,代码格式规范,jquery插件调用, 鼠标滑动二级菜单构建. html代码: <div id="Tz_banner"> <ul> <li class="firstLi">手机 电话卡 <div class="info"> <ul> <li><a class="title" href="#"

制作一个游戏编辑器玩玩(4)

加上了地形工具修改面板 加上天空盒后的效果. 加上了鼠标拾取功能,可以正确地选择地形块了. 高度编辑辅助体绘制完成. 终于实现了对地形高度的编辑. 现在还差法线还没有重新计算. 现在的代码是做功能测试的代码, 明天开始要对代码进行一下结构调整.把命令模式加上,要实现返回,重做功能.还有画刷种类等功能等. 原文地址:https://www.cnblogs.com/dodobox/p/12569282.html

小米官网的css3导航菜单

HTML代码: 1 <div class="nav"> 2 <ul> 3 <li><a href="#">首页</a></li> 4 <li> 5 <a href="#"> 6 小米手机 7 <div class="xs"> 8 <div class="xiao"></div>

使用递归制作仿京东淘宝的商品分类导航栏

前些天,培训ASP.NET的老师布置了作业,制作商城的一些重要功能, 昨天做了一下其中比较难的商品分类导航类,使用了递归的方法. ps:使用的是WebForm,希望看到MVC的同学请忽略. 最终效果图: 下面记录一下: 首先是数据库部分,使用的是SQL,在一张叫做Category的表中,设置了以下字段: [Id] 分类的Id,int,自增长[Name] 分类的名称,nvarchar(50)[ParentId] 父类的Id,int[Link] 链接地址,varchar(max),用于打开链接,也可