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

本文涉及的产品
交互式建模 PAI-DSW,5000CU*H 3个月
模型训练 PAI-DLC,5000CU*H 3个月
模型在线服务 PAI-EAS,A10/V100等 500元 1个月
简介: 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;
}



目录
相关文章
|
17天前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
52 4
|
1月前
|
JSON 前端开发 JavaScript
前端使用lottie-web,使用AE导出的JSON动画贴心教程
前端使用lottie-web,使用AE导出的JSON动画贴心教程
|
1月前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
8天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
19 2
|
9天前
|
前端开发 JavaScript 开发工具
Web网页前端教程免费:引领您踏入编程的奇幻世界
Web网页前端教程免费:引领您踏入编程的奇幻世界
13 3
|
29天前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
33 1
基于HTML5开发的Markdown在线编辑器
|
15天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
7 0
|
1月前
|
前端开发 JavaScript 搜索推荐
前端网页手册(2)--菜鸟教程网站分析
前端网页手册(2)--菜鸟教程网站分析
25 2
|
1月前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
39 1
|
1月前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。