HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型_return { height: this.heightlist.topbarheight + 'p-程序员宅基地

技术标签: web前端入门教程  css  html5  web  html  htmlcss实战教程  htmlcss系列教程  css3  

本教程案例在线演示

有路网PC端
有路网移动端

免费配套视频教程

免费配套视频教程

教程配套源码资源

教程配套源码资源

div

div 可定义文档中的分区(division)。

div 标签可以把网页分割为独立的、不同的部分。

可以看成以下结构:

div不像 h1,p标签,没有任何默认样式,其主要作用是标识网页上的某块区域。常见做法是通过给div元素加上id或class,然后通过css选中某个div,对其进行样式美化。

<div class="demo">我是一个div</div>
<style>
        .demo{
            color:red;
            font-size: 20px;
        }   
</style>

每个div可以看成一个盒子

一个盒子中主要的属性有5个:width、height、padding、border、margin。如下:

width:内容的宽度。CSS中 width 指的是内容的宽度,而不是盒子的宽度。盒子的宽度=内容宽度+padding+border

height:内容的高度。CSS中 height 指的是内容的高度,而不是盒子的高度。盒子的高度=内容高度+padding+border

padding:内边距。

border:边框。

margin:外边距。

元素宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>        div {
        width: 200px;
        height: 200px;
        background-color: gray;
    }    </style>
</head>
<body>
<div>我是一只小小鸟</div>
</body>
</html>

边框

属性 说明 示例

border-top-color 上边框颜色

border-top-color:#369;

border-right-color 右边框颜色

border-right-color:#369;

border-bottom-color 下边框颜色

border-bottom-color:#fae45b;

border-left-color 左边框颜色

border-left-color:#efcd56;

border-color 四个边框为同一颜色

border-color:#eeff34;

上、下边框颜色:#369

左、右边框颜色:#000

border-color:#369 #000;

上边框颜色:#369

左、右边框颜色:#000

下边框颜色:#f00

border-color:#369 #000 #f00;

上、右、下、左边框颜色:

#369、#000、#f00、#00f

border-color:#369 #000 #f00 #00f;

边框粗细

border-width:像素值

        order-top-width:5px;
        border-right-width:10px;
        border-bottom-width:8px;
        border-left-width:22px;
        border-width:5px ;
        border-width:20px 2px;
        border-width:5px 1px 6px;
        border-width:1px 3px 5px 2px;

边框样式

none
hidden
dotted
dashed
solid
double

        border-top-style:solid;
        border-right-style:solid;
        border-bottom-style:solid;
        border-left-style:solid;
        border-style:solid ;
        border-style:solid dotted;
        border-style:solid dotted dashed;
        border-style:solid dotted dashed double;

border简写

同时设置边框的颜色、粗细和样式

       border-bottom: 9px #F00 dashed ;
        border: 9px #F00 dashed ;

外边距

  margin-top
    margin-right
    margin-bottom
    margin-left
    margin
          margin-top: 1px 
            margin-right : 2 px 
            margin-bottom : 2 px 
            margin-left : 1 px 
            margin : 3 px 5 px 7 px 4 px;
            margin: 3px 5px;
            margin: 3px 5px 7px;
            margin: 8px;


外边距的妙用

网页居中对齐
前提,居中对齐的网页元素必须设定宽度。

margin:0px  auto;

内边距

padding

    padding-left
			
    padding-right
			
    padding-top
			
    padding-bottom
			
    padding
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;

盒子型模的尺寸

盒子模型总尺寸=border-width+padding+内容宽度

box-sizing

box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度

box-sizing: content-box

width = content width;

height = content height

box-sizing: border-box

width = border + padding + content width

heigth = border + padding + content heigth

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

<style>
div {
  width: 160px;
  height: 80px;
  padding: 20px;
 border: 8px solid orange;
  background: pink;
}

 /**元素的总宽度 = 160 + 20*2 + 8*2; 总高度 = 80 + 20*2 + 8*2 ; */ 
.content-box { 
  box-sizing: content-box; 
}

 /** 元素的总宽度 = 160; 总高度 = 80px; */  
.border-box { 
  box-sizing: border-box;
}
</style>


content box:

border box:

总结一下:

1.对于给定width和height的元素,设置box-sizing属性会影响盒子content width和 content height。

2.浏览器默认使用标准盒子模型,即box-sizing: content-box, 就是我们所写的宽度和高度就是对content 进行设置的。

3.在一些响应式布局中,我们修改了浏览器计算元素宽度、高度的方式,认为元素的宽度和高度是包括内边距padding和边框border

元素默认样式

很多标签都有自己的默认样式

我们在chrome浏览器中运行时,可以通过开发者工具(快捷键Ctrl+Shift+I)来一个个审查元素,来看看它们的默认样式

body标签的margin为8px

p标签的上下外边距为16px

h1标签的上下外边距为21.440px

ul标签的上下外边距也为16px,左内边距也为40px

重置默认样式

为了兼容性,凡是浏览默认的样式,都不要使用。
重置默认样式 (css reset)

/*默认样式重置(css reset)*/
body,p,h1,h2,h3,h4,h5,h6,dl,dd{
    margin: 0;
    font-size: 12px; /* 中文字体大小的最小值 */
    /* font-family: xx; 也可以设置字体 */
}
ol,ul {
    list-style: none; /* 去除列表样式 */
    padding: 0;
    margin: 0;
}

a {
    color: #464646;
    text-decoration: none;
}

a:hover {
    color: #f60;
    text-decoration: underline;
}

取色器工具

用来拾取演示,和测量长度的轻量级工具。
双击执行

弹出取色器,点击按钮

测量宽高

选择屏幕标尺

测量

拾取颜色

选择屏幕取色器

随意选取颜色

练习 有路网右侧黑板报

我们书写css的步骤应该按照由外及内,由上至下,由左到右的顺序。

black-board.css

.black-board{
  width: 220px;
  background-color: #f9f9f9;
}
.book-con{
  padding: 10px;
  border:1px solid #eaeaea
}
.black-board h2{
  font-size: 16px;
}

.black-board ul{
  padding-top: 14px;
  padding-left: 20px;
}

.black-board li{
  line-height: 22px;
}

youlu-blackboard.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="black-board.css">
</head>
<body>
  <div class="black-board">
    <div class="book-con">
      <h2>黑板报</h2>
      <ul>
        <li><a href="#">2020秋季延迟发货开启</a></li>
        <li><a href="#">分享领佣金</a></li>
        <li><a href="#">助力2020开学季!包邮政策再</a></li>
        <li><a href="#">邀请有礼</a></li>
      </ul>
    </div>
    <div class="book-con">
      <h2>购物指南</h2>
      <ul>
        <li><a href="#">支付宝担保交易,安全快捷</a></li>
        <li><a href="#">保证24小时之内发货</a></li>
        <li><a href="#">赠送积分,积分可用于支付</a></li>
        <li><a href="#">收货后7天内可以无理由退货</a></li>
        <li><a href="#">提供电子商务小包、EMS、快递</a></li>
        <li><a href="#">配送造成的所有损失由我们承担</a></li>
        <li><a href="#">提供免费短信提醒服务</a></li>
      </ul>
    </div>
    <div class="book-ad-con">
      <img src="img/zhinan.jpg" alt="">
    </div>
  </div>
</body>
</html>

元素分类

行级(内联)元素

块级元素

内联块元素

行级元素

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命令

练习 有路网左侧图书分类

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导航

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>

练习 有路网顶部导航

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>


背景重复方式

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>


背景定位

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>

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

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/douyh/article/details/107672765

智能推荐

python导出git每天提交记录_repo.iter_commits python 获取一天内的提交记录-程序员宅基地

文章浏览阅读789次。欢迎各位来我的博客看看前言:和前面的文章是一样的,程序员是最懒的人之前写了一个爬虫导出每天的禅道bug,现在写的这个是导出每天git的提交记录,因为懒还是很简单准备工作python3git首先需要将git添加到环境变量path中然后你需要了解git的命令,用到了下面的这些选项然后看下代码就行了:# -*- coding: utf-8 -*-import osimport datetimefrom easyxlsx import SimpleWriterd_repo.iter_commits python 获取一天内的提交记录

国科大学习资料--数据挖掘(刘莹)-期末考试试卷2-程序员宅基地

文章浏览阅读449次。国科大学习资料–数据挖掘(刘莹)-期末考试试卷2国科大学习资料–数据挖掘(刘莹)-期末考试试卷2国科大学习资料–数据挖掘(刘莹)-期末考试试卷2====================================================================================================================================...

Java Exception_asuncheckedexception-程序员宅基地

文章浏览阅读501次,点赞2次,收藏2次。Java Exception Types of ExceptionThere are mainly two types of exceptions: checked and unchecked where error is considered as unchecked exception._asuncheckedexception

hdu1251统计难题(trie树)_只有一组输入数据 输入包含若干个小写单词,每行一个单词并且按照字典序排序。最多-程序员宅基地

文章浏览阅读118次。http://acm.hdu.edu.cn/showproblem.php?pid=1251思路:trie树,通过数组模拟,我觉得代码会很好理解#include<bits/stdc++.h>#define INF 0x3f3f3f3f#define ll long long#define mem(ar,num) memset(ar,num,sizeof(ar))#de..._只有一组输入数据 输入包含若干个小写单词,每行一个单词并且按照字典序排序。最多

UE4用蓝图在游戏内截图功能的多种方法_ue4截图保存路径怎么更改-程序员宅基地

文章浏览阅读7k次,点赞7次,收藏32次。一、简单的截全屏如,按下1键后截取当前的屏幕内容如图所示首先,右键空白的地方,输入exe后会出现一个默认选中的节点选中后,在里面输入Shot这样就可以截取当前的屏幕内容(不包括UI),如下图所示截图为PNG格式,保存在默认目录项目\Saved\Screenshots\Windows里面如果要截取更高分辨率的截图,可以输入HighResShot 1来进行更高分辨率的截图,不要忘记空格,后面的数字代表多少倍当前的分辨率,1是当前,2是当前的2倍,但数字越大,截图的_ue4截图保存路径怎么更改

2021-08-28 力扣 - 整数翻转 - 简单_2021max旋转整数-程序员宅基地

文章浏览阅读98次。整数翻转 - 简单题目给你一个 32 位的有符号整数 x ,返回将 x 中的数字部分反转后的结果。如果反转后整数超过 32 位的有符号整数的范围 [−231, 231 − 1] ,就返回 0。假设环境不允许存储 64 位整数(有符号或无符号)。示例:输入:x = 123输出:321输入:x = -123输出:-321输入:x = 120输出:21输入:x = 0输出:0提示: - 231(-2147483648) <= x <= 231 - 1(2_2021max旋转整数

随便推点

oracle的partition,ORACLE PARTITION简介-程序员宅基地

文章浏览阅读2.5k次。一、Oracle分区简介ORACLE的分区是一种处理超大型表、索引等的技术。分区是一种“分而治之”的技术,通过将大表和索引分成可以管理的小块,从而避免了对每个表作为一个大的、单独的对象进行管理,为大量数据提供了可伸缩的性能。分区通过将操作分配给更小的存储单元,减少了需要进行管理操作的时间,并通过增强的并行处理提高了性能,通过屏蔽故障数据的分区,还增加了可用性。二、Oracle分区优缺点优点:增强可..._oracle partition

【Linux初学】超实用的Linux简介及系统常用的命令总结!(上)_林纳斯本纳-程序员宅基地

文章浏览阅读243次。1.Linux系统简介 Linux,全称GNU/Linux,是一套免费使用和自由传播的类Unix操作系统,其内核由林纳斯·本纳迪克特·托瓦兹于1991年第一次释出,它主要受到Minix和Unix思想的启发,是一个基于POSIX和Unix的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的Unix工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。Linux有上百种不同的发行版,如基于社区开发..._林纳斯本纳

179、基于51单片机串口助手发送 单片机接收数码管简单显示设计_串口接收程序设计。在单片机led数码管上显示pc机用串口调试助手(baud 2400、数据-程序员宅基地

文章浏览阅读299次。毕设帮助、开题指导、技术解答(有偿)见文末。关于这种嵌入式的领域,其中可以对不同类型的微处理器进行选择,比如说单片机于FPGA,以及DSP与ARM等,关于这四种类型的处理器当中,单片机的具体价格是最低的,且性能较为适中,适合在此类场合当中的应用。下面针对部分比较普遍的单片机类型进行相应的说明:方案一:51系列单片机。_串口接收程序设计。在单片机led数码管上显示pc机用串口调试助手(baud 2400、数据

神经网络压缩(1):Deep Compression_神经网络0压缩-程序员宅基地

文章浏览阅读3.5k次,点赞2次,收藏9次。本次介绍的方法为“深度压缩”,文章来自2016ICLR最佳论文 《Deep Compression: Compression Deep Neural Networks With Pruning, Trained Quantization And Huffman Coding_神经网络0压缩

ztree+java后台取数据(包括异步)生成树状图_若依ztree数据转化为树形-程序员宅基地

文章浏览阅读5.7k次。转载:http://blog.csdn.net/Eric_ChenXiao/article/details/50085883Java小白初用ztree: ztree的官网上demo已经很详细,最近项目有用到树桩结构,自己就选择了ztree,下面从后台取数据生成树状结构的源码,官网上用到的PHP. 1.项目jar包: 2.实体类ZtreeNode.java,生成demo中的_若依ztree数据转化为树形

Oracle监控之数据库其他状况(六)-程序员宅基地

文章浏览阅读117次。检查当前crontab 任务是否正常 检查oracle JOB 是否有失败 监控数据量的增长情况 检查失效的索引 检查不起作用的约束 ..._已经在job中删除,但dba_jobs_running还存在