文字与图片并排+导航栏

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

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

Latex Beamer PPT 左边文字右边图片，分栏显示
Latex Beamer PPT 左边文字右边图片,分栏显示 \begin{frame}{Previous model}{Secert Sharing Scheme} \begin{columns}\ ...
html炫酷的导航栏效果,css3制作炫酷导航栏效果
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
css常用样式（文字样式、边框样式、背景样式）
CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情 ...
【最全IDEA个性化教程】idea设置主题+恢复主题默认设置+设置选中代码颜色+关键字颜色+设置字体大小、样式、颜色+设置背景颜色、图片+设置导航栏背景颜色+设置控制台字体样式及背景+常用快捷键)
目录下载设置主题样式+恢复主题默认设置 1 个性化代码段 1.1设置颜色设置光标颜色自定义图片做背景修改代码段的颜色和背景颜色选中代码块颜色修改,修改括号颜色 1.2 设置字体大小.格式 1 ...
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
taro 请务必在小程序页面中完善页面基础信息_小程序自定义导航栏（完美适配所有手机）...
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
解决新手引导图片被导航栏遮盖住得问题
从上一篇中得到了解决这个问题的启发一开始我是通过self.view addsubview把这个新手指导的图片加到self.view上的结果发现不行经过几番调试我发现图片的大小是没有问题的 ...
CSS——CSS滑动门及其应用（制作微信导航栏） ※
滑动门先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一 ...
dismiss ios pop效果_iOS正确解决隐藏导航栏后push和pop或dismiss和present闪黑问题
情景: 一级页面不显示导航栏 ,二级页面显示导航栏. 方法一适用于push/pop: 一级页面中 - (void)viewWillAppear:(BOOL)animated { [super vie ...

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

文字与图片并排+导航栏

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

最新文章

热门文章