HTML导航栏制作

HTML导航栏制作首先建一个大盒子,名为nav用于装导航栏里面的部分。代码如下:<divclass=”nav”></div>.nav{width:100%;height:50px;background-color:#f7f7b6;}目录logo(即图中的汤姆!)Li文字搜索栏loglogo(即图中的汤姆!)<divclass=”logo”><imgsrc=”…

大家好,又见面了,我是你们的朋友全栈君。

HTML导航栏制作

目录

logo (即图中的汤姆!)

Li文字

搜索栏

log


首先建一个大盒子,名为 nav 用于装导航栏里面的部分。代码如下:

<div class="nav"></div>
.nav{
    width: 100%;
    height: 50px;
    background-color:#f7f7b6;
}

logo (即图中的汤姆!)

<div class="logo">
            <img src="./logo.jpg" width="80" height="50">
</div>  
<!--这里可以直接弄图片,也可以在css中将背景设置为图片-->
.logo{
    margin-left: 100px;   /*可以根据实际情况自己来设置*/
    float: left;
}

Li文字

<div class="document">
            <ul>
                <li><a href="#" target="_blank">首页</a></li>
                <li><a href="#" target="_blank">班级简介</a></li>
                <li><a href="#" target="_blank">班级成员</a></li>
                <li><a href="#" target="_blank">活动开展</a></li>
                <li><a href="#" target="_blank">风采展示</a></li> 
            </ul>
        </div>

注释:加上 target=”_blank” 的话,点击有链接的文字,就会新打开一个标签页,若不加,则在本页面上直接打开链接网页。

a{
    text-decoration: none; 
}
.nav ul li{
    margin-left: 15px;
    height: 50px;
    list-style: none;
    line-height:50px;
    font-size: 20px;
    float: left;
}
.nav ul li a{
    display: block;
    padding:0 30px;
    color: black;
}
.nav ul li a:hover{         /*鼠标滑过特效*/
    border-bottom: 2px solid seagreen;
    color: seagreen;
}

注释: text-decoration : none 用于清除 a 标签的下划线

         list-style : none 用于清除 li 前面的小圆点

         padding :0 30px 因为导航栏里的文字并不是字数相等,所以为了美观,我们不去直接设置           盒子的宽度,而是用一个内边距给它撑开

         float :left  一浮都浮,使得所有盒子在一行显示

         .nav ul li a: hover  用来设置鼠标滑过的效果。


搜索栏

<div class="search">
            <form action="" class="parent">
                <input type="text" class="search" placeholder="搜一搜"></input><!--行内块元素-->
                <button><img src="./search.png" width="40px" height="34px"></button>
            </form>
        </div>

         该部分由左边 搜索框 和右边的 button 组成。该功能用 表单 来完成。

.search{
    margin-left: 10px;
    width: 340px;/*宽度要大于两个子盒子的宽度和,因为,行内块元素自己中间就有边距*/
    height: 50px;
    float: left;
}
.search input{
    width: 255px;
    height: 30px;
    border: 2px solid seagreen;
    border-right: 0;
    margin-top: 8px;
    padding-left: 15px;
    color: gray;
    font-size: 13px;
}
.search input:focus{
    outline: medium;   /*去掉 input 的点击边框*/
}
.search button{
    width: 40px;
    height: 34px;
    border: 0;  /*按钮button自己就带有边框,需要手动清除*/
    margin-top: 8px;
    float:left;
}

注释:.search input : focus   用于去除点击文本框时出现的黑色边框


log

<div class="log">
            <a href="#">注册/登录</a>
        </div>

.log{
    width:100px;
    height: 50px;
    float: left;
    text-align: center;
    line-height: 50px;
    margin-left: 50px;
}
.log a{
    text-decoration: none;
    font-size: 20px;
    color: black;
}

若还有什么疑问,可以私信或者留言,祝学业顺利!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/140296.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • SaveFileDialog无法打开

    SaveFileDialog无法打开在线程中SaveFileDialog无法打开。Threadt=newThread(saveDialog);t.IsBackground=true;t.SetApartmentState(ApartmentState.STA);//加上这句就可以了t.Start();当前画面是报表画面,没用线程。主画面点击按钮,打开该画面,是在子线程中打开的,所以SaveFileDialog也无法直接打开…

  • 实体list转JSONArray对Date数据处理「建议收藏」

    实体list转JSONArray对Date数据处理「建议收藏」直接上代码importnet.sf.json.JSONArray;importnet.sf.json.JsonConfig;importnet.sf.json.processors.JsonValueProcessor;importjava.math.BigDecimal;importjava.text.SimpleDateFormat;importjava.util.ArrayList;importjava.util.Date;importjava.util.List;

  • C++二维数组sort排序问题

    C++二维数组sort排序问题以往遇到行排列问题(按每行的字典序排序)的时候,总是使用结构体来进行排序,但是如何使用二维数组来达到同样的效果呢?实验内容:利用二维数组进行“三级排序”测试1:使用c++内置的普通型二维数组#include&lt;algorithm&gt;#include&lt;iostream&gt;usingnamespacestd;boolcmp(inta[],intb[]){ …

    2022年10月20日
  • linux在线安装gcc[通俗易懂]

    linux在线安装gcc[通俗易懂]直接运行命令:yuminstallgcc-c++查看版本:gcc-vg++-v

  • Ubuntu卸载软件_ubuntu卸载桌面

    Ubuntu卸载软件_ubuntu卸载桌面ubuntu删除软件和相关配置记录一下,记不住,避免每次都查1、卸载命令一般的卸载方式:sudoapt-getremovexxxx卸载并清除相关配置命令sudoapt-getremove–purgexxxx例如想删除Vimsudoapt-getremove–purgevim…

  • threadlocal底层实现_hashset底层实现原理

    threadlocal底层实现_hashset底层实现原理ThreadLocal作用:提供线程内的局部变量,不同的线程之间不会相互干扰,这种变量在线程的生命周期内起作用,减少同一个线程内多个函数或组件之间一些公共变量传递的复杂性。package com.mupack;public class App{ private String content; public void setContent(String content) { this.content = content; } public Stri

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号