求解网页设计问题谢谢啦!

求解问题 同时被 3 个专栏收录
3 篇文章 0 订阅
2 篇文章 3 订阅
5 篇文章 0 订阅

求解网页设计问题谢谢啦!

请问这个问题( 网页设计)怎么解决,问题图片在下面,我想把文字放到导航栏的下面那一块地方(导航栏下面任意地方),还要放照片在导航栏下面,现在的问题是放文字还是图片都在导航栏右边,现在怎么解决啊求解?谢谢在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>房东的兔</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/fedback.css">
    
</head>



<body>
    <!--导航栏-->
    <div id="nav-1">

        <ul class="nav">
            <li class="slide1"></li>
            <li class="slide2"></li>
            <li><a class="active" href="#">网站首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">个人页面</a></li>
            <li><a href="#">上传表单</a></li>
            <li><a href="#">联系站长</a></li>
            <li><a href="index注册.html">登录注册</a></li>
        </ul>
    </div>
    <script src='js/jquery.min.js'></script>
    <script src="js/script.js"></script> 




<!--右下角留言表单-->
    <div class="feedback">
        <h3 class="feedbackHeader eMailIco">
            遇到问题?请给我们留言
        </h3>
        <span class="closeBtn"></span>
        <form class="feedbackForm" action="">
            <p class="tips">请填写您的邮箱地址,我们将回复您的电子邮件</p>
            <div class="line">
                <textarea name="" placeholder="*请填写留言内容"></textarea>
            </div>
            <div class="line">
                <input type="text" name="" placeholder="请填写姓名">
            </div>
            <div class="line">
                <input type="text" name="" placeholder="*请填写邮箱">
            </div>
            <input class="btn" type="submit" value="发送">
        </form>
    </div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/fedback.js"></script>

    <!--大图 -->
    <div class="color">
    <p>我的你的都是我们的吧vb地方v下  下知道v感到不舒服收到VS地方都是擦方法</p>
    </div>

css下面

*{margin:0;padding:0;list-style-type:none;}
#nav-1{
  height: 80px;
  
}
#nav-1 .nav {
  position: relative;
  border: none;
  border-radius: 10em;
  display: flex;
  list-style: none;
  background: #f5f5f5;
  box-shadow: 20px 40px 50px #00000044;
  padding: 10px;
}
#nav-1 .nav li {
  margin: 0px;
}
#nav-1 .nav li a {
  position: relative;
  padding: 0.6em 2em;
  font-size: 18px;
  border: none;
  color: #333;
  display: inline-block;
  text-decoration: none;
  z-index: 3;
}
#nav-1 .slide1,
#nav-1 .slide2 {
  position: absolute;
  display: inline-block;
  height: 3em;
  border-radius: 10em;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1.05);
}
#nav-1 .nav .slide1 {
  background-color: yellowgreen;
  z-index: 2;
}
#nav-1 .nav .slide2 {
  opacity: 0;
  background: #fff;
  border: 1px solid #8ab9ff;
  z-index: 1;
}


.color{
  padding-top: 150px;

 margin: 0px;
}



.squeeze {
  transition: all 1.5s;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
 
  background-color: #e0e0e0;
  font-family: Montserrat, sans-serif;
  line-height: 1.5;
  background: linear-gradient(160deg, #4567b2 20%, #8ab9ff 20%, #8ab9ff 80%, #4567b2 80%);
}

在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页

打赏作者

梅干菜个小酥饼

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值