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

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

2023-05-17 191
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
交互式建模 PAI-DSW，每月250计算时 3个月
推荐场景：
PAI×LLaMA Factory 微调 Llama3 模型
模型在线服务 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 CSS
CSS盒子模型
前端移动端
教程CSS
前端学习
豆约翰
目录
相关文章
html的七十二变
|
24天前
|
前端开发
如何设置 CSS 盒子模型的边框样式？
CSS盒子模型的边框样式可以通过`border`属性设置，包括边框宽度、样式和颜色。例如：`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边，如`border-top`、`border-right`等。
html的七十二变
49 2
html的七十二变
|
24天前
|
前端开发 开发者
css两种盒子模型
在CSS中，有两种盒子模型：标准盒子模型和IE盒子模型（怪异盒子模型）。标准盒子模型中，`width`和`height`仅指内容区的尺寸，总宽度和高度还包括内边距、边框和外边距。IE盒子模型中，`width`和`height`包括内容区、内边距和边框，总宽度和高度仅加外边距。通过`box-sizing`属性可以切换这两种模型，`box-sizing: content-box;`表示标准盒子模型，`box-sizing: border-box;`表示IE盒子模型。
html的七十二变
35 2
html的七十二变
|
24天前
|
前端开发 容器
给 CSS 盒子模型添加边框时，需要注意什么？
在给CSS盒子模型添加边框时，需要注意边框的宽度、样式和颜色，以及它如何影响盒子的总尺寸和布局。边框会增加盒子的总宽度和高度，可能需要调整其他属性以保持布局的完整性。
html的七十二变
33 1
gudanhero2018
|
2月前
|
前端开发
CSS属性：盒子模型
CSS属性：盒子模型
gudanhero2018
32 0
龙腾九州
|
5天前
|
前端开发
CSS 盒子模型
CSS 盒子模型
龙腾九州
15 4
邹荣乐
|
30天前
|
前端开发 JavaScript
CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
邹荣乐
149 1
六卿
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性，以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
六卿
33 3
前端基础(五)_CSS文本文字属性、背景颜色属性
dufadayang
|
1月前
|
前端开发
彻底搞懂css盒子模型
【10月更文挑战第1天】
dufadayang
53 9
有路有乔-六月
|
1月前
|
前端开发 容器
前端技术分享：利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享：利用CSS Grid布局实现响应式设计
有路有乔-六月
50 3
G0518
|
1月前
|
前端开发 UED 容器
前端技术分享：利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享：利用 CSS Grid 实现响应式布局
G0518
51 2

ModelScope模型即服务

热门文章

最新文章

  • 1
    阿里云通义千问向全社会开放！
  • 2
    multi-agent：多角色Agent协同合作，高效完成复杂任务
  • 3
    Llama 3开源，魔搭社区手把手带你推理，部署，微调和评估
  • 4
    智胜未来：国内大模型+Agent应用案例精选，以及主流Agent框架开源项目推荐
  • 5
    自然语言处理Transformer模型最详细讲解（图解版）
  • 6
    通义千问72B、1.8B、Audio模型开源！魔搭社区最佳实践来啦！
  • 7
    vanna+qwen实现私有模型的SQL转换
  • 8
    ModelScope一键部署模型：新手村实操FAQ篇
  • 9
    【RAG实践】Rerank，让RAG更近一步
  • 10
    【机器学习技巧】回归模型的几个常用评估指标（R2、Adjusted-R2、MSE、RMSE、MAE、MAPE）及其在sklearn中的调用方式
  • 1
    今日 AI 开源｜共 4 项｜DeepSeek 推出新一代 AI 推理模型，实力比肩 OpenAI o1-preview！
    6
  • 2
    最佳实践！使用 GraphRAG + GLM-4 对《红楼梦》全文构建中文增强检索
    8
  • 3
    WebChat：开源的网页内容增强问答 AI 助手，基于 Chrome 扩展的最佳实践开发，支持自定义 API 和本地大模型
    5
  • 4
    Documind：开源 AI 文档处理工具，将 PDF 转换为图像提取结构化数据
    27
  • 5
    今日 AI 开源｜共 10 项｜ 复合 AI 模型，融合多个开源 AI 模型组合解决复杂推理问题
    31
  • 6
    Memoripy：支持 AI 应用上下文感知的记忆管理 Python 库
    20
  • 7
    Perplexica：开源 AI 搜索引擎，Perplexity AI 的开源替代品，支持多种搜索模式、实时信息更新
    24
  • 8
    OmniSearch：阿里巴巴通义推出的多模态检索增强生成框架
    27
  • 9
    基于qwen模型实现大模型应用探索-党务知识小助手
    32
  • 10
    Java“TimeoutException”解决
    28

    • 相关课程

    更多
  • CSS 快速掌握
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 基于函数计算快速搭建Wordpress博客系统
  • HTML及前端框架
  • WEB网页编程实战
  • CSS基础教程
    • 下一篇
    阿里云OSS设置跨域访问