文字与图片并排+导航栏
最近在做前端开发,因为前端学的不是很系统,因此只讲究搭建表现框架,效果很粗糙。以下使用的技术栈:boostrap、jquery
1.实现效果:(空白框用于展现结果)
2.代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- <link type="text/css" rel="stylesheet" href="{% static 'dist/css/bootstrap.css' %}">-->
<!-- <link rel="stylesheet" href="{% static 'dist/css/bootstrap.css' %}">-->
<!-- <link rel="stylesheet" href="{% static 'dist/css/bootstrap.css' %}">-->
<link rel="stylesheet" href="../static/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/dist/css/bootstrap-theme.min.css">
<script src="../static/js/jquery-3.6.0.js"></script>
<script src="../static/dist/js/bootstrap.min.js"></script>
<style>
div{border:1px #1B6D85 solid;}
</style>
</head>
<body>
<div class="container">
<h1>数学建模团队</h1>
<ul class="nav nav-tabs">
<li class="active"><a href="">首页</a></li>
<li><a href="">建模与算法</a></li>
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">机器学习</a>
<ul class="dropdown-menu">
<li><a href="#">支持向量机</a></li>
<li><a href="#">随机森林</a></li>
</ul>
</li>
<li><a href="">深度学习</a></li>
<li><a href="">前端</a></li>
<li><a href="">后端</a></li>
<li><a href="">自然语言处理</a></li>
</ul>
</div>
<div class="container" >
<div style="position: absolute;width:500px;height:200px;margin: 50px;">
<p style=" position: relative;width:500px;" >
</p>
</div>
<img style="width:400px;height:300px;position:relative;margin-left: 600px;border:3px solid rgb(157, 157, 194);padding: 2px;"
src="../static/images/向日葵.jpeg" />
</div>
</body>
</html>
注意:要引入bootstrap.min.css、bootstrap-theme.min.css、jquery-3.6.0.js、bootstrap.min.js(这些文件分别去bootstrap和jQuery官网下载)
<link rel="stylesheet" href="../static/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/dist/css/bootstrap-theme.min.css">
<script src="../static/js/jquery-3.6.0.js"></script>
<script src="../static/dist/js/bootstrap.min.js"></script>