前端开发day2
<h1 id="前端开发day2">前端开发day2</h1><p>今日概要：</p>
<ul>
<li>案例应用（利用之前所学知识）</li>
<li>CSS知识点</li>
<li>模板 + CSS + 构建页面</li>
</ul>
<h2 id="1css案例">1.CSS案例</h2>
<h3 id="11-内容回顾">1.1 内容回顾</h3>
<ul>
<li>
<p>HT</p>
</li>
<li>
<p>ML标签</p>
<pre><code>固定格式，记住标签长什么样子，例如：
h/div/span/a/img/ul/li/table/input/form
</code></pre>
</li>
<li>
<p>CSS样式</p>
<ul>
<li>
<p>引用CSS：标签、头部、文件</p>
<pre><code class="language-html">.xx{
...
}
<div class='xx xx'></div>
</code></pre>
</li>
<li>
<p>CSS样式</p>
<pre><code>高度/宽度/块级or行内or块级行内/浮动/字体/文字对齐方式/内边距/外边距
关于边距：
- body
- 区域居中
</code></pre>
</li>
<li>
<p>页面布局</p>
<pre><code>根据你看到的页面把他们划分成很多的小区域，再去填充样式。
</code></pre>
</li>
</ul>
</li>
</ul>
<h3 id="12-案例二级菜单">1.2 案例：二级菜单</h3>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231045328-700246006.png" alt="" loading="lazy"></p>
<h4 id="121-划分区域">1.2.1 划分区域</h4>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231106572-524211710.png" alt="" loading="lazy"></p>
<h4 id="122-搭建骨架">1.2.2 搭建骨架</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.sub-header{
height: 100px;
background-color: #b0b0b0;
}
.container{
width: 1128px;
margin: 0 auto;
}
.sub-header .ht{
height: 100px;
}
.sub-header .logo{
width: 234px;
float: left;
}
.sub-header .menu-list{
float: left;
}
.sub-header .search{
float: right;
}
</style>
</head>
<body>
<div class="sub-header">
<div class="container">
<div class="ht logo">1</div>
<div class="ht menu-list">2</div>
<div class="ht search">3</div>
<div class="clear:both;"></div>
</div>
</div>
</body>
</html>
</code></pre>
<h4 id="123-logo区域">1.2.3 Logo区域</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.sub-header {
height: 100px;
background-color: #b0b0b0;
}
.container {
width: 1128px;
margin: 0 auto;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
border: 1px solid red;
}
.sub-header .logo a {
margin-top: 22px;/*让logo在div中居中*/
display: inline-block/*让a标签具备块级元素属性使margin生效*/
}
.sub-header .logo a img {
height: 56px;
width: 56px;
}
.sub-header .menu-list {
float: left;
}
.sub-header .search {
float: right;
}
</style>
</head>
<body>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 -->
<a href="https://www.mi.com/">
<img src="image/xiaomi.png" alt="">
</a>
</div>
<div class="ht menu-list">2</div>
<div class="ht search">3</div>
<div class="clear:both;"></div>
</div>
</div>
</body>
</html>
</code></pre>
<h4 id="124-菜单部分">1.2.4 菜单部分</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.sub-header {
height: 100px;
}
.container {
width: 1128px;
margin: 0 auto;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
}
.sub-header .logo a {
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img {
height: 56px;
width: 56px;
}
.sub-header .menu-list {
float: left;
line-height: 100px;
}
.sub-header .menu-list a{
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover{
color: #ff6700;
}
.sub-header .search {
float: right;
}
</style>
</head>
<body>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 -->
<a href="https://www.mi.com/">
<img src="image/xiaomi.png" alt="">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">RADMI红米</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
<a href="https://www.mi.com/">家电</a>
<a href="https://www.mi.com/">路由器</a>
<a href="https://www.mi.com/">服务中心</a>
<a href="https://www.mi.com/">社区</a>
</div>
<div class="ht search"></div>
<div class="clear:both;"></div>
</div>
</div>
</body>
</html>
</code></pre>
<h3 id="13-案例顶部菜单--二级菜单">1.3 案例：顶部菜单 + 二级菜单</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.container {
width: 1226px;
margin: 0 auto;
}
.header {
background: #333;
}
.header .menu {
float: left;
color: white;
}
.header .account {
float: right;
color: white;
}
.header a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header a:hover{
color: white;
}
.sub-header {
height: 100px;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
}
.sub-header .logo a {
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img {
height: 56px;
width: 56px;
}
.sub-header .menu-list {
float: left;
line-height: 100px;
}
.sub-header .menu-list a {
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover {
color: #ff6700;
}
.sub-header .search {
float: right;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a href="https://www.mi.com/">小米商城</a>
<a href="https://www.mi.com/">MIUI</a>
<a href="https://www.mi.com/">云服务</a>
<a href="https://www.mi.com/">有品</a>
<a href="https://www.mi.com/">开放平台</a>
</div>
<div class="account">
<a href="https://www.mi.com/">登录</a>
<a href="https://www.mi.com/">注册</a>
<a href="https://www.mi.com/">消息通知</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 -->
<a href="https://www.mi.com/">
<img src="image/xiaomi.png" alt="">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">RADMI红米</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
<a href="https://www.mi.com/">家电</a>
<a href="https://www.mi.com/">路由器</a>
<a href="https://www.mi.com/">服务中心</a>
<a href="https://www.mi.com/">社区</a>
</div>
<div class="ht search"></div>
<div class="clear:both;"></div>
</div>
</div>
</body>
</html>
</code></pre>
<h4 id="小结">小结</h4>
<ul>
<li>
<p>a标签是行内标签，行内标签的高度、内外边距，默认无效。</p>
<ul>
<li>将行内元素转换为行内块级元素（<code>display: inline-block;</code>），或者块级元素（<code>display: block;</code>），就可以正常地应用这些属性了。</li>
</ul>
</li>
<li>
<p>垂直方向居中</p>
<ul>
<li>本文 + line-height
<ul>
<li>父容器有固定的高度，并希望其中的文字垂直居中，可以通过设置与父容器高度相同的 <code> .menu-list{line-height:100px</code> 来实现，适用于单行文本。</li>
</ul>
</li>
<li>图片 + 边距
<ul>
<li>对于图片等替换元素，可以使用上下边距（<code>margin-top</code> 和 <code>margin-bottom</code>）来调整其垂直位置。</li>
</ul>
</li>
</ul>
</li>
<li>
<p>a标签默认有下划线。</p>
<ul>
<li>通过：<code>text-decoration: none;</code> 来移除这个下划线。</li>
</ul>
</li>
<li>
<p>鼠标放上去之后hover</p>
<pre><code class="language-css">.c1:hover{
...
}
a:hover{
}
</code></pre>
</li>
</ul>
<h3 id="14-案例推荐区域">1.4 案例：推荐区域</h3>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231153318-689709790.png" alt="" loading="lazy"></p>
<h4 id="141-划分区域">1.4.1 划分区域</h4>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231212177-275479421.png" alt="" loading="lazy"></p>
<h4 id="142-搭建骨架">1.4.2 搭建骨架</h4>
<pre><code class="language-html"> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
img {
width: 100%;
height: 100%;
}
.container {
width: 1226px;
margin: 0 auto;
}
.header {
background: #333;
}
.header .menu {
float: left;
color: white;
}
.header .account {
float: right;
color: white;
}
.header a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header a:hover {
color: white;
}
.sub-header {
height: 100px;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
}
.sub-header .logo a {
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img {
height: 56px;
width: 56px;
}
.sub-header .menu-list {
float: left;
line-height: 100px;
}
.sub-header .menu-list a {
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover {
color: #ff6700;
}
.sub-header .search {
float: right;
}
.slider .sd-img {
width: 1226px;
height: 460px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a href="https://www.mi.com/">小米商城</a>
<a href="https://www.mi.com/">MIUI</a>
<a href="https://www.mi.com/">云服务</a>
<a href="https://www.mi.com/">有品</a>
<a href="https://www.mi.com/">开放平台</a>
</div>
<div class="account">
<a href="https://www.mi.com/">登录</a>
<a href="https://www.mi.com/">注册</a>
<a href="https://www.mi.com/">消息通知</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 -->
<a href="https://www.mi.com/">
<img src="images/xiaomi.png" alt="">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">RADMI红米</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
<a href="https://www.mi.com/">家电</a>
<a href="https://www.mi.com/">路由器</a>
<a href="https://www.mi.com/">服务中心</a>
<a href="https://www.mi.com/">社区</a>
</div>
<div class="ht search"></div>
<div class="clear:both;"></div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="sd-img">
<img src="images/REDMI.jpg" alt="">
</div>
</div>
</div>
<div class="news">
<div class="container">
<div class="channel"></div>
<div class="list-item"></div>
<div class="list-item"></div>
<div class="list-item"></div>
</div>
</div>
</body>
</html>
</code></pre>
<h4 id="143-案例的实现">1.4.3 案例的实现</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
img {
width: 100%;
height: 100%;
}
.left {
float: left;
}
.container {
width: 1226px;
margin: 0 auto;
}
.header {
background: #333;
}
.header .menu {
float: left;
color: white;
}
.header .account {
float: right;
color: white;
}
.header a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header a:hover {
color: white;
}
.sub-header {
height: 100px;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
}
.sub-header .logo a {
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img {
height: 56px;
width: 56px;
}
.sub-header .menu-list {
float: left;
line-height: 100px;
}
.sub-header .menu-list a {
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover {
color: #ff6700;
}
.sub-header .search {
float: right;
}
.slider .sd-img {
width: 1226px;
height: 460px;
}
.news{
margin-top: 14px;
}
.news .channel {
width: 228px;
height: 164px;
background-color: #5f5750;
padding: 3px;
}
.news .channel .item {
height: 82px;
width: 76px;
float: left;
text-align: center;
}
.news .channel .item a{
display: inline-block;
font-size: 12px;
padding-top: 18px;
color: #fff;
text-decoration: none;
opacity: 0.7;
}
.news .channel .item a:hover{
opacity: 1;
}
.news .channel .itemimg{
height: 24px;
width: 24px;
display: block;
margin: 0 auto 4px;
}
.news .list-item {
width: 316px;
height: 170px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a href="https://www.mi.com/">小米商城</a>
<a href="https://www.mi.com/">MIUI</a>
<a href="https://www.mi.com/">云服务</a>
<a href="https://www.mi.com/">有品</a>
<a href="https://www.mi.com/">开放平台</a>
</div>
<div class="account">
<a href="https://www.mi.com/">登录</a>
<a href="https://www.mi.com/">注册</a>
<a href="https://www.mi.com/">消息通知</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 -->
<a href="https://www.mi.com/">
<img src="images/xiaomi.png" alt="">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">RADMI红米</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
<a href="https://www.mi.com/">家电</a>
<a href="https://www.mi.com/">路由器</a>
<a href="https://www.mi.com/">服务中心</a>
<a href="https://www.mi.com/">社区</a>
</div>
<div class="ht search"></div>
<div class="clear:both;"></div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="sd-img">
<img src="images/REDMI.jpg" alt="">
</div>
</div>
</div>
<div class="news">
<div class="container">
<div class="channel left">
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="clear:both"></div>
</div>
<div class="list-item left" style="margin-left: 14px">
<img src="images/xim1.png"/>
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="images/xim2.png"/>
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="images/xim3.png"/>
</div>
<div class="clear:both"></div>
</div>
</div>
</body>
</html>
</code></pre>
<h4 id="小结-1">小结</h4>
<ul>
<li>
<p>设置透明度</p>
<pre><code>opacity:0.5; /* 0 ~ 1 */
</code></pre>
</li>
</ul>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231250279-874985739.png" alt="" loading="lazy"></p>
<h2 id="2css知识点">2.CSS知识点</h2>
<h3 id="21-hover伪类">2.1 hover（伪类）</h3>
<p>用于选择用户指针悬停在其上的元素。</p>
<p>通过为元素添加 <code>:hover</code> 样式，可以创建交互式的视觉反馈，如改变颜色、背景色、边框、尺寸等，从而提升网站的互动性和用户体验。</p>
<p><code>display: none;</code>当元素的 <code>display</code> 属性被设置为 <code>none</code> 时，该元素将完全从文档流中移除，不会出现在页面上。</p>
<p><code>display: block;</code>元素的 <code>display</code> 属性被设置为 <code>block</code> 时，它将成为一个块级元素，意味着它会在页面上独占一行，前后各有一个换行符。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
color: red;
font-size: 18px;
}
.c1:hover {
color: green;
font-size: 50px;
}
.c2 {
height: 300px;
width: 500px;
border: 3px solid red;
}
.c2:hover {
border: 3px solid green;
}
.download {
display: none;
}
.app:hover .download {
display: block;
}
.app:hover .title{
color: red;
}
</style>
</head>
<body>
<div class="c1">联通</div>
<div class="c2">广西</div>
<div class="app">
<div class="title">下载APP</div>
<div class="download">
<img src="images/qcode.png" alt="">
</div>
</div>
</body>
</html>
</code></pre>
<h3 id="22-after伪类">2.2 after（伪类）</h3>
<p>用于在指定元素的内容之后插入生成的内容。</p>
<p>通常用来装饰性地添加额外内容，比如图标、分隔符、清除浮动等。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1:after{
content: "大帅哥";
}
</style>
</head>
<body>
<div class="c1">吴阳军</div>
<div class="c1">梁吉宁</div>
</body>
</html>
</code></pre>
<p>很重要的应用：</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*.clearfix:after：这是一个伪元素选择器，*/
.clearfix:after{
content: "";
display: block;
clear: both;/*通过 clear: both; 属性清除所有方向上的浮动，从而防止父容器的高度塌陷*/
}
.item{
float: left;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
</code></pre>
<h3 id="23-position">2.3 position</h3>
<ul>
<li>
<p><strong><code>fixed</code></strong>：将元素固定在浏览器窗口中的某个位置，不随页面滚动而移动。</p>
<ul>
<li>可以通过 <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code> 等属性来<strong><code>精确指定</code></strong>元素相对于视口的位置。</li>
</ul>
</li>
<li>
<p><strong><code>relative</code></strong>：相对于自身原始位置偏移，但仍保留原有空间。</p>
<ul>
<li>使用 <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code> 来调整元素的位置时，它是<strong><code>相对于自身</code></strong>原本的位置进行移动的。</li>
</ul>
</li>
<li>
<p><strong><code>absolute</code></strong>：相对于最近的已定位祖先元素或视口定位，完全脱离文档流。</p>
<ul>
<li>可以通过 <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code> 来<strong><code>相对于最近的</code></strong>已定位祖先元素或视口进行定位。</li>
</ul>
</li>
</ul>
<h4 id="1-position-fixed">1. <code>position: fixed;</code></h4>
<p>固定在窗口的某个位置。</p>
<p><strong>案例：返回顶部</strong></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
position: fixed;
width: 60px;
height: 60px;
border: 1px solid red;
right: 10px;
bottom: 50px;
}
</style>
</head>
<body>
<div style="height: 1000px;background-color: #5f5750"></div>
<div class="back"></div>
</body>
</html>
</code></pre>
<p><strong>案例：对话框</strong></p>
<p>z-index: 指定了一个元素在其包含块内的堆叠层次。具有较高 z-index 值的元素会覆盖较低 z-index 值的元素。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.dialog {
position: fixed;
height: 300px;
width: 500px;
background-color: white;
left: 0;
right: 0;
margin: 0 auto;
top: 200px;
z-index: 1000;/*指定了一个元素在其包含块内的堆叠层次。具有较高 z-index 值的元素会覆盖较低 z-index 值的元素。*/
}
.mask {
background-color: black;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.7;
z-index: 999;/*谁的z-index大，幕布谁就在上面*/
}
</style>
</head>
<body>
<div style="height: 1000px">asdfasdfasd</div>
<div class="mask"></div>
<div class="dialog"></div>
</body>
</html>
</code></pre>
<h4 id="2-relative和absolute">2. relative和absolute</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 300px;
width: 500px;
border: 1px solid red;
margin: 100px;
position: relative;
}
.c1 .c2{
height: 59px;
width: 59px;
background-color: #00FF7F;
position: absolute;
right: 20px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="c1"><!--将 .c1 设置为相对定位,它的任何绝对定位的子元素都将相对于它进行定位。-->
<div class="c2"></div><!--将 .c2 设置为绝对定位，它会脱离正常的文档流，并且根据最近的已定位祖先元素（这里是 .c1）来确定位置。-->
</div>
</body>
</html>
</code></pre>
<h4 id="案例小米商城下载app">案例：小米商城下载app</h4>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
img {
width: 100%;
height: 100%;
}
.left {
float: left;
}
.container {
width: 1226px;
margin: 0 auto;
}
.header {
background: #333;
}
.header .menu {
float: left;
color: white;
}
.header .app {
position: relative;
}
.app .download{
position: absolute;
height: 90px;
width: 90px;
display: none;
}
.app:hover .download{
display: block;
}
.header .account {
float: right;
color: white;
}
.header a {
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 10px;
text-decoration: none;
}
.header a:hover {
color: white;
}
.sub-header {
height: 100px;
}
.sub-header .ht {
height: 100px;
}
.sub-header .logo {
width: 234px;
float: left;
}
.sub-header .logo a {
margin-top: 22px;
display: inline-block
}
.sub-header .logo a img {
height: 56px;
width: 56px;
}
.sub-header .menu-list {
float: left;
line-height: 100px;
}
.sub-header .menu-list a {
display: inline-block;
padding: 0 10px;
color: #333;
font-size: 16px;
text-decoration: none;
}
.sub-header .menu-list a:hover {
color: #ff6700;
}
.sub-header .search {
float: right;
}
.slider .sd-img {
width: 1226px;
height: 460px;
}
.news{
margin-top: 14px;
}
.news .channel {
width: 228px;
height: 164px;
background-color: #5f5750;
padding: 3px;
}
.news .channel .item {
height: 82px;
width: 76px;
float: left;
text-align: center;
}
.news .channel .item a{
display: inline-block;
font-size: 12px;
padding-top: 18px;
color: #fff;
text-decoration: none;
opacity: 0.7;
}
.news .channel .item a:hover{
opacity: 1;
}
.news .channel .itemimg{
height: 24px;
width: 24px;
display: block;
margin: 0 auto 4px;
}
.news .list-item {
width: 316px;
height: 170px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a href="https://www.mi.com/">小米官网</a>
<a href="https://www.mi.com/">小米商城</a>
<a href="https://www.mi.com/">小米澎湃OS</a>
<a href="https://www.mi.com/">小米汽车</a>
<a href="https://www.mi.com/">云服务</a>
<a href="https://www.mi.com/">IOT</a>
<a href="https://www.mi.com/">有品</a>
<a href="https://www.mi.com/">小爱开放平台</a>
<a href="https://www.mi.com/">资质凭照</a>
<a href="https://www.mi.com/">协议规则</a>
<a href="https://www.mi.com/" class="app">下载app
<div class="download">
<img src="images/qcode.jpg">
</div>
</a>
</div>
<div class="account">
<a href="https://www.mi.com/">登录</a>
<a href="https://www.mi.com/">注册</a>
<a href="https://www.mi.com/">消息通知</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<div class="ht logo">
<!-- a，行内标签；默认设置高度、边距无效。 -> 块级 & 行内+块级 -->
<a href="https://www.mi.com/">
<img src="images/xiaomi.png" alt="">
</a>
</div>
<div class="ht menu-list">
<a href="https://www.mi.com/">Xiaomi手机</a>
<a href="https://www.mi.com/">RADMI红米</a>
<a href="https://www.mi.com/">电视</a>
<a href="https://www.mi.com/">笔记本</a>
<a href="https://www.mi.com/">平板</a>
<a href="https://www.mi.com/">家电</a>
<a href="https://www.mi.com/">路由器</a>
<a href="https://www.mi.com/">服务中心</a>
<a href="https://www.mi.com/">社区</a>
</div>
<div class="ht search"></div>
<div class="clear:both;"></div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="sd-img">
<img src="images/REDMI.jpg" alt="">
</div>
</div>
</div>
<div class="news">
<div class="container">
<div class="channel left">
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/">
<img src="images/v1.png" alt="">
<span>保障服务</span>
</a>
</div>
<div class="clear:both"></div>
</div>
<div class="list-item left" style="margin-left: 14px">
<img src="images/xim1.png"/>
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="images/xim2.png"/>
</div>
<div class="list-item left" style="margin-left: 15px">
<img src="images/xim3.png"/>
</div>
<div class="clear:both"></div>
</div>
</div>
</body>
</html>
</code></pre>
<h3 id="24-border">2.4 border</h3>
<p><code>边框样式</code>可以设置边框（上、右、下、左）的宽度、样式和颜色</p>
<h4 id="边框的属性">边框的属性</h4>
<ul>
<li>
<p><strong><code>border-width</code></strong>：指定边框的宽度，可以使用像素 (<code>px</code>)、相对单位 (<code>em</code>, <code>rem</code>) 或预定义关键字（如 <code>thin</code>, <code>medium</code>, <code>thick</code>）。</p>
</li>
<li>
<p><strong><code>border-style</code></strong>：定义边框的样式，常见的值包括：</p>
<ul>
<li><code>none</code>：无边框（默认值）</li>
<li><code>hidden</code>：与 <code>none</code> 类似，但在表格单元格中处理不同</li>
<li><code>dotted</code>：点线</li>
<li><code>dashed</code>：虚线</li>
<li><code>solid</code>：实线</li>
<li><code>double</code>：双线</li>
</ul>
</li>
<li>
<p><strong><code>border-color</code></strong>：设置边框的颜色，可以是颜色名称、十六进制值、RGB/RGBA 值或 HSL/HSLA 值。</p>
</li>
<li>
<p><strong><code>border</code></strong></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 300px;
width: 500px;
border: 1px solid red;
border-left: 3px solid #00FF7F;
margin: 100px;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
</code></pre>
</li>
<li>
<h4 id="圆角边框">圆角边框</h4>
<ul>
<li>
<p><code>border-radius</code> 属性，可以创建圆角边框，使元素的边角变得柔和。</p>
</li>
<li>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.white-bordered-box, .blue-rounded-box {
width: 150px;
height: 150px;
background-color: #00FF7F;
}
.white-bordered-box {
border: 5px solid pink;
}
.blue-rounded-box {
border: 5px solid blue;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="white-bordered-box"></div>
<div class="blue-rounded-box"></div>
</body>
</html>
</code></pre>
</li>
</ul>
</li>
<li>
<p>透明色：<strong><code>transparent</code></strong>表示完全透明的颜色</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 50px;
width: 500px;
margin: 100px;
background-color: #5f5750;
border-left: 2px solid transparent;
}
.c1:hover{
border-left: 2px solid red;
}
</style>
</head>
<body>
<div class="c1">菜单</div>
</body>
</html>
</code></pre>
</li>
</ul>
<h3 id="25-背景色">2.5 背景色</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 50px;
width: 500px;
margin: 100px;
background-color: #5f5750;
}
</style>
</head>
<body>
<div class="c1">菜单</div>
</body>
</html>
</code></pre>
<h2 id="总结">总结</h2>
<p>至此，CSS部分的知识全部讲完。</p>
<ul>
<li>
<p>大家：大致了解了页面的样式和标签。</p>
</li>
<li>
<p>模板：</p>
<ul>
<li>
<p>模板的基本使用逻辑。</p>
</li>
<li>
<p>模板 + 自己CSS知识点（开发页面）</p>
</li>
</ul>
</li>
</ul>
<h2 id="3bootstrap">3.BootStrap</h2>
<p>是别人帮我们已写好的CSS样式，我们如果想要使用这个BootStrap：</p>
<ul>
<li>下载BootStrap</li>
<li>使用
<ul>
<li>在页面上引入BootStrap</li>
<li>编写HTML时，按照BootStrap的规定来编写 + 自定制。</li>
</ul>
</li>
</ul>
<h3 id="31-初识">3.1 初识</h3>
<p>https://v3.bootcss.com/</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- HTML注释：开发版本 -->
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<!-- 生产版本 -->
<!-- <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css"> -->
</head>
<body>
<input type="button" value="提交" />
<input type="button" value="提交" class="btn btn-primary" />
<input type="button" value="提交" class="btn btn-success" />
<input type="button" value="提交" class="btn btn-danger" />
<input type="button" value="提交" class="btn btn-danger btn-xs" />
</body>
</html>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231349661-1111510172.png" alt="" loading="lazy"></p>
<h3 id="32-导航">3.2 导航</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>
.navbar {
border-radius: 0;
}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">中国联通</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">广西</a></li>
<li><a href="#">上海</a></li>
<li><a href="#">神州</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">四川</a></li>
<li><a href="#">上海</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</body>
</html>
</code></pre>
<h3 id="33-栅格系统">3.3 栅格系统</h3>
<p>https://v3.bootcss.com/css/#grid</p>
<ul>
<li>
<p>把整体划分为了12格</p>
</li>
<li>
<p>分类</p>
<ul>
<li>
<p>响应式，根据屏幕宽度不同</p>
<pre><code class="language-html">.col-lg- 1170px
.col-md- 970px
.col-sm- 750px
</code></pre>
</li>
<li>
<p>非响应式 <code>col-xs-6</code></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body>
<div class="col-xs-6" style="background-color: red">1</div>
<div class="col-xs-6" style="background-color: green">2</div>
</body>
</html>
</code></pre>
</li>
<li>
<p>列偏移 <code>col-sm-offset-2</code></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body>
<div class="col-sm-offset-2 col-xs-6" style="background-color: red">2</div>
</body>
</html>
</code></pre>
</li>
</ul>
</li>
</ul>
<h3 id="34-container">3.4 container</h3>
<pre><code class="language-html"><div class="container">
<div class="col-sm-9">左边</div>
<div class="col-sm-3">右边</div>
</div>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231425894-1966399575.png" alt="" loading="lazy"></p>
<pre><code class="language-html"><div class="container-fluid">
<divclass="col-xs-9">左</div>
<divclass="col-xs-3">右</div>
</div>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231440774-947976491.png" alt="" loading="lazy"></p>
<h3 id="35-面板">3.5 面板</h3>
<pre><code class="language-html"><div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</code></pre>
<h3 id="案例博客">案例：博客</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
<style>
.navbar {
border-radius: 0;
}
.more .more-item {
display: inline-block;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">中国联通</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">广西</a></li>
<li><a href="#">上海</a></li>
<li><a href="#">神州</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">四川</a></li>
<li><a href="#">上海</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i></button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li>
<a data-toggle="modal" data-target="#myModal">对话框</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
<div class="container-fluid clearfix">
<div class="col-sm-9">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xN2QzYzQyY2ZjNyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3ZDNjNDJjZmM3Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Top aligned media</h4>
<div>
<i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
<i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
<i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
<i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="more clearfix">
<div class="more-item">
<i class="fa fa-calendar" aria-hidden="true"></i> 2021-11-11
</div>
<div class="more-item">
<i class="fa fa-user-circle" aria-hidden="true"></i> 佩奇
</div>
<div class="more-item">
<i class="fa fa-comments-o" aria-hidden="true"></i> 1000
</div>
<div class="more-item" style="float:right;">
<i class="fa fa-comments-o" aria-hidden="true"></i> 1000
</div>
</div>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xN2QzYzQyY2ZjNyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3ZDNjNDJjZmM3Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Top aligned media</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="64x64"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xN2QzYzQyY2ZjNyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3ZDNjNDJjZmM3Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
data-holder-rendered="true" style="width: 64px; height: 64px;">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Top aligned media</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</div>
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-fire" aria-hidden="true" style="color:#f0ad4e;font-size: 18px"></i>
最新推荐
</div>
<div class="panel-body">
Panel content
Panel content
Panel content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">用户信息处理</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">确 定</button>
</div>
</div>
</div>
</div>
<script src="static/js/jquery-3.6.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231515764-1074723116.png" alt="" loading="lazy"></p>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231534827-503941015.png" alt="" loading="lazy"></p>
<h3 id="案例登录">案例：登录</h3>
<ul>
<li>宽度 + 居中（区域居中）</li>
<li>内边距</li>
<li>表单</li>
</ul>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231549395-1587597292.png" alt="" loading="lazy"></p>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231605797-1399668810.png" alt="" loading="lazy"></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>
.account{
width: 400px;
height: 500px;
border: 1px solid #00FF7F;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding: 20px 40px;
border-radius: 10px;
box-shadow: 5px 5px 20px #51585e;
}
.account h1{
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="account">
<h1>用户登录</h1>
<form>
<div class="form-group">
<label for="exampleInputEmail1">用户名或手机号</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-primary">登录</button>
</form>
</div>
</body>
</html>
</code></pre>
<h3 id="案例后台管理">案例：后台管理</h3>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231631032-1621656322.png" alt="" loading="lazy"></p>
<ul>
<li>导航</li>
<li>新建，按钮。</li>
<li>表格，<br>
<img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231646930-648004866.png" alt="" loading="lazy"></li>
</ul>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>
.navbar {
border-radius: 0;
}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">中国联通xx系统</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">广西</a></li>
<li><a href="#">上海</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div>
<input type="button" value="新 建" class="btn btn-primary"/>
</div>
<div style="margin-top: 20px">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
</code></pre>
<h3 id="案例后台管理面板">案例：后台管理+面板</h3>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231710969-70977907.png" alt="" loading="lazy"></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<style>
.navbar {
border-radius: 0;
}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">中国联通xx系统</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">广西</a></li>
<li><a href="#">上海</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">表单区域</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<button type="submit" class="btn btn-success">保 存</button>
</form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">数据列表</div>
<!--
<div class="panel-body">
注意：以下我们经过筛选出来的重要数据。
</div>
-->
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>
<a class="btn btn-primary btn-xs">编辑</a>
<a class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>
<a class="btn btn-primary btn-xs">编辑</a>
<a class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>
<a class="btn btn-primary btn-xs">编辑</a>
<a class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</div>
</body>
</html>
</code></pre>
<h3 id="36-图标">3.6 图标</h3>
<ul>
<li>
<p>bootstrap提供，不多。</p>
</li>
<li>
<p>fontawesome组件</p>
</li>
<li>
<pre><code>https://fontawesome.com.cn/
</code></pre>
<ul>
<li>
<p>下载并引入：</p>
<pre><code><link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
</code></pre>
<p>复制使用：</p>
</li>
</ul>
</li>
</ul>
<p><img src="https://img2024.cnblogs.com/blog/3582730/202502/3582730-20250214231742001-1795603343.png" alt="" loading="lazy"></p>
<h3 id="37-bootstrap依赖">3.7 BootStrap依赖</h3>
<p>BootStrap依赖JavaScript的类库，jQuery。</p>
<ul>
<li>
<p>下载 jQuery，在页面上应用上jQuery。</p>
</li>
<li>
<p>在页面上应用BootStrap的JavaScript类库。</p>
<ul>
<li>JavaScript,网页动态交互</li>
</ul>
</li>
<li>
<pre><code class="language-html">引用：
<script src="static/js/jquery-3.6.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
</code></pre>
</li>
</ul><br><br>
来源：https://www.cnblogs.com/LYcnbky/p/18716339
頁:
[1]