Bootstrap 第2章排版样式

最新推荐文章于 2022-04-30 18:32:23 发布

iteye_17658

最新推荐文章于 2022-04-30 18:32:23 发布

阅读量197

点赞数

分类专栏：阅-Boots 文章标签： Bootstrap ViewUI

阅-Boots 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文介绍了HTML和CSS的基本用法，展示了如何通过HTML标签和CSS样式实现网页的布局、文字样式、引用文本、列表、定义列表、代码展示以及响应式布局等。使用Bootstrap和Prettify库进一步优化了网页样式。

摘要由CSDN通过智能技术生成

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>排版样式</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="prettify/prettify.css">
</head>
<body style="margin:50px;" οnlοad="prettyPrint()">

<!--
<p>阅谁问君诵，水落清香浮</p>
<p class="lead">阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>
<p>阅谁问君诵，水落清香浮</p>

<h1>阅谁问君诵<small>水落清香浮</small></h1>
<h2>阅谁问君诵<small>水落清香浮</small></h2>
<h3>阅谁问君诵<small>水落清香浮</small></h3>
<h4>阅谁问君诵<small>水落清香浮</small></h4>
<h5>阅谁问君诵<small>水落清香浮</small></h5>
<h6>阅谁问君诵<small>水落清香浮</small></h6>

<h1 class="h3">阅谁问君诵<small>水落清香浮</small></h1>
<span class="h3">阅谁问君诵<small>水落清香浮</small></span>

<p>阅谁问君诵<mark>水落清香浮</mark></p>
<del>阅谁问君诵，水落清香浮</del>
-->

<p class="text-left">onestopweb 一站式网络</p>
<p class="text-center">onestopweb 一站式网络</p>
<p class="text-right">onestopweb 一站式网络</p>
<p class="text-nowrap" style="border:1px solid red; width:50px;">onestopweb 一站式网络</p>
<address>地址</address>
<blockquote>引用文本</blockquote>
<blockquote class="blockquote-reverse">引用文本</blockquote>
<ul class="list-unstyled list-inline">
	<li>onestopweb 一站式网络</li>
    <li>onestopweb 一站式网络</li>
    <li>onestopweb 一站式网络</li>
</ul>
<dl class="dl-horizontal">
	<dt>一站式网络</dt>
    <dd>一个分享网站，一个分享网站，一个分享网站，一个分享网站，一个分享网站，一个分享网站</dd>
</dl>
<code>&lt;section&gt;</code>
<p></p>

<pre class="prettyprint linenums">&lt;ul class=&quot;list-unstyled list-inline&quot;&gt;<br>	&lt;li&gt;onestopweb 一站式网络&lt;/li&gt;<br>    &lt;li&gt;onestopweb 一站式网络&lt;/li&gt;<br>    &lt;li&gt;onestopweb 一站式网络&lt;/li&gt;<br>&lt;/ul&gt;</pre>




<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="prettify/prettify.js"></script>
</body>
</html>

效果图：