AI 助理
备案控制台
开发者社区 ModelScope模型即服务 文章 正文

HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型（下）

2023-05-17 190
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
交互式建模 PAI-DSW，5000CU*H 3个月
推荐场景：
AIGC Stable Diffusion文生图Lora模型微调实现虚拟上装
模型在线服务 PAI-EAS，A10/V100等 500元 1个月
推荐场景：
基于PAI-EAS挂载OSS部署AIGC服务
模型训练 PAI-DLC，5000CU*H 3个月
推荐场景：
低代码 Lora 微调及部署
简介： HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型（下）

行级元素


a

strong

em

内嵌元素的特性：

1.默认同行可以继续跟同类型标签

2.内容撑开宽度

3.不支持宽高

4.不支持上下的margin


span


span是一个特殊的行级标签，和div（块级标签）一样，没有任何语义（样式）。

通常用来着重显示某行文字中的某个单词


image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{font-size:14px;}
        p .show,.rd span{font-size:36px; font-weight:bold; color:blue;}
        p #dream{font-size:24px; font-weight:bold; color:red;}
    </style>
</head>
<body>
<p>积极推进<span class="show">“科学融入教育”</span>提供优质教育服务</p>
<p>在东部数据，有一群人默默支持你成就<span id="dream">IT梦想</span></p>
<p class="rd">选择<span>东部数据</span>，成就你的梦想</p>
</body>
</html>


块级元素


p

div

h1~h6

ol-li

ul-li

dl-dt-dd


块元素的特性


1.默认独占一行显示

2.没有宽度时，默认撑满一排

3.支持所有css命令


练习 有路网左侧图书分类


image.png


image

left-category.css

.index-sort{
  width: 208px;
  border: 1px solid #dcdcdc;
  border-top: 0;
  background-color: #FFFFFF;
}
.index-sort li{
  border-bottom: 1px dotted #dcdcdc;
  padding: 0 10px 12px 26px;
}
.index-sort li h2{
  font-size: 14px;
  line-height: 28px;
  padding-left: 8px;
}
.index-sort a{
  line-height: 20px;
  margin: 0 3px;
}
.index-sort .yl-all-index{
  font-size: 14px;
  line-height: 20px;
  padding: 10px;
}

youlu-left-category.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="left-category.css">
</head>
<body>
  <div class="index-sort">
    <ul class="cat-menu">
      <li>
        <h2>
          经济管理
        </h2>
        <div class="min-sort">
          <a href="#">市场营销</a>
          <a href="#">经济学理论</a>
          <a href="#">国际贸易</a>
          <a href="#">物流管理</a>
          <a href="#">管理学原理</a>
          <a href="#">财务管理</a>
        </div>
      </li>
      <li>
        <h2>
          文学艺术
        </h2>
        <div class="min-sort">
          <a href="#">设计</a>
          <a href="#">音乐</a>
          <a href="#">青春文学</a>
          <a href="#">绘画</a>
          <a href="#">人物传记</a>
          <a href="#">外国文学</a>
        </div>
      </li>
      <li>
        <h2>
          人文社科
        </h2>
        <div class="min-sort">
          <a href="#">数学</a>
          <a href="#">英语教材</a>
          <a href="#">化学</a>
          <a href="#">日语</a>
          <a href="#">生物科学</a>
          <a href="#">专业英语</a>
        </div>
      </li>
      <li>
        <h2>
          科学技术
        </h2>
        <div class="min-sort">
          <a href="#">语言与编程</a>
          <a href="#">电子通信</a>
          <a href="#">电工电子</a>
          <a href="#">数据库</a>
          <a href="#">建筑工程</a>
          <a href="#">土木工程</a>
        </div>
      </li>
      <li>
        <h2>
          生活休闲
        </h2>
        <div class="min-sort">
          <a href="#">家庭保健</a>
          <a href="#">美食烹饪</a>
          <a href="#">导游必备</a>
          <a href="#">地理学理论</a>
          <a href="#">动漫卡通</a>
          <a href="#">球类</a>
        </div>
      </li>
      <li>
        <h2>
          教育考试
        </h2>
        <div class="min-sort">
          <a href="#">教学理论</a>
          <a href="#">自考</a>
          <a href="#">研究生考试</a>
          <a href="#">考研英语</a>
          <a href="#">公务员考试</a>
          <a href="#">初高中用书</a>
        </div>
      </li>
    </ul>
    <h2 class="yl-all-index">
      <a href="#">浏览所有图书分类</a>
    </h2>
    <div class="book-ad-first">
      <a href="#">
        <img src="img/haoshu.jpg" alt="新书推荐"/>
      </a>
    </div>
  </div>
</body>
</html>


内联块元素—代表元素img


inline-block的特点：

元素在一行显示

支持宽高

没有宽度的时候内容撑开宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>        
        img {
        width: 300px;
        height: 200px;
        }    
    </style>
</head>
<body>
<img src="img/1.jpg">
<img src="img/2.jpg">
</body>
</html>


image.png


display属性

控制元素的显示和隐藏

块级元素与行级元素的转变

block       块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符

inline      内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符

inline-block    内联块元素

none        设置元素不会被显示


练习 有路网help导航



image

help-nav.css


image.png


image

help-nav.css

.help{
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
}
.help a{
  border-right: 1px solid gray;
  padding-right: 4px;
  padding-left: 2px;
}
.help .last{
  border-right: 0
}

youlu-help-nav.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="help-nav.css">
</head>
<body>
  <div class="help">
    <a href="#">如何购买</a>
    <a href="#">如何支付</a>
    <a href="#">旧书缺货怎么办</a>
    <a href="#">配送方式与配送费</a>
    <a href="#">普通会员与VIP会员</a>
    <a href="#">有路积分说明</a>
    <a href="#">有路礼券说明</a>
    <a href="#">账户余额说明</a>
    <a href="#">退款退货说明</a>
    <a href="#" class="last">电子书购买说明</a>
  </div>
</body>
</html>


练习 有路网顶部导航


image.png


image

top-nav.css

.topBar{
  height: 30px;
  line-height: 30px;
  width: 1200px;
  margin: 0 auto;
  background-color: #f4f4f4;
}
.topBar .topBarL{
  display: inline-block;
  margin-right: 536px;
}
.topBar .topBarR{
  display: inline-block;
}
.topBar .topBarR li{
  display: inline-block;
}
.topBar .topBarR li a{
  border-right: 1px solid gray;
  padding-left:4px;
  padding-right: 6px;
}
.topBar .login{
  color: red;
}
.topBar .topBarR .last a{
  border-right: 0;
}

youlu-top-nav.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="top-nav.css">
</head>
<body>
  <div class="topBar">
    <div class="topBarL">
      <img src="img/welcome.jpg" alt="">
      <span>您好，欢迎光临有路网！</span>
    </div>
    <ul class="topBarR">
      <li>
        <a href="#" class="login">请登陆</a>
        <a href="#" class="regist-link">免费注册</a>
      </li>
      <li><a href="#">我的有路</a></li>
      <li>
        <a href="#">我要开店</a>
      </li>
      <li>
        <a href="#">团购批发</a>
      </li>
      <li><a href="#">客服服务</a></li>
      <li>
        <a href="#" class="menu-btn">
          <img src="img/ico_phone.gif" />手机有路</a
        >
      </li>
      <li class="last">
        <a href="#" class="menu-btn">微信公众号</a>
      </li>
    </ul>
  </div>
</body>
</html>


背景图像

背景图像

background-image属性

background-image:url(图片路径);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 800px;
            height: 600px;
            background-image: url("images/book.jpg");
        }
    </style>
</head>
<body>
<div>
    摆渡人摆渡人摆渡人摆渡人
</div>
</body>
</html>


image.png

image

背景重复方式

background-repeat属性

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 800px;
            height: 600px;
            background-image: url("images/book.jpg");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div>
    摆渡人摆渡人摆渡人摆渡人 摆渡人摆渡人摆渡人摆渡人
</div>
</body>
</html>


image.png


image

背景定位

background-position属性

Xpos  Ypos

单位：px

Xpos表示水平位置，Ypos表示垂直位置

X%  Y%

使用百分比表示背景的位置

X、Y方向关键词

水平方向的关键词：left、center、right

垂直方向的关键词：top、center、bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 800px;
            height: 600px;
            border: 1px solid red;
            background-image: url("images/book.jpg");
            background-repeat: no-repeat;
            background-position: bottom right;
            /* background-position: 50% 50%; */
        }
    </style>
</head>
<body>
<div>
    摆渡人摆渡人摆渡人摆渡人 摆渡人摆渡人摆渡人摆渡人
</div>
</body>
</html>


image.png

image


给黑板报的列表项目前面加上小圆点背景图像


image.png


image

.black-board li{
  line-height: 22px;
  padding-left: 6px;
  background: url('img/point.gif') no-repeat left center;
}



文章标签：
前端开发
关键词：
HTML CSS3
HTML CSS
CSS移动端
HTML移动端
HTML实例
豆约翰
目录
相关文章
html的七十二变
|
11天前
|
前端开发
如何设置 CSS 盒子模型的边框样式？
CSS盒子模型的边框样式可以通过`border`属性设置，包括边框宽度、样式和颜色。例如：`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边，如`border-top`、`border-right`等。
html的七十二变
33 2
html的七十二变
|
11天前
|
前端开发 开发者
css两种盒子模型
在CSS中，有两种盒子模型：标准盒子模型和IE盒子模型（怪异盒子模型）。标准盒子模型中，`width`和`height`仅指内容区的尺寸，总宽度和高度还包括内边距、边框和外边距。IE盒子模型中，`width`和`height`包括内容区、内边距和边框，总宽度和高度仅加外边距。通过`box-sizing`属性可以切换这两种模型，`box-sizing: content-box;`表示标准盒子模型，`box-sizing: border-box;`表示IE盒子模型。
html的七十二变
29 2
html的七十二变
|
11天前
|
前端开发 容器
给 CSS 盒子模型添加边框时，需要注意什么？
在给CSS盒子模型添加边框时，需要注意边框的宽度、样式和颜色，以及它如何影响盒子的总尺寸和布局。边框会增加盒子的总宽度和高度，可能需要调整其他属性以保持布局的完整性。
html的七十二变
26 1
gudanhero2018
|
2月前
|
前端开发
CSS属性：盒子模型
CSS属性：盒子模型
gudanhero2018
31 0
dufadayang
|
28天前
|
前端开发
彻底搞懂css盒子模型
【10月更文挑战第1天】
dufadayang
50 9
六卿
|
2月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性，包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签（如`header`、`footer`、`nav`等）及其新增表单控件和属性（如`url`、`email`、`date`类型输入框等）。这些改进增强了网页的功能性和用户体验。
六卿
35 1
前端基础(十七)_HTML5新特性
土木林森
|
3月前
|
存储 移动开发 前端开发
HTML5时代来临，这些新特性你掌握了吗？一篇文章带你玩转Web前端技术潮流！
【8月更文挑战第26天】HTML5（简称H5）作为新一代Web标准，相比HTML4带来了诸多增强功能。
土木林森
52 2
土木林森
|
3月前
|
前端开发 开发者
【前端大揭秘】CSS盒子模型的爱恨情仇：一场关于标准与IE模型的精彩对决！
【8月更文挑战第26天】本文深入探讨CSS中的两大盒子模型——标准盒模型与IE盒模型。通过理论解析与实例代码，清晰展示了两种模型下元素尺寸的构成方式及其应用场景。标准盒模型适合精确控制内容区尺寸，而IE盒模型在处理固定宽度元素时更为直观。掌握这些知识将帮助前端开发者在实际项目中做出更优的设计决策，提升网页布局的质量与美观性。
土木林森
32 1
热爱技术的小郑
|
3月前
|
前端开发
HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用
该博客文章详细介绍了HTML和CSS的基础知识，包括CSS样式的应用方式、语法规则、选择器的使用、盒子模型、内边距、外边距、元素的显示类型以及overflow属性处理溢出内容的方法，并通过代码示例和测试结果截图展示了这些知识点在网页设计中的应用。
热爱技术的小郑
33 0
HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用
土木林森
|
3月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅：如何在云端部署JSF应用，让你的Web应用如虎添翼？
【8月更文挑战第31天】在云计算蓬勃发展的今天，AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF（JavaServer Faces）应用的方法，这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务，如EC2、RDS 和 S3，开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例，并讨论了使用AWS可能遇到的挑战及应对策略，帮助开发者更好地利用AWS的强大功能，提升Web应用开发效率。
土木林森
61 0

ModelScope模型即服务

热门文章

最新文章

  • 1
    阿里云通义千问向全社会开放！
  • 2
    multi-agent：多角色Agent协同合作，高效完成复杂任务
  • 3
    智胜未来：国内大模型+Agent应用案例精选，以及主流Agent框架开源项目推荐
  • 4
    Llama 3开源，魔搭社区手把手带你推理，部署，微调和评估
  • 5
    自然语言处理Transformer模型最详细讲解（图解版）
  • 6
    ChatGPT中文版杀疯了,已登录AI模型市场
  • 7
    从RMSE和MSE到更多选择：探索机器学习模型性能指标
  • 8
    ModelScope一键部署模型：新手村实操FAQ篇
  • 9
    vanna+qwen实现私有模型的SQL转换
  • 10
    【机器学习】集成学习——Stacking模型融合（理论+图解）
  • 1
    在实际项目中，如何选择使用 Flux 架构或传统的 MVC 架构
    15
  • 2
    魔搭的notebook再次打开时swift导入失败
    49
  • 3
    如何使用自然语言处理库`nltk`进行文本的基本处理
    22
  • 4
    开发者的黄金时代：原生鸿蒙应用市场的全生命周期服务
    35
  • 5
    转发文章
    21
  • 6
    find、locate和grep命令对比
    23
  • 7
    linux 全局搜索文件
    30
  • 8
    对话蚂蚁开源蒋炜：让 Agent 把运维人员从 24 小时的待命中解放出来
    47
  • 9
    2024年代码大模型论文精选第五期
    67
  • 10
    活动｜2024 CodeFuse 「编码挑战季」活动已开启！欢迎报名参加
    19

    • 相关课程

    更多
  • CSS 快速掌握
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月