CSS常用基础效果---文字与图片并排+导航栏

最新推荐文章于 2023-02-21 13:51:51 发布

腹有诗书，何患无辞

最新推荐文章于 2023-02-21 13:51:51 发布

阅读量2.9k

点赞数

分类专栏：算法平台开发前端文章标签： css bootstrap 前端

本文链接：https://blog.csdn.net/qq_46181653/article/details/122092832

版权

算法平台开发同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

文字与图片并排+导航栏

最近在做前端开发，因为前端学的不是很系统，因此只讲究搭建表现框架，效果很粗糙。以下使用的技术栈：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>

腹有诗书，何患无辞

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS常用基础效果---文字与图片并排+导航栏

文字与图片并排+导航栏最近在做前端开发，因为前端学的不是很系统，因此只讲究搭建表现框架，效果很粗糙。以下使用的技术栈：boostrap、jquery1.实现效果：（空白框用于展现结果）2.代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title><!-- <link type="text/
复制链接

扫一扫