HTML样式CSS：盒子模型、列居中、表单排布、导航菜单及网格系统、轮播图

最新推荐文章于 2024-04-12 11:37:26 发布
最新推荐文章于 2024-04-12 11:37:26 发布
阅读量1.1k 收藏 5
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuxe1990/article/details/90513925
版权

HTML、CSS学习网址：https://www.runoob.com/

尺寸单位
• %:百分比
• in:英寸
• cm:厘米
• mm:毫米
• pt:磅(1pt等于1/72英寸)
• px:像素(计算机屏幕上的一个点)
• em:1em等于当前的字体尺寸,2em等于当前字体尺寸的两倍，继承父级元素的字体大小
• rem:与em类似,但是相对于根元素设置字体尺寸的倍数

#mtcss1.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my css1</title>
    <link rel="stylesheet" href="mycss1.css">
</head>
<body>
<div class="box">盒子模型</div>
<hr>
<div class="c1">清华大学</div>
<div class="c2">清华大学</div>
<div class="c3">
   清华大学
    <div class="c3s1">清华大学</div>
</div>
<div class="c4">
    清华大学
    <div class="c4s1">清华大学</div>
</div>
</body>
</html>
##########################################################################
html {
    font-size: 10pt;
}

.c1 {
    font-size: 15px;
    color: rgb(255, 0, 0);
}

.c3, .c4 {
    font-size: 30pt;
    color: #8e3e24;
}

.c3s1 {
    font-size: 2em;     /*是当前大小的2倍=>60pt*/
    color: #0000FF;     /*可以简写成#00F*/
}

.c4s1 {
    font-size: 2rem;    /*是根元素大小的2倍=>20pt*/
    color: olivedrab;
}

.box {
    width: 300px;
    border: 1px black solid;    /*黑色实线1px的边框*/
    padding: 20px;  /*内边距*/
    margin: 30px 10px 20px 40px;    /*外边距，上右下左的顺序*/
    font-size: 20pt;
}

在这里插入图片描述
#######################################################################
#一列居中.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一列居中</title>
    <link rel="stylesheet" href="one.css">
</head>
<body>
<div class="container">
    <div class="banner">
        <img src="http://noordikslaan.noordik.nl/wp-content/uploads/sites/7/2015/09/Welkom-1000x150.jpg">
    </div>
    <div class="main">
        清华大学（Tsinghua University），简称“清华”，由中华人民共和国教育部直属，中央直管副部级建制，位列“211工程”、“985工程”、“世界一流大学和一流学科”，入选“基础学科拔尖学生培养试验计划”、“高等学校创新能力提升计划”、“高等学校学科创新引智计划”，为九校联盟、中国大学校长联谊会、东亚研究型大学协会、亚洲大学联盟、环太平洋大学联盟、清华—剑桥—MIT低碳大学联盟成员，被誉为“红色工程师的摇篮”。
    </div>
    <div class="footer">
        <a href="">清华大学</a>
    </div>
</div>
</body>
</html>
###############################################################################
#one.css
.container {
    width: 1000px;
    margin: 0 auto;
}

在这里插入图片描述

#2列居中.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2列居中</title>
    <link rel="stylesheet" href="two.css">
</head>
<body>
<div class="container">
    <div class="banner">banner</div>
    <div class="main">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</div>
</body>
</html>
######################################################################
#two.css
.container {
    width: 1000px;
    margin: 0 auto;
}

.banner, .footer {
    height: 100px;
    background: #ccc;
}

.left {
    float: left;
    height: 200px;
    width: 200px;
    background: olivedrab;
}

.right {
    margin-left: 200px;
    height: 200px;
    width: 800px;
    background: #8e3e24;
}

以上2列居中.html文件效果
在这里插入图片描述

#two2.css
.container {
    background-image: url("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3068506516,540373130&fm=26&gp=0.jpg");		/*使用图片填充背景*/
    /*background-repeat: no-repeat;*/
    background-repeat: repeat-x;
    width: 1000px;
    margin: 0 auto;
}

.banner, .footer {
    height: 100px;
    /*background: #ccc;*/
}

.left {
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
    float: left;
    height: 200px;
    width: 200px;
    /*background: olivedrab;*/
}

.right {
    margin-left: 200px;
    height: 200px;
    width: 800px;
    /*background: #8e3e24;*/
}

更改为以上样式后的2列居中.html页面效果
在这里插入图片描述

#提交查询样式、字体图标、表单排布
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>boot css2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <img  class="img-circle" src="static/imgs/html_css.jpeg" alt="">
    <img  class="img-rounded" src="static/imgs/html_css.jpeg" alt="">
    <img  class="img-thumbnail" src="static/imgs/html_css.jpeg" alt="">
    <hr>
    <p>
       <!--图标地址：https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm-->
        <i class="glyphicon glyphicon-star"></i>    <!--五角星字体图标-->
        <span class="glyphicon glyphicon-home"></span>
        <i class="glyphicon glyphicon-fire"></i>
    </p>
    <hr>
    <form action="">
        <select class="form-control" name="" id="">     <!--下拉菜单-->
            <option value="aaa">aaa</option>
            <option value="bbb">bbb</option>
            <option value="ccc">ccc</option>
            <option value="ddd">ddd</option>
        </select>
        <!--各种类型提交查询出入样式-->
        <input class="btn" type="submit">   <!--btn为按钮添加样式-->
        <input class="btn btn-default" type="submit">   <!--btn-default默认标准按钮-->
        <input class="btn btn-primary" type="submit">
        <input class="btn btn-success" type="submit">
        <input class="btn btn-info" type="submit">
        <input class="btn btn-danger" type="submit">
        <input class="btn btn-warning" type="submit">
        <input class="btn btn-danger btn-xs" type="submit">
        <input class="btn btn-warning btn-lg" type="submit">
        <input class="btn btn-primary btn-sm" type="submit">
        <input class="btn btn-danger btn-block" type="submit">
    </form>
    <form action="" class="form-inline">    <!--form-inline单行显示表单内容-->
        <div class="form-group">     <!--form-group水平排布表单-->
            <label>用户名：</label>
            <input class="<!--form-control-->" type="text">     <!--form-control输入时边框发光显示-->
        </div>
        <div class="form-group">
            <label>密&nbsp;&nbsp;&nbsp;码：</label>    <!--&nbsp;表示一个空格字符-->
            <input class="form-control" type="password">
        </div>
        <div class="form-group">
            <input class="btn btn-primary" type="submit" value="登陆">
        </div>
    </form>
    <hr>
    <form action="">
        <label>用户名：</label><input type="text">
        <label>密&nbsp;&nbsp;&nbsp;码：</label><input type="password">
        <input class="btn btn-primary" type="submit" value="登陆">
    </form>
    <hr>
    <table class="table table-bordered table-stripted table-hover">     <!--创建表格-->
        <tr class="info text-center ">
            <td>阶段</td>
            <td>讲师</td>
            <td>课程</td>
        </tr>
        <tr>
            <td>一</td>
            <td>刘</td>
            <td>Linux</td>
        </tr>
        <tr>
            <td>二</td>
            <td>张</td>
            <td>ansible</td>
        </tr>
    </table>
    <blockquote>
        Bootstrap 框架Bootstrap 框架Bootstrap 框架Bootstrap 框架
    </blockquote>
    <p class="text-center text-danger bg-success">Bootstrap 框架</p>
    <p class="text-right text-muted bg-info">Bootstrap 框架</p>
    <p class="text-warning bg-danger">Bootstrap 框架</p>
    <p class="text-success bg-warning">Bootstrap 框架</p>
    <p class="text-info bg-primary">Bootstrap 框架</p>
    <p class="text-primary">Bootstrap 框架</p>
    <p class="h3">
        <del>Bootstrap</del> <s>框架</s>
        <ins>Bootstrap</ins> <u>框架</u>
        <small>Bootstrap</small> <strong>框架</strong>
        <em>Bootstrap</em> <mark>Bootstrap框架</mark>
        Bootstarp 框架
    </p>
    <p>Bootstarp 框架</p>
    <p>Bootstarp 框架</p>
    <p>BBootstarp 框架</p>
    <h1>Bootstarp 框架</h1>
    <h2>Bootstarp 框架</h2>
    <h3>Bootstarp 框架</h3>
    <h4>Bootstarp 框架</h4>
    <h5>Bootstarp 框架</h5>
    <h6>Bootstarp 框架</h6>
</div>
</body>
</html>

#导航菜单标签及网格系统
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>boot css3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <hr>
    <div class="row">   <!--row声明水平的垂直列-->
        <!--网格系统为12列，col为列，按屏幕宽度大小分为：xs超小屏、sm小屏、md中等屏、lg大屏-->
        <div class="col-md-2">  <!--占据网格系统前2列-->
            <!--nav导航菜单-->
            <ul class="nav nav-pills nav-stacked">   <!--stacked垂直堆叠(pills胶囊式)导航菜单-->
                <li class="active"><a href="">network</a></li>  <!--active默认选择项-->
                <li><a href="#">linux</a></li>
                <li><a href="#">service</a></li>
                <li><a href="#">python</a></li>
            </ul>
        </div>
        <div class="col-md-10">这是正文</div>   <!--占据网格系统后10列-->
    </div>
    <hr>
    <ul class="nav nav-pills nav-justified">    <!--justified两端对齐(pills胶囊式)导航菜单-->
        <li class="active"><a href="">network</a></li>
        <li><a href="#">linux</a></li>
        <li><a href="#">service</a></li>
        <li><a href="#">python</a></li>
    </ul>
    <hr>
    <ul class="nav nav-tabs nav-justified">   <!--justified两端对齐（tabs标签式）导航菜单-->
        <li class="active"><a href="">network</a></li>
        <li><a href="#">linux</a></li>
        <li><a href="#">service</a></li>
        <li><a href="#">python</a></li>
    </ul>
    <hr>
    <div class="row">
        <!--boostrap颜色—dange:红, warning:黄, primary:蓝, info:浅蓝, success:浅绿-->
        <div class="h2 col-lg-4 col-md-6 bg-info">aaa</div>
        <div class="h2 col-lg-4 col-md-6 bg-danger">aaa</div>
        <div class="h2 col-lg-4 col-md-6 bg-warning">aaa</div>
        <div class="h2 col-lg-4 col-md-6 bg-success">aaa</div>
        <div class="h2 col-lg-4 col-md-6 bg-primary">aaa</div>
        <div class="h2 col-lg-4 col-md-6 bg-warning">aaa</div>
    </div>
    <div class="row">
        <div class="h2 col-lg-1 bg-info">abc</div>
        <div class="h2 col-lg-1 bg-danger">abc</div>
        <div class="h2 col-lg-1 bg-warning">abc</div>
        <div class="h2 col-lg-1 bg-success">abc</div>
        <div class="h2 col-lg-1 bg-primary">abc</div>
        <div class="h2 col-lg-1 bg-warning">abc</div>
        <div class="h2 col-lg-1 bg-info">abc</div>
        <div class="h2 col-lg-1 bg-danger">abc</div>
        <div class="h2 col-lg-1 bg-warning">abc</div>
        <div class="h2 col-lg-1 bg-success">abc</div>
        <div class="h2 col-lg-1 bg-primary">abc</div>
        <div class="h2 col-lg-1 bg-warning">abc</div>
    </div>
</div>

</body>
</html>

在这里插入图片描述

#标签页内容淡入淡出切换
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>boot css4</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#linux" data-toggle="tab">Linux</a></li>   <!-- data-toggle="tab"启动标签页内容切换-->
        <li><a href="#py" data-toggle="tab">Python</a></li>
    </ul>
    <div class="tab-content">   <!--tab-content设置标签页对应的内容随标签的切换而更改-->
        <!--tab-pane添加淡入淡出-->
        <div class="tab-pane active fade in" id="linux">Linux Data</div>    <!--淡入淡出效果需要在第一行标签页添加fade in-->
        <div class="tab-pane" id="py">Python Data</div>
    </div>
</div>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
</body>
</html>

#图片轮播
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div id="linux-carousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li class="active" data-target="#linux-carousel" data-slide-to="0"></li>
            <li data-target="#linux-carousel" data-slide-to="1"></li>
            <li data-target="#linux-carousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <a href="http://www.sogou.com" target="_blank">		<!--点击第一张图片是指定的超链接-->
                    <img src="static/imgs/first.jpg">
                </a>
            </div>
            <div class="item">
                <img src="static/imgs/second.jpg">
            </div>
            <div class="item">
                <img src="static/imgs/third.jpg">
            </div>
        </div>
        <a href="#linux-carousel" data-slide="prev" class="carousel-control left">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a href="#linux-carousel" data-slide="next" class="carousel-control right">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>

<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $('#linux-carousel').carousel({
        interval : 3000
    });
</script>
</body>
</html>
刘鑫的博客
关注
专栏目录
初识HTML（五）进阶：CSS盒子模型、页面布局
Simple子夜
03-13 1万+
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容（文本、或者图片、或者其它标签）。 盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 标准的W3C盒子模型： 元素的宽度和高度 重点: 当你指定一个 CSS 元素的宽度和高度属性时
html实现网格布局排版整齐的表格,CSS Grid 网格布局全攻略
weixin_39997310的博客
06-17 1681
所有奇技淫巧都只在方寸之间。几乎从我们踏入前端开发这个领域开始，就不停地接触不同的布局技术。从常见的浮动到表格布局，再到如今大行其道的flex布局，css布局技术一直在不断地推陈出新。其中网格布局(grid)作为css3的产物，它更加贴近网页设计师所使用的布局策略，学习并利用好它可以让我们免受很多布局困扰。虽然网格布局好处有很多，但学习起来并不简单，原因是用来设置布局的属性实在太多，其中光是作用于...
HTML+CSS基础----盒模型
qq_41430599的博客
07-21 194
在谈盒模型之前,我们先了解下什么是块级元素,什么是行内元素. 块级元素: 如&lt;p&gt;,&lt;li&gt;,&lt;h1&gt;等等; 默认情况下，块级元素会另起一行，并尽可能的充满整个容器。 块级元素可以包含行内元素和其他块级元素，相比于行内元素可以创建更复杂和大型的结构. 块级元素的特点: 1.会另起一行， 2.可以设置width，height，margin，padding...
css实现盒子模型的各种居中方式
weixin_33811961的博客
11-13 1481
<div class="parent"> <div class="child"></div> </div> 复制代码1.绝对定位 margin负值 .parent{ width:600px; height:600px; margin:auto; position: relative; backgrou...
1.盒子模型
official business
07-15 395
盒子模型： 即大部分的html标签，都可以视作是一个盒子，由Margin(外边距)、Border(边框)、Padding(内边距)、Content(内容)层层包裹。如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>box</title> <style type="text/css"> #box{ } &lt
class 1 模板&盒子模型
weixin_34218579的博客
10-11 132
基础模板<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>随意</title></head><body></body></html>盒子模型<!DOCTYPE html><...
HTML和CSS的面试题
qq_43537814的博客
03-21 787
css的盒子模型分为：W3C标准盒子模型、IE盒子模型W3C标准盒子模型包括：margin、border、padding、contentIE盒子模型包括：margin、content(border、padding、content)盒子模型转行：使用box-sizing//标准盒子模型//IE盒子模型。
HTML5与CSS3总结
hu0708的博客
08-16 2267
HTML5与css3
前端面试题---html/css
weixin_44501366的博客
10-07 1243
!DOCTYPE 标签：head：body:base:可以用来统一设置当前页面上的超链接的跳转方式< base >标签为页面上的所有链接规定默认地址或默认目标使用了 < base > 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。 使用< base >标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对URL。这其中包括 < a >、< img >、< li
freecodecamp的HTML和CSS部分读书摘要笔记
hyhlsy的博客
07-15 556
freecodecamp的HTML和CSS部分读书摘要笔记 应用视觉设计 视觉设计结合了排版、色彩理论、图形、动画、页面布局等，以表达独特的信息。 一、box-shadow box-shadow 属性以及它的依次取值 offset-x、offset-y、blur-radius、spread-radius 和颜色值。 其中 blur-radius和 spread-radius是可选的。 二、颜色 1、RGB和分裂补色 电脑显示器和各类屏幕都是基于颜色叠加的模型：将红（R）、绿（G）、蓝（B）三原色的色光以不同
html5九宫格布局的网格菜单效果.zip
07-11
这是一个九宫格菜单动画，html5全屏展开网格布局菜单，点击全屏背景切换显示。
css布局(盒子模型 浮动 定位)有图示
weixin_44769592的博客
06-07 658
文章目录布局（盒子模型 浮动 定位）css盒子模型盒子模型四个组成部分bordercontentpaddingmargin浮动floatposition(定位)relative：absolutefixeddisplay：none或inline或block 布局（盒子模型 浮动 定位） 三大学习核心： 盒子模型， 浮动， 定位 css盒子模型 盒子模型四个组成部分 border边框 content 内容 padding 内边距（内容和边框的距离） margin 外边距 （盒子之间的距离） border
HTML一个字段中居中,html – CSS Grid中的列居中
weixin_39875842的博客
06-01 188
CSS Grid提供justify-items和justify-self属性,可用于沿行轴对齐网格项.justify-items适用于网格容器. justify-self适用于网格项目.所以你的实用程序类看起来像这样：.l-grid__centered {justify-self: center;grid-column: 1 / -1;}.l-wrap {width: 100%;max-width...
html中居中操作
qq_35367566的博客
08-04 4384
采用css样式，进行代码 样式： 代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .h1{ width: 400px; height: 400px; background-colo
纯CSS制作的二级导航菜单栏(通过变化菜单栏的样式实现)
InnerVoice的专栏
06-16 1284
HOME BLOG OPUS Composition 1 Composition 2 Composition 3 ABOUT About Me Contact Me
html中的“居中”问题详解（超全）
最新发布
前端全栈大佬
04-12 1万+
本文将深入探讨HTML中各种居中问题，从基本的文本居中到元素居中布局，涵盖了各种常见的情景和解决方案。通过本文，读者将能够全面理解HTML中的居中技巧，为其网页设计和开发提供实用的指导和建议。
CSS浮动与盒子模型----案例：轮播图 疑难示意
qq_25479767的博客
04-01 259
CSS浮动与盒子模型----案例：轮播图 疑难示意 一、对margin 0 auto居中的理解 文章出处和来源网址：http://www.divcss5.com/rumen/r773.shtml 为什么要设置margin:0 auto？ 设置此样式让DIV布局水平居中于浏览器中，目的就是兼容各大浏览器让布局居中。如果不加margin:0 auto CSS样式，会造成布局在有的浏览器中居中有的浏览器靠左。 禁：如果要让DIV布局居中浏览器中，加入margin:0 auto就不能加入float浮动样式，避
html 4种居中方式
qq_40386177的博客
12-23 1280
1.弹性盒居中 .wrapper{ width: 300px; height: 300px; border:1px solid black; display: flex; justify-content: center; align-items: center; } .content{ width: 100px; height: 100px; border: 1px solid b
css盒子模型思维导图
y1192731306的博客
06-25 715
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值