HTML5+CSS3 前端入门教程---从 0 开始通过一个商城实例手把手教你学习 PC 端和移动端页面开�

时间: 2020-08-27来源：V2EX

前景提要

本教程案例在线演示
有路网 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; }

科技资讯:

科技学院:

科技百科:

科技书籍:

网站大全:

软件大全:

更多数据

热门排行

咨询电话（周一至周五9：00-18：00）