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

行级元素

a

strong

em

内嵌元素的特性：

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

2.内容撑开宽度

3.不支持宽高

4.不支持上下的margin

span

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

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

!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

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>
    

display属性

控制元素的显示和隐藏

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

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

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

inline-block 内联块元素

none 设置元素不会被显示

练习 有路网help导航

image

help-nav.css

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

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

背景重复方式

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

背景定位

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

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

image

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

}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！