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

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

2023-05-17 195
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
模型在线服务 PAI-EAS，A10/V100等 500元 1个月
推荐场景：
基于PAI-EAS挂载OSS部署AIGC服务
交互式建模 PAI-DSW，每月250计算时 3个月
推荐场景：
PAI×LLaMA Factory 微调 Llama3 模型
模型训练 PAI-DLC，100CU*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移动端
豆约翰
目录
相关文章
恩爸编程
|
1月前
|
前端开发 JavaScript 开发者
超实用开源前端商城模板，助力电商项目飞速启航！免费直接可用！
分享一款精心设计的开源前端商城模板，涵盖商品展示、购物车、订单处理、用户登录注册等核心功能，使用HTML、CSS、JS和jQuery构建，结构清晰，适合新手和资深开发者，助力电商项目快速启动。
恩爸编程
90 0
超实用开源前端商城模板，助力电商项目飞速启航！免费直接可用！
土木林森
|
1月前
|
Web App开发 前端开发 JavaScript
揭秘！前端大牛们如何巧妙利用CSS3，打造炫酷视觉效果！
【10月更文挑战第31天】前端开发面临复杂布局的挑战，本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求，而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局，帮助开发者构建高性能、用户友好的网页应用。
土木林森
34 4
邹荣乐
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
邹荣乐
284 1
有路有乔-六月
|
2月前
|
前端开发 容器
前端技术分享：利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享：利用CSS Grid布局实现响应式设计
有路有乔-六月
78 3
G0518
|
2月前
|
前端开发 UED 容器
前端技术分享：利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享：利用 CSS Grid 实现响应式布局
G0518
77 2
神明木佑
|
2月前
|
前端开发 JavaScript 容器
前端之CSS基础知识
前端之CSS基础知识
神明木佑
22 0
半截诗
|
2月前
|
前端开发 容器
【前端基础篇】CSS基础速通万字介绍（下篇）3
【前端基础篇】CSS基础速通万字介绍（下篇）
半截诗
23 0
异步社区
|
前端开发 HTML5 移动开发
《HTML5+CSS3网页设计入门必读》——导读
异步社区
1670 0
异步社区
|
容器
《HTML5+CSS3网页设计入门必读》——6.7 测验
异步社区
1450 0
异步社区
|
Web App开发 前端开发 Windows
《HTML5+CSS3网页设计入门必读》——6.6 问与答
异步社区
1353 0

ModelScope模型即服务

热门文章

最新文章

  • 1
    阿里云通义千问向全社会开放！
  • 2
    最佳实践！使用 GraphRAG + GLM-4 对《红楼梦》全文构建中文增强检索
  • 3
    Qwen开源视觉推理模型QVQ，更睿智地看世界！
  • 4
    WeaveFox：蚂蚁集团推出 AI 前端智能研发平台，能够根据设计图直接生成源代码，支持多种客户端和技术栈
  • 5
    FLUX.1 Tools 全家桶开源！文末附一键ComfyUI启动链接
  • 6
    multi-agent：多角色Agent协同合作，高效完成复杂任务
  • 7
    CosyVoice 2.0：阿里开源升级版语音生成大模型，支持多语言和跨语言语音合成，提升发音和音色等的准确性
  • 8
    Llama 3开源，魔搭社区手把手带你推理，部署，微调和评估
  • 9
    ModelScope一键部署模型：新手村实操FAQ篇
  • 10
    千问团队开源会思考的QwQ模型，这模型成精了！
  • 1
    FastExcel：开源的 JAVA 解析 Excel 工具，集成 AI 通过自然语言处理 Excel 文件，完全兼容 EasyExcel
    29
  • 2
    CogAgent-9B：智谱 AI 开源 GLM-PC 的基座模型，专注于预测和执行 GUI 操作，可应用于自动化交互任务
    24
  • 3
    VE-Bench：北京大学开源首个针对视频编辑质量的评估指标，从多角度考虑审美并准确地评估视频编辑效果
    25
  • 4
    PeterCat：一键创建开源项目 AI 问答机器人，自动抓取 GitHub 仓库信息、文档和 issue 等构建知识库
    22
  • 5
    Cobalt：开源的流媒体下载工具，支持解析和下载全平台的视频、音频和图片，支持多种视频质量和格式，自动提取视频字幕
    26
  • 6
    Enhance-A-Video：上海 AI Lab 推出视频生成质量增强算法，显著提升 AI 视频生成的真实度和细节表现
    18
  • 7
    DynamicControl：腾讯推出动态地条件控制图像生成框架，结合了多模态大语言模型的推理能力和文生图模型的生成能力
    20
  • 8
    行业实践 | 基于Qwen2-VL实现医疗表单结构化输出
    53
  • 9
    开源中国【专访】 | CodeFuse：让研发变得更简单
    17
  • 10
    魔搭llamafile集成：让大模型开箱即用
    25

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)